/* Arus2 — autoridad de tokens, UX-01A / C04.
   Referencia: prototipo v3. Oscuro: variante neutra solicitada por el usuario.
   1. Alias históricos: mismos valores efectivos de UX-00; no migran pantallas.
   2. Estándar nuevo: .arus-ui opt-in. No activar sobre MainLayout en este bloque.
   3. data-ui-theme sólo previsualiza un tema dentro de una superficie local.
   El tema real continúa entrando por data-theme en html; su persistencia por
   cuenta se implementará en UX-01B, no mediante CSS ni claves de la galería. */

/* Compatibilidad con los consumidores actuales. */
:root {
    --color-fondo: #f7f9fc;
    --color-superficie: #ffffff;
    --color-texto: #1a1f36;
    --color-texto-secundario: #4f566b;
    --color-borde: #e3e8ee;
    --color-acento: #006bb7;
    --color-acento-hover: #0a2540;
    --color-danger: #df1b41;
    --color-danger-hover: #b21432;
    --input-bg: #f0f3f8;
    --input-focus-ring: rgba(99, 91, 255, 0.2);
    --table-header-bg: #f7f9fc;
    --table-row-hover: #fcfcfd;
}

[data-theme="dark"] {
    --color-fondo: #0a0a0a;
    --color-superficie: #1a1a1a;
    --color-texto: #ffffff;
    --color-texto-secundario: #a0a0a0;
    --color-borde: #333333;
    --color-acento: #006bb7;
    --color-acento-hover: #9b45e6;
    --color-danger: #ff4d4d;
    --color-danger-hover: #ff1a1a;
    --input-bg: #2d2d2d;
    --input-focus-ring: rgba(138, 43, 226, 0.3);
    --table-header-bg: #222222;
    --table-row-hover: #2a2a2a;
}

