/* ============================================================================
   GLASS DESIGN SYSTEM — Capa de rediseño visual del CRM
   ----------------------------------------------------------------------------
   - Se carga DESPUÉS de styles.css y de /dynamic-styles.css (colores de BD).
   - Aditiva: no requiere cambios en los templates.

   ARQUITECTURA DE COMPATIBILIDAD (importante):
   En CSS, una declaración que contiene var() y una función no soportada
   (p.ej. color-mix en Chrome < 111, como los TPV Android) NO cae al valor
   anterior de la cascada: se vuelve 'initial' (= fondo TRANSPARENTE).
   Por eso esta capa define:
     1) Tokens BASE con valores estáticos seguros (legibles siempre).
     2) Un bloque @supports (color-mix) que los enriquece con tintes de marca.
   REGLA: ningún color-mix() puede vivir fuera de un @supports.
   ============================================================================ */

:root {
    /* ---- Tokens glass BASE (sin color-mix: válidos en cualquier navegador) */
    --glass-bg: rgba(255, 255, 255, 0.80);          /* superficies ligeras */
    --glass-bg-strong: rgba(255, 255, 255, 0.92);   /* tarjetas */
    --glass-panel: rgba(255, 255, 255, 0.96);       /* modales / dropdowns */
    --glass-field: rgba(255, 255, 255, 0.90);       /* inputs */
    --glass-row: rgba(255, 255, 255, 0.86);         /* filas / ítems */
    --glass-soft: rgba(255, 255, 255, 0.70);        /* chips suaves */
    --glass-veil: rgba(255, 255, 255, 0.60);        /* overlay de carga */
    --glass-border: rgba(60, 50, 40, 0.14);
    --glass-input-border: rgba(60, 50, 40, 0.22);
    --glass-highlight: rgba(255, 255, 255, 0.65);
    --glass-tint: rgba(60, 50, 40, 0.05);
    --glass-hover: rgba(60, 50, 40, 0.07);
    --glass-shadow:
        0 1px 1px rgb(0 0 0 / 0.03),
        0 8px 24px -12px rgb(40 30 20 / 0.30);
    --glass-shadow-lift:
        0 2px 4px rgb(0 0 0 / 0.04),
        0 18px 40px -16px rgb(40 30 20 / 0.38);
    --glass-blur: saturate(160%) blur(16px);

    /* Radios más generosos */
    --radius-sm: 0.55rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.15rem;

    /* Curva de animación tipo Apple */
    --ease-glass: cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* Tokens enriquecidos con los colores de marca del cliente (BD) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --glass-bg: color-mix(in srgb, var(--surface-color) 72%, transparent);
        --glass-bg-strong: color-mix(in srgb, var(--surface-color) 88%, transparent);
        --glass-panel: color-mix(in srgb, var(--surface-color) 93%, transparent);
        --glass-field: color-mix(in srgb, var(--surface-color) 86%, transparent);
        --glass-row: color-mix(in srgb, var(--surface-color) 76%, transparent);
        --glass-soft: color-mix(in srgb, var(--surface-color) 62%, transparent);
        --glass-veil: color-mix(in srgb, var(--background-color) 55%, transparent);
        --glass-border: color-mix(in srgb, var(--primary-color) 18%, transparent);
        --glass-input-border: color-mix(in srgb, var(--text-muted) 35%, transparent);
        --glass-tint: color-mix(in srgb, var(--primary-color) 6%, transparent);
        --glass-hover: color-mix(in srgb, var(--primary-color) 12%, transparent);
        --glass-shadow:
            0 1px 1px rgb(0 0 0 / 0.03),
            0 8px 24px -12px color-mix(in srgb, var(--primary-dark) 35%, transparent);
        --glass-shadow-lift:
            0 2px 4px rgb(0 0 0 / 0.04),
            0 18px 40px -16px color-mix(in srgb, var(--primary-dark) 45%, transparent);
    }
}

/* ============================== FONDO ===================================== */

body {
    background-color: var(--background-color);
}

/* Tintes radiales de marca: solo donde color-mix existe (si no, fondo plano) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            radial-gradient(1100px 600px at 85% -10%,
                color-mix(in srgb, var(--gradient-start) 14%, transparent), transparent 60%),
            radial-gradient(900px 700px at -10% 100%,
                color-mix(in srgb, var(--gradient-end) 10%, transparent), transparent 55%),
            radial-gradient(700px 500px at 50% 50%,
                color-mix(in srgb, var(--secondary-color) 4%, transparent), transparent 70%);
    }

    ::selection {
        background: color-mix(in srgb, var(--primary-color) 30%, transparent);
    }

    * {
        scrollbar-color: color-mix(in srgb, var(--primary-color) 35%, transparent) transparent;
    }
    *::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--primary-color) 30%, transparent);
    }
    *::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--primary-color) 50%, transparent);
    }
}

/* Scrollbars finos (estructura, válida siempre) */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(60, 50, 40, 0.25); }

