/* =========================================================================
   SICOB UI — Sistema de diseño
   -------------------------------------------------------------------------
   Hoja de estilos propia de SICOB. Convive con Tailwind (CDN): Tailwind se
   sigue usando para la maquetación (grid, flex, espacios, responsive) y
   este archivo define la identidad visual (colores de marca, tarjetas,
   botones, formularios, tablas, modales y efectos).

   • Todas las clases propias empiezan por "sc-" para no chocar con Tailwind.
   • Los colores se definen UNA sola vez como variables en :root.
   • Si cambias este archivo, sube el número de versión en
     resources/views/layouts/partials/head.blade.php ($uiVersion) para que
     los navegadores descarguen la versión nueva.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS (colores, sombras, radios, tiempos)
   ------------------------------------------------------------------------- */
:root {
    /* Marca: verde SICOB (logo #309b7d) */
    --sc-green-50:  #effaf6;
    --sc-green-100: #d7f2e8;
    --sc-green-200: #b0e4d2;
    --sc-green-300: #7fd0b5;
    --sc-green-400: #4fb796;
    --sc-green-500: #309b7d;
    --sc-green-600: #237f66;
    --sc-green-700: #1d6653;
    --sc-green-800: #1a5244;
    --sc-green-900: #164439;

    /* Marca: azul SICOB (logo #172072) */
    --sc-navy-50:  #eef1fc;
    --sc-navy-100: #dfe4f8;
    --sc-navy-200: #c5cdf2;
    --sc-navy-300: #a0aae8;
    --sc-navy-400: #7a84d6;
    --sc-navy-500: #5560c4;
    --sc-navy-600: #3d47a8;
    --sc-navy-700: #2a338c;
    --sc-navy-800: #1d2678;
    --sc-navy-900: #172072;
    --sc-navy-950: #0b1036;

    /* Superficies y texto */
    --sc-bg:            #f3f5fa;
    --sc-surface:       #ffffff;
    --sc-surface-2:     #f8fafc;
    --sc-surface-3:     #f1f4f9;
    --sc-border:        #e3e8f0;
    --sc-border-strong: #cdd5e1;
    --sc-text:          #0f172a;
    --sc-text-2:        #475569;
    --sc-text-3:        #64748b;
    --sc-text-4:        #94a3b8;

    /* Semánticos (texto sobre blanco ≥ 4.5:1) */
    --sc-primary:        var(--sc-green-600);
    --sc-primary-hover:  var(--sc-green-700);
    --sc-primary-soft:   var(--sc-green-50);
    --sc-primary-ring:   rgba(48, 155, 125, .35);

    --sc-success:        #15803d;
    --sc-success-soft:   #ecfdf3;
    --sc-success-border: #bbf0cf;

    --sc-danger:         #dc2626;
    --sc-danger-hover:   #b91c1c;
    --sc-danger-text:    #b91c1c;
    --sc-danger-soft:    #fef2f2;
    --sc-danger-border:  #fecaca;

    --sc-warning:        #d97706;
    --sc-warning-text:   #a16207;
    --sc-warning-soft:   #fffbeb;
    --sc-warning-border: #fde68a;

    --sc-info:           #2563eb;
    --sc-info-text:      #1d4ed8;
    --sc-info-soft:      #eff6ff;
    --sc-info-border:    #bfdbfe;

    /* Forma */
    --sc-radius-xs: 6px;
    --sc-radius-sm: 8px;
    --sc-radius:    12px;
    --sc-radius-lg: 16px;
    --sc-radius-xl: 22px;

    --sc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --sc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px -2px rgba(15, 23, 42, .06);
    --sc-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, .10), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --sc-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .25), 0 8px 16px -8px rgba(15, 23, 42, .10);
    --sc-shadow-glow: 0 10px 30px -10px rgba(48, 155, 125, .55);

    /* Movimiento */
    --sc-ease-out:    cubic-bezier(.16, 1, .3, 1);
    --sc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --sc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --sc-dur-1: 120ms;
    --sc-dur-2: 200ms;
    --sc-dur-3: 320ms;
    --sc-dur-4: 520ms;

    /* Estructura */
    --sc-sidebar-w: 272px;
    --sc-sidebar-w-collapsed: 78px;
    --sc-topbar-h: 64px;

    /* Tipografía */
    --sc-font: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.sc-body {
    margin: 0;
    font-family: var(--sc-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--sc-text);
    background: var(--sc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" 0;
}
.sc-body ::selection { background: var(--sc-green-200); color: var(--sc-green-900); }

/* Foco visible y consistente para teclado */
.sc-body :focus-visible {
    outline: 2px solid var(--sc-green-500);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Números tabulares donde las cifras se alinean o cambian mientras se
   escribe (tablas, campos, totales en vivo). Las cifras grandes y fijas
   (indicadores) usan dígitos proporcionales, que se ven mejor. */
.sc-num, .sc-table td, input.sc-money, .sc-summary-amount, .sc-change-amount, .sc-summary-rows {
    font-variant-numeric: tabular-nums;
}
.sc-kpi-value { font-variant-numeric: proportional-nums; }
.sc-money { white-space: nowrap; }
.sc-mono { font-family: var(--sc-mono); letter-spacing: .02em; }

/* Barra de scroll sobria (Chromium/Edge) */
.sc-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.sc-body ::-webkit-scrollbar-thumb { background: #cbd3df; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.sc-body ::-webkit-scrollbar-thumb:hover { background-color: #aab5c5; }
.sc-body ::-webkit-scrollbar-track { background: transparent; }

/* Enlace "saltar al contenido" (accesibilidad) */
.sc-skip-link {
    position: fixed; left: 16px; top: -60px; z-index: 200;
    background: var(--sc-navy-900); color: #fff; padding: 10px 16px;
    border-radius: var(--sc-radius-sm); font-weight: 600; font-size: 14px;
    transition: top var(--sc-dur-2) var(--sc-ease-out);
}
.sc-skip-link:focus { top: 12px; }

.sc-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;
}

:where(.sc-icon) { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* -------------------------------------------------------------------------
   3. ESTRUCTURA: shell, barra lateral, barra superior
   ------------------------------------------------------------------------- */
.sc-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ---- Barra lateral ---- */
.sc-sidebar {
    position: sticky; top: 0;
    width: var(--sc-sidebar-w);
    height: 100vh; height: 100dvh;
    flex-shrink: 0;
    display: flex; flex-direction: column;
    color: #c9cfe8;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(48, 155, 125, .22) 0%, transparent 55%),
        radial-gradient(90% 50% at 100% 100%, rgba(85, 96, 196, .25) 0%, transparent 60%),
        linear-gradient(180deg, #0e1442 0%, #0b1036 55%, #090d2c 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    z-index: 40;
    transition: width var(--sc-dur-3) var(--sc-ease-out), transform var(--sc-dur-3) var(--sc-ease-out);
}
/* textura de cuadrícula muy sutil */
.sc-sidebar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 38%);
}

.sc-sidebar-brand {
    position: relative;
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: var(--sc-topbar-h);
    padding: 0 14px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sc-sidebar-brand a { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-brand-logo { height: 32px; width: auto; display: block; }
.sc-brand-mark { height: 30px; width: 30px; display: none; }

.sc-sidebar-search {
    position: relative;
    flex: none;
    margin: 14px 14px 6px;
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 28px);
    padding: 9px 12px;
    color: #9aa3cc; font-size: 13.5px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--sc-dur-2), border-color var(--sc-dur-2), color var(--sc-dur-2);
}
.sc-sidebar-search:hover { background: rgba(255, 255, 255, .09); color: #e3e7fb; border-color: rgba(255,255,255,.14); }
.sc-sidebar-search .sc-kbd { margin-left: auto; }

.sc-nav {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;          /* permite que el menú haga scroll dentro de la barra */
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 8px 12px 16px;
    scrollbar-width: thin;
}
.sc-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

.sc-nav-section {
    padding: 16px 10px 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: #6f78a8;
    white-space: nowrap;
}

.sc-nav-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 42px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 10px;
    color: #c3c9e6;
    font-size: 14.5px; font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--sc-dur-2) var(--sc-ease-out), color var(--sc-dur-2), transform var(--sc-dur-2) var(--sc-ease-out);
}
.sc-nav-item .sc-icon { width: 20px; height: 20px; color: #8d96c7; transition: color var(--sc-dur-2), transform var(--sc-dur-3) var(--sc-ease-spring); }
.sc-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sc-nav-item:hover .sc-icon { color: #e6eaff; transform: scale(1.08); }
.sc-nav-item.is-active {
    color: #fff;
    background: linear-gradient(90deg, rgba(48, 155, 125, .30) 0%, rgba(48, 155, 125, .08) 100%);
    box-shadow: inset 0 0 0 1px rgba(79, 183, 150, .25);
}
.sc-nav-item.is-active .sc-icon { color: #6fe0b9; }
.sc-nav-item.is-active::before {
    content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #7fe7c4, #309b7d);
    box-shadow: 0 0 14px 2px rgba(79, 183, 150, .65);
}
.sc-nav-label { overflow: hidden; text-overflow: ellipsis; }

/* Grupo desplegable (Administrativo) */
.sc-nav-group > summary {
    list-style: none;
    display: flex; align-items: center; gap: 12px;
}
.sc-nav-group > summary::-webkit-details-marker { display: none; }
.sc-nav-group .sc-nav-chevron { margin-left: auto; width: 16px; height: 16px; transition: transform var(--sc-dur-3) var(--sc-ease-out); }
.sc-nav-group[open] .sc-nav-chevron { transform: rotate(90deg); }
.sc-nav-sub {
    position: relative;
    margin: 2px 0 6px 21px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .09);
}
.sc-nav-sub .sc-nav-item { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.sc-nav-sub .sc-nav-item.is-active::before { left: -13px; }
.sc-nav-group[open] .sc-nav-sub { animation: sc-fade-down var(--sc-dur-3) var(--sc-ease-out); }

/* Pie de la barra lateral */
.sc-sidebar-footer {
    position: relative;
    flex: none;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Widget token de seguridad */
.sc-token-card {
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(234, 179, 8, .14), rgba(234, 179, 8, .04));
    border: 1px solid rgba(250, 204, 21, .22);
}
.sc-token-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #fde68a; margin-bottom: 8px; }
.sc-token-title .sc-icon { width: 16px; height: 16px; color: #facc15; }
.sc-token-row { display: flex; gap: 6px; }
.sc-token-row select {
    flex: 1; min-width: 0;
    background: rgba(9, 13, 44, .65); color: #e7eaf8;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
    padding: 7px 8px; font-size: 12.5px;
}
.sc-token-row button[type] {
    background-color: #facc15; color: #1f1a05;
    border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 700;
    transition: transform var(--sc-dur-1), background-color var(--sc-dur-2);
}
.sc-token-row button[type]:hover { background-color: #fde047; }
.sc-token-row button[type]:active { transform: scale(.96); }
.sc-token-result {
    margin-top: 10px; padding: 10px; border-radius: 10px; text-align: center;
    background: rgba(9, 13, 44, .7);
    border: 1px dashed rgba(248, 113, 113, .6);
    animation: sc-pop-in var(--sc-dur-4) var(--sc-ease-spring);
}
.sc-token-value { font-family: var(--sc-mono); font-size: 22px; font-weight: 600; letter-spacing: .28em; color: #fca5a5; padding-left: .28em; }
.sc-token-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: #fecaca; }
.sc-token-copy {
    display: inline-flex; align-items: center; gap: 4px;
    color: #e7eaf8; font-size: 11.5px; padding: 2px 6px; border-radius: 6px;
    background: rgba(255, 255, 255, .08);
}
.sc-token-copy:hover { background: rgba(255, 255, 255, .16); }

/* Tarjeta de usuario */
.sc-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 12px;
    transition: background var(--sc-dur-2);
}
.sc-user:hover { background: rgba(255, 255, 255, .05); }
.sc-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--sc-green-500), var(--sc-navy-600));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.sc-user-info { min-width: 0; flex: 1; }
.sc-user-name { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-user-role { color: #8d96c7; font-size: 12px; }
.sc-user-actions { display: flex; gap: 4px; }
.sc-user-actions a, .sc-user-actions button[type] {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 9px; color: #9aa3cc; background-color: transparent;
    transition: background-color var(--sc-dur-2), color var(--sc-dur-2);
}
.sc-user-actions a:hover { background-color: rgba(255, 255, 255, .08); color: #fff; }
.sc-user-actions button[type]:hover { background-color: rgba(239, 68, 68, .18); color: #fca5a5; }

/* ---- Contenedor principal ---- */
.sc-main-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sc-topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--sc-topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 28px;
    background: rgba(243, 245, 250, .78);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
            backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(203, 213, 225, .55);
}
.sc-topbar .sc-topbar-toggle { display: none; }
.sc-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--sc-text-3); }
.sc-breadcrumb strong { color: var(--sc-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-breadcrumb .sc-icon { width: 15px; height: 15px; color: var(--sc-text-4); }
.sc-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.sc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 12px;
    font-size: 13px; font-weight: 500; color: var(--sc-text-2);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 99px;
    white-space: nowrap;
}
.sc-chip .sc-icon { width: 16px; height: 16px; color: var(--sc-text-3); }
.sc-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-text-4); }
.sc-chip-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); animation: sc-pulse-dot 2.4s ease-in-out infinite; }
.sc-chip-dot.is-off { background: #f59e0b; }

.sc-main { flex: 1 1 auto; padding: 28px 28px 48px; }
.sc-footer { padding: 18px 28px 26px; font-size: 12px; color: var(--sc-text-4); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- Barra lateral colapsada (escritorio) ---- */
@media (min-width: 1024px) {
    .sc-collapsed .sc-sidebar { width: var(--sc-sidebar-w-collapsed); }
    .sc-collapsed .sc-brand-logo,
    .sc-collapsed .sc-nav-label,
    .sc-collapsed .sc-nav-section,
    .sc-collapsed .sc-nav-chevron,
    .sc-collapsed .sc-sidebar-search span,
    .sc-collapsed .sc-sidebar-search .sc-kbd,
    .sc-collapsed .sc-user-info,
    .sc-collapsed .sc-token-card,
    .sc-collapsed .sc-user-actions a { display: none; }
    .sc-collapsed .sc-brand-mark { display: block; }
    .sc-collapsed .sc-sidebar-brand { padding: 0 12px; justify-content: center; flex-direction: column; gap: 0; }
    .sc-collapsed .sc-sidebar-brand .sc-collapse-btn { display: none; }
    .sc-collapsed .sc-sidebar-search { justify-content: center; padding: 10px 0; }
    .sc-collapsed .sc-nav { padding: 8px 12px; }
    .sc-collapsed .sc-nav-item { justify-content: center; padding: 10px 0; }
    .sc-collapsed .sc-nav-sub { margin-left: 0; padding-left: 0; border-left: 0; }
    .sc-collapsed .sc-user { flex-direction: column; padding: 6px 0; }
    .sc-collapsed .sc-expand-btn { display: grid; }
    .sc-collapsed .sc-nav-item[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
        background: var(--sc-navy-950); color: #fff; font-size: 12.5px; font-weight: 500;
        padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
        box-shadow: var(--sc-shadow-md); z-index: 60;
        animation: sc-fade-in var(--sc-dur-2) var(--sc-ease-out);
    }
}
.sc-expand-btn { display: none; }

.sc-collapse-btn, .sc-expand-btn {
    width: 34px; height: 34px; place-items: center;
    border-radius: 9px; color: #8d96c7;
    transition: background var(--sc-dur-2), color var(--sc-dur-2);
}
.sc-collapse-btn { display: grid; }
.sc-collapse-btn:hover, .sc-expand-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---- Móvil / tablet: barra lateral como cajón ---- */
.sc-sidebar-backdrop { display: none; }
@media (max-width: 1023.98px) {
    .sc-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-102%);
        box-shadow: var(--sc-shadow-lg);
        z-index: 60;
    }
    .sc-nav-open .sc-sidebar { transform: translateX(0); }
    .sc-sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(8, 11, 33, .5);
        -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        opacity: 0; pointer-events: none;
        transition: opacity var(--sc-dur-3) var(--sc-ease-out);
    }
    .sc-nav-open .sc-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .sc-topbar { padding: 0 16px; }
    .sc-topbar .sc-topbar-toggle { display: inline-grid; }
    .sc-collapse-btn { display: none; }
    .sc-main { padding: 20px 16px 40px; }
    .sc-footer { padding: 16px; }
}
@media (max-width: 639.98px) {
    .sc-topbar .sc-chip-hide-sm { display: none; }
}

/* -------------------------------------------------------------------------
   4. PÁGINA: encabezados y contenedores
   ------------------------------------------------------------------------- */
.sc-page { max-width: 1440px; margin: 0 auto; }
.sc-page-md { max-width: 1080px; margin: 0 auto; }
.sc-page-sm { max-width: 760px; margin: 0 auto; }
.sc-page-xs { max-width: 520px; margin: 0 auto; }

.sc-page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
}
.sc-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sc-green-700);
    margin-bottom: 6px;
}
.sc-eyebrow .sc-icon { width: 14px; height: 14px; }
.sc-title {
    margin: 0;
    font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
    color: var(--sc-text);
    text-wrap: balance;
}
.sc-subtitle { margin: 6px 0 0; font-size: 14.5px; color: var(--sc-text-3); max-width: 70ch; }
.sc-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.sc-section-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-text);
}
.sc-section-title .sc-icon { color: var(--sc-green-600); }

