/* ==========================================================================
   DATACS UI — TOKENS.CSS  |  Capa 1
   Única fuente de verdad de valores. No contiene selectores de elementos ni
   clases: sólo custom properties. Ningún otro archivo debe declarar colores,
   tamaños o tiempos literales.
   ========================================================================== */

:root {
    /* ======================================================================
       PALETA PRIMITIVA
       ====================================================================== */
    /* Primary — Azul marino */
    --color-primary-900: #050D1F;
    --color-primary-800: #0A1A38;
    --color-primary-700: #0D1B3E;
    --color-primary-600: #122252;
    --color-primary-500: #1A3A6B;
    --color-primary-400: #2E5499;
    --color-primary-300: #5B82C4;
    --color-primary-200: #A8C0E5;
    --color-primary-100: #D4E0F2;
    --color-primary-50: #EBF0F9;
    /* Secondary — Azul acero / cyan */
    --color-secondary-900: #031018;
    --color-secondary-800: #062030;
    --color-secondary-700: #0A3348;
    --color-secondary-600: #0D4A6B;
    --color-secondary-500: #1470A8;
    --color-secondary-400: #2B90CC;
    --color-secondary-300: #64B5E0;
    --color-secondary-200: #A8D6F0;
    --color-secondary-100: #D4EBF8;
    --color-secondary-50: #EAF5FC;
    /* Tertiary — Amarillo / dorado */
    --color-tertiary-900: #2B2000;
    --color-tertiary-800: #4A3800;
    --color-tertiary-700: #6B5200;
    --color-tertiary-600: #9C7A00;
    --color-tertiary-500: #F5C518;
    --color-tertiary-400: #F7D04A;
    --color-tertiary-300: #FADE7E;
    --color-tertiary-200: #FCEDB2;
    --color-tertiary-100: #FEF6D8;
    --color-tertiary-50: #FFFBEE;
    /* Neutral — Gris */
    --color-neutral-900: #1A1A1A;
    --color-neutral-800: #2C2C2C;
    --color-neutral-700: #444444;
    --color-neutral-600: #5C5C5C;
    --color-neutral-500: #79767D;
    --color-neutral-400: #9A9A9A;
    --color-neutral-300: #B8B8B8;
    --color-neutral-200: #D6D6D6;
    --color-neutral-100: #EEEEEE;
    --color-neutral-50: #F7F7F7;
    --color-white: #FFFFFF;
    /* Estado */
    --color-success-500: #2E7D32;
    --color-success-600: #256D29;
    --color-success-100: #E8F5E9;
    --color-warning-500: #E65100;
    --color-warning-100: #FFF3E0;
    --color-danger-500: #C62828;
    --color-danger-600: #B71C1C;
    --color-danger-100: #FFEBEE;
    --color-info-500: #1565C0;
    --color-info-100: #E3F2FD;
    /* Estados de ticket */
    --status-pending: #D3B14B;
    --status-pending-100: color-mix(in srgb, var(--status-pending) 15%, white);
    --status-pending-500: color-mix(in srgb, var(--status-pending) 60%, white);
    --status-pending-700: color-mix(in srgb, var(--status-pending) 85%, black);
    --status-progress: #534AB7;
    --status-progress-100: color-mix(in srgb, var(--status-progress) 15%, white);
    --status-progress-500: color-mix(in srgb, var(--status-progress) 60%, white);
    --status-progress-700: color-mix(in srgb, var(--status-progress) 85%, black);
    --status-returned: #D85A30;
    --status-returned-100: color-mix(in srgb, var(--status-returned) 15%, white);
    --status-returned-500: color-mix(in srgb, var(--status-returned) 60%, white);
    --status-returned-700: color-mix(in srgb, var(--status-returned) 85%, black);
    --status-closed: #3B6D11;
    --status-closed-100: color-mix(in srgb, var(--status-closed) 15%, white);
    --status-closed-500: color-mix(in srgb, var(--status-closed) 60%, white);
    --status-closed-700: color-mix(in srgb, var(--status-closed) 85%, black);
    /* ======================================================================
       TOKENS SEMÁNTICOS
       ====================================================================== */
    /* Superficies */
    --surface-page: #F0F2F7;
    --surface-card: var(--color-white);
    --surface-subtle: var(--color-primary-50);
    --surface-muted: var(--color-neutral-50);
    --surface-overlay: rgba(13, 27, 62, 0.08);
    --surface-scrim: color-mix(in srgb, var(--color-primary-900) 45%, transparent);
    /* Texto */
    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-muted: var(--color-neutral-400);
    --text-on-primary: var(--color-white);
    --text-on-tertiary: var(--color-tertiary-900);
    --text-link: var(--color-primary-500);
    --text-link-hover: var(--color-primary-700);
    /* Bordes */
    --border-default: var(--color-neutral-200);
    --border-subtle: var(--color-neutral-100);
    --border-strong: var(--color-neutral-300);
    --border-brand: var(--color-primary-500);
    --border-focus: var(--color-primary-400);
    /* Brand */
    --brand-primary: var(--color-primary-500);
    --brand-primary-dark: var(--color-primary-700);
    --brand-secondary: var(--color-secondary-500);
    --brand-tertiary: var(--color-tertiary-500);
    /* Superficie de marca: paneles de autenticación, cabeceras destacadas.
       Se dibuja SOBRE una imagen, por eso los tramos son semitransparentes.
       Deriva de la paleta primary: no introduce colores nuevos.
       Los extremos (0% y 100%) oscurecen para legibilidad del texto;
       el tramo central (55%) es más transparente para que la foto respire. */
    --brand-gradient: linear-gradient( 160deg, color-mix(in srgb, var(--color-primary-900) 35%, transparent) 0%, color-mix(in srgb, var(--color-primary-700) 10%, transparent) 55%, color-mix(in srgb, var(--color-primary-900) 40%, transparent) 100% );
    /* Sombra tintada de marca para el CTA principal */
    --shadow-brand: 0 4px 16px rgba(13, 27, 62, 0.35);
    --shadow-brand-hover: 0 6px 20px rgba(13, 27, 62, 0.42);
    --shadow-brand-active: 0 2px 8px rgba(13, 27, 62, 0.28);
    /* Sombra ambiental de card elevada (wrapper del login) */
    --shadow-ambient: 0 4px 28px rgba(13, 27, 62, 0.10);
    /* ======================================================================
       ESCALAS
       ====================================================================== */
    /* Tipografía */
    --font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'Roboto Mono', 'Fira Code', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0em;
    --tracking-wide: 0.04em;
    --tracking-widest: 0.08em;
    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 5rem;
    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* Grosores de borde */
    --border-width: 0.5px;
    --border-width-medium: 1px;
    --border-width-strong: 2px;
    /* Sombras */
    --shadow-none: none;
    --shadow-sm: 0 1px 3px rgba(13, 27, 62, 0.08);
    --shadow-md: 0 4px 12px rgba(13, 27, 62, 0.12);
    --shadow-lg: 0 8px 24px rgba(13, 27, 62, 0.16);
    --shadow-bar: 0 -2px 12px rgba(13, 27, 62, 0.10);
    --shadow-focus: 0 0 0 3px rgba(26, 58, 107, 0.25);
    /* Transiciones */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.25s ease;
    /* Z-index */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    /* ======================================================================
       TOKENS DE COMPONENTE
       ====================================================================== */
    /* Editor de texto enriquecido (Quill) */
    --editor-min-height: 180px;
    --editor-max-height: 320px;
    /* Layout */
    --content-max-width: 1440px;
    --app-bar-height: 56px;
    --scrollbar-width: 4px;
    /* Ancho máximo del contenido para pantallas muy grandes.
       El navbar vive fuera de .dtcs-page así que no se ve afectado. */
    --page-max-width: 1600px;
    /* Inputs */
    --input-height: 38px;
    --input-height-sm: 32px;
    --input-height-lg: 46px;
    --input-icon-offset: 40px; /* padding-left cuando hay icono a la izquierda */
    --input-padding-x: 0.625rem;
    --input-border: var(--border-width) solid var(--border-default);
    --input-border-focus: var(--border-width) solid var(--border-focus);
    --input-border-radius: var(--radius-md);
    --input-bg: var(--surface-card);
    --input-bg-disabled: var(--color-neutral-50);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    /* Chevron del select nativo. Sincronizado con --color-neutral-500 */
    --input-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2379767D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    /* Cards */
    --card-bg: var(--surface-card);
    --card-border: var(--border-width) solid var(--border-default);
    --card-border-radius: var(--radius-lg);
    --card-border-radius-accent: 0 var(--radius-lg) var(--radius-lg) 0; /* borde izquierdo de acento sin radio en esquina */
    --card-padding: var(--space-4) var(--space-5);
    --card-shadow: var(--shadow-sm);
    /* Iconos cuadrados / avatares */
    --icon-badge-size-sm: 26px;
    --icon-badge-size: 36px;
    --icon-badge-size-lg: 38px;
    --avatar-size-sm: 24px;
    --avatar-size: 36px;
    /* Botones — Primary */
    --btn-primary-bg: var(--color-primary-700);
    --btn-primary-bg-hover: var(--color-primary-800);
    --btn-primary-bg-active: var(--color-primary-900);
    --btn-primary-text: var(--color-white);
    /* Botones — Secondary */
    --btn-secondary-bg: var(--color-secondary-100);
    --btn-secondary-bg-hover: var(--color-secondary-200);
    --btn-secondary-text: var(--color-secondary-700);
    /* Botones — Inverted */
    --btn-inverted-bg: var(--color-neutral-900);
    --btn-inverted-bg-hover: var(--color-neutral-800);
    --btn-inverted-text: var(--color-white);
    /* Botones — Outlined */
    --btn-outlined-bg: transparent;
    --btn-outlined-bg-hover: var(--color-primary-50);
    --btn-outlined-border: var(--color-primary-500);
    --btn-outlined-text: var(--color-primary-700);
    /* Botones — Danger */
    --btn-danger-bg: var(--color-danger-500);
    --btn-danger-bg-hover: var(--color-danger-600);
    --btn-danger-text: var(--color-white);
    /* Botones — White */
    --btn-white-bg: var(--surface-card);
    --btn-white-bg-hover: var(--color-neutral-50);
    --btn-white-bg-active: var(--color-neutral-100);
    --btn-white-text: var(--color-primary-700);
    --btn-white-border: var(--border-default);
    /* Botones — Alturas */
    --btn-height-lg: 52px;
    /* Tags / badges */
    --tag-primary-bg: var(--color-primary-100);
    --tag-primary-text: var(--color-primary-700);
    --tag-secondary-bg: var(--color-secondary-100);
    --tag-secondary-text: var(--color-secondary-700);
    --tag-tertiary-bg: var(--color-tertiary-100);
    --tag-tertiary-text: var(--color-tertiary-700);
    --tag-neutral-bg: var(--color-neutral-100);
    --tag-neutral-text: var(--color-neutral-700);
    --tag-danger-bg: var(--color-danger-100);
    --tag-danger-text: var(--color-danger-500);
    --tag-success-bg: var(--color-success-100);
    --tag-success-text: var(--color-success-500);
    --tag-warning-bg: var(--color-warning-100);
    --tag-warning-text: var(--color-warning-500);
    --tag-info-bg: var(--color-info-100);
    --tag-info-text: var(--color-info-500);
    /* Zona de carga de archivos (dropzone) */
    --dropzone-min-height: 180px;
    --dropzone-border-width: 1.5px;
    --dropzone-bg: var(--surface-muted);
    --dropzone-bg-hover: var(--surface-subtle);
    --dropzone-border-color: var(--border-strong);
    --dropzone-border-color-hover: var(--border-focus);
}