/* ============================== HEADER ==================================== */

header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px -12px rgba(40, 30, 20, 0.25);
}

.header-icon-btn,
.logout-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.25s var(--ease-glass);
}

.logout-btn:hover { background: rgba(231, 76, 60, 0.12); }

.breadcrumbs a {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    transition: all 0.2s var(--ease-glass);
}
.breadcrumbs a:hover {
    background: var(--glass-tint);
    text-decoration: none;
}

/* ============================== TARJETAS ================================== */

/* ┌──────────────────────────────────────────────────────────────────────────┐
   │ POR QUE EL GLASS DE LAS TARJETAS VA EN UN ::before                       │
   │                                                                          │
   │ backdrop-filter crea un STACKING CONTEXT. Cuando estaba en la tarjeta,   │
   │ cualquier elemento FLOTANTE de dentro (desplegable, popup, tooltip...)   │
   │ quedaba ATRAPADO en su capa: su z-index dejaba de valer globalmente (lo  │
   │ tapaban las tarjetas siguientes o los overlays colgados de <body>) y un  │
   │ position:fixed hijo se anclaba a la TARJETA, no al viewport. Provoco     │
   │ tres bugs en produccion: el calendario de fecha del CRM, los filtros de  │
   │ contabilidad y el datepicker.                                            │
   │                                                                          │
   │ Solucion: el fondo translucido + blur viven en una capa interna          │
   │ (::before, inset:0, z-index:-1). El efecto se ve IDENTICO, pero la       │
   │ tarjeta ya NO crea stacking context, asi que los flotantes de dentro se  │
   │ comportan con normalidad. NO devolver el backdrop-filter a la tarjeta.   │
   │                                                                          │
   │ Los flotantes propios siguen usando el patron portal (montarse en <body> │
   │ al abrir): js/calendar-picker.js, js/custom-select.js, js/contabilidad.js│
   │ Es cinturon y tirantes: con esto ambos son robustos por separado.        │
   └──────────────────────────────────────────────────────────────────────────┘ */
.card,
.admin-category,
.info-card,
.status-card {
    /* El fondo lo pinta el ::before (ver aviso). position:relative es su
       referencia y, SIN z-index, no crea stacking context. */
    position: relative;
    background: transparent;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.35s var(--ease-glass), transform 0.35s var(--ease-glass);
}

.card::before,
.admin-category::before,
.info-card::before,
.status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;                 /* detras del contenido de la tarjeta */
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: inherit;      /* respeta las esquinas de la tarjeta */
    pointer-events: none;
}

.category-header { border-bottom: 1px solid var(--glass-border); }

/* Botones-icono del panel admin.
   Van como "btn btn-primary admin-btn": .btn.admin-btn gana a .btn-primary
   por especificidad, independientemente del orden del archivo. */
.btn.admin-btn {
    background: var(--glass-bg);
    background-image: none;
    color: var(--primary-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: all 0.28s var(--ease-glass);
}
.btn.admin-btn:hover {
    background: var(--glass-hover);
    background-image: none;
    color: var(--primary-dark);
    border-color: var(--glass-input-border);
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-lift);
}
.btn.admin-btn:active { transform: translateY(-1px) scale(0.98); }

/* Tarjetas del dashboard de inicio */
.index-card,
.index-card-alt {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s var(--ease-glass);
}
.index-card:hover,
.index-card-alt:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-lift);
    border-color: var(--glass-input-border);
}
.index-card:active,
.index-card-alt:active { transform: translateY(-1px) scale(0.99); }

/* ============================== BOTONES =================================== */

.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.25s var(--ease-glass);
    position: relative;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 16px -8px rgba(40, 30, 20, 0.50);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(0.94);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 10px 22px -10px rgba(40, 30, 20, 0.60);
}

.btn-secondary {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-input-border);
}
.btn-secondary:hover { background: var(--glass-hover); }

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 35%, transparent);
    }
}

/* ============================== FORMULARIOS =============================== */

.form-control {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-input-border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s var(--ease-glass), box-shadow 0.2s var(--ease-glass);
}
.form-control:focus { border-color: var(--input-border-focus); }

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .form-control:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 25%, transparent);
    }
}

/* ============================== MODALES =================================== */