.sc-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--sc-text-3);
    padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 8px;
    transition: color var(--sc-dur-2), background var(--sc-dur-2);
}
.sc-back-link:hover { color: var(--sc-text); background: rgba(15, 23, 42, .05); }
.sc-back-link .sc-icon { width: 16px; height: 16px; transition: transform var(--sc-dur-2) var(--sc-ease-out); }
.sc-back-link:hover .sc-icon { transform: translateX(-3px); }

/* -------------------------------------------------------------------------
   5. TARJETAS
   ------------------------------------------------------------------------- */
.sc-card {
    position: relative;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
}
.sc-card-body { padding: 22px; }
.sc-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 22px;
    border-bottom: 1px solid var(--sc-border);
}
.sc-card-header h2, .sc-card-header h3 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--sc-text); display: flex; align-items: center; gap: 10px; }
.sc-card-header h2 .sc-icon, .sc-card-header h3 .sc-icon { color: var(--sc-green-600); }
.sc-card-header p { margin: 2px 0 0; font-size: 13px; color: var(--sc-text-3); }
.sc-card-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 22px;
    border-top: 1px solid var(--sc-border);
    background: var(--sc-surface-2);
    border-radius: 0 0 var(--sc-radius-lg) var(--sc-radius-lg);
}
.sc-card-muted { background: var(--sc-surface-2); box-shadow: none; }

