/* ══════════════════════════════════════════════════════════════════════════
   Diseño «Cristal» de SaphirView (v0.75.0 · dos estilos desde v0.78.0)
   ──────────────────────────────────────────────────────────────────────────
   Glassmorfismo sobre ilustraciones de alta calidad (generadas con Gemini, WebP). Dos estilos:
   - Paisajes (azul, por defecto): wwwroot/img/themes/landscape-1..5.webp — montañas, lagos, nieve.
   - Perfumería (rojo Saphir, clase extra `glass-red`): wwwroot/img/themes/perfume-1..5.webp —
     frascos, lavanda, rosas, azahar y laboratorio en la gama del logo rojo
     del Grupo (granate, #E2001A, rosa y crema, con oro). Ver el bloque 9.
   Barra superior, menú lateral, tarjetas, tablas, diálogos y desplegables son
   cristal esmerilado con borde de luz.

   Va ENCIMA del diseño nuevo: <html> lleva `design-apple design-glass`, así que
   hereda su maquetación (apple.css) y aquí solo cambian materiales y colores.
   Sin la clase `design-glass` este fichero no hace nada.

   El fondo lo pintan dos capas fijas (#sv-scene-a / #sv-scene-b) que crea y
   alterna index.html (svDesign.applyScene), con fundido suave entre escenas.
   Siempre oscuro, sea cual sea el modo del sistema: el cristal claro sobre un
   paisaje no daría contraste suficiente al texto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
html.design-glass,
html.design-apple.design-glass {
    --glass-tint:           rgba(12, 24, 46, 0.52);
    --glass-tint-strong:    rgba(10, 20, 40, 0.74);
    --glass-edge:           rgba(255, 255, 255, 0.18);
    --glass-edge-hi:        rgba(255, 255, 255, 0.34);
    --glass-blur:           blur(22px) saturate(150%);

    --color-primary:        #8DB6EA;
    --color-primary-dark:   #B3CFF2;
    --color-primary-light:  rgba(141, 182, 234, 0.18);
    --color-accent:         #F0C993;
    --color-on-primary:     #0B1A2B;

    --color-success:        #6FD49A;
    --color-warning:        #F5BE66;
    --color-danger:         #FF8C80;
    --color-on-danger:      #1F0906;
    --color-on-warning:     #1F1300;

    --color-bg:             transparent;
    --color-surface:        var(--glass-tint);
    --color-surface-raised: var(--glass-tint-strong);
    --color-bg-hover:       rgba(255, 255, 255, 0.07);
    --color-fill:           rgba(255, 255, 255, 0.10);
    --color-fill-strong:    rgba(255, 255, 255, 0.16);

    --color-text:           #F2F5FA;
    --color-text-secondary: #C3CCDB;
    --color-text-tertiary:  #93A0B6;

    --color-border:         var(--glass-edge);
    --color-separator:      rgba(255, 255, 255, 0.12);

    --material-bar:         rgba(10, 20, 40, 0.55);
    --material-panel:       rgba(12, 24, 46, 0.80);

    --shadow-card:  0 18px 50px -24px rgba(0, 0, 0, 0.6);
    --shadow-float: 0 24px 60px -18px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
}

/* El <html> lleva el color de espera; el <body> tiene que ser transparente o taparía
   las capas del paisaje (z-index negativo, por debajo de los bloques del body). */
html.design-glass { background: #0b1a30 !important; color: var(--color-text); }
html.design-glass body { background: transparent !important; color: var(--color-text); }

/* ── 2. Fondo: dos capas que se funden ────────────────────────────────────── */
.sv-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
    pointer-events: none;
}
.sv-scene.is-on { opacity: 1; }
/* Velo muy ligero para que el cristal destaque sin apagar la ilustración. */
.sv-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(5, 11, 22, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 11, 22, 0.50), rgba(5, 11, 22, 0.18) 35%, rgba(5, 11, 22, 0.10) 60%, rgba(5, 11, 22, 0.25));
}
html:not(.design-glass) .sv-scene { display: none; }

