/* ============================================================
   RINOTRACK - SISTEMA DE TOKENS (ESTILO CLICKUP)
   Fuente única de verdad para color, tipografía, radios,
   sombras y espaciado. Soporta tema claro y oscuro.

   Esta hoja debe cargarse SIEMPRE AL FINAL para ganar la
   cascada sobre las hojas heredadas (theme.css, monday-theme.css,
   admin.css, clan-member.css, tickets.css, sidebar.css).

   La sección "ALIAS" reapunta las familias de variables antiguas
   hacia la paleta nueva, de modo que el CSS existente adopta el
   aspecto ClickUp sin necesidad de editarlo.
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETA BASE - TEMA CLARO
   ------------------------------------------------------------ */
:root {
    /* Acento
       Azul de marca. El morado anterior daba 4.15:1 con texto blanco encima y
       no llegaba a AA en el botón primario; este azul da 5.17:1 tanto de
       relleno como de texto sobre la tarjeta. */
    --cu-accent: #2563eb;
    --cu-accent-hover: #1d4ed8;
    --cu-accent-active: #1e40af;
    --cu-accent-soft: #e8f0fe;
    --cu-accent-border: #c2d7fb;
    --cu-accent-contrast: #ffffff;

    /* Superficies
       La tarjeta se mantiene en blanco puro y el fondo de página baja de tono:
       así la tarjeta resalta sin tener que tocar los fondos #fff que las vistas
       traen escritos a mano. */
    --cu-bg: #eceff3;
    --cu-surface: #ffffff;
    --cu-surface-2: #f4f6f9;
    --cu-surface-3: #e3e7ec;
    --cu-surface-hover: #eaeef3;
    --cu-overlay: rgba(41, 45, 52, 0.45);

    /* Bordes
       --cu-border-strong delimita inputs y botones, así que se acerca al 3:1
       que WCAG pide para el contorno de un control. */
    --cu-border: #d4dae1;
    --cu-border-strong: #97a1ad;
    --cu-border-focus: var(--cu-accent);

    /* Texto
       --cu-text-3 daba 2.9:1 sobre blanco y reprobaba AA, pese a usarse en
       etiquetas, descripciones y textos de ayuda de toda la app. Su valor se
       fija contra --cu-surface-3, la superficie más oscura donde aparece, para
       que cumpla también ahí y no solo sobre la tarjeta blanca. */
    --cu-text: #1f242b;
    --cu-text-2: #4c5561;
    --cu-text-3: #5c646e;
    --cu-text-inverse: #ffffff;
    --cu-text-link: var(--cu-accent);

    /* Semánticos
       Estos colores se usan sobre todo como TEXTO (píldoras, alertas, iconos)
       y solo en tres botones como relleno sólido, así que se eligen legibles
       sobre blanco. Los botones también ganan: llevan texto blanco encima. */
    --cu-success: #0b7541;
    --cu-success-soft: #daf2e5;
    --cu-warning: #8d5a00;
    --cu-warning-soft: #fdeecf;
    --cu-danger: #c41f33;
    --cu-danger-soft: #fce1e5;
    --cu-info: #0c66b0;
    --cu-info-soft: #dbebfc;
    --cu-neutral: #5c646e;
    --cu-neutral-soft: #e3e7ec;

    /* Acentos decorativos (prioridades, etiquetas, gráficas)
       --cu-orange alimenta la prioridad "alta", que en tickets se pinta como
       texto sobre un fondo claro, así que sigue la misma regla que el resto. */
    --cu-pink: #ff54a6;
    --cu-orange: #c0510a;
    --cu-teal: #0ab5a7;
    --cu-indigo: #1e40af;

    /* Radios */
    --cu-radius-xs: 4px;
    --cu-radius-sm: 6px;
    --cu-radius: 8px;
    --cu-radius-md: 10px;
    --cu-radius-lg: 12px;
    --cu-radius-xl: 16px;
    --cu-radius-pill: 999px;

    /* Sombras (sutiles, estilo ClickUp) */
    --cu-shadow-xs: 0 1px 2px rgba(17, 20, 24, 0.05);
    --cu-shadow-sm: 0 1px 3px rgba(17, 20, 24, 0.08);
    --cu-shadow: 0 2px 8px rgba(17, 20, 24, 0.08);
    --cu-shadow-md: 0 4px 12px rgba(17, 20, 24, 0.1);
    --cu-shadow-lg: 0 8px 24px rgba(17, 20, 24, 0.12);
    --cu-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);

    /* Espaciado */
    --cu-space-1: 4px;
    --cu-space-2: 8px;
    --cu-space-3: 12px;
    --cu-space-4: 16px;
    --cu-space-5: 20px;
    --cu-space-6: 24px;
    --cu-space-8: 32px;
    --cu-space-10: 40px;

    /* Tipografía */
    --cu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cu-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    --cu-fs-xs: 11px;
    --cu-fs-sm: 12px;
    --cu-fs-base: 13px;
    --cu-fs-md: 14px;
    --cu-fs-lg: 16px;
    --cu-fs-xl: 20px;
    --cu-fs-2xl: 24px;
    --cu-fw-normal: 400;
    --cu-fw-medium: 500;
    --cu-fw-semibold: 600;
    --cu-fw-bold: 700;

    /* Layout */
    --cu-sidebar-width: 248px;
    --cu-sidebar-collapsed: 64px;
    --cu-header-height: 56px;

    /* Transiciones */
    --cu-transition: 0.15s ease;
    --cu-transition-slow: 0.25s ease;
}