/* Tarjeta con acento de color en el borde superior */
.sc-card-accent::after {
    content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--sc-accent, linear-gradient(90deg, var(--sc-green-500), var(--sc-navy-500)));
}

/* Efecto "spotlight": brillo que sigue al cursor (sicob-ui.js pone --mx/--my) */
.sc-spotlight { overflow: hidden; isolation: isolate; }
.sc-spotlight::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -200px), rgba(48, 155, 125, .10), transparent 45%);
    opacity: 0; transition: opacity var(--sc-dur-3);
}
.sc-spotlight:hover::before { opacity: 1; }

.sc-lift { transition: transform var(--sc-dur-3) var(--sc-ease-out), box-shadow var(--sc-dur-3) var(--sc-ease-out), border-color var(--sc-dur-3); }
.sc-lift:hover { transform: translateY(-3px); box-shadow: var(--sc-shadow-md); border-color: var(--sc-border-strong); }

/* -------------------------------------------------------------------------
   6. KPIs / indicadores
   ------------------------------------------------------------------------- */
.sc-kpi { padding: 20px 20px 18px; }
.sc-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sc-kpi-label { font-size: 13px; font-weight: 500; color: var(--sc-text-3); }
.sc-kpi-value {
    margin-top: 10px;
    font-size: 27px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em;
    color: var(--sc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-kpi-foot { margin-top: 8px; font-size: 12.5px; color: var(--sc-text-3); display: flex; align-items: center; gap: 6px; }
.sc-kpi-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--sc-kpi-c, var(--sc-green-600));
    background: var(--sc-kpi-bg, var(--sc-green-50));
    box-shadow: inset 0 0 0 1px var(--sc-kpi-ring, rgba(48, 155, 125, .18));
    transition: transform var(--sc-dur-3) var(--sc-ease-spring);
}
.sc-kpi-icon .sc-icon { width: 21px; height: 21px; }
.sc-card:hover .sc-kpi-icon { transform: rotate(-6deg) scale(1.06); }
.sc-tone-green  { --sc-kpi-c: var(--sc-green-600); --sc-kpi-bg: var(--sc-green-50); --sc-kpi-ring: rgba(48,155,125,.2); --sc-accent: linear-gradient(90deg, #4fb796, #237f66); }
.sc-tone-navy   { --sc-kpi-c: var(--sc-navy-700); --sc-kpi-bg: var(--sc-navy-50); --sc-kpi-ring: rgba(61,71,168,.18); --sc-accent: linear-gradient(90deg, #7a84d6, #2a338c); }
.sc-tone-amber  { --sc-kpi-c: #b45309; --sc-kpi-bg: #fff7e6; --sc-kpi-ring: rgba(217,119,6,.2); --sc-accent: linear-gradient(90deg, #fbbf24, #d97706); }
.sc-tone-violet { --sc-kpi-c: #6d28d9; --sc-kpi-bg: #f5f0ff; --sc-kpi-ring: rgba(109,40,217,.16); --sc-accent: linear-gradient(90deg, #a78bfa, #6d28d9); }
.sc-tone-sky    { --sc-kpi-c: #0369a1; --sc-kpi-bg: #eef8ff; --sc-kpi-ring: rgba(3,105,161,.16); --sc-accent: linear-gradient(90deg, #38bdf8, #0369a1); }
.sc-tone-red    { --sc-kpi-c: #b91c1c; --sc-kpi-bg: #fef2f2; --sc-kpi-ring: rgba(185,28,28,.16); --sc-accent: linear-gradient(90deg, #f87171, #b91c1c); }

/* Panel destacado oscuro (hero) */
.sc-hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--sc-radius-xl);
    color: #e8ebfa;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(48, 155, 125, .38), transparent 55%),
        radial-gradient(60% 90% at 0% 100%, rgba(85, 96, 196, .40), transparent 60%),
        linear-gradient(135deg, #111850 0%, #0b1036 100%);
    box-shadow: var(--sc-shadow-lg);
}
.sc-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(70% 90% at 80% 10%, #000, transparent 75%);
            mask-image: radial-gradient(70% 90% at 80% 10%, #000, transparent 75%);
}
.sc-hero-orb {
    position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%;
    right: -90px; top: -150px; filter: blur(40px); opacity: .55;
    background: conic-gradient(from 90deg, #309b7d, #5560c4, #22d3ee, #309b7d);
    animation: sc-spin 18s linear infinite;
}
.sc-hero .sc-title { color: #fff; }
.sc-hero .sc-subtitle { color: #b7bfe4; }
.sc-hero .sc-eyebrow { color: #7fe7c4; }

/* -------------------------------------------------------------------------
   7. BOTONES
   Los colores van en variables para ganarle al "preflight" de Tailwind,
   que pone fondo transparente a button[type].
   ------------------------------------------------------------------------- */
.sc-btn {
    --btn-bg: var(--sc-surface);
    --btn-fg: var(--sc-text);
    --btn-bd: var(--sc-border-strong);
    --btn-shadow: var(--sc-shadow-xs);
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: 11px;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition:
        background-color var(--sc-dur-2) var(--sc-ease-out),
        border-color var(--sc-dur-2) var(--sc-ease-out),
        color var(--sc-dur-2),
        box-shadow var(--sc-dur-3) var(--sc-ease-out),
        transform var(--sc-dur-1) var(--sc-ease-out);
}
.sc-btn, .sc-btn[type] { background-color: var(--btn-bg); background-image: var(--btn-img, none); }
.sc-btn .sc-icon { width: 17px; height: 17px; }
.sc-btn:hover { --btn-bg: var(--sc-surface-2); --btn-bd: #b9c3d2; }
.sc-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.sc-btn-primary {
    --btn-bg: var(--sc-primary);
    --btn-img: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
    --btn-fg: #fff;
    --btn-bd: var(--sc-green-700);
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px -6px rgba(35, 127, 102, .55);
}
.sc-btn-primary:hover { --btn-bg: var(--sc-primary-hover); --btn-bd: var(--sc-green-800); --btn-shadow: 0 1px 2px rgba(15,23,42,.12), 0 10px 22px -8px rgba(35,127,102,.7); }

.sc-btn-navy {
    --btn-bg: var(--sc-navy-900);
    --btn-img: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    --btn-fg: #fff;
    --btn-bd: var(--sc-navy-950);
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, .15), 0 6px 16px -6px rgba(23, 32, 114, .55);
}
.sc-btn-navy:hover { --btn-bg: var(--sc-navy-800); --btn-bd: var(--sc-navy-950); }

.sc-btn-danger {
    --btn-bg: var(--sc-danger);
    --btn-img: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    --btn-fg: #fff;
    --btn-bd: #b91c1c;
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px -6px rgba(220, 38, 38, .5);
}
.sc-btn-danger:hover { --btn-bg: var(--sc-danger-hover); --btn-bd: #991b1b; }

.sc-btn-soft-danger { --btn-bg: var(--sc-danger-soft); --btn-fg: var(--sc-danger-text); --btn-bd: var(--sc-danger-border); --btn-shadow: none; }
.sc-btn-soft-danger:hover { --btn-bg: #fee2e2; --btn-bd: #fca5a5; }

.sc-btn-soft { --btn-bg: var(--sc-primary-soft); --btn-fg: var(--sc-green-800); --btn-bd: var(--sc-green-200); --btn-shadow: none; }
.sc-btn-soft:hover { --btn-bg: var(--sc-green-100); --btn-bd: var(--sc-green-300); }

.sc-btn-excel { --btn-bg: #fff; --btn-fg: #166534; --btn-bd: #bbe5c8; }
.sc-btn-excel:hover { --btn-bg: #f0fdf4; --btn-bd: #86d19f; }
.sc-btn-excel .sc-icon { color: #16a34a; }

.sc-btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-shadow: none; --btn-fg: var(--sc-text-2); }
.sc-btn-ghost:hover { --btn-bg: rgba(15, 23, 42, .05); --btn-bd: transparent; --btn-fg: var(--sc-text); }

/* Botón translúcido para fondos oscuros (hero, resumen) */
.sc-btn-glass { --btn-bg: rgba(255, 255, 255, .08); --btn-bd: rgba(255, 255, 255, .18); --btn-fg: #fff; --btn-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sc-btn-glass:hover { --btn-bg: rgba(255, 255, 255, .16); --btn-bd: rgba(255, 255, 255, .32); }

.sc-btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; gap: 6px; }
.sc-btn-sm .sc-icon { width: 15px; height: 15px; }
.sc-btn-lg { min-height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: 13px; }
.sc-btn-block { width: 100%; }

/* Brillo que cruza el botón primario al pasar el cursor */
.sc-btn-primary::after, .sc-btn-navy::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
    transform: translateX(-120%);
}
.sc-btn-primary:hover::after, .sc-btn-navy:hover::after { transform: translateX(120%); transition: transform .8s var(--sc-ease-out); }

/* Onda al hacer clic (la crea sicob-ui.js) */
.sc-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: currentColor; opacity: .22;
    transform: scale(0);
    animation: sc-ripple .6s var(--sc-ease-out) forwards;
}

/* Botón en estado de carga */
.sc-btn.is-loading { color: transparent !important; pointer-events: none; }
.sc-btn.is-loading::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    animation: sc-spin .7s linear infinite;
}

/* Spinner automático cuando un botón con data-spin queda deshabilitado
   (por ejemplo "Guardar" mientras se procesa la operación) */
.sc-btn[data-spin]:disabled::before {
    content: ""; width: 16px; height: 16px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
    animation: sc-spin .7s linear infinite;
}

/* Botón de solo ícono */
.sc-icon-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    color: var(--sc-text-3);
    cursor: pointer;
    transition: background-color var(--sc-dur-2), color var(--sc-dur-2), transform var(--sc-dur-1);
}
.sc-icon-btn, .sc-icon-btn[type] { background-color: transparent; }
.sc-icon-btn:hover, .sc-icon-btn[type]:hover { background-color: rgba(15, 23, 42, .06); color: var(--sc-text); }
.sc-icon-btn:active { transform: scale(.94); }

/* Acciones compactas en tablas */
.sc-action {
    --a-c: var(--sc-text-2);
    --a-bg: transparent;
    --a-bd: var(--sc-border);
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 11px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: var(--a-c);
    border: 1px solid var(--a-bd);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--sc-dur-2), border-color var(--sc-dur-2), color var(--sc-dur-2), transform var(--sc-dur-1);
}
.sc-action, .sc-action[type] { background-color: var(--a-bg); }
.sc-action .sc-icon { width: 15px; height: 15px; }
.sc-action:hover { --a-bg: var(--sc-surface-3); --a-bd: var(--sc-border-strong); --a-c: var(--sc-text); }
.sc-action:active { transform: scale(.96); }
.sc-action-primary { --a-c: var(--sc-green-700); --a-bd: var(--sc-green-200); --a-bg: var(--sc-green-50); }
.sc-action-primary:hover { --a-c: var(--sc-green-800); --a-bd: var(--sc-green-300); --a-bg: var(--sc-green-100); }
.sc-action-info { --a-c: var(--sc-navy-700); --a-bd: var(--sc-navy-100); --a-bg: var(--sc-navy-50); }
.sc-action-info:hover { --a-c: var(--sc-navy-900); --a-bd: var(--sc-navy-200); --a-bg: var(--sc-navy-100); }
.sc-action-warning { --a-c: #92400e; --a-bd: #fde4a8; --a-bg: #fffbeb; }
.sc-action-warning:hover { --a-c: #78350f; --a-bd: #fcd34d; --a-bg: #fef3c7; }
.sc-action-danger { --a-c: var(--sc-danger-text); --a-bd: var(--sc-danger-border); --a-bg: var(--sc-danger-soft); }
.sc-action-danger:hover { --a-c: #991b1b; --a-bd: #fca5a5; --a-bg: #fee2e2; }
.sc-action-solid { --a-c: #fff; --a-bd: var(--sc-green-700); --a-bg: var(--sc-primary); }
.sc-action-solid:hover { --a-c: #fff; --a-bd: var(--sc-green-800); --a-bg: var(--sc-primary-hover); }

/* Atajos de teclado */
.sc-kbd {
    display: inline-flex; align-items: center; gap: 2px;
    font-family: var(--sc-mono); font-size: 11px; font-weight: 500;
    padding: 2px 6px; border-radius: 6px;
    color: inherit; opacity: .85;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}
.sc-kbd-light { background: var(--sc-surface-3); border-color: var(--sc-border); color: var(--sc-text-3); }

/* -------------------------------------------------------------------------
   8. FORMULARIOS
   ------------------------------------------------------------------------- */
.sc-label {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--sc-text);
}
.sc-label .sc-req { color: var(--sc-danger); font-weight: 700; }
.sc-label-sm {
    display: block; margin-bottom: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sc-text-3);
}
.sc-help { margin-top: 6px; font-size: 12.5px; color: var(--sc-text-3); }
.sc-field-error { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--sc-danger-text); display: flex; gap: 6px; align-items: flex-start; }
.sc-field-error .sc-icon { width: 15px; height: 15px; margin-top: 1px; }

.sc-input, .sc-select, .sc-textarea {
    display: block; width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-family: inherit; font-size: 15px; line-height: 1.35; color: var(--sc-text);
    background-color: var(--sc-surface);
    border: 1px solid var(--sc-border-strong);
    border-radius: 11px;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
    transition: border-color var(--sc-dur-2), box-shadow var(--sc-dur-2), background-color var(--sc-dur-2);
    -webkit-appearance: none; appearance: none;
}
.sc-textarea { min-height: 88px; resize: vertical; }
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--sc-text-4); opacity: 1; }
.sc-input:hover, .sc-select:hover, .sc-textarea:hover { border-color: #b3becf; }
.sc-input:focus, .sc-select:focus, .sc-textarea:focus {
    outline: none;
    border-color: var(--sc-green-500);
    box-shadow: 0 0 0 4px var(--sc-primary-ring);
    background-color: #fff;
}
.sc-input[readonly], .sc-input:disabled, .sc-select:disabled, .sc-textarea:disabled {
    background-color: var(--sc-surface-3);
    color: var(--sc-text-2);
    border-style: dashed;
    cursor: not-allowed;
    box-shadow: none;
}
.sc-input[aria-invalid="true"], .sc-select[aria-invalid="true"] { border-color: var(--sc-danger); }
.sc-input-sm, .sc-select.sc-input-sm { min-height: 36px; padding: 6px 10px; font-size: 13.5px; border-radius: 9px; }
.sc-input-lg { min-height: 52px; font-size: 18px; font-weight: 600; }

.sc-select {
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.sc-select.sc-input-sm { padding-right: 32px; background-position: right 8px center; background-size: 16px 16px; }

input[type="date"].sc-input, input[type="month"].sc-input { cursor: pointer; }
input[type="date"].sc-input::-webkit-calendar-picker-indicator,
input[type="month"].sc-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* Campo con prefijo ($) o ícono */
.sc-input-group { position: relative; }
.sc-input-group > .sc-input-prefix {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-weight: 600; color: var(--sc-text-3); pointer-events: none;
    display: flex; align-items: center;
}
.sc-input-group > .sc-input-prefix .sc-icon { width: 17px; height: 17px; }
.sc-input-group > .sc-input { padding-left: 34px; }
.sc-input-group > .sc-input-lg { padding-left: 38px; }
.sc-input-group > .sc-input-suffix {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center;
}

/* Casillas */
.sc-check {
    -webkit-appearance: none; appearance: none;
    width: 19px; height: 19px; flex-shrink: 0;
    display: inline-grid; place-content: center;
    margin: 0;
    border: 1.5px solid #aab5c6; border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background-color var(--sc-dur-2), border-color var(--sc-dur-2), box-shadow var(--sc-dur-2);
}
.sc-check[type="radio"] { border-radius: 50%; }
.sc-check::before {
    content: ""; width: 10px; height: 10px;
    transform: scale(0);
    transition: transform var(--sc-dur-2) var(--sc-ease-spring);
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.sc-check[type="radio"]::before { clip-path: circle(50%); width: 8px; height: 8px; }
.sc-check:checked { background: var(--sc-primary); border-color: var(--sc-primary); }
.sc-check:checked::before { transform: scale(1); }
.sc-check:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--sc-primary-ring); }
.sc-check:hover:not(:checked) { border-color: var(--sc-green-500); }

/* Interruptor (checkbox con apariencia de switch) */
.sc-switch {
    -webkit-appearance: none; appearance: none;
    position: relative; flex-shrink: 0;
    width: 42px; height: 24px; margin: 0;
    border-radius: 99px;
    background: #cbd3df;
    cursor: pointer;
    transition: background-color var(--sc-dur-3) var(--sc-ease-out);
}
.sc-switch::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform var(--sc-dur-3) var(--sc-ease-spring);
}
.sc-switch:checked { background: var(--sc-primary); }
.sc-switch:checked::before { transform: translateX(18px); }
.sc-switch:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--sc-primary-ring); }

/* Opción seleccionable en forma de tarjeta (radios / checkboxes) */
.sc-option {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sc-border-strong);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--sc-dur-2), background-color var(--sc-dur-2), box-shadow var(--sc-dur-2);
}
.sc-option:hover { border-color: var(--sc-green-300); background: var(--sc-green-50); }
.sc-option:has(input:checked) { border-color: var(--sc-green-500); background: var(--sc-green-50); box-shadow: 0 0 0 3px rgba(48, 155, 125, .14); }
.sc-option-title { font-size: 14px; font-weight: 600; color: var(--sc-text); }
.sc-option-desc { font-size: 12.5px; color: var(--sc-text-3); }

/* Barra de filtros */
.sc-filters {
    padding: 16px 18px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-xs);
}
.sc-filters-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--sc-text-2);
    margin-bottom: 12px;
}
.sc-filters-title .sc-icon { width: 16px; height: 16px; color: var(--sc-text-3); }

/* Bloque de formulario agrupado */
.sc-fieldset { border: 0; margin: 0; padding: 0; }
.sc-fieldset-legend {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sc-text-3);
}
.sc-fieldset-legend::after { content: ""; flex: 1; height: 1px; background: var(--sc-border); }

/* -------------------------------------------------------------------------
   9. TABLAS
   ------------------------------------------------------------------------- */
.sc-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
        linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.12), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.12), transparent) right center / 12px 100% no-repeat scroll;
    background-color: #fff;
    border-radius: inherit;
}
.sc-table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    font-size: 14px;
    color: var(--sc-text);
}
.sc-table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: 11px 16px;
    text-align: left;
    font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--sc-text-3);
    background: var(--sc-surface-2);
    border-bottom: 1px solid var(--sc-border);
    white-space: nowrap;
}
.sc-table tbody td {
    padding: 13px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #edf1f6;
    background-color: transparent;
    transition: background-color var(--sc-dur-1);
}
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr:hover td { background-color: #f7faff; }
.sc-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--sc-green-500); }
.sc-table .is-num, .sc-table th.is-num { text-align: right; }
.sc-table .is-center, .sc-table th.is-center { text-align: center; }
.sc-table .is-muted { color: var(--sc-text-3); }
.sc-table .is-strong { font-weight: 600; }
.sc-table-compact tbody td { padding: 9px 14px; }
.sc-table-compact thead th { padding: 9px 14px; }
.sc-table tfoot td {
    padding: 14px 16px;
    font-weight: 600;
    background: var(--sc-surface-2);
    border-top: 1px solid var(--sc-border);
}
/* Fila inactiva (atenuada) y fila anulada (atenuada + valores tachados) */
.sc-table tr.is-dim td, .sc-table tr.is-void td { color: var(--sc-text-4); }
.sc-table tr.is-void td.sc-money, .sc-table tr.is-void td .sc-money { text-decoration: line-through; text-decoration-color: rgba(148, 163, 184, .8); }
.sc-table caption { caption-side: top; text-align: left; }