.modal-overlay {
    background-color: rgb(15 12 10 / 0.45);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

.modal-content {
    background: var(--glass-panel);
    -webkit-backdrop-filter: saturate(170%) blur(22px);
    backdrop-filter: saturate(170%) blur(22px);
    border: 1px solid var(--glass-highlight);
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow:
        0 1px 0 var(--glass-highlight) inset,
        0 30px 70px -25px rgba(20, 15, 10, 0.65);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.35s var(--ease-glass);
}
.modal-overlay.show .modal-content { transform: scale(1) translateY(0); }

.modal-header {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: calc(var(--radius-lg) + 4px) calc(var(--radius-lg) + 4px) 0 0;
}

.modal-btn { border-radius: var(--radius-md); transition: all 0.22s var(--ease-glass); }
.modal-btn:active { transform: scale(0.97); }

/* ============================== ALERTS / TOASTS =========================== */

.alert {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-highlight);
    box-shadow: var(--glass-shadow-lift);
    animation: glassSlideIn 0.4s var(--ease-glass);
}

@keyframes glassSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================== TABLAS ==================================== */

.table-container {
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
}
.table-container table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    /* No usar solo --text-muted sobre fondo claro: contraste ~1.1:1 (ilegible).
       --primary-dark (#6B5A4B) garantiza >=4.5:1 sobre el glass claro. */
    color: var(--primary-dark, #6B5A4B);
}
.table-container table tbody tr {
    transition: background-color 0.18s var(--ease-glass);
}
.table-container table tbody tr:hover { background-color: var(--glass-tint); }

/* ============================== LOADING =================================== */

.loading-overlay {
    background: var(--glass-veil);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ====================== PALETA DE COMANDOS (Ctrl+K) ======================= */

.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s var(--ease-glass);
}
.cmdk-trigger:hover {
    border-color: var(--glass-input-border);
    color: var(--primary-dark);
    box-shadow: var(--glass-shadow);
}
.cmdk-trigger kbd {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--text-muted);
}
@media (max-width: 860px) {
    .cmdk-trigger span, .cmdk-trigger kbd { display: none; }
    .cmdk-trigger { width: 38px; height: 38px; justify-content: center; padding: 0; }
}

/* En móvil pequeño mobile-fixes.css oculta .header-center entero (botones
   kiosco). Re-mostramos solo la lupa del buscador, que es icono compacto. */
@media (max-width: 480px) {
    .header-center { display: flex !important; }
    .header-center .btn { display: none; }
    .user-greeting { display: none; }
    .cmdk-overlay { padding-top: 8vh; }
}

.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgb(15 12 10 / 0.40);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity 0.25s var(--ease-glass);
}
.cmdk-overlay.open { display: flex; }
.cmdk-overlay.visible { opacity: 1; }

.cmdk-panel {
    width: 100%;
    max-width: 580px;
    border-radius: 20px;
    background: var(--glass-panel);
    -webkit-backdrop-filter: saturate(170%) blur(24px);
    backdrop-filter: saturate(170%) blur(24px);
    border: 1px solid var(--glass-highlight);
    box-shadow:
        0 1px 0 var(--glass-highlight) inset,
        0 40px 90px -30px rgb(0 0 0 / 0.5);
    overflow: hidden;
    transform: scale(0.96) translateY(-8px);
    transition: transform 0.3s var(--ease-glass);
}
.cmdk-overlay.visible .cmdk-panel { transform: scale(1) translateY(0); }

.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.cmdk-input-row i { color: var(--text-muted); font-size: 1rem; }
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.05rem;
    font-family: inherit;
    color: var(--text-color);
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-esc {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 3px 7px;
    background: var(--glass-bg);
}

.cmdk-list {
    max-height: min(420px, 55vh);
    overflow-y: auto;
    padding: 8px;
}

.cmdk-section {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 10px 12px 4px;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-color);
    transition: background-color 0.12s ease;
}
.cmdk-item .cmdk-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--primary-dark);
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
}
.cmdk-item .cmdk-label { flex: 1; font-size: 0.95rem; font-weight: 500; }
.cmdk-item .cmdk-hint { font-size: 0.72rem; color: var(--text-muted); }
.cmdk-item.active { background: var(--glass-hover); }
.cmdk-item.active .cmdk-ico {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    border-color: transparent;
}

.cmdk-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 36px 16px;
    font-size: 0.92rem;
}
.cmdk-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; opacity: 0.5; }

.cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 10px 20px;
    border-top: 1px solid var(--glass-border);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.cmdk-footer kbd {
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    padding: 1px 5px;
    background: var(--glass-bg);
    margin-right: 4px;
}

/* ============================== FALLBACKS ================================= */

/* Navegadores sin backdrop-filter: superficies sólidas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header, .card, .admin-category, .info-card, .status-card,
    .index-card, .index-card-alt, .btn-secondary, .modal-content,
    .cmdk-panel, .cmdk-trigger, .alert, .btn.admin-btn {
        background: var(--surface-color);
    }
}

/* Accesibilidad: respetar reduce-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}