/* ------------------------------------------------------------
   2. PALETA BASE - TEMA OSCURO
   Se activa con data-theme="dark" en <html>.
   La especificidad de [data-theme] supera a :root, por lo que
   estos valores mandan sin necesidad de !important.
   ------------------------------------------------------------ */
[data-theme="dark"] {
    --cu-accent: #4d8df6;
    --cu-accent-hover: #6ba5f9;
    --cu-accent-active: #8bb8fb;
    --cu-accent-soft: rgba(77, 141, 246, 0.16);
    --cu-accent-border: rgba(77, 141, 246, 0.38);
    --cu-accent-contrast: #ffffff;

    --cu-bg: #16181d;
    --cu-surface: #1e2126;
    --cu-surface-2: #22262c;
    --cu-surface-3: #2a2f36;
    --cu-surface-hover: #2a2f36;
    --cu-overlay: rgba(0, 0, 0, 0.6);

    --cu-border: #32373f;
    --cu-border-strong: #414851;

    --cu-text: #e7e9ec;
    --cu-text-2: #a2aab5;
    --cu-text-3: #7a828d;
    --cu-text-inverse: #16181d;

    --cu-success: #35d67d;
    --cu-success-soft: rgba(46, 205, 111, 0.16);
    --cu-warning: #ffb52e;
    --cu-warning-soft: rgba(255, 168, 0, 0.16);
    --cu-danger: #f0616f;
    --cu-danger-soft: rgba(236, 71, 88, 0.16);
    --cu-info: #4fb0fa;
    --cu-info-soft: rgba(46, 161, 248, 0.16);
    --cu-neutral: #7a828d;
    --cu-neutral-soft: rgba(122, 130, 141, 0.16);

    --cu-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --cu-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --cu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --cu-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --cu-shadow-focus: 0 0 0 3px rgba(77, 141, 246, 0.3);
}

/* ------------------------------------------------------------
   3. ALIAS DE COMPATIBILIDAD
   Reapuntan las variables heredadas hacia la paleta nueva.

   Se usa html[data-theme] en lugar de :root a propósito: varias
   vistas cargan monday-theme.css DENTRO del <body>, es decir
   después de esta hoja. Con la especificidad de :root (0,0,1) esas
   hojas ganarían por orden; html[data-theme] (0,1,1) gana siempre,
   sin recurrir a !important. El atributo lo fija el script FOUC.

   Los alias apuntan a var(--cu-*), así que cambian solos al
   alternar entre tema claro y oscuro.
   ------------------------------------------------------------ */