/* Columna de acciones fija a la derecha: siempre visible aunque la
   tabla tenga que desplazarse horizontalmente en pantallas pequeñas */
.sc-table-sticky-end thead th:last-child,
.sc-table-sticky-end tbody td:last-child {
    position: sticky; right: 0; z-index: 1;
    box-shadow: -14px 0 14px -14px rgba(15, 23, 42, .28);
}
.sc-table-sticky-end tbody td:last-child { background-color: #fff; }
.sc-table-sticky-end thead th:last-child { z-index: 2; }
@media (max-width: 639.98px) {
    /* En celulares la columna fija ocuparía casi toda la pantalla */
    .sc-table-sticky-end thead th:last-child,
    .sc-table-sticky-end tbody td:last-child { position: static; box-shadow: none; }
}

.sc-cell-title { font-weight: 600; color: var(--sc-text); }
.sc-cell-sub { font-size: 12.5px; color: var(--sc-text-3); margin-top: 1px; }
.sc-id { font-family: var(--sc-mono); font-size: 12.5px; color: var(--sc-text-3); }
.sc-actions-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   10. ETIQUETAS DE ESTADO
   ------------------------------------------------------------------------- */
.sc-badge {
    --b-c: var(--sc-text-2); --b-bg: var(--sc-surface-3); --b-bd: var(--sc-border); --b-dot: var(--sc-text-4);
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1;
    white-space: nowrap;
    color: var(--b-c);
    background: var(--b-bg);
    border: 1px solid var(--b-bd);
    border-radius: 99px;
}
.sc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-dot); flex-shrink: 0; }
.sc-badge.no-dot::before { display: none; }
.sc-badge .sc-icon { width: 13px; height: 13px; margin-left: -2px; }
.sc-badge-success { --b-c: #166534; --b-bg: #ecfdf3; --b-bd: #c6f0d6; --b-dot: #22c55e; }
.sc-badge-warning { --b-c: #92400e; --b-bg: #fffbeb; --b-bd: #fde4a8; --b-dot: #f59e0b; }
.sc-badge-danger  { --b-c: #991b1b; --b-bg: #fef2f2; --b-bd: #fecaca; --b-dot: #ef4444; }
.sc-badge-info    { --b-c: #1e40af; --b-bg: #eff6ff; --b-bd: #c7dcfd; --b-dot: #3b82f6; }
.sc-badge-navy    { --b-c: var(--sc-navy-800); --b-bg: var(--sc-navy-50); --b-bd: var(--sc-navy-100); --b-dot: var(--sc-navy-500); }
.sc-badge-gold    { --b-c: #854d0e; --b-bg: linear-gradient(135deg, #fef9c3, #fde68a); --b-bd: #f6d860; --b-dot: #ca8a04; }
.sc-badge-neutral { --b-c: #475569; --b-bg: #f1f5f9; --b-bd: #e2e8f0; --b-dot: #94a3b8; }

/* -------------------------------------------------------------------------
   11. ALERTAS / MENSAJES
   ------------------------------------------------------------------------- */
.sc-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.sc-alert {
    --al-c: var(--sc-text); --al-bg: #fff; --al-bd: var(--sc-border); --al-ic: var(--sc-text-3);
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 14px 13px 16px;
    font-size: 14px; line-height: 1.5;
    color: var(--al-c);
    background: var(--al-bg);
    border: 1px solid var(--al-bd);
    border-radius: 12px;
    box-shadow: var(--sc-shadow-xs);
    animation: sc-slide-down var(--sc-dur-4) var(--sc-ease-out) both;
}
.sc-alert > .sc-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--al-ic); }
.sc-alert-body { flex: 1; min-width: 0; }
.sc-alert-title { font-weight: 600; }
.sc-alert ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.sc-alert-close {
    margin: -4px -4px -4px 0; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 8px; color: currentColor; opacity: .6; cursor: pointer;
    transition: opacity var(--sc-dur-2), background-color var(--sc-dur-2);
}
.sc-alert-close, .sc-alert-close[type] { background-color: transparent; }
.sc-alert-close:hover, .sc-alert-close[type]:hover { opacity: 1; background-color: rgba(15, 23, 42, .06); }
.sc-alert-close .sc-icon { width: 16px; height: 16px; }
.sc-alert-success { --al-c: #14532d; --al-bg: #f0fdf5; --al-bd: #bbf0cf; --al-ic: #16a34a; }
.sc-alert-danger  { --al-c: #7f1d1d; --al-bg: #fef2f2; --al-bd: #fecaca; --al-ic: #dc2626; }
.sc-alert-warning { --al-c: #713f12; --al-bg: #fffbeb; --al-bd: #fde68a; --al-ic: #d97706; }
.sc-alert-info    { --al-c: #1e3a8a; --al-bg: #eff6ff; --al-bd: #bfdbfe; --al-ic: #2563eb; }
.sc-alert.is-leaving { animation: sc-fade-out var(--sc-dur-2) var(--sc-ease-in-out) forwards; }

/* Aviso que se desplaza (cupo bajo) */
.sc-ticker {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #fef2f2, #fff7ed);
    border: 1px solid #fecaca;
    color: #7f1d1d;
}
.sc-ticker-label {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; white-space: nowrap;
    background: linear-gradient(90deg, #dc2626, #ea580c);
}
.sc-ticker-label .sc-icon { width: 16px; height: 16px; animation: sc-shake 2.8s ease-in-out infinite; }
.sc-ticker-track { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sc-ticker-move { display: inline-flex; gap: 28px; padding-left: 100%; white-space: nowrap; font-size: 13.5px; font-weight: 600; animation: sc-marquee 26s linear infinite; }
.sc-ticker:hover .sc-ticker-move { animation-play-state: paused; }
.sc-ticker-item { display: inline-flex; align-items: center; gap: 8px; }
.sc-ticker-item .sc-money { color: #b91c1c; }

/* -------------------------------------------------------------------------
   12. MODALES
   ------------------------------------------------------------------------- */
.sc-modal {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.sc-modal.hidden { display: none; }
.sc-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 11, 33, .52);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: sc-fade-in var(--sc-dur-3) var(--sc-ease-out);
}
.sc-modal-panel {
    position: relative;
    width: 100%; max-width: 520px;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column;
    background: var(--sc-surface);
    border-radius: 18px;
    box-shadow: 0 40px 80px -20px rgba(8, 11, 33, .45), 0 0 0 1px rgba(15, 23, 42, .06);
    animation: sc-modal-in var(--sc-dur-4) var(--sc-ease-out);
    overflow: hidden;
}
.sc-modal-lg { max-width: 920px; }
.sc-modal-sm { max-width: 420px; }
.sc-modal-header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 16px 22px;
    border-bottom: 1px solid var(--sc-border);
}
.sc-modal-header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-text); }
.sc-modal-header p { margin: 2px 0 0; font-size: 13px; color: var(--sc-text-3); }
.sc-modal-header .sc-icon-btn { margin-left: auto; }
.sc-modal-icon {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px;
    color: var(--sc-green-700); background: var(--sc-green-50);
}
.sc-modal-icon.is-danger { color: #dc2626; background: #fef2f2; }
.sc-modal-icon.is-warning { color: #d97706; background: #fffbeb; }
.sc-modal-icon.is-info { color: var(--sc-navy-700); background: var(--sc-navy-50); }
.sc-modal-body { padding: 20px 22px; overflow-y: auto; }
.sc-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--sc-surface-2);
    border-top: 1px solid var(--sc-border);
}
body.sc-no-scroll { overflow: hidden; }

/* Diálogo de confirmación (generado por sicob-ui.js) */
.sc-dialog-message { font-size: 15px; color: var(--sc-text-2); line-height: 1.55; }
.sc-dialog-head { display: flex; gap: 14px; align-items: flex-start; }
.sc-dialog-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--sc-text); }

/* -------------------------------------------------------------------------
   13. PALETA DE COMANDOS (Ctrl + K)
   ------------------------------------------------------------------------- */
.sc-cmd { align-items: flex-start; padding-top: 12vh; }
.sc-cmd .sc-modal-panel { max-width: 580px; }
.sc-cmd-input-row { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-bottom: 1px solid var(--sc-border); }
.sc-cmd-input-row .sc-icon { width: 20px; height: 20px; color: var(--sc-text-3); }
.sc-cmd-input {
    flex: 1; min-width: 0; height: 56px; border: 0; outline: none; background: transparent;
    font-size: 16px; color: var(--sc-text);
}
.sc-cmd-input::placeholder { color: var(--sc-text-4); }
.sc-cmd-input:focus, .sc-cmd-input:focus-visible { outline: none; box-shadow: none; }
.sc-cmd-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.sc-cmd-group { padding: 10px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-4); }
.sc-cmd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 14.5px; color: var(--sc-text);
    cursor: pointer;
}
.sc-cmd-item .sc-icon { color: var(--sc-text-3); }
.sc-cmd-item .sc-cmd-hint { margin-left: auto; color: var(--sc-text-4); opacity: 0; }
.sc-cmd-item.is-active { background: var(--sc-green-50); color: var(--sc-green-900); box-shadow: inset 0 0 0 1px var(--sc-green-200); }
.sc-cmd-item.is-active .sc-icon { color: var(--sc-green-600); }
.sc-cmd-item.is-active .sc-cmd-hint { opacity: 1; }
.sc-cmd-empty { padding: 28px 12px; text-align: center; color: var(--sc-text-3); font-size: 14px; }
.sc-cmd-foot { display: flex; gap: 16px; padding: 10px 16px; font-size: 12px; color: var(--sc-text-3); border-top: 1px solid var(--sc-border); background: var(--sc-surface-2); }
.sc-cmd-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------------------
   14. BARRA DE PROGRESO DE NAVEGACIÓN
   ------------------------------------------------------------------------- */
.sc-progress {
    position: fixed; left: 0; top: 0; z-index: 300;
    height: 3px; width: 100%;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    background: linear-gradient(90deg, #4fb796, #22d3ee, #5560c4);
    box-shadow: 0 0 12px rgba(79, 183, 150, .8);
}
.sc-progress.is-active { opacity: 1; transform: scaleX(.86); transition: transform 8s cubic-bezier(.1, .9, .2, 1), opacity var(--sc-dur-2); }
.sc-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform var(--sc-dur-2) ease-out, opacity var(--sc-dur-3) .15s; }

/* -------------------------------------------------------------------------
   15. PAGINACIÓN
   ------------------------------------------------------------------------- */
.sc-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-pagination-info { font-size: 13px; color: var(--sc-text-3); }
.sc-pagination-info strong { color: var(--sc-text); font-weight: 600; }
.sc-pages { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sc-page-link {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 600; color: var(--sc-text-2);
    border: 1px solid var(--sc-border); border-radius: 10px;
    background: #fff;
    transition: background-color var(--sc-dur-2), border-color var(--sc-dur-2), color var(--sc-dur-2), transform var(--sc-dur-1);
}
a.sc-page-link:hover { border-color: var(--sc-green-300); color: var(--sc-green-800); background: var(--sc-green-50); }
a.sc-page-link:active { transform: scale(.95); }
.sc-page-link.is-current { color: #fff; border-color: var(--sc-green-700); background: var(--sc-primary); box-shadow: 0 6px 14px -6px rgba(35, 127, 102, .6); }
.sc-page-link.is-disabled { color: var(--sc-text-4); background: var(--sc-surface-2); cursor: not-allowed; }
.sc-page-link .sc-icon { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   16. ESTADOS VACÍOS
   ------------------------------------------------------------------------- */
.sc-empty { padding: 44px 20px; text-align: center; }
.sc-empty-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 16px;
    color: var(--sc-text-3);
    background: linear-gradient(180deg, var(--sc-surface-3), #fff);
    border: 1px solid var(--sc-border);
}
.sc-empty-icon .sc-icon { width: 24px; height: 24px; }
.sc-empty-title { font-size: 15px; font-weight: 600; color: var(--sc-text); }
.sc-empty-text { margin-top: 4px; font-size: 13.5px; color: var(--sc-text-3); }

/* -------------------------------------------------------------------------
   17. LISTAS DE DATOS (detalle clave → valor)
   ------------------------------------------------------------------------- */
.sc-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; margin: 0; }
.sc-dl > div { padding: 14px 18px; border-bottom: 1px solid #edf1f6; }
.sc-dl dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-text-3); margin-bottom: 4px; }
.sc-dl dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--sc-text); overflow-wrap: anywhere; }
.sc-dl .is-wide { grid-column: 1 / -1; }

/* Barra de proporción (cupos, tasas) */
.sc-meter { position: relative; height: 8px; border-radius: 99px; background: #eef2f7; overflow: hidden; }
.sc-meter > span {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit;
    width: var(--v, 0%);
    background: linear-gradient(90deg, var(--sc-green-400), var(--sc-green-600));
    transform-origin: left;
    animation: sc-grow-x 1s var(--sc-ease-out) both;
}
.sc-meter.is-low > span { background: linear-gradient(90deg, #fb923c, #dc2626); }
.sc-meter.is-mid > span { background: linear-gradient(90deg, #fcd34d, #d97706); }

/* -------------------------------------------------------------------------
   18. OPERACIONES — pantalla compacta: datos, conteo, total y botón
       Guardar visibles a la vez, sin desplazarse (desde 1366 x 768).
   ------------------------------------------------------------------------- */
.sc-page.sc-ops { max-width: 1180px; }   /* ancho limitado: no se estira en pantallas grandes */

/* Tamaño según la pantalla: cuanto más grande y alta, más grande se ve toda la
   pantalla de Operaciones (campos, billetes, resumen). La ALTURA es lo que manda:
   cada escalón deja siempre unos 90 px libres, así que nunca hay que desplazarse.
   El TEXTO crece mucho menos que el resto (ver --f-* más abajo). */
.sc-ops { --ops-zoom: 1; zoom: var(--ops-zoom); }
.sc-main:has(.sc-ops) .sc-alerts { zoom: var(--ops-zoom, 1); }
@media (min-width: 1400px) and (min-height: 760px)  { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.1; } }
@media (min-width: 1500px) and (min-height: 820px)  { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.2; } }
@media (min-width: 1700px) and (min-height: 890px)  { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.3; } }
@media (min-width: 1900px) and (min-height: 930px)  { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.4; } }
@media (min-width: 2000px) and (min-height: 1000px) { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.5; } }
@media (min-width: 2200px) and (min-height: 1070px) { .sc-ops, .sc-main:has(.sc-ops) .sc-alerts { --ops-zoom: 1.6; } }

/* Tamaños de letra de esta pantalla (en px "reales", ya con el zoom aplicado):
   base + un pequeño aumento por cada 0,1 de zoom. Ej.: un campo pasa de 14,5 px
   (sin zoom) a solo 15,25 px (zoom 1,3) y 16 px (zoom 1,6). */
.sc-ops, .sc-main:has(.sc-ops) .sc-alerts {
    --f-ctl: 14.5px; --f-strong: 16px; --f-lbl: 12.5px; --f-hint: 11.5px; --f-btn: 15px; --f-btn-sm: 13px;
    --f-h1: 16px; --f-h2: 14.5px; --f-den: 13px; --f-den-in: 15px; --f-alert: 13.5px;
}
@supports (zoom: 1) {
    .sc-ops, .sc-main:has(.sc-ops) .sc-alerts {
        --f-ctl: calc((14.5px + (var(--ops-zoom, 1) - 1) * 2.5px) / var(--ops-zoom, 1));
        --f-strong: calc((16px + (var(--ops-zoom, 1) - 1) * 2.5px) / var(--ops-zoom, 1));
        --f-lbl: calc((12.5px + (var(--ops-zoom, 1) - 1) * 1.5px) / var(--ops-zoom, 1));
        --f-hint: calc((11.5px + (var(--ops-zoom, 1) - 1) * 1px) / var(--ops-zoom, 1));
        --f-btn: calc((15px + (var(--ops-zoom, 1) - 1) * 2px) / var(--ops-zoom, 1));
        --f-btn-sm: calc((13px + (var(--ops-zoom, 1) - 1) * 1px) / var(--ops-zoom, 1));
        --f-h1: calc((16px + (var(--ops-zoom, 1) - 1) * 2px) / var(--ops-zoom, 1));
        --f-h2: calc((14.5px + (var(--ops-zoom, 1) - 1) * 1.5px) / var(--ops-zoom, 1));
        --f-den: calc((13px + (var(--ops-zoom, 1) - 1) * 1.5px) / var(--ops-zoom, 1));
        --f-den-in: calc((15px + (var(--ops-zoom, 1) - 1) * 1.5px) / var(--ops-zoom, 1));
        --f-alert: calc((13.5px + (var(--ops-zoom, 1) - 1) * 1.5px) / var(--ops-zoom, 1));
    }
}

/* Menos espacio arriba y mensajes del sistema más compactos en esta pantalla */
.sc-main:has(.sc-ops) { padding-top: 14px; }
.sc-main:has(.sc-ops) .sc-alerts { max-width: 1180px; margin-bottom: 10px; gap: 8px; }
.sc-main:has(.sc-ops) .sc-alert { padding: 8px 12px; font-size: var(--f-alert); }
.sc-ops #tokenInput::placeholder { letter-spacing: normal; }

/* Campos: 2 columnas (1 en celular) con espacios cerrados */
.sc-ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
@media (max-width: 639.98px) { .sc-ops-grid { grid-template-columns: 1fr; } }

.sc-ops .sc-card-header { padding: 5px 14px; min-height: 34px; }
.sc-ops .sc-card-header h1 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--f-h1); font-weight: 600; letter-spacing: -.01em; color: var(--sc-text); }
.sc-ops .sc-card-header h1 .sc-icon, .sc-ops .sc-card-header h2 .sc-icon { color: var(--sc-green-600); }
.sc-ops .sc-card-header h2 { font-size: var(--f-h2); }
.sc-ops .sc-card-body { padding: 8px 14px 10px; }
.sc-ops .sc-label { margin-bottom: 2px; font-size: var(--f-lbl); line-height: 1.3; }
.sc-ops .sc-label-hint { font-size: var(--f-hint); }
.sc-label-hint { font-size: 11.5px; font-weight: 500; color: var(--sc-text-4); }
.sc-ops .sc-input, .sc-ops .sc-select { min-height: 36px; padding-top: 5px; padding-bottom: 5px; font-size: var(--f-ctl); border-radius: 9px; }
.sc-ops .sc-input-strong { font-size: var(--f-strong); font-weight: 700; letter-spacing: .01em; }
.sc-ops .sc-input-group > .sc-input-prefix { left: 12px; }
.sc-ops .sc-input-group > .sc-input-prefix .sc-icon { width: 16px; height: 16px; }
.sc-ops .sc-input-group > .sc-input { padding-left: 30px; }
.sc-ops .sc-alert { padding: 10px 12px; font-size: 13px; }
.sc-ops .sc-alert > .sc-icon { width: 18px; height: 18px; }
.sc-ops .sc-btn-lg { min-height: 44px; padding: 0 16px; font-size: var(--f-btn); }
.sc-ops .sc-btn-sm { font-size: var(--f-btn-sm); }
.sc-ops .sc-denom-value { font-size: var(--f-den); }
.sc-ops .sc-denom-ctrl input { font-size: var(--f-den-in); }

