/* ═══════════════════════════════════════════════════════════════
   Tokens de diseño
   ═══════════════════════════════════════════════════════════════
   Única fuente de verdad para color, tipografía, espacio y
   movimiento. Lo importan tanto el sitio público (styles.css) como
   el panel (admin/admin.css): si un valor cambia aquí, cambia en los
   dos a la vez y no pueden volver a divergir.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta base ───────────────────────────────────────────────
     Azul petróleo y naranjas cálidos. El naranja es el color de
     acción; el azul sostiene fondos y superficies oscuras. */
  --teal-900: #123c4a;
  --teal-800: #1b5162;
  --teal-700: #256a80;
  --orange-600: #d9641c;
  --orange-500: #f5822b;
  --orange-400: #f89b4f;
  --coral-500: #f26739;
  --amber-400: #fcc63f;

  /* ── Color ─────────────────────────────────────────────────── */
  --bg: #ffffff;
  --panel: #f7f5f2;
  --surface: #ffffff;
  --text: #16171a;
  --text-muted: #6b6f76;
  /* Los enlaces inactivos usaban un gris tan claro que se leían como
     deshabilitados. Este da 3.6:1 y deja sitio al negro del activo. */
  --text-faint: #858a91;
  /* Bordes con más cuerpo: los anteriores (10% y 18% de alfa) se
     lavaban en pantallas de brillo alto y los campos perdían forma. */
  --border: #e2e5e9;
  --border-strong: #d4d8dd;

  /* Dos naranjas con papeles distintos: el vivo de la paleta sobre
     blanco solo da 2.6:1, así que no sirve para texto.
       · `--accent` es el vivo, para RELLENOS (botones, punto activo,
         barras).
       · `--accent-ink` es el tostado, para TEXTO e iconos sobre fondo
         claro: 5.2:1, cumple WCAG AA. */
  --accent: var(--orange-500);
  --accent-ink: #c2410c;
  --accent-hover: var(--orange-600);
  --accent-soft: rgba(245, 130, 43, 0.14);

  /* Botones con el naranja vivo de la paleta. El texto va blanco por
     decisión de diseño; queda en 2.6:1, por debajo del 4.5:1 de WCAG
     AA, y se compensa con negrita y cuerpo grande. */
  --btn-fill: var(--orange-500);
  --btn-fill-hover: var(--orange-600);
  --accent-contrast: #ffffff;

  /* Azul petróleo: navegación, superficies oscuras y datos. */
  --deep: var(--teal-800);
  --deep-soft: rgba(27, 81, 98, 0.1);

  /* Rojo con más carmín que el naranja de acción: si un error se
     pareciera al botón de guardar, no serviría de aviso. */
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.12);
  --success: var(--teal-700);

  /* Prioridades de tarea. */
  --prio-alta: var(--coral-500);
  --prio-media: #b45309;
  --prio-baja: #64748b;

  /* Colores de evento del calendario. Los nombres se guardan en la
     base de datos, así que se mantienen aunque el tono cambie. */
  --ev-teal: var(--teal-800);
  --ev-teal-ink: var(--teal-800);
  --ev-indigo: #3f6fa8;
  --ev-indigo-ink: #2f567f;
  --ev-rose: var(--coral-500);
  --ev-rose-ink: #c2410c;
  --ev-amber: var(--amber-400);
  --ev-amber-ink: #a16207;
  /* Turboshop. El ámbar quedaba a un paso del coral de los eventos de
     cliente y de la propia marca naranja del panel: a simple vista no
     se distinguían. El morado no compite con ninguno. */
  --ev-violet: #7c5cd6;
  --ev-violet-ink: #6642c4;

  /* ── Tipografía ────────────────────────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala de seis pasos. Antes había nueve tamaños sueltos con
     decimales (14.5px, 13.5px…) sin relación entre sí. */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 27px;

  /* ── Espacio ───────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── Forma ─────────────────────────────────────────────────── */
  --radius: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* ── Elevación ─────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ── Movimiento ────────────────────────────────────────────── */
  /* Antes convivían cinco duraciones distintas sin criterio. */
  --t-fast: 140ms;
  --t-base: 180ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Salida suave para paneles y superficies que entran en pantalla. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Anillo de foco ────────────────────────────────────────── */
  /* Un único token: antes el mismo bloque estaba copiado tres veces. */
  --ring: 0 0 0 3px var(--accent-soft);

  /* ── Layout ────────────────────────────────────────────────── */
  /* Punto medio entre los 400px originales, que partían el titular en
     cuatro líneas, y los 348 que quedaban estrechos. */
  --sidebar-w: 372px;
  /* Mismo lenguaje que la barra del portafolio pero más estrecha: el
     panel necesita el ancho para trabajar. */
  --rail-w: 280px;
  --case-media: 860px;
  --gap: 22px;
}

