/* ============================================================
   Buuble — base.css
   Sistema de diseño global: reset, variables y tipografía.
   Inspirado en Linear / Stripe — minimalismo premium de datos densos.
   ============================================================ */

/* ─── FUENTE PRINCIPAL: Inter (weights 400 y 500 únicamente) ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */
:root {
  /* ─── FONDOS ─── */
  --bg-page:          #F7F7F6;   /* Fondo general (gris ultra claro) */
  --bg-surface:       #FFFFFF;   /* Tarjetas, sidebar, modales, drawers */
  --bg-overlay:       #F1F0EE;   /* Fondos secundarios, hover suave en filas */
  --bg-sidebar-dark:  #0F172A;   /* Sidebar variante oscura */

  /* ─── ACENTO PRINCIPAL ─── */
  --accent:           #4F46E5;   /* Azul-violáceo eléctrico principal */
  --accent-hover:     #4338CA;   /* Hover del botón primario */
  --accent-light:     #EEF2FF;   /* Fondo de chips de acento / tags azul */
  --accent-text:      #3730A3;   /* Texto sobre --accent-light */

  /* ─── TEXTO ─── */
  --text-primary:     #111827;   /* Títulos y texto principal */
  --text-secondary:   #6B7280;   /* Textos descriptivos, labels */
  --text-tertiary:    #9CA3AF;   /* Placeholders, timestamps, metadata */
  --text-disabled:    #D1D5DB;   /* Campos deshabilitados */

  /* ─── BORDES ─── */
  --border:           #E5E7EB;   /* Borde estándar de tarjetas y separadores */
  --border-strong:    #D1D5DB;   /* Borde en hover o énfasis */
  --border-focus:     #4F46E5;   /* Borde de focus ring */

  /* ─── ESTADOS PASTEL (badges) ─── */
  --status-active-bg:    #ECFDF5; --status-active-text:    #065F46;  /* Activo / Hecho */
  --status-done-bg:      #ECFDF5; --status-done-text:      #065F46;
  --status-inprog-bg:    #EFF6FF; --status-inprog-text:    #1E40AF;  /* En progreso */
  --status-review-bg:    #FAF5FF; --status-review-text:    #6B21A8;  /* En revisión */
  --status-blocked-bg:   #FFF7ED; --status-blocked-text:   #92400E;  /* Bloqueado */
  --status-late-bg:      #FEF2F2; --status-late-text:      #991B1B;  /* Retrasado */
  --status-onleave-bg:   #F0FDF4; --status-onleave-text:   #14532D;

  /* ─── PRIORIDADES ─── */
  --priority-urgent:  #DC2626;
  --priority-high:    #EA580C;
  --priority-medium:  #D97706;
  --priority-low:     #2563EB;
  --priority-none:    #9CA3AF;

  /* ─── TIME TRACKING ─── */
  --time-work:        #7F77DD;
  --time-break:       #5DCAA5;
  --time-overtime:    #EF9F27;
  --time-late:        #E24B4A;

  /* ─── EVENTOS CALENDARIO ─── */
  --cal-lavender:     #EDE9FE;
  --cal-celeste:      #DBEAFE;
  --cal-peach:        #FFEDD5;
  --cal-green:        #DCFCE7;

  /* ─── HEATMAP / ACTIVIDAD ─── */
  --heat-0:  #F3F4F6;
  --heat-1:  #C6F6D5;
  --heat-2:  #86EFAC;
  --heat-3:  #4ADE80;
  --heat-4:  #16A34A;

  /* ─── FEEDBACK ─── */
  --success:  #10B981;  --success-bg: #ECFDF5;
  --warning:  #F59E0B;  --warning-bg: #FFFBEB;
  --error:    #EF4444;  --error-bg:   #FEF2F2;
  --info:     #3B82F6;  --info-bg:    #EFF6FF;

  /* ─── TIPOGRAFÍA ─── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;

  --fw-regular: 400;
  --fw-medium:  500;

  --lh-tight:  1.3;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* ─── ESCALA DE ESPACIADO (múltiplos de 8px) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --card-padding:    16px 20px;
  --card-padding-lg: 20px 24px;
  --grid-gap:        16px;

  /* ─── RADIOS DE BORDE ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ─── ELEVACIÓN (máximo permitido 1px de sombra real) ─── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

  /* ─── DIMENSIONES DE LAYOUT ─── */
  --sidebar-width:           220px;
  --sidebar-width-collapsed: 56px;
  --topbar-height:           56px;
}

/* ============================================================
   2. RESET
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

p {
  line-height: var(--lh-base);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}

a:hover {
  color: var(--accent-hover);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ─── SCROLLBAR FINO Y DISCRETO ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
  background-clip: content-box;
}

/* ─── SELECCIÓN DE TEXTO ─── */
::selection {
  background: var(--accent-light);
  color: var(--accent-text);
}

/* ─── UTILIDADES BÁSICAS ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-mono      { font-family: var(--font-mono); }