html[data-theme] {
    /* --- theme.css (sistema global) --- */
    --primary-color: var(--cu-accent);
    --primary-light: var(--cu-accent-hover);
    --primary-dark: var(--cu-accent-active);
    --primary-gradient: linear-gradient(135deg, var(--cu-accent) 0%, var(--cu-indigo) 100%);
    --secondary-color: var(--cu-indigo);
    --secondary-light: var(--cu-accent-hover);
    --secondary-dark: var(--cu-accent-active);

    --bg-primary: var(--cu-surface);
    --bg-secondary: var(--cu-surface);
    --bg-tertiary: var(--cu-surface-3);
    --bg-accent: var(--cu-surface-3);
    --bg-dark: var(--cu-text);
    --bg-glass: var(--cu-surface);
    --bg-glass-dark: var(--cu-surface-2);

    --text-primary: var(--cu-text);
    --text-secondary: var(--cu-text-2);
    --text-muted: var(--cu-text-3);
    --text-light: var(--cu-text-3);
    --text-white: var(--cu-text-inverse);

    --border-color: var(--cu-border);

    --success: var(--cu-success);
    --warning: var(--cu-warning);
    --error: var(--cu-danger);
    --danger: var(--cu-danger);
    --info: var(--cu-info);

    --shadow-sm: var(--cu-shadow-xs);
    --shadow-md: var(--cu-shadow-sm);
    --shadow-lg: var(--cu-shadow-md);
    --shadow-xl: var(--cu-shadow-lg);
    --shadow-glow: var(--cu-shadow-focus);

    --radius-sm: var(--cu-radius-sm);
    --radius-md: var(--cu-radius);
    --radius-lg: var(--cu-radius-lg);
    --radius-xl: var(--cu-radius-xl);
    --radius-full: var(--cu-radius-pill);

    --font-family: var(--cu-font);
    --font-mono: var(--cu-font-mono);

    --glass-bg: var(--cu-surface);
    --glass-border: var(--cu-border);
    --glass-backdrop: none;

    --translucent-blue: var(--cu-accent-soft);
    --translucent-dark-blue: var(--cu-accent-soft);
    --accent-blue: var(--cu-accent);
    --accent-light-blue: var(--cu-accent-hover);

    /* --- monday-theme.css --- */
    --monday-primary: var(--cu-accent);
    --monday-primary-hover: var(--cu-accent-hover);
    --monday-secondary: var(--cu-accent-soft);
    --monday-text-color: var(--cu-text);
    --monday-text-secondary: var(--cu-text-2);
    --monday-bg-color: var(--cu-bg);
    --monday-surface: var(--cu-surface);
    --monday-border-color: var(--cu-border);

    --status-done: var(--cu-success);
    --status-done-hover: var(--cu-success);
    --status-working: var(--cu-warning);
    --status-working-hover: var(--cu-warning);
    --status-stuck: var(--cu-danger);
    --status-stuck-hover: var(--cu-danger);
    --status-empty: var(--cu-neutral);

    --header-height: var(--cu-header-height);
    --border-radius: var(--cu-radius);
    --box-shadow: var(--cu-shadow);

    /* --- sidebar.css (unifica el conflicto 240px vs 260px) --- */
    --sidebar-width: var(--cu-sidebar-width);
    --sidebar-collapsed-width: var(--cu-sidebar-collapsed);
    --sidebar-bg: var(--cu-surface);
    --sidebar-border: var(--cu-border);
    --sidebar-text: var(--cu-text-2);
    --sidebar-text-hover: var(--cu-text);
    --sidebar-active: var(--cu-accent);
    --sidebar-active-bg: var(--cu-accent-soft);
    --sidebar-transition: all var(--cu-transition);

    /* --- admin.css --- */
    --admin-primary: var(--cu-accent);
    --admin-primary-dark: var(--cu-accent-active);
    --admin-secondary: var(--cu-indigo);
    --admin-bg-primary: var(--cu-surface);
    --admin-bg-secondary: var(--cu-bg);
    --admin-bg-tertiary: var(--cu-surface-3);
    --admin-bg-accent: var(--cu-surface-3);
    --admin-text-primary: var(--cu-text);
    --admin-text-secondary: var(--cu-text-2);
    --admin-text-muted: var(--cu-text-3);
    --admin-border: var(--cu-border);
    --admin-shadow: var(--cu-shadow-sm);
    --admin-shadow-lg: var(--cu-shadow-md);
    --admin-radius: var(--cu-radius);
    --admin-radius-lg: var(--cu-radius-lg);
    --admin-spacing: var(--cu-space-4);
    --admin-spacing-lg: var(--cu-space-6);
    --admin-spacing-xl: var(--cu-space-8);

    /* --- clan-member.css --- */
    --cm-bg: var(--cu-bg);
    --cm-surface: var(--cu-surface);
    --cm-text: var(--cu-text);
    --cm-muted: var(--cu-text-2);
    --cm-border: var(--cu-border);
    --cm-soft: var(--cu-surface-3);
    --cm-primary: var(--cu-accent);
    --cm-primary-600: var(--cu-accent-hover);
    --cm-danger: var(--cu-danger);
    --cm-success: var(--cu-success);
    --cm-warning: var(--cu-warning);
    --cm-info: var(--cu-info);
    --cm-radius: var(--cu-radius-lg);
    --cm-radius-sm: var(--cu-radius);
    --cm-shadow: var(--cu-shadow-sm);

    /* --- tickets.css --- */
    --ticket-primary: var(--cu-accent);
    --ticket-primary-light: var(--cu-accent-hover);
    --ticket-primary-dark: var(--cu-accent-active);
    --ticket-success: var(--cu-success);
    --ticket-warning: var(--cu-warning);
    --ticket-danger: var(--cu-danger);
    --ticket-info: var(--cu-info);
    --ticket-bg: var(--cu-bg);
    --ticket-card-bg: var(--cu-surface);
    --ticket-border: var(--cu-border);
    --ticket-text: var(--cu-text);
    --ticket-text-muted: var(--cu-text-2);
    --ticket-shadow: var(--cu-shadow-xs);
    --ticket-shadow-lg: var(--cu-shadow-md);

    --priority-baja: var(--cu-success);
    --priority-media: var(--cu-warning);
    --priority-alta: var(--cu-orange);
    --priority-urgente: var(--cu-danger);

    --status-abierto: var(--cu-info);
    --status-en_progreso: var(--cu-accent);
    --status-pendiente: var(--cu-warning);
    --status-resuelto: var(--cu-success);
    --status-cerrado: var(--cu-neutral);

    /* --- polaris-chat.css --- */
    --polaris-primary: var(--cu-accent);
    --polaris-primary-dark: var(--cu-accent-active);
    --polaris-primary-light: var(--cu-accent-soft);
    --polaris-bg: var(--cu-surface);
    --polaris-bg-light: var(--cu-surface-3);
    --polaris-text: var(--cu-text);
    --polaris-text-muted: var(--cu-text-2);
    --polaris-border: var(--cu-border);
    --polaris-success: var(--cu-success);
    --polaris-star: var(--cu-warning);
}

/* ------------------------------------------------------------
   4. NEUTRALIZAR EL TEMA OSCURO HEREDADO
   theme.css declara [data-theme="dark"] con fondos BLANCOS,
   lo que rompía el modo oscuro. Al cargarse después, este
   bloque restablece los valores correctos.
   ------------------------------------------------------------ */
[data-theme="dark"] .dropdown-menu {
    background: var(--cu-surface-2);
    border-color: var(--cu-border);
}

[data-theme="dark"] .dropdown-link {
    color: var(--cu-text) !important;
}

[data-theme="dark"] .dropdown-link:hover {
    background: var(--cu-accent) !important;
    color: var(--cu-text-inverse) !important;
}