/* ==========================================================================
   Cierre de Caja · Liquid Glass — mismo lenguaje visual que citas-liquid-glass.css
   y mensajes-liquid-glass.css: vidrio real, ambiente de color detrás del panel,
   tarjetas uniformes de vidrio (un solo acento de color por tarjeta, no un
   borde de color distinto en cada una), animaciones por transform/opacity y
   curva de resorte estilo iOS/macOS. Siempre activo (no depende de ?boceto=glass).
   Aplica a #modal-cerrar-caja y #modal-cierres-caja.
   ========================================================================== */

#modal-cerrar-caja,
#modal-cierres-caja {
    --ccg-spring: cubic-bezier(.22, 1, .36, 1);
    --ccg-fast: .18s;
    --ccg-med: .28s;
}

#modal-cerrar-caja.modal-overlay,
#modal-cierres-caja.modal-overlay {
    background: rgba(10, 15, 30, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Vidrio real: el panel completo, bien translúcido para que el ambiente
   de color de detrás (::before) y el blur se noten de verdad ─────────────── */
#modal-cerrar-caja .modal-content,
#modal-cierres-caja .modal-content {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .42));
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 36px 70px -26px rgba(10, 15, 40, .5),
        0 12px 28px -14px rgba(10, 15, 40, .28);
    transition: box-shadow var(--ccg-med) var(--ccg-spring), transform var(--ccg-med) var(--ccg-spring);
}

/* Ambiente de color vívido detrás del vidrio — sin esto el blur no tiene
   nada que "revelar" y el panel se ve gris/plano en vez de vidrio. */
#modal-cerrar-caja .modal-content::before,
#modal-cierres-caja .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 6% -6%, rgba(99, 102, 241, .55), transparent 68%),
        radial-gradient(40% 36% at 104% 0%, rgba(56, 189, 248, .48), transparent 68%),
        radial-gradient(46% 40% at 100% 108%, rgba(217, 70, 239, .32), transparent 70%),
        radial-gradient(40% 36% at -4% 100%, rgba(220, 38, 38, .22), transparent 70%);
}

/* Barrido especular diagonal: la "línea de brillo" que hace que el vidrio se
   lea como vidrio y no como una tarjeta blanca translúcida cualquiera. */
#modal-cerrar-caja .modal-content::after,
#modal-cierres-caja .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 62%);
    opacity: .55;
    mix-blend-mode: screen;
}

#modal-cerrar-caja .modal-content > *,
#modal-cierres-caja .modal-content > * {
    position: relative;
    z-index: 1;
}

/* Cabecera: vidrio oscuro (segunda superficie grande permitida), no un
   rectángulo sólido navy — deja pasar el ambiente de color por debajo. */
#modal-cerrar-caja .modal-content > div:first-child,
#modal-cierres-caja .modal-dia-header-premium {
    background: linear-gradient(135deg, rgba(15, 23, 42, .82) 0%, rgba(30, 41, 59, .82) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ── Tarjetas de resumen: un único estilo de vidrio uniforme. El color
   semántico vive SOLO en el punto/ícono y en el valor, no en el fondo ni el
   borde de la tarjeta entera — evita el efecto "arcoíris". ─────────────── */
.cc-glass-card {
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform var(--ccg-med) var(--ccg-spring), box-shadow var(--ccg-med) var(--ccg-spring);
}

.cc-glass-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 20px -10px rgba(15, 23, 42, .18);
}

.cc-glass-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cc-glass-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cc-glass-value {
    display: block;
    margin-top: 3px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

#cierres-caja-resumen .cc-glass-card {
    display: block;
}

/* ── Diferencia: realce con resorte al cambiar de estado ─────────────────── */
#cc-diferencia-box {
    transition: background var(--ccg-med) var(--ccg-spring), border-color var(--ccg-med) var(--ccg-spring), transform var(--ccg-med) var(--ccg-spring);
}

/* ── Inputs/textarea: vidrio ligero, foco con resplandor índigo ──────────── */
#modal-cerrar-caja input,
#modal-cerrar-caja textarea,
#modal-cierres-caja input {
    background: rgba(255, 255, 255, .55) !important;
    transition: border-color var(--ccg-med) var(--ccg-spring), box-shadow var(--ccg-med) var(--ccg-spring), background var(--ccg-med) ease;
}

#cc-monto-contado:focus,
#cc-observacion:focus {
    background: rgba(255, 255, 255, .82) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15) !important;
}

/* ── Botones: curva de resorte + leve elevación en hover ──────────────────── */
#modal-cerrar-caja button,
#modal-cierres-caja button {
    transition: transform var(--ccg-med) var(--ccg-spring), box-shadow var(--ccg-med) var(--ccg-spring), background var(--ccg-med) ease;
}

#cc-btn-confirmar:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -8px rgba(220, 38, 38, .55);
}

#modal-cierres-caja .btn-header-dia:hover {
    transform: translateY(-1px);
}

/* Tabla: fila resaltada al pasar el mouse, sin blur (son muchas filas) */
#cierres-caja-tbody tr {
    transition: background var(--ccg-fast) ease;
}

#cierres-caja-tbody tr:hover {
    background: rgba(99, 102, 241, .08) !important;
}

/* ── Modo oscuro ───────────────────────────────────────────────────────────── */
[data-theme="dark"] #modal-cerrar-caja .modal-content,
[data-theme="dark"] #modal-cierres-caja .modal-content {
    background: linear-gradient(155deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .55));
    border-color: rgba(255, 255, 255, .16);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .1),
        0 36px 70px -26px rgba(0, 0, 0, .7);
}

[data-theme="dark"] .cc-glass-card {
    background: rgba(15, 23, 42, .42);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="dark"] .cc-glass-label {
    color: #94a3b8;
}

[data-theme="dark"] .cc-glass-value {
    color: #f1f5f9;
}

[data-theme="dark"] #cc-diferencia-box,
[data-theme="dark"] #modal-cerrar-caja input,
[data-theme="dark"] #modal-cerrar-caja textarea,
[data-theme="dark"] #modal-cierres-caja input {
    background: rgba(15, 23, 42, .5) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #f1f5f9;
}

/* Equipos de bajos recursos / "reducir movimiento": el blur es lo más caro —
   se apaga entero de una vez, el degradado y los bordes ya dan sensación de
   vidrio sin ese costo. */
@media (prefers-reduced-motion: reduce) {

    #modal-cerrar-caja .modal-content,
    #modal-cierres-caja .modal-content,
    #modal-cerrar-caja .modal-content > div:first-child,
    #modal-cierres-caja .modal-dia-header-premium,
    #modal-cerrar-caja.modal-overlay,
    #modal-cierres-caja.modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: none !important;
    }

    #modal-cerrar-caja .modal-content::after,
    #modal-cierres-caja .modal-content::after {
        display: none !important;
    }
}