/* El layout no tapa el fondo. */
.design-glass :is(.layout, .layout__body, .layout__content, .layout-loading) { background: transparent !important; }

/* ── 3. Materiales de cristal ─────────────────────────────────────────────── */
.design-glass :is(.topbar, .sidebar, .card, .detail-card, .home-card, .status-card, .dash-card,
                   .info-block, .no-access, .table-responsive, .modal, .profile-dropdown,
                   .notif-dropdown, .help-drawer, .multiselect__panel, .notif-toast,
                   .selection-bar, .chat, .precautions-card, .analysis, .project-filters) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)), var(--glass-tint) !important;
    border: 1px solid var(--glass-edge) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-edge-hi) !important;
    color: var(--color-text);
}
/* Lo que flota encima (diálogos, desplegables) va más opaco: se lee sobre cualquier cosa. */
.design-glass :is(.modal, .profile-dropdown, .notif-dropdown, .help-drawer, .multiselect__panel, .notif-toast) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)), var(--glass-tint-strong) !important;
    box-shadow: var(--shadow-float), inset 0 1px 0 var(--glass-edge-hi) !important;
}
.design-glass .topbar { border-width: 0 0 1px 0 !important; border-radius: 0; }
.design-glass .sidebar { border-width: 0 1px 0 0 !important; border-radius: 0; }
.design-glass :is(.card, .detail-card, .home-card, .status-card, .dash-card, .info-block, .table-responsive, .project-filters) { border-radius: 18px; }

/* Tarjetas dentro de tarjetas: sin doble cristal. */
.design-glass :is(.card, .detail-card, .modal) :is(.card, .detail-card, .info-block, .table-responsive) {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none !important;
}

/* Fondos de diálogo y desplegables. */
.design-glass :is(.modal-backdrop, .profile-backdrop, .help-backdrop) {
    background: rgba(5, 11, 22, 0.45) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── 4. Tablas ────────────────────────────────────────────────────────────── */
.design-glass .data-table { background: transparent !important; color: var(--color-text); }
.design-glass .data-table :is(th, td) { border-color: rgba(255, 255, 255, 0.09) !important; background: transparent !important; }
.design-glass .data-table thead th { color: var(--color-text-secondary); background: rgba(255, 255, 255, 0.05) !important; }
.design-glass .data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.06) !important; }
.design-glass .row-selected td { background: rgba(141, 182, 234, 0.14) !important; }