/* Conteo de efectivo: 12 denominaciones en 2 filas de 6 (3 por fila en celular) */
.sc-denoms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 639.98px) { .sc-denoms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-denom {
    position: relative;
    display: flex; flex-direction: column;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    transition: border-color var(--sc-dur-2), box-shadow var(--sc-dur-3) var(--sc-ease-out);
}
.sc-denom:hover { border-color: var(--sc-border-strong); box-shadow: var(--sc-shadow-sm); }
.sc-denom:focus-within { border-color: var(--sc-green-500); box-shadow: 0 0 0 3px var(--sc-primary-ring); }
.sc-denom.is-filled { border-color: var(--sc-green-400); background: linear-gradient(180deg, #f3fbf8, #fff 70%); box-shadow: 0 6px 16px -10px rgba(35, 127, 102, .6); }
.sc-denom-img {
    position: relative;
    height: 34px; display: grid; place-items: center;
    border-radius: 8px; overflow: hidden;
    background: var(--sc-surface-3);
    cursor: pointer;
}
.sc-denom-img img { max-height: 34px; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform var(--sc-dur-3) var(--sc-ease-out); }
.sc-denom:hover .sc-denom-img img { transform: scale(1.05); }
.sc-denom-coin .sc-denom-img img { max-height: 30px; border-radius: 50%; }
.sc-denom-label { margin-top: 2px; text-align: center; line-height: 1.2; }
.sc-denom-value { font-size: 13px; font-weight: 700; color: var(--sc-text); font-variant-numeric: tabular-nums; }
/* Subtotal (cantidad x denominación) sobre la imagen: no mueve la grilla */
.sc-denom-sub {
    position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
    padding: 1px 7px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; color: var(--sc-green-800); white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
.sc-denom-sub:empty { display: none; }
.sc-denom-ctrl { margin-top: 3px; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 3px; }
.sc-denom-ctrl button[type] {
    height: 24px; border-radius: 7px; display: grid; place-items: center;
    color: var(--sc-text-2); background-color: var(--sc-surface-3);
    border: 1px solid var(--sc-border);
    cursor: pointer;
    transition: background-color var(--sc-dur-2), color var(--sc-dur-2), transform var(--sc-dur-1);
}
.sc-denom-ctrl button[type]:hover { background-color: var(--sc-green-50); color: var(--sc-green-800); border-color: var(--sc-green-200); }
.sc-denom-ctrl button[type]:active { transform: scale(.92); }
.sc-denom-ctrl .sc-icon { width: 14px; height: 14px; }
.sc-denom-ctrl input {
    width: 100%; height: 24px; min-width: 0;
    text-align: center; font-size: 15px; font-weight: 700; color: var(--sc-text);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--sc-border-strong); border-radius: 8px;
    background: #fff;
    -moz-appearance: textfield;
}
.sc-denom-ctrl input::-webkit-outer-spin-button, .sc-denom-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-denom-ctrl input:focus { outline: none; border-color: var(--sc-green-500); }
.sc-denom-count {
    position: absolute; top: 3px; right: 3px; z-index: 1;
    min-width: 22px; height: 22px; padding: 0 6px;
    display: none; place-items: center;
    font-size: 11.5px; font-weight: 700; color: #fff;
    background: var(--sc-primary); border-radius: 99px;
    box-shadow: 0 3px 8px -2px rgba(35, 127, 102, .6);
}
.sc-denom.is-filled .sc-denom-count { display: grid; animation: sc-pop-in var(--sc-dur-3) var(--sc-ease-spring); }

/* Resumen de la operación (columna fija) */
.sc-summary { position: sticky; top: calc(var(--sc-topbar-h) + 12px); }
.sc-summary-total {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 14px 16px 15px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(79, 183, 150, .45), transparent 55%),
        linear-gradient(140deg, #141c5c, #0b1036);
}
.sc-summary-total::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.sc-summary-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9fe9cf; }
.sc-summary-amount { margin-top: 4px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-summary-amount small { font-size: 18px; font-weight: 500; color: #b8c0ea; margin-right: 4px; }
.sc-summary-rows { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 4px; font-size: 13px; color: #c7cdea; }
.sc-summary-rows div { display: flex; justify-content: space-between; gap: 12px; }
.sc-summary-rows span:last-child { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.sc-change {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid;
    animation: sc-pop-in var(--sc-dur-4) var(--sc-ease-spring);
}
.sc-change .sc-icon { width: 22px; height: 22px; flex-shrink: 0; }
.sc-change-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sc-change-amount { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sc-change-estimado { color: #1e3a8a; background: #eff6ff; border-color: #bfdbfe; }
.sc-change-estimado .sc-icon { color: #2563eb; }
.sc-change-confirmado {
    color: #fff; border-color: #15803d;
    background: linear-gradient(135deg, #16a34a, #237f66);
    box-shadow: 0 12px 26px -14px rgba(22, 163, 74, .75);
}

/* Número que "salta" al cambiar */
.sc-bump { animation: sc-bump .45s var(--sc-ease-spring); }

/* -------------------------------------------------------------------------
   19. PANTALLAS DE ACCESO (login)
   ------------------------------------------------------------------------- */
.sc-auth {
    position: relative;
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: 1.08fr 1fr;
    background: #f6f8fc;
}
.sc-auth-art {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 52px;
    color: #e6e9fb;
    background: linear-gradient(150deg, #121a58 0%, #0b1036 55%, #070a26 100%);
}
.sc-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(60px); opacity: .9; }
.sc-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.sc-aurora span:nth-child(1) { width: 55%; height: 55%; left: 5%; top: 8%; background: radial-gradient(circle, rgba(48, 155, 125, .85), transparent 65%); animation: sc-float-a 18s ease-in-out infinite; }
.sc-aurora span:nth-child(2) { width: 50%; height: 50%; right: 0; top: 30%; background: radial-gradient(circle, rgba(85, 96, 196, .9), transparent 65%); animation: sc-float-b 22s ease-in-out infinite; }
.sc-aurora span:nth-child(3) { width: 40%; height: 40%; left: 30%; bottom: 0; background: radial-gradient(circle, rgba(34, 211, 238, .45), transparent 65%); animation: sc-float-c 26s ease-in-out infinite; }
.sc-auth-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 40%, #000 20%, transparent 80%);
            mask-image: radial-gradient(75% 70% at 50% 40%, #000 20%, transparent 80%);
}
.sc-auth-brand { display: flex; align-items: center; gap: 12px; }
.sc-auth-brand img, .sc-auth-brand svg { height: 40px; width: auto; }
.sc-auth-headline { max-width: 520px; }
.sc-auth-headline h1 { margin: 18px 0 14px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.sc-auth-headline h1 em { font-style: normal; background: linear-gradient(90deg, #7fe7c4, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-auth-headline p { margin: 0; font-size: 16px; color: #aeb6e0; max-width: 46ch; }
.sc-auth-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px; border-radius: 99px;
    font-size: 12.5px; font-weight: 600; color: #c8f5e5;
    background: rgba(48, 155, 125, .16); border: 1px solid rgba(127, 231, 196, .25);
}
.sc-auth-pill .sc-icon { width: 16px; height: 16px; color: #7fe7c4; }
.sc-auth-features { display: grid; gap: 12px; margin-top: 30px; }
.sc-auth-feature {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 14px; color: #d6dbf5;
    animation: sc-fade-up .8s var(--sc-ease-out) both;
}
.sc-auth-feature:nth-child(2) { animation-delay: .12s; }
.sc-auth-feature:nth-child(3) { animation-delay: .24s; }
.sc-auth-feature .sc-icon { width: 20px; height: 20px; color: #7fe7c4; }
.sc-auth-feature strong { color: #fff; font-weight: 600; }
.sc-auth-legal { font-size: 12px; color: #7c86b8; display: flex; gap: 16px; flex-wrap: wrap; }

.sc-auth-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.sc-auth-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 70% 0%, rgba(48, 155, 125, .10), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(85, 96, 196, .08), transparent 70%);
}
.sc-auth-card {
    position: relative;
    width: 100%; max-width: 420px;
    animation: sc-fade-up .7s var(--sc-ease-out) both;
}
.sc-auth-card-logo { height: 54px; width: auto; margin-bottom: 26px; }
.sc-auth-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: var(--sc-text); }
.sc-auth-sub { margin: 8px 0 26px; font-size: 15px; color: var(--sc-text-3); }
.sc-auth-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--sc-border); font-size: 12.5px; color: var(--sc-text-4); display: flex; align-items: center; gap: 8px; }
.sc-auth-foot .sc-icon { width: 15px; height: 15px; color: var(--sc-green-600); }
.sc-link { color: var(--sc-green-700); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(35, 127, 102, .3); text-underline-offset: 3px; transition: color var(--sc-dur-2), text-decoration-color var(--sc-dur-2); }
.sc-link:hover { color: var(--sc-green-800); text-decoration-color: currentColor; }

@media (max-width: 1023.98px) {
    .sc-auth { grid-template-columns: 1fr; }
    .sc-auth-art { display: none; }
    .sc-auth-panel { min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 60% at 50% 0%, #e9f6f1, #f6f8fc 60%); }
}

/* -------------------------------------------------------------------------
   20. AVISO DE INACTIVIDAD / TOAST
   ------------------------------------------------------------------------- */
.sc-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 120;
    width: min(400px, calc(100vw - 32px));
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px;
    background: #0f1645; color: #e6e9fb;
    border-radius: 16px;
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid rgba(255, 255, 255, .08);
    animation: sc-toast-in var(--sc-dur-4) var(--sc-ease-out);
}
.sc-toast.hidden { display: none; }
.sc-toast .sc-icon { color: #fbbf24; width: 22px; height: 22px; }
.sc-toast-title { font-weight: 600; color: #fff; font-size: 14.5px; }
.sc-toast-text { font-size: 13.5px; color: #b7bfe4; margin-top: 2px; }
.sc-toast-actions { margin-top: 10px; display: flex; gap: 8px; }

/* -------------------------------------------------------------------------
   21. CARGANDO / SKELETON
   ------------------------------------------------------------------------- */
.sc-skeleton {
    position: relative; overflow: hidden;
    background: #eef2f7; border-radius: 12px;
}
.sc-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: translateX(-100%);
    animation: sc-shimmer 1.4s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   22. ENTRADA ESCALONADA DEL CONTENIDO
   ------------------------------------------------------------------------- */
.sc-reveal > * { animation: sc-fade-up 380ms var(--sc-ease-out) both; }
.sc-reveal > *:nth-child(1) { animation-delay: 0ms; }
.sc-reveal > *:nth-child(2) { animation-delay: 40ms; }
.sc-reveal > *:nth-child(3) { animation-delay: 80ms; }
.sc-reveal > *:nth-child(4) { animation-delay: 120ms; }
.sc-reveal > *:nth-child(5) { animation-delay: 160ms; }
.sc-reveal > *:nth-child(6) { animation-delay: 200ms; }
.sc-reveal > *:nth-child(n+7) { animation-delay: 220ms; }

/* -------------------------------------------------------------------------
   23. ANIMACIONES
   ------------------------------------------------------------------------- */
@keyframes sc-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-fade-out  { to { opacity: 0; transform: translateY(-4px); } }
@keyframes sc-fade-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sc-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sc-modal-in  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sc-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sc-pop-in    { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sc-bump      { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sc-ripple    { to { transform: scale(2.6); opacity: 0; } }
@keyframes sc-spin      { to { transform: rotate(360deg); } }
@keyframes sc-shimmer   { to { transform: translateX(100%); } }
@keyframes sc-marquee   { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes sc-grow-x    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .05); } }
@keyframes sc-shake     { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes sc-float-a   { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 10%) scale(1.12); } }
@keyframes sc-float-b   { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, -6%) scale(.92); } }
@keyframes sc-float-c   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6%, -12%); } }

/* Respeta "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .sc-ticker-move { padding-left: 16px; animation: none !important; flex-wrap: wrap; white-space: normal; }
    .sc-hero-orb, .sc-aurora span { animation: none !important; }
}

/* -------------------------------------------------------------------------
   24. IMPRESIÓN
   ------------------------------------------------------------------------- */
@media print {
    .sc-sidebar, .sc-topbar, .sc-sidebar-backdrop, .sc-footer, .sc-page-actions, .sc-progress, .sc-toast { display: none !important; }
    .sc-main { padding: 0; }
    .sc-card { box-shadow: none; border-color: #ccc; }
    body.sc-body { background: #fff; }
}