/* Escalas independientes del tema. Rem conserva el zoom y el tamaño raíz. */
.arus-ui {
    --arus-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --arus-font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
    --arus-text-xs: .75rem;
    --arus-text-sm: .8125rem;
    --arus-text-base: .875rem;
    --arus-text-lg: 1rem;
    --arus-title-page: 1.625rem;
    --arus-title-section: 1rem;
    --arus-line-height: 1.5;
    --arus-control-text: .8125rem;
    --arus-control-height: 2.4375rem;
    --arus-control-padding-y: .5rem;
    --arus-control-padding-x: .6875rem;
    --arus-touch-target: 2.75rem;
    --arus-space-1: .25rem;
    --arus-space-2: .5rem;
    --arus-space-3: .75rem;
    --arus-space-4: 1rem;
    --arus-space-5: 1.25rem;
    --arus-space-6: 1.5rem;
    --arus-space-8: 2rem;
    --arus-space-10: 2.5rem;
    --arus-space-12: 3rem;
    --arus-radius-sm: .375rem;
    --arus-radius-control: .375rem;
    --arus-radius-button: .4375rem;
    --arus-radius-panel: .6875rem;
    --arus-modal-width: 44.375rem;
    --arus-modal-radius: .8125rem;
    --arus-radius-pill: 999px;
    --arus-content-width: 76rem;
    --arus-duration-fast: 150ms;
    --arus-duration-normal: 180ms;
    --arus-ease: ease-out;
    --arus-layer-sticky: 100;
    --arus-layer-dropdown: 1000;
    --arus-layer-backdrop: 1040;
    --arus-layer-modal: 1050;
    --arus-layer-toast: 1100;
    /* Acento de la sucursal: MainLayout declara --arus-branch-* (ArusAccentPalette)
       y cada .arus-ui, también anidado, lo toma. Sin sucursal se usa el respaldo.
       No cambiar sólo el fondo dejando el contraste anterior. */
    --arus-accent: var(--arus-branch-accent, #006bb7);
    --arus-accent-rgb: var(--arus-branch-accent-rgb, 0, 107, 183);
    --arus-on-accent: var(--arus-branch-on-accent, #ffffff);
    --arus-accent-ink-light: var(--arus-branch-accent-ink-light, #006bb7);
    --arus-accent-ink-dark: var(--arus-branch-accent-ink-dark, #69a8d5);
}

/* Claro: medidas y colores del prototipo v3. La variante explícita permite
   comparar claro dentro de una sesión oscura sin modificar la cuenta. */
.arus-ui {
    color-scheme: light;
    --arus-canvas: #f7f8fb;
    --arus-surface: #ffffff;
    --arus-surface-subtle: #f8f9fc;
    --arus-surface-hover: #edf0f6;
    --arus-ink: #243047;
    --arus-muted: #657086;
    --arus-subtle: #7a8496;
    --arus-placeholder: #98a0b0;
    --arus-line: #e3e7ee;
    --arus-control-line: #cfd6e2;
    --arus-control-hover-line: #b9c3d3;
    --arus-control-bg: #ffffff;
    --arus-button-line: #d9dee8;
    --arus-button-hover-line: #c7cdda;
    --arus-button-hover-bg: #f7f8fc;
    --arus-disabled-bg: #edf0f5;
    --arus-disabled-ink: #657086;
    --arus-readonly-bg: #f5f6fa;
    --arus-accent-ink: var(--arus-accent-ink-light);
    --arus-focus: var(--arus-accent-ink-light);
    --arus-focus-halo: rgba(var(--arus-accent-rgb), .12);
    --arus-accent-soft: rgba(var(--arus-accent-rgb), .1);
    --arus-danger: #b4233b;
    --arus-danger-soft: #fff0f2;
    --arus-success: #14744c;
    --arus-success-soft: #edf9f2;
    --arus-warning: #805500;
    --arus-warning-soft: #fff7e1;
    --arus-info: #005d93;
    --arus-info-soft: #edf6ff;
    --arus-shadow-panel: 0 2px 6px #26334d05, 0 0 0 1px #26334d02;
    --arus-shadow-control: 0 1px 2px #26334d03;
    --arus-shadow-overlay: 0 25px 90px #18233730;
    --arus-skeleton-base: #e6eaf1;
    --arus-skeleton-highlight: #f4f6fa;
    --arus-header-solid: #ffffff;
    --arus-header-glass: rgba(255, 255, 255, .86);
    --arus-modal-line: #dde1ec;
    --arus-modal-footer: #fcfcfe;
    --arus-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23243047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    [data-theme="dark"] .arus-ui,
    .arus-ui[data-ui-theme="dark"] {
        color-scheme: dark;
        --arus-canvas: #101010;
        --arus-surface: #181818;
        --arus-surface-subtle: #202020;
        --arus-surface-hover: #292929;
        --arus-ink: #d9d9d9;
        --arus-muted: #a5a5a5;
        --arus-subtle: #969696;
        --arus-placeholder: #898989;
        --arus-line: #2b2b2b;
        --arus-control-line: #3b3b3b;
        --arus-control-hover-line: #515151;
        --arus-control-bg: #1c1c1c;
        --arus-button-line: #3b3b3b;
        --arus-button-hover-line: #515151;
        --arus-button-hover-bg: #282828;
        --arus-disabled-bg: #242424;
        --arus-disabled-ink: #929292;
        --arus-readonly-bg: #222222;
        --arus-accent-ink: var(--arus-accent-ink-dark);
        --arus-focus: var(--arus-accent-ink-dark);
        --arus-focus-halo: rgba(var(--arus-accent-rgb), .2);
        --arus-accent-soft: rgba(var(--arus-accent-rgb), .18);
        --arus-danger: #e99aa9;
        --arus-danger-soft: #321f24;
        --arus-success: #94cdb0;
        --arus-success-soft: #1b2a23;
        --arus-warning: #d9c08b;
        --arus-warning-soft: #302a1e;
        --arus-info: #9bbbd2;
        --arus-info-soft: #202931;
        --arus-shadow-panel: 0 2px 6px rgba(0, 0, 0, .12);
        --arus-shadow-control: 0 1px 2px rgba(0, 0, 0, .08);
        --arus-shadow-overlay: 0 25px 90px rgba(0, 0, 0, .45);
        --arus-skeleton-base: #272727;
        --arus-skeleton-highlight: #343434;
        --arus-header-solid: #181818;
        --arus-header-glass: rgba(24, 24, 24, .86);
        --arus-modal-line: #333333;
        --arus-modal-footer: #1d1d1d;
        --arus-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23a5a5a5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .arus-ui[data-ui-theme="light"] {
        color-scheme: light;
        --arus-canvas: #f7f8fb;
        --arus-surface: #ffffff;
        --arus-surface-subtle: #f8f9fc;
        --arus-surface-hover: #edf0f6;
        --arus-ink: #243047;
        --arus-muted: #657086;
        --arus-subtle: #7a8496;
        --arus-placeholder: #98a0b0;
        --arus-line: #e3e7ee;
        --arus-control-line: #cfd6e2;
        --arus-control-hover-line: #b9c3d3;
        --arus-control-bg: #ffffff;
        --arus-button-line: #d9dee8;
        --arus-button-hover-line: #c7cdda;
        --arus-button-hover-bg: #f7f8fc;
        --arus-disabled-bg: #edf0f5;
        --arus-disabled-ink: #657086;
        --arus-readonly-bg: #f5f6fa;
        --arus-accent-ink: var(--arus-accent-ink-light);
        --arus-focus: var(--arus-accent-ink-light);
        --arus-focus-halo: rgba(var(--arus-accent-rgb), .12);
        --arus-accent-soft: rgba(var(--arus-accent-rgb), .1);
        --arus-danger: #b4233b;
        --arus-danger-soft: #fff0f2;
        --arus-success: #14744c;
        --arus-success-soft: #edf9f2;
        --arus-warning: #805500;
        --arus-warning-soft: #fff7e1;
        --arus-info: #005d93;
        --arus-info-soft: #edf6ff;
        --arus-shadow-panel: 0 2px 6px #26334d05, 0 0 0 1px #26334d02;
        --arus-shadow-control: 0 1px 2px #26334d03;
        --arus-shadow-overlay: 0 25px 90px #18233730;
        --arus-skeleton-base: #e6eaf1;
        --arus-skeleton-highlight: #f4f6fa;
        --arus-header-solid: #ffffff;
        --arus-header-glass: rgba(255, 255, 255, .86);
        --arus-modal-line: #dde1ec;
        --arus-modal-footer: #fcfcfe;
        --arus-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23243047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

/* Teléfono por ancho y dispositivos de entrada táctil principal.
   No se usa el zoom ni overflow:hidden para ocultar problemas de composición. */
@media (max-width: 767.98px), (pointer: coarse) {
    .arus-ui {
        --arus-control-text: 1rem;
        --arus-control-height: 2.75rem;
        --arus-control-padding-y: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arus-ui {
        --arus-duration-fast: 0ms;
        --arus-duration-normal: 0ms;
    }
}