/* ── 5. Campos y botones ──────────────────────────────────────────────────── */
.design-glass :is(.field, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: var(--color-text) !important;
}
.design-glass :is(.field, input, select, textarea):focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(141, 182, 234, 0.25) !important;
}
.design-glass ::placeholder { color: var(--color-text-tertiary) !important; }
.design-glass select option { background: #12233f; color: #f2f5fa; }

/* Botón principal: pastilla blanca, como en la pantalla de entrada. */
.design-glass .btn-primary {
    background: linear-gradient(180deg, #ffffff, #e6ecf5) !important;
    color: #13233d !important;
    border: 0 !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}
.design-glass .btn-primary:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.design-glass .btn-secondary {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--color-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.design-glass .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16) !important; }
.design-glass .btn-link { color: var(--color-primary) !important; }

/* ── 6. Menú lateral y barra superior ─────────────────────────────────────── */
.design-glass .navmenu__item { color: var(--color-text-secondary); }
.design-glass .navmenu__item:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-text); }
.design-glass .navmenu__item.active,
.design-glass .navmenu__item[aria-current="page"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.design-glass :is(.topbar__logo, .login-card__logo) { filter: brightness(0) invert(1); }
.design-glass :is(.page-title, h1, h2, h3) { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.design-glass :is(.page-lead, .detail-hint, .detail-label) { color: var(--color-text-secondary); }
/* Texto suelto sobre el paisaje (fuera del cristal): sombra para leerse también en los claros. */
.design-glass .page-header :is(.page-lead, p, span, label) { color: #eef2f8; text-shadow: 0 1px 8px rgba(5, 11, 22, 0.55); }

/* Pastillas y estados: un poco de cristal también. */
.design-glass .badge {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.design-glass .segmented { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.design-glass .segmented__item.is-selected { background: rgba(255, 255, 255, 0.18); color: #fff; }
.design-glass .form-alert { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ── 7. Selector de paisaje (menú del avatar) ─────────────────────────────── */
.scene-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0.35rem 0.75rem 0.25rem; }
.scene-picker__item {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.scene-picker__item:hover { transform: translateY(-1px); }
.scene-picker__item.is-selected { border-color: var(--color-accent, #f0c993); }
.scene-picker__cycle {
    grid-column: 1 / -1;
    min-height: 28px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
.scene-picker__cycle.is-selected { border-style: solid; border-color: var(--color-accent, #f0c993); color: var(--color-text); }

/* ── 8. Accesibilidad ─────────────────────────────────────────────────────── */
/* Quien pide menos transparencia: cristal opaco. */
@media (prefers-reduced-transparency: reduce) {
    .design-glass :is(.topbar, .sidebar, .card, .detail-card, .home-card, .status-card, .dash-card, .info-block,
                       .table-responsive, .modal, .profile-dropdown, .notif-dropdown, .help-drawer, .multiselect__panel) {
        background: #12233f !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sv-scene { transition: none; }
}
/* Sin desenfoque de fondo (navegadores antiguos): cristal más opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.design-glass { --glass-tint: rgba(12, 24, 46, 0.88); --glass-tint-strong: rgba(10, 20, 40, 0.95); }
}

/* ── 9. Estilo Perfumería: rojo Saphir (html.design-glass.glass-red) ──────── */
html.design-glass.glass-red {
    --glass-tint:           rgba(42, 8, 16, 0.50);
    --glass-tint-strong:    rgba(34, 6, 13, 0.78);
    --color-primary:        #FFA9B0;
    --color-primary-dark:   #FFC7CB;
    --color-primary-light:  rgba(255, 169, 176, 0.18);
    --color-on-primary:     #3A0D17;
    --color-text-secondary: #E6C9CB;
    --color-text-tertiary:  #BB9497;
    --material-bar:         rgba(34, 6, 13, 0.55);
    --material-panel:       rgba(42, 8, 16, 0.82);
    background: #2a0a10 !important;
}
.glass-red .sv-scene::after {
    background:
        radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(30, 4, 10, 0.35) 100%),
        linear-gradient(180deg, rgba(30, 4, 10, 0.55), rgba(30, 4, 10, 0.20) 35%, rgba(30, 4, 10, 0.10) 60%, rgba(30, 4, 10, 0.25));
}
.glass-red :is(.modal-backdrop, .profile-backdrop, .help-backdrop) { background: rgba(30, 4, 10, 0.45) !important; }
.glass-red :is(.field, input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(255, 169, 176, 0.28) !important; }
.glass-red select option { background: #3a0d17; color: #fbeee6; }
.glass-red .btn-primary { color: #b0001a !important; background: linear-gradient(180deg, #ffffff, #f7eaea) !important; }
.glass-red .row-selected td { background: rgba(255, 169, 176, 0.14) !important; }
.glass-red .page-header :is(.page-lead, p, span, label) { text-shadow: 0 1px 8px rgba(30, 4, 10, 0.6); }
.glass-red .navmenu__item.active,
.glass-red .navmenu__item[aria-current="page"] { background: linear-gradient(180deg, rgba(226, 0, 26, 0.45), rgba(226, 0, 26, 0.22)); }
@media (prefers-reduced-transparency: reduce) {
    .glass-red :is(.topbar, .sidebar, .card, .detail-card, .home-card, .status-card, .dash-card, .info-block,
                   .table-responsive, .modal, .profile-dropdown, .notif-dropdown, .help-drawer, .multiselect__panel) { background: #3a0d17 !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.design-glass.glass-red { --glass-tint: rgba(42, 8, 16, 0.88); --glass-tint-strong: rgba(34, 6, 13, 0.95); }
}