/* ═══════════════════════════════════════════════════════════════
   Modo oscuro
   ═══════════════════════════════════════════════════════════════
   Sigue la preferencia del sistema, y `data-theme` en <html> permite
   forzarlo desde la interfaz. Solo se redefine el color: forma,
   espacio y movimiento no cambian entre temas.
   ═══════════════════════════════════════════════════════════════ */

/* El bloque oscuro se declara una sola vez en `@layer` y se aplica a
   los dos selectores a la vez: antes estaba copiado literalmente y
   había que acordarse de tocar las dos copias. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    /* Fondos construidos sobre el azul petróleo, no sobre gris
       neutro: el tema oscuro sigue siendo de la misma familia. */
    --bg: #0c1a20;
    --panel: #0f2129;
    --surface: #143039;
    --text: #eef4f6;
    --text-muted: #9fb4bc;
    --text-faint: #6f8892;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* El naranja aclara un punto para separarse del fondo cálido. */
    --accent: #f89b4f;
    --accent-ink: #f89b4f;
    --accent-hover: #fcc63f;
    --accent-soft: rgba(248, 155, 79, 0.18);
    --accent-contrast: #2a1405;
    /* En oscuro el naranja es claro: la tinta encima va oscura. */
    --btn-fill: #f89b4f;
    --btn-fill-hover: #fcc63f;

    --deep: #256a80;
    --deep-soft: rgba(37, 106, 128, 0.24);

    --danger: #fb8a5c;
    --danger-soft: rgba(251, 138, 92, 0.18);
    --success: #5eccb0;

    --prio-alta: #fb8a5c;
    --prio-media: #fcc63f;
    --prio-baja: #8fa3ad;

    /* Las sombras pierden fuerza en oscuro; la separación la da el
       borde y el escalón de luminosidad de la superficie. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}

/* Mismo bloque para la elección manual, que debe ganar a la del
   sistema. Si tocas uno, toca el otro: han de ser idénticos. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0c1a20;
  --panel: #0f2129;
  --surface: #143039;
  --text: #eef4f6;
  --text-muted: #9fb4bc;
  --text-faint: #6f8892;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);

  --accent: #f89b4f;
  --accent-ink: #f89b4f;
  --accent-hover: #fcc63f;
  --accent-soft: rgba(248, 155, 79, 0.18);
  --accent-contrast: #2a1405;
  --btn-fill: #f89b4f;
  --btn-fill-hover: #fcc63f;

  --deep: #256a80;
  --deep-soft: rgba(37, 106, 128, 0.24);

  --danger: #fb8a5c;
  --danger-soft: rgba(251, 138, 92, 0.18);
  --success: #5eccb0;

  --prio-alta: #fb8a5c;
  --prio-media: #fcc63f;
  --prio-baja: #8fa3ad;

  /* En oscuro los colores de evento se aclaran para leerse sobre el
     azul profundo del fondo. */
  --ev-teal: #4a9bb5;
  --ev-teal-ink: #7cc4d8;
  --ev-indigo: #6f9fd8;
  --ev-indigo-ink: #9dbfe8;
  --ev-rose: #fb8a5c;
  --ev-rose-ink: #fca882;
  --ev-amber: #fcc63f;
  --ev-amber-ink: #fdd873;
  --ev-violet: #a78bfa;
  --ev-violet-ink: #c4b0fd;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* ── Foco visible ─────────────────────────────────────────────
   `:focus-visible` solo aparece al navegar con teclado, no al hacer
   clic. Se define una vez para todo lo interactivo. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Quien pide menos movimiento no debería recibir animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}