/**
 * PHOTOPLANNER PLUS - BUNDLE MADRE CSS v1.0
 * Bundle unificado de estilos
 * Generado automáticamente - No editar manualmente
 */


/* ============================================================================ */
/* MAIN.CSS */
/* ============================================================================ */

/* --- PALETAS DE COLORES Y VARIABLES GLOBALES --- */
/* FIX: Global Box Sizing to prevent padding overflow */
*,
*:before,
*:after {
    box-sizing: border-box;
}

:root {
    --bg-main: #F4F7F6;
    --bg-container: #FFFFFF;
    --bg-card: #F8F9FA;
    --text-primary: #212529;
    --text-secondary: #6C757D;
    --accent: #4facfe;
    /* Color naranja principal */
    --accent-hover: #00c6fb;
    /* Naranja más oscuro para hover */
    --border-color: #DEE2E6;
    --shadow-color: rgba(0, 0, 0, 0.05);

    /* Variables de color para avisos (adaptadas del CSS original) */
    --success-bg: #d1e7dd;
    --success-text: #0f5132;
    --success-border: #badbcc;
    --warning-bg: #fff3cd;
    --warning-text: #664d03;
    --warning-border: #ffecb5;
    --tip-bg: #cff4fc;
    --tip-text: #055160;
    /* Azul/Cyan para consejos, usable para foco */
    --tip-border: #b6effb;
    --diffraction-bg: #f8d7da;
    --diffraction-text: #58151a;
    --diffraction-border: #f1aeb5;
    --camera-icon-width: 40px;

    /* == NUEVO: Colores específicos para marcadores == */
    --marker-focus-color: var(--tip-text);
    /* Azul/Cyan */
    --marker-subject-color: var(--text-primary);
    /* Negro */
    --marker-limit-color: var(--accent);
    /* Naranja */
}

html.dark-theme {
    --bg-main: #121212;
    --bg-container: #1E1E1E;
    --bg-card: #2A2A2A;
    --text-primary: #EAEAEA;
    --text-secondary: #B0B0B0;
    --border-color: #444444;
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Variables de color para avisos en modo oscuro */
    --success-bg: #142c23;
    --success-text: #75b798;
    --success-border: #2d624a;
    --warning-bg: #3b321b;
    --warning-text: #ffdc73;
    --warning-border: #806b21;
    --tip-bg: #11323c;
    --tip-text: #6edff6;
    /* Azul/Cyan claro para consejos/foco */
    --tip-border: #1a7288;
    --diffraction-bg: #3e1a1d;
    --diffraction-text: #f1aeb5;
    --diffraction-border: #8c2a32;

    /* == NUEVO: Colores marcadores modo oscuro == */
    --marker-focus-color: var(--tip-text);
    /* Azul/Cyan claro */
    --marker-subject-color: var(--text-primary);
    /* Blanco */
    --marker-limit-color: var(--accent);
    /* Naranja (mismo) */
}

/* --- ESTILOS GENERALES Y DE CABECERA --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    padding: 15px;
    margin: 0;
    transition: background-color 0.3s ease, opacity 0.2s ease-in;
}

.container {
    background: var(--bg-container);
    padding: 30px 40px;
    padding-top: calc(30px + env(safe-area-inset-top));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow-color);
    max-width: 1100px;
    width: 95%;
    transition: background-color 0.3s ease;
    margin: 20px auto;
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.header-left,
.header-right {
    flex-basis: 150px;
}

.header-left {
    display: flex;
    justify-content: flex-start;
}

.header-right {
    display: flex;
    justify-content: flex-end;
}

.back-button {
    text-decoration: none;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.back-button:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.title-container {
    flex-grow: 1;
}

h1 {
    color: var(--text-primary);
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.tool-header p {
    font-size: 1.1em;
    color: var(--text-secondary);
    margin: 5px auto 0 auto;
    max-width: 500px;
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-label {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--accent);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* --- ESTILOS FREEMIUM: CARACTERÍSTICAS BLOQUEADAS --- */
.locked-feature {
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    position: relative;
}

.locked-feature:hover {
    opacity: 0.6 !important;
}

.lock-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.2em;
    z-index: 10;
    pointer-events: none;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 991px) {
    .container {
        padding: 20px;
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    .tool-header {
        flex-direction: column;
        gap: 20px;
    }

    .header-left,
    .header-right {
        flex-basis: auto;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .results-summary {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* --- AR MODE TRANSPARENCY --- */
body.ar-active,
body.ar-active html {
    background-color: transparent !important;
}

body.ar-active .container {
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* Almost transparent */
    box-shadow: none !important;
    backdrop-filter: blur(2px);
    /* Slight blur to help legibility */
}

html.dark-theme body.ar-active .container {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* --- AR MODE CRITICAL STYLES (GHOST MODE) --- */
html.ar-active,
body.ar-active {
    background-color: transparent !important;
    background: transparent !important;
}

/* CRÍTICO: Cuando AR está activo, las tarjetas se vuelven cristal */
body.ar-active .container,
body.ar-active #app,
body.ar-active .card,
body.ar-active .panel,
body.ar-active .input-group,
body.ar-active fieldset {
    background-color: rgba(0, 0, 0, 0.25) !important;
    /* Semitransparente oscuro */
    backdrop-filter: blur(2px);
    /* Efecto vidrio opcional */
    transition: background-color 0.5s ease;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Asegurar que los textos sigan siendo blancos/legibles */
body.ar-active * {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    color: #fff !important;
    /* Forzar blanco para contraste sobre cámara */
}

/* Excepción para inputs para que se vea lo que escribes */
body.ar-active input,
body.ar-active select {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
}

#btn-measure-trigger svg .st0 {
    fill: var(--text-color, #333);
    /* Ensure icon adapts to theme */
}

#btn-measure-trigger svg .st0 {
    fill: var(--text-color, #333);
    /* Ensure icon adapts to theme */
}

/* Update visualizer text and lines color in AR mode for better contrast if needed ? */

html.dark-theme body.ar-active fieldset {
    background-color: rgba(30, 30, 30, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
}

body.ar-active .tool-header {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

html.dark-theme body.ar-active .tool-header {
    background-color: rgba(30, 30, 30, 0.85);
}

body.ar-active .results-summary,
body.ar-active .visualizer-wrapper {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 15px;
}

html.dark-theme body.ar-active .results-summary,
html.dark-theme body.ar-active .visualizer-wrapper {
    background-color: rgba(30, 30, 30, 0.9);
}

/* --- MEASURING MODE (UI HIDDEN) --- */
body.measuring-active .container,
body.measuring-active header,
body.measuring-active .tool-header {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

body.measuring-active {
    background: transparent !important;
}

/* Stop/Done Button styles */
#stop-measuring-btn {
    display: none;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent, #007bff);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

body.measuring-active #stop-measuring-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* --- TRUE DARK MODE (CONCERTS) --- */
html.true-dark-mode {
    --bg-main: #000000;
    --bg-container: #000000;
    --bg-card: #080808;
    --text-primary: #cc3333;
    /* Rojo tenue pero legible */
    --text-secondary: #882222;
    --accent: #ff0000;
    --border-color: #441111;
    --shadow-color: rgba(200, 0, 0, 0.1);

    /* Avisos adaptados a rojo */
    --warning-bg: #220505;
    --warning-text: #ff5555;
    --warning-border: #661111;

    --tip-bg: #1a0505;
    --tip-text: #ff7777;
    --tip-border: #551111;

    --success-bg: #051a05;
    /* Mantener verde muy oscuro para éxito */
    --success-text: #33cc33;
    --success-border: #114411;

    --marker-focus-color: #ff0000;
    --marker-subject-color: #cc3333;
    --marker-limit-color: #aa0000;
}

html.true-dark-mode body {
    background-color: #000000 !important;
}

html.true-dark-mode .container {
    border: 1px solid #330000;
    background-color: #000000 !important;
}

html.true-dark-mode input,
html.true-dark-mode select,
html.true-dark-mode textarea {
    background-color: #110000 !important;
    color: #ff4444 !important;
}

/* Fix Back Button in Night Mode */
html.true-dark-mode body .container .header-left .back-button,
html.true-dark-mode header.modern-header .header-logo .back-button-modern,
html.true-dark-mode .back-button,
html.true-dark-mode .back-button-modern {
    background-color: #1a0505 !important;
    color: #ff3333 !important;
    border-color: #661111 !important;
    box-shadow: none !important;
}

html.true-dark-mode body .container .header-left .back-button:hover,
html.true-dark-mode .back-button:hover,
html.true-dark-mode .back-button-modern:hover {
    background-color: #330000 !important;
    color: #ff0000 !important;
    border-color: #aa1111 !important;
}

html.true-dark-mode h1,
html.true-dark-mode h2,
html.true-dark-mode h3,
html.true-dark-mode strong,
html.true-dark-mode b {
    color: #ff3333 !important;
}

.suggestion-text {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--accent);
}

html.true-dark-mode .suggestion-text {
    color: #ff5555;
}

/* Fix Right Column (Results) in Night Mode */
html.true-dark-mode .results-summary,
html.true-dark-mode .panel,
html.true-dark-mode .visualizer-wrapper,
html.true-dark-mode .floating-card {
    background-color: #080808 !important;
    border-color: #441111 !important;
    color: #cc3333 !important;
}

html.true-dark-mode .result-item label {
    color: #882222 !important;
}

html.true-dark-mode .result-item .value {
    color: #ff3333 !important;
}

/* Fix Theme Switch in Night Mode */
html.true-dark-mode .slider {
    background-color: #330000 !important;
    border-color: #660000 !important;
}

html.true-dark-mode .slider:before {
    background-color: #cc3333 !important;
}

html.true-dark-mode input:checked+.slider {
    background-color: #660000 !important;
}

html.true-dark-mode input:checked+.slider:before {
    background-color: #ff0000 !important;
}

/* === GEAR BAG: Selector de Idioma Compacto === */
.language-badge-wrapper {
    margin-top: 10px;
}

.language-badge {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85em;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236C757D' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.language-badge:hover {
    background: var(--bg-main);
    border-color: var(--accent);
}

.language-badge:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === GEAR BAG: Botón Principal === */
.gear-bag-button {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 18px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.gear-bag-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.gear-bag-button:active {
    transform: translateY(0);
}

.gear-bag-icon {
    font-size: 2em;
    line-height: 1;
}

.gear-bag-content {
    flex: 1;
    text-align: left;
}

.gear-bag-title {
    font-size: 1.1em;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.gear-bag-count {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
}

.gear-bag-arrow {
    font-size: 1.5em;
    color: white;
    opacity: 0.8;
    transition: transform 0.2s ease;
}

.gear-bag-button:hover .gear-bag-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* Dark theme adjustments */
html.dark-theme .language-badge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23B0B0B0' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
}

html.true-dark-mode .tool-header p {
    color: #993333;
}

/* ============================================================================ */
/* FORM.CSS */
/* ============================================================================ */

/* --- FORMULARIO --- */
.calculator-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 992px) {
    .calculator-body {
        grid-template-columns: 40% 1fr;
    }
}

fieldset {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px 20px 10px 20px;
    margin-bottom: 20px;
    background-color: var(--bg-container);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

fieldset:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px var(--shadow-color);
}

fieldset:has(.custom-select-wrapper.open) {
    z-index: 50;
}

legend {
    font-weight: 600;
    color: var(--accent);
    padding: 0 10px;
    font-size: 1.1em;
    background-color: var(--bg-container);
    position: relative;
    top: -5px;
    left: -10px;
    transition: background-color 0.3s ease;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid .full-width {
        grid-column: 1 / -1;
    }
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1em;
    color: var(--text-primary);
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-main);
    color: var(--text-primary);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    transition: border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.25);
}

.input-with-unit {
    display: flex;
    align-items: center;
}

.input-with-unit input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-with-unit span {
    padding: 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    color: var(--text-secondary);
    font-size: 1em;
}

select,
.custom-select-wrapper input {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
}

html.dark-theme select,
html.dark-theme .custom-select-wrapper input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B0B0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.custom-select-wrapper {
    position: relative;
}

.custom-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.custom-select-wrapper.open .custom-options {
    display: block;
}

.custom-select-wrapper.open-up .custom-options {
    top: auto;
    bottom: calc(100% + 5px);
}

.custom-options .option-item {
    padding: 10px 12px;
    cursor: pointer;
}

.custom-options .option-item:hover {
    background-color: var(--accent);
    color: white;
}

html.dark-theme .custom-options .option-item:hover {
    color: var(--text-primary);
}

.button-group,
.segmented-control {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Force Teleconverter to a single row */
#tc-group-container .segmented-control {
    flex-wrap: nowrap;
    gap: 6px;
}

#tc-group-container .segmented-control button {
    padding: 10px 2px;
    font-size: 0.85em;
    min-width: 0;
    white-space: nowrap;
}

.choice-button,
.segmented-control button {
    flex-grow: 1;
    padding: 12px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.choice-button::before,
.segmented-control button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.button-group .choice-button:hover,
.segmented-control button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

.button-group .choice-button.active,
.segmented-control button.active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.85) 0%, rgba(79, 172, 254, 0.7) 100%) !important;
    color: white !important;
    border: 1px solid rgba(79, 172, 254, 0.8) !important;
    box-shadow:
        0 0 14px rgba(79, 172, 254, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.button-group .choice-button.active::before,
.segmented-control button.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 60%, rgba(255, 255, 255, 0.1) 100%) !important;
}

.action-button {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    background-color: var(--accent);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}

.action-button:hover {
    background-color: var(--accent-hover);
}

hr.divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 30px 0 20px 0;
}

/* Estilos de Conciertos (Relacionados a Form) */
.form-group.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.form-group.is-disabled input {
    background-color: var(--bg-main);
}

.label-with-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* <-- TAREA 4 REVISADA (Mejora UI) */
    margin-bottom: 8px;
}

.label-with-info label {
    margin-bottom: 0;
    /* Anula el margen del .form-group label */
}

.fallback-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 10px;
    margin-bottom: 0;
}

.fallback-list li {
    margin-bottom: 5px;
}

.fallback-button {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fallback-button:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* --- AVISOS --- */
.notice {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border: 1px solid;
    text-align: left;
}

.notice>span {
    width: 100%;
}

/* ===== INICIO TAREA 2: Modificación .notice.good ===== */
.notice.good {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
    /* Estilos añadidos */
    border-left-width: 5px;
    border-left-color: var(--success-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html.dark-theme .notice.good {
    /* Estilos añadidos */
    border-left-color: var(--success-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== FIN TAREA 2 ===== */

.notice.warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}

.notice.tip {
    background-color: var(--tip-bg);
    color: var(--tip-text);
    border-color: var(--tip-border);
}

/* --- ESTILOS PARA AVISOS CON SUGERENCIA --- */
.notice .suggestion {
    display: block;
    margin-top: 8px;
}

.notice .suggestion-value {
    font-weight: 700;
    font-size: 1.4em;
    color: var(--text-primary);
    white-space: nowrap;
}

html.dark-theme .notice .suggestion-value {
    color: var(--text-primary);
}

.info-button {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
    border-radius: 50%;
    border: none;
    background-color: var(--warning-border);
    color: var(--warning-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.2s ease;
}

.info-button:hover {
    background-color: var(--accent);
    color: white;
}

.info-button svg {
    width: 22px;
    height: 22px;
}

.hidden {
    display: none !important;
}

.is-visible {
    display: flex !important;
}

/* ========================== INICIO CORRECCIÓN Bug 1 (Apertura Apilada) ========================== */
/* --- Ajuste Estético para Rango de Apertura Recomendada --- */
#sharp-face-result {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra el contenido */
    flex-wrap: nowrap;
    /* Evita que los elementos salten a la siguiente línea */
    gap: 8px;
    /* Reduce un poco el espacio entre etiqueta y valor */
}

#sharp-face-result span {
    /* La etiqueta "Apertura Recomendada:" */
    width: auto;
    flex-shrink: 0;
    /* Evita que la etiqueta se encoja */
}

#sharp-face-aperture {
    /* El valor "f/8 - f/16" */
    white-space: nowrap;
    /* Asegura que el valor (ej. f/1.4 - f/16) no se parta */
    font-size: 1.2em;
    /* Mantiene el tamaño destacado */
    font-weight: 700;
}

/* =========================== FIN CORRECCIÓN Bug 1 (Apertura Apilada) ============================ */

/* ============================================================================ */
/* VISUALIZER.CSS */
/* ============================================================================ */

/* --- RESULTADOS Y VISUALIZADOR --- */
.results-container {
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    text-align: center;
    margin-bottom: 25px;
}

.summary-item .label {
    display: block;
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.summary-item .value {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary);
}

.visualizer-wrapper {
    position: relative;
    padding-bottom: 55px;
    min-height: 125px;
}

.dof-visualizer {
    position: relative;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.camera-icon {
    font-size: 2.5em;
    width: var(--camera-icon-width);
    height: 100%;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    /* SVG optimizado y encodeado, con fill='%236C757D' (color --text-secondary) */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 462 462" xmlns="http://www.w3.org/2000/svg" fill="%236C757D"><path d="M454.5 119c-4 0-7.3 3.2-7.5 7.2H288.7c-.3 0-.6 0-.9.1-.1 0-.1 0-.2.1-.2 0-.4.1-.6.1-.1 0-.1 0-.1.1l-23.4 5.8c-4.9 1.2-8.7 4.8-10.3 9.4l-23.9 4c-9.8 1.6-17.4 8.3-19.5 16.6h-7.3v-21h28.5c8.1 0 14.7-6.6 14.7-14.7v-10.6c0-9.9-6.7-18.6-16.3-21.2l-60.9-16.2c-24.9-6.6-50.5-10-76.2-10H60.7c-9.1 0-17.3 5.7-20.5 14.2l-18.1 48.3c0 .1-.1.1-.1.1-.1.2-.1.4-.2.6 0 .1-.1.2-.1.2-.1.2-.1.4-.1.7 0 .1 0 .1-.1.2-.1.3 0 .5 0 .8v35.8h-6.9C6.6 169.4 0 176 0 184.1v158.6c0 8.1 6.6 14.7 14.7 14.7h6.9c.2 19.9 16.4 36 36.3 36h108.1c20 0 36.3-16.3 36.3-36.3v-21.3h7.3c2.2 8.3 9.7 15 19.5 16.6l23.9 4c1.6 4.5 5.4 8.1 10.3 9.4l23.4 5.8c.1 0 .1 0 .1.1.2 0 .4.1.6.1.1 0 .1 0 .2.1.3 0 .6.1.9.1h158.3c.2 4 3.4 7.2 7.5 7.2 4.1 0 7.5-3.4 7.5-7.5V126.5c0-4.2-3.4-7.5-7.5-7.5zM317.5 299.2c-4.1 0-7.5 3.4-7.5 7.5v50.2h-13.8v-73.1c2.6 1 5.5 1.6 8.5 1.6h25.7c13 0 23.5-10.5 23.5-23.5v-25.7c0-13-10.5-23.5-23.5-23.5h-25.7c-3 0-5.9.6-8.5 1.6v-73.1H310v50.2c0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5v-50.2h49.9V356.9H325v-50.2c0-4.1-3.4-7.5-7.5-7.5zM296.2 236.2c0-4.7 3.8-8.5 8.5-8.5h25.7c4.7 0 8.5 3.8 8.5 8.5v25.7c0 4.7-3.8 8.5-8.5 8.5h-25.7c-4.7 0-8.5-3.8-8.5-8.5v-25.7zM389.9 241.5v-13.8h28.3v13.8h-28.3zM418.1 256.5v13.8h-28.3v-13.8h28.3zM389.9 212.7v-13.8h28.3v13.8h-28.3zM389.9 285.3h28.3v13.8h-28.3v-13.8zM418.1 183.8h-28.3V170h28.3v13.8zM389.9 314.2h28.3v13.8h-28.3v-13.8zM418.1 155h-28.3v-13.8h28.3V155zM389.9 343h28.3v13.8h-28.3V343zM433.1 141.2h13.8V356.9h-13.8V141.2zM54.3 88c1-2.7 3.6-4.5 6.5-4.5h31.5c24.4 0 48.8 3.2 72.4 9.5l60.9 16.2c3 0.8 5.1 3.6 5.1 6.7v10.3H130.3v-6.9c0-12.1-9.8-21.9-21.9-21.9H86.8c-12.1 0-21.9 9.8-21.9 21.9v6.9H39.9L54.3 88zM79.9 126.2v-6.9c0-3.8 3.1-6.9 6.9-6.9h21.6c3.8 0 6.9 3.1 6.9 6.9v6.9H79.9zM15 184.4h6.6v158H15v-158zM36.6 357.2V141.2h42.7v64.3H65.2c-8.1 0-14.7 6.6-14.7 14.7v79.3c0 8.1 6.6 14.7 14.7 14.7h14.1v64.3H58C46.2 378.5 36.6 368.9 36.6 357.2zM65.5 299.2v-78.7h43c3.8 0 6.9 3.1 6.9 6.9v64.9c0 3.8-3.1 6.9-6.9 6.9h-43zM187.4 357.2c0 11.8-9.6 21.3-21.3 21.3H94.3v-64.3h14.1c12.1 0 21.9-9.8 21.9-21.9v-64.9c0-12.1-9.8-21.9-21.9-21.9H94.3v-64.3h93.1v216.1zM202.4 177.2h6.6v143.6h-6.6V177.2zM224.1 330.9V167.1c0-3.1 3.3-6 7.6-6.7l20.6-3.4v184.2l-20.6-3.4c-4.3-0.7-7.6-3.6-7.6-6.7zM267.3 350v-7.2V155.3v-7.2v-1.4l13.8-3.5v92.9v25.7v92.9l-13.8-3.5V350zM310.3 256.5h14.4c4.1 0 7.5-3.4 7.5-7.5s-3.4-7.5-7.5-7.5h-14.4c-4.1 0-7.5 3.4-7.5 7.5S306.1 256.5 310.3 256.5zM94 234.3c-4.1 0-7.5 3.4-7.5 7.5v36c0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5v-36C101.5 237.7 98.2 234.3 94 234.3z"/></svg>');
}

html.dark-theme .camera-icon {
    /* SVG optimizado y encodeado, con fill='%23B0B0B0' (color --text-secondary dark) */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 462 462" xmlns="http://www.w3.org/2000/svg" fill="%23B0B0B0"><path d="M454.5 119c-4 0-7.3 3.2-7.5 7.2H288.7c-.3 0-.6 0-.9.1-.1 0-.1 0-.2.1-.2 0-.4.1-.6.1-.1 0-.1 0-.1.1l-23.4 5.8c-4.9 1.2-8.7 4.8-10.3 9.4l-23.9 4c-9.8 1.6-17.4 8.3-19.5 16.6h-7.3v-21h28.5c8.1 0 14.7-6.6 14.7-14.7v-10.6c0-9.9-6.7-18.6-16.3-21.2l-60.9-16.2c-24.9-6.6-50.5-10-76.2-10H60.7c-9.1 0-17.3 5.7-20.5 14.2l-18.1 48.3c0 .1-.1.1-.1.1-.1.2-.1.4-.2.6 0 .1-.1.2-.1.2-.1.2-.1.4-.1.7 0 .1 0 .1-.1.2-.1.3 0 .5 0 .8v35.8h-6.9C6.6 169.4 0 176 0 184.1v158.6c0 8.1 6.6 14.7 14.7 14.7h6.9c.2 19.9 16.4 36 36.3 36h108.1c20 0 36.3-16.3 36.3-36.3v-21.3h7.3c2.2 8.3 9.7 15 19.5 16.6l23.9 4c1.6 4.5 5.4 8.1 10.3 9.4l23.4 5.8c.1 0 .1 0 .1.1.2 0 .4.1.6.1.1 0 .1 0 .2.1.3 0 .6.1.9.1h158.3c.2 4 3.4 7.2 7.5 7.2 4.1 0 7.5-3.4 7.5-7.5V126.5c0-4.2-3.4-7.5-7.5-7.5zM317.5 299.2c-4.1 0-7.5 3.4-7.5 7.5v50.2h-13.8v-73.1c2.6 1 5.5 1.6 8.5 1.6h25.7c13 0 23.5-10.5 23.5-23.5v-25.7c0-13-10.5-23.5-23.5-23.5h-25.7c-3 0-5.9.6-8.5 1.6v-73.1H310v50.2c0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5v-50.2h49.9V356.9H325v-50.2c0-4.1-3.4-7.5-7.5-7.5zM296.2 236.2c0-4.7 3.8-8.5 8.5-8.5h25.7c4.7 0 8.5 3.8 8.5 8.5v25.7c0 4.7-3.8 8.5-8.5 8.5h-25.7c-4.7 0-8.5-3.8-8.5-8.5v-25.7zM389.9 241.5v-13.8h28.3v13.8h-28.3zM418.1 256.5v13.8h-28.3v-13.8h28.3zM389.9 212.7v-13.8h28.3v13.8h-28.3zM389.9 285.3h28.3v13.8h-28.3v-13.8zM418.1 183.8h-28.3V170h28.3v13.8zM389.9 314.2h28.3v13.8h-28.3v-13.8zM418.1 155h-28.3v-13.8h28.3V155zM389.9 343h28.3v13.8h-28.3V343zM433.1 141.2h13.8V356.9h-13.8V141.2zM54.3 88c1-2.7 3.6-4.5 6.5-4.5h31.5c24.4 0 48.8 3.2 72.4 9.5l60.9 16.2c3 0.8 5.1 3.6 5.1 6.7v10.3H130.3v-6.9c0-12.1-9.8-21.9-21.9-21.9H86.8c-12.1 0-21.9 9.8-21.9 21.9v6.9H39.9L54.3 88zM79.9 126.2v-6.9c0-3.8 3.1-6.9 6.9-6.9h21.6c3.8 0 6.9 3.1 6.9 6.9v6.9H79.9zM15 184.4h6.6v158H15v-158zM36.6 357.2V141.2h42.7v64.3H65.2c-8.1 0-14.7 6.6-14.7 14.7v79.3c0 8.1 6.6 14.7 14.7 14.7h14.1v64.3H58C46.2 378.5 36.6 368.9 36.6 357.2zM65.5 299.2v-78.7h43c3.8 0 6.9 3.1 6.9 6.9v64.9c0 3.8-3.1 6.9-6.9 6.9h-43zM187.4 357.2c0 11.8-9.6 21.3-21.3 21.3H94.3v-64.3h14.1c12.1 0 21.9-9.8 21.9-21.9v-64.9c0-12.1-9.8-21.9-21.9-21.9H94.3v-64.3h93.1v216.1zM202.4 177.2h6.6v143.6h-6.6V177.2zM224.1 330.9V167.1c0-3.1 3.3-6 7.6-6.7l20.6-3.4v184.2l-20.6-3.4c-4.3-0.7-7.6-3.6-7.6-6.7zM267.3 350v-7.2V155.3v-7.2v-1.4l13.8-3.5v92.9v25.7v92.9l-13.8-3.5V350zM310.3 256.5h14.4c4.1 0 7.5-3.4 7.5-7.5s-3.4-7.5-7.5-7.5h-14.4c-4.1 0-7.5 3.4-7.5 7.5S306.1 256.5 310.3 256.5zM94 234.3c-4.1 0-7.5 3.4-7.5 7.5v36c0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5v-36C101.5 237.7 98.2 234.3 94 234.3z"/></svg>');
}

.dof-bar {
    position: absolute;
    height: 100%;
    background-color: rgba(79, 172, 254, 0.2);
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    z-index: 1;
    transition: left 0.4s ease, width 0.4s ease;
}

.subject {
    position: absolute;
    width: 40px;
    height: 50px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: left 0.4s ease;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* TAREA 4 REVISADA (Punto 2): Estilo para el icono del cielo en astro-paisaje */
#astro-sky-icon {
    /* Usa la misma clase base .subject pero se posicionará de forma diferente en ui-visualizer.js */
    z-index: 2;
    /* Detrás del marcador de primer plano */
    opacity: 0.7;
}

/* ========================== INICIO CORRECCIÓN Bug 1 (Desalineación Icono) ========================== */
/* Corrige la alineación del icono en el modo fallback de Conciertos */
.subject.fallback-align {
    transform: translate(0, -50%);
    /* Anula el centrado horizontal */
}

/* =========================== FIN CORRECCIÓN Bug 1 (Desalineación Icono) ============================ */

.subject-icon-sharp {
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s ease, background-image 0.3s ease;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.distance-markers {
    position: relative;
    width: calc(100% - var(--camera-icon-width));
    height: 55px;
    margin-left: var(--camera-icon-width);
    box-sizing: border-box;
    z-index: 2;
}

/* REGLAS DE MARCADOR (corregidas para apilamiento) */
.marker {
    position: absolute;
    bottom: 0;
    /* <-- Base en 0 */
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    color: var(--text-secondary);
    transition: left 0.4s ease;
    white-space: nowrap;
    transform: translateX(-50%);
    /* Centrado por defecto */
}

.marker::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1px;
    height: 8px;
    background-color: currentColor;
    margin-bottom: 4px;
    align-self: center;
}

.marker.subject-marker,
.marker.marker-focus {
    color: var(--marker-focus-color);
    /* Color azul/cyan */
    font-weight: 600;
    z-index: 4;
    bottom: 25px;
    /* <-- Elevado */
}

.marker.marker-limit {
    color: var(--marker-limit-color);
    /* Color naranja */
    font-weight: 600;
    z-index: 3;
    /* Se queda en bottom: 0; */
}

.marker.marker-focus::before,
.marker.marker-subject-dist::before,
.marker.marker-limit::before {
    height: 10px;
}

.marker.align-left {
    transform: translateX(1px);
    align-items: flex-start;
}

.marker.align-left::before {
    left: 0;
    transform: none;
    align-self: flex-start;
}

.marker.align-right {
    transform: translateX(calc(-100% - 1px));
    align-items: flex-end;
}

.marker.align-right::before {
    left: auto;
    right: 0;
    transform: none;
    align-self: flex-end;
}

/* Fin de reglas de marcador */

#group-visualizer {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.group-row {
    position: absolute;
    width: 25px;
    height: 40px;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
}

.group-row svg path {
    fill: var(--text-primary);
}

/* Iconos de Grupo */
.dof-bar::before,
.dof-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.dof-bar::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-card), transparent);
}

.dof-bar::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-card), transparent);
}

.dof-bar.overflow-left::before,
.dof-bar.overflow-right::after {
    opacity: 1;
}

#focus-mode-visualizer {
    position: relative;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.focus-subject-bg,
.focus-subject-sharp {
    width: 120px;
    height: 150px;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.focus-subject-sharp {
    transition: clip-path 0.4s ease;
}

.marker.focus-mode-marker {
    position: absolute;
    left: 50%;
    /* Centrado horizontalmente por defecto */
    bottom: -30px;
    font-weight: 600;
    transition: none;
    transform: translateX(-50%);
    /* Asegura centrado perfecto */
}

.marker.focus-mode-marker::before {
    height: 10px;
}

#focus-mode-visualizer .camera-icon {
    height: 60px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    width: 60px;
    background-size: 50px;
}

.zone-bar {
    position: absolute;
    height: 10px;
    background-color: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    transition: left 0.4s ease, width 0.4s ease;
    display: none;
    /* Oculto por defecto */
}

#street-zone-assistant.active .zone-bar {
    display: block;
    /* Visible cuando el asistente está activo */
}

#required-zone-bar {
    position: absolute;
    height: 10px;
    background-color: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    transition: left 0.4s ease, width 0.4s ease;
    display: none;
    /* Oculto por defecto */
}

/* --- HIPERFOCAL, BOTONES Y AVISOS --- */
.hyperfocal-section {
    margin-top: 10px;
    padding: 15px;
    background-color: var(--bg-main);
    border-radius: 8px;
    text-align: center;
}

.hyperfocal-section .label {
    font-weight: 600;
    color: var(--text-primary);
}

.hyperfocal-section .value {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--accent);
}

.hyperfocal-section p {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 5px 0 0 0;
}

.tips-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 12px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background-color: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 15px;
}

.tips-button:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.tips-button.warning {
    border-color: var(--warning-text);
    color: var(--warning-text);
    background-color: var(--warning-bg);
}

.tips-button.warning:hover {
    background-color: var(--warning-text);
    color: var(--bg-container);
}

#alerts-count-badge {
    background-color: var(--warning-text);
    color: #ffffff !important;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.8em;
    font-weight: 700;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

html.dark-theme .tips-button.warning {
    color: var(--warning-text);
    background-color: var(--warning-bg);
    border-color: var(--warning-text);
}

html.dark-theme .tips-button.warning:hover {
    background-color: var(--warning-text);
    color: var(--bg-main);
}

html.dark-theme #alerts-count-badge {
    background-color: var(--warning-text);
    color: #ffffff !important;
}

/* --- ESTILO PARA ELEVAR MARCADOR --- */
.marker.raised-subject-marker {
    bottom: 25px;
    /* Eleva el marcador del protagonista en el escenario 'Imposible' */
}

/* --- ESTILOS DE ALINEACIÓN DE MARCADORES (Modificado para Mejor Precisión) --- */
/* Base del marcador */
/* La sección de abajo es una anulación de la corrección anterior, ya que el original (script-original.js) usa estas reglas. */
.marker {
    position: absolute;
    bottom: 0;
    /* <-- CORRECCIÓN (1. Base en 0) */
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    color: var(--text-secondary);
    transition: left 0.4s ease;
    /* Transición solo para left */
    white-space: nowrap;
    /* Eliminar transform inicial */
}

/* Línea vertical (::before) - Posicionada Absolutamente */
.marker::before {
    content: '';
    position: absolute;
    /* Posicionamiento absoluto */
    bottom: 100%;
    /* Justo encima del texto */
    left: 50%;
    /* Centrada horizontalmente por defecto */
    transform: translateX(-50%);
    /* Centra la línea */
    display: block;
    width: 1px;
    height: 8px;
    /* Altura base */
    background-color: currentColor;
    margin-bottom: 4px;
    /* Espacio entre línea y texto */
}

/* Alineación Derecha (para marcadores izquierdos) */
.marker.align-right {
    text-align: right;
    transform: translateX(calc(-100% - 1px));
}

.marker.align-right::before {
    left: auto;
    right: 0;
    transform: none;
}

/* Alineación Izquierda (para marcadores derechos) */
.marker.align-left {
    text-align: left;
    transform: translateX(1px);
}

.marker.align-left::before {
    left: 0;
    transform: none;
}

/* Alineación Central (Default, y para foco) */
.marker:not(.align-left):not(.align-right),
.marker.marker-focus:not(.align-left):not(.align-right) {
    text-align: center;
    transform: translateX(-50%);
}

.marker.marker-focus:not(.align-left):not(.align-right)::before {
    left: 50%;
    /* Asegura que la línea del foco esté centrada */
    transform: translateX(-50%);
}

/* Clases de color (sin cambios) */
/* 2. Elevar SOLO los marcadores de foco (copiado de script-original.js) */
.marker.marker-focus {
    color: var(--marker-focus-color);
    font-weight: 600;
    z-index: 4;
    bottom: 25px;
    /* <-- ESTA ES LA CORRECCIÓN (2. Elevar Foco) */
}

.marker.marker-subject-dist {
    color: var(--marker-subject-color);
    font-weight: 600;
    z-index: 4;
}

.marker.marker-limit {
    color: var(--marker-limit-color);
    font-weight: 600;
    z-index: 4;
}

/* Altura de línea y posición vertical (sin cambios) */
.marker.marker-focus::before,
.marker.marker-subject-dist::before,
.marker.marker-limit::before {
    height: 10px;
}

.marker.marker-reference-dist {
    color: var(--text-secondary);
}

/* ==== FIN MODIFICACIÓN MARCADORES ==== */
/* --- ICONOS SVG --- */
html.dark-theme .subject.portrait-mode,
html.dark-theme .focus-subject-bg.portrait-mode {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.87 28.87"><g transform="scale(-1, 1) translate(-28.87, 0)"><path fill="%23B0B0B0" d="M7.14 21.85 6.78 28.87h10.14l.78-3.23c0 0 .44.74 3.06.96 2.62.22 2.3-2.98 2.3-2.98s1.74-.77 1.74-1.34c0-.58-1.03-1.32-1.03-1.32s1.1.2 1.52-.27c.4-.46-.49-2.15-.49-2.15s1.37-.04 2.17-.92c.81-.89-2.54-3.51-2.54-5.2 1.89-9.27-5.64-13.51-14-12.18C4.06 2.56 3.75 7.62 3.25 10c-1.17 6.42 3.89 11.85 3.89 11.85z"/></g></svg>');
}

.subject.portrait-mode,
.focus-subject-bg.portrait-mode {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.87 28.87"><g transform="scale(-1, 1) translate(-28.87, 0)"><path fill="%236C757D" d="M7.14 21.85 6.78 28.87h10.14l.78-3.23c0 0 .44.74 3.06.96 2.62.22 2.3-2.98 2.3-2.98s1.74-.77 1.74-1.34c0-.58-1.03-1.32-1.03-1.32s1.1.2 1.52-.27c.4-.46-.49-2.15-.49-2.15s1.37-.04 2.17-.92c.81-.89-2.54-3.51-2.54-5.2 1.89-9.27-5.64-13.51-14-12.18C4.06 2.56 3.75 7.62 3.25 10c-1.17 6.42 3.89 11.85 3.89 11.85z"/></g></svg>');
}

.subject-icon-sharp.portrait-mode,
.focus-subject-sharp.portrait-mode {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.87 28.87"><g transform="scale(-1, 1) translate(-28.87, 0)"><path fill="%23ff9f0a" d="M7.14 21.85 6.78 28.87h10.14l.78-3.23c0 0 .44.74 3.06.96 2.62.22 2.3-2.98 2.3-2.98s1.74-.77 1.74-1.34c0-.58-1.03-1.32-1.03-1.32s1.1.2 1.52-.27c.4-.46-.49-2.15-.49-2.15s1.37-.04 2.17-.92c.81-.89-2.54-3.51-2.54-5.2 1.89-9.27-5.64-13.51-14-12.18C4.06 2.56 3.75 7.62 3.25 10c-1.17 6.42 3.89 11.85 3.89 11.85z"/></g></svg>');
}

html.dark-theme .subject.product-mode,
html.dark-theme .focus-subject-bg.product-mode {
    background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g fill="%23B0B0B0" transform="translate(64, 34.34)"><path d="M192 0L384 110.851L384 332.554L192 443.405L0 332.554L0 110.851L192 0z M127.999 206.918L128 357.189L170.667 381.824L170.667 231.552L127.999 206.918z M42.667 157.653L42.667 307.92L85.333 332.555L85.333 182.286L42.667 157.653z M275.991 97.759L150.413 170.595L192 194.606L317.867 121.936L275.991 97.759z M192 49.267L66.133 121.936L107.795 145.989L233.374 73.154L192 49.267z"/></g></svg>');
}

.subject.product-mode,
.focus-subject-bg.product-mode {
    background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g fill="%236C757D" transform="translate(64, 34.34)"><path d="M192 0L384 110.851L384 332.554L192 443.405L0 332.554L0 110.851L192 0z M127.999 206.918L128 357.189L170.667 381.824L170.667 231.552L127.999 206.918z M42.667 157.653L42.667 307.92L85.333 332.555L85.333 182.286L42.667 157.653z M275.991 97.759L150.413 170.595L192 194.606L317.867 121.936L275.991 97.759z M192 49.267L66.133 121.936L107.795 145.989L233.374 73.154L192 49.267z"/></g></svg>');
}

.subject-icon-sharp.product-mode,
.focus-subject-sharp.product-mode {
    background-image: url('data:image/svg+xml;utf8,<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g fill="%23ff9f0a" transform="translate(64, 34.34)"><path d="M192 0L384 110.851L384 332.554L192 443.405L0 332.554L0 110.851L192 0z M127.999 206.918L128 357.189L170.667 381.824L170.667 231.552L127.999 206.918z M42.667 157.653L42.667 307.92L85.333 332.555L85.333 182.286L42.667 157.653z M275.991 97.759L150.413 170.595L192 194.606L317.867 121.936L275.991 97.759z M192 49.267L66.133 121.936L107.795 145.989L233.374 73.154L192 49.267z"/></g></svg>');
}

html.dark-theme .subject.macro-mode,
html.dark-theme .focus-subject-bg.macro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" fill="%23B0B0B0"><path d="M458.821,257.622c-1.322-2.99-4.023-5.144-7.232-5.77c-3.208-0.628-6.521,0.357-8.87,2.63L247.928,443.069V283.313c61.615-0.425,106.163-17.01,132.407-49.337c33.414-41.159,24.335-92.408,23.354-97.377C387.68,30.667,359.456,7.981,356.288,5.742c-4.123-2.913-9.766-2.297-13.164,1.433l-54.049,59.334L245.789,7.964c-1.846-2.497-4.746-3.994-7.85-4.053c-0.064-0.001-0.128-0.002-0.191-0.002c-3.034,0-5.908,1.378-7.808,3.752l-45.813,57.244L131.43,3.489c-1.832-2.136-4.48-3.4-7.293-3.484c-2.813-0.088-5.531,1.022-7.486,3.046c-44.65,46.202-46.105,127.606-46.143,134.894c-0.4,5.721-2.702,55.47,34.174,95.669c27.388,29.856,68.796,46.391,123.246,49.264v159.741L38.863,254.578c-2.305-2.292-5.575-3.32-8.782-2.759c-3.201,0.563-5.931,2.646-7.315,5.587c-0.665,1.411-16.234,35.066-12.081,79.362c2.449,26.128,11.253,50.535,26.165,72.54c18.382,27.127,46.087,50.526,82.346,69.547c1.433,0.752,3.027,1.145,4.646,1.145h230.104c1.618,0,3.213-0.393,4.646-1.145c36.228-19.005,64.107-42.376,82.866-69.463c15.21-21.963,24.453-46.325,27.472-72.408C474.054,292.705,459.445,259.034,458.821,257.622z M126.325,460c-58.341-31.204-90.518-72.995-95.645-124.241c-2.313-23.119,1.636-43.244,5.269-55.873L217.042,460H126.325z M119.61,220.302c-32.451-35.187-29.176-80.677-29.141-81.107c0.025-0.292,0.038-0.585,0.037-0.879c-0.001-0.742,0.279-70.015,33.313-112.985l52.987,61.753c1.939,2.26,4.773,3.549,7.76,3.487c2.977-0.051,5.776-1.426,7.637-3.75l45.231-56.517l42.795,57.883c1.779,2.406,4.542,3.889,7.53,4.042c2.986,0.153,5.889-1.04,7.903-3.252l54.622-59.964c8.219,12.21,23.4,42.73,33.663,110.813c0.029,0.189,0.063,0.377,0.103,0.564c0.095,0.455,9.225,45.913-19.243,80.98c-22.605,27.845-62.744,41.963-119.303,41.963C188.301,263.332,145.944,248.855,119.61,220.302z M448.958,335.563c-6.268,51.34-39.063,93.195-97.496,124.438h-92.27l185.941-180.018C448.405,292.636,451.758,312.624,448.958,335.563z"/></svg>');
}

.subject.macro-mode,
.focus-subject-bg.macro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" fill="%236C757D"><path d="M458.821,257.622c-1.322-2.99-4.023-5.144-7.232-5.77c-3.208-0.628-6.521,0.357-8.87,2.63L247.928,443.069V283.313c61.615-0.425,106.163-17.01,132.407-49.337c33.414-41.159,24.335-92.408,23.354-97.377C387.68,30.667,359.456,7.981,356.288,5.742c-4.123-2.913-9.766-2.297-13.164,1.433l-54.049,59.334L245.789,7.964c-1.846-2.497-4.746-3.994-7.85-4.053c-0.064-0.001-0.128-0.002-0.191-0.002c-3.034,0-5.908,1.378-7.808,3.752l-45.813,57.244L131.43,3.489c-1.832-2.136-4.48-3.4-7.293-3.484c-2.813-0.088-5.531,1.022-7.486,3.046c-44.65,46.202-46.105,127.606-46.143,134.894c-0.4,5.721-2.702,55.47,34.174,95.669c27.388,29.856,68.796,46.391,123.246,49.264v159.741L38.863,254.578c-2.305-2.292-5.575-3.32-8.782-2.759c-3.201,0.563-5.931,2.646-7.315,5.587c-0.665,1.411-16.234,35.066-12.081,79.362c2.449,26.128,11.253,50.535,26.165,72.54c18.382,27.127,46.087,50.526,82.346,69.547c1.433,0.752,3.027,1.145,4.646,1.145h230.104c1.618,0,3.213-0.393,4.646-1.145c36.228-19.005,64.107-42.376,82.866-69.463c15.21-21.963,24.453-46.325,27.472-72.408C474.054,292.705,459.445,259.034,458.821,257.622z M126.325,460c-58.341-31.204-90.518-72.995-95.645-124.241c-2.313-23.119,1.636-43.244,5.269-55.873L217.042,460H126.325z M119.61,220.302c-32.451-35.187-29.176-80.677-29.141-81.107c0.025-0.292,0.038-0.585,0.037-0.879c-0.001-0.742,0.279-70.015,33.313-112.985l52.987,61.753c1.939,2.26,4.773,3.549,7.76,3.487c2.977-0.051,5.776-1.426,7.637-3.75l45.231-56.517l42.795,57.883c1.779,2.406,4.542,3.889,7.53,4.042c2.986,0.153,5.889-1.04,7.903-3.252l54.622-59.964c8.219,12.21,23.4,42.73,33.663,110.813c0.029,0.189,0.063,0.377,0.103,0.564c0.095,0.455,9.225,45.913-19.243,80.98c-22.605,27.845-62.744,41.963-119.303,41.963C188.301,263.332,145.944,248.855,119.61,220.302z M448.958,335.563c-6.268,51.34-39.063,93.195-97.496,124.438h-92.27l185.941-180.018C448.405,292.636,451.758,312.624,448.958,335.563z"/></svg>');
}

.subject-icon-sharp.macro-mode,
.focus-subject-sharp.macro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" fill="%23ff9f0a"><path d="M458.821,257.622c-1.322-2.99-4.023-5.144-7.232-5.77c-3.208-0.628-6.521,0.357-8.87,2.63L247.928,443.069V283.313c61.615-0.425,106.163-17.01,132.407-49.337c33.414-41.159,24.335-92.408,23.354-97.377C387.68,30.667,359.456,7.981,356.288,5.742c-4.123-2.913-9.766-2.297-13.164,1.433l-54.049,59.334L245.789,7.964c-1.846-2.497-4.746-3.994-7.85-4.053c-0.064-0.001-0.128-0.002-0.191-0.002c-3.034,0-5.908,1.378-7.808,3.752l-45.813,57.244L131.43,3.489c-1.832-2.136-4.48-3.4-7.293-3.484c-2.813-0.088-5.531,1.022-7.486,3.046c-44.65,46.202-46.105,127.606-46.143,134.894c-0.4,5.721-2.702,55.47,34.174,95.669c27.388,29.856,68.796,46.391,123.246,49.264v159.741L38.863,254.578c-2.305-2.292-5.575-3.32-8.782-2.759c-3.201,0.563-5.931,2.646-7.315,5.587c-0.665,1.411-16.234,35.066-12.081,79.362c2.449,26.128,11.253,50.535,26.165,72.54c18.382,27.127,46.087,50.526,82.346,69.547c1.433,0.752,3.027,1.145,4.646,1.145h230.104c1.618,0,3.213-0.393,4.646-1.145c36.228-19.005,64.107-42.376,82.866-69.463c15.21-21.963,24.453-46.325,27.472-72.408C474.054,292.705,459.445,259.034,458.821,257.622z M126.325,460c-58.341-31.204-90.518-72.995-95.645-124.241c-2.313-23.119,1.636-43.244,5.269-55.873L217.042,460H126.325z M119.61,220.302c-32.451-35.187-29.176-80.677-29.141-81.107c0.025-0.292,0.038-0.585,0.037-0.879c-0.001-0.742,0.279-70.015,33.313-112.985l52.987,61.753c1.939,2.26,4.773,3.549,7.76,3.487c2.977-0.051,5.776-1.426,7.637-3.75l45.231-56.517l42.795,57.883c1.779,2.406,4.542,3.889,7.53,4.042c2.986,0.153,5.889-1.04,7.903-3.252l54.622-59.964c8.219,12.21,23.4,42.73,33.663,110.813c0.029,0.189,0.063,0.377,0.103,0.564c0.095,0.455,9.225,45.913-19.243,80.98c-22.605,27.845-62.744,41.963-119.303,41.963C188.301,263.332,145.944,248.855,119.61,220.302z M448.958,335.563c-6.268,51.34-39.063,93.195-97.496,124.438h-92.27l185.941-180.018C448.405,292.636,451.758,312.624,448.958,335.563z"/></svg>');
}

html.dark-theme .subject.nature-mode,
html.dark-theme .focus-subject-bg.nature-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%23B0B0B0" d="M165.197,126.716c34.912,9.88,95.057,38.762,113.695,66.453C262.48,121.05,226.323,78.554,197.109,54.914 c-23.872-19.312-24.668-14.898-24.668-14.898c-3.44-2.08-7.777-2.041-11.179,0.116c-3.401,2.149-5.272,6.03-4.808,9.996 l1.817,15.956L165.197,126.716z"/><path fill="%23B0B0B0" d="M505.447,125.588c-23.703-8.797-59.263,1.956-79.997,3.92c-8.89-7.831-44.451-29.346-81.002-11.743 c-36.543,17.61-41.15,41.39-41.15,75.328c0,13.049-9.888,25.433-9.888,25.433c6.425,13.112,4.206,27.429,0.665,22.172 c-3.95-5.868-5.272-16.304-15.802-29.021c-77.036-101.566-261.412-79.889-261.412-79.889c-18.438,5.218-33.204,30.002,20.37,67.59 c60.871,42.704,127.177,88.014,153.462,105.887c21.105,14.348,24.53,42.704-5.264,54.772L48.471,412.21l69.955,38.979 l63.052-27.236l-48.502,34.518l28.75,15.044c0,0,79.015-45.642,135.31-78.907c52.747-31.162,83.964-66.522,92.854-117.39 c11.071-63.391,28.812-100.661,36.543-114.452c4.94-8.798,20.742-17.61,43.462-21.515c15.106-2.605,32.592-2.938,37.532-4.893 C512.366,134.401,515.327,130.489,505.447,125.588z"/></g></svg>');
}

.subject.nature-mode,
.focus-subject-bg.nature-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%236C757D" d="M165.197,126.716c34.912,9.88,95.057,38.762,113.695,66.453C262.48,121.05,226.323,78.554,197.109,54.914 c-23.872-19.312-24.668-14.898-24.668-14.898c-3.44-2.08-7.777-2.041-11.179,0.116c-3.401,2.149-5.272,6.03-4.808,9.996 l1.817,15.956L165.197,126.716z"/><path fill="%236C757D" d="M505.447,125.588c-23.703-8.797-59.263,1.956-79.997,3.92c-8.89-7.831-44.451-29.346-81.002-11.743 c-36.543,17.61-41.15,41.39-41.15,75.328c0,13.049-9.888,25.433-9.888,25.433c6.425,13.112,4.206,27.429,0.665,22.172 c-3.95-5.868-5.272-16.304-15.802-29.021c-77.036-101.566-261.412-79.889-261.412-79.889c-18.438,5.218-33.204,30.002,20.37,67.59 c60.871,42.704,127.177,88.014,153.462,105.887c21.105,14.348,24.53,42.704-5.264,54.772L48.471,412.21l69.955,38.979 l63.052-27.236l-48.502,34.518l28.75,15.044c0,0,79.015-45.642,135.31-78.907c52.747-31.162,83.964-66.522,92.854-117.39 c11.071-63.391,28.812-100.661,36.543-114.452c4.94-8.798,20.742-17.61,43.462-21.515c15.106-2.605,32.592-2.938,37.532-4.893 C512.366,134.401,515.327,130.489,505.447,125.588z"/></g></svg>');
}

.subject-icon-sharp.nature-mode,
.focus-subject-sharp.nature-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%23ff9f0a" d="M165.197,126.716c34.912,9.88,95.057,38.762,113.695,66.453C262.48,121.05,226.323,78.554,197.109,54.914 c-23.872-19.312-24.668-14.898-24.668-14.898c-3.44-2.08-7.777-2.041-11.179,0.116c-3.401,2.149-5.272,6.03-4.808,9.996 l1.817,15.956L165.197,126.716z"/><path fill="%23ff9f0a" d="M505.447,125.588c-23.703-8.797-59.263,1.956-79.997,3.92c-8.89-7.831-44.451-29.346-81.002-11.743 c-36.543,17.61-41.15,41.39-41.15,75.328c0,13.049-9.888,25.433-9.888,25.433c6.425,13.112,4.206,27.429,0.665,22.172 c-3.95-5.868-5.272-16.304-15.802-29.021c-77.036-101.566-261.412-79.889-261.412-79.889c-18.438,5.218-33.204,30.002,20.37,67.59 c60.871,42.704,127.177,88.014,153.462,105.887c21.105,14.348,24.53,42.704-5.264,54.772L48.471,412.21l69.955,38.979 l63.052-27.236l-48.502,34.518l28.75,15.044c0,0,79.015-45.642,135.31-78.907c52.747-31.162,83.964-66.522,92.854-117.39 c11.071-63.391,28.812-100.661,36.543-114.452c4.94-8.798,20.742-17.61,43.462-21.515c15.106-2.605,32.592-2.938,37.532-4.893 C512.366,134.401,515.327,130.489,505.447,125.588z"/></g></svg>');
}

/* --- ICONO NUEVO PAISAJE PROTAGONISTA --- */
html.dark-theme .subject.landscape-protagonist-mode,
html.dark-theme .focus-subject-bg.landscape-protagonist-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23B0B0B0" d="M326.039,229.594c20.662,10.332,58.534-9.176,58.534-9.176C301.915,128.572,256.001,0,256.001,0 s-45.916,128.572-128.573,220.418c0,0,37.872,19.509,58.538,9.176c0,0-20.666,79.215-113.64,183.691 c82.642,22.948,144.634-14.936,144.634-14.936V512h29.865h18.352h29.866V398.348c0,0,61.992,37.884,144.634,14.936 C346.701,308.809,326.039,229.594,326.039,229.594z"/></svg>');
}

.subject.landscape-protagonist-mode,
.focus-subject-bg.landscape-protagonist-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="%236C757D" d="M326.039,229.594c20.662,10.332,58.534-9.176,58.534-9.176C301.915,128.572,256.001,0,256.001,0 s-45.916,128.572-128.573,220.418c0,0,37.872,19.509,58.538,9.176c0,0-20.666,79.215-113.64,183.691 c82.642,22.948,144.634-14.936,144.634-14.936V512h29.865h18.352h29.866V398.348c0,0,61.992,37.884,144.634,14.936 C346.701,308.809,326.039,229.594,326.039,229.594z"/></svg>');
}

.subject-icon-sharp.landscape-protagonist-mode,
.focus-subject-sharp.landscape-protagonist-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="%23ff9f0a" d="M326.039,229.594c20.662,10.332,58.534-9.176,58.534-9.176C301.915,128.572,256.001,0,256.001,0 s-45.916,128.572-128.573,220.418c0,0,37.872,19.509,58.538,9.176c0,0-20.666,79.215-113.64,183.691 c82.642,22.948,144.634-14.936,144.634-14.936V512h29.865h18.352h29.866V398.348c0,0,61.992,37.884,144.634,14.936 C346.701,308.809,326.039,229.594,326.039,229.594z"/></svg>');
}

/* ===== INICIO BLOQUE ACCIÓN (Mismo que el original funcional) ===== */
html.dark-theme .subject.action-mode {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23B0B0B0" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g transform="scale(-1, 1) translate(-300, 0)"><path d="M179.5,60.1c11.2,0,20.2-9,20.5-20.1h-41C159.4,51,168.5,60.1,179.5,60.1z M217,32v-7h-17.4c-1.1-10.3-9.6-18-20.2-18 c-11,0-19.9,8.7-20.4,19.6V32H217z M128.1,209l14.7-25.6l-21-19.6L107.9,188H59c-7.7,0-14,6.3-14,14s6.3,14,14,14h57 C121,216,125.7,213.3,128.1,209z M194.3,275.1c-4.8,0-8.6,3.9-8.6,8.6c0,4.8,3.8,8.7,8.6,8.7s8.6-3.9,8.6-8.7 C202.9,278.9,199,275.1,194.3,275.1z M123.9,275.1c-4.8,0-8.7,3.9-8.7,8.7c0,4.8,3.9,8.7,8.7,8.7s8.7-3.9,8.7-8.7 C132.6,278.9,128.7,275.1,123.9,275.1z M254,123.2c-0.1,6-5.3,10.8-11.4,10.8H204c-6.1,0-11-4.9-11-11V95.8l-31.4,55.9l33.5,31.2 c4.4,4.1,5.7,10.7,3.1,16.2l-25.9,54.8c-0.5,1.2-1.3,2.2-2.1,3.1h21.6c10.2,0,20-2,29.3-5.8l6.4-2.7l5.1,12l-6.4,2.7 c-10.9,4.5-22.4,6.8-34.3,6.8h-65.6c-11.6,0-23.2-2.3-34.2-6.8l-6.5-2.7l5.1-12l6.4,2.7c9.4,3.8,19.3,5.8,29.3,5.8H149 c-3.5-4.1-4.5-9.9-2.1-15.1l21.6-45.5c0,0-39.6-36.9-43.3-40.4c-7.8-7.2-7.9-17.2-3.8-24.3l20.5-36l-45.7,44 c-4.4,4.2-11.4,4.1-15.6-0.3c-4.2-4.4-4.1-11.4,0.3-15.6l52.2-50.3c5-4.8,11.5-7.5,18.5-7.5h46.3c12.3,0,17.1,10.7,17.1,18v28h28 C249.2,112,254.1,117,254,123.2z"/></g></svg>');
}

.subject.action-mode {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%236C757D" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g transform="scale(-1, 1) translate(-300, 0)"><path d="M179.5,60.1c11.2,0,20.2-9,20.5-20.1h-41C159.4,51,168.5,60.1,179.5,60.1z M217,32v-7h-17.4c-1.1-10.3-9.6-18-20.2-18 c-11,0-19.9,8.7-20.4,19.6V32H217z M128.1,209l14.7-25.6l-21-19.6L107.9,188H59c-7.7,0-14,6.3-14,14s6.3,14,14,14h57 C121,216,125.7,213.3,128.1,209z M194.3,275.1c-4.8,0-8.6,3.9-8.6,8.6c0,4.8,3.8,8.7,8.6,8.7s8.6-3.9,8.6-8.7 C202.9,278.9,199,275.1,194.3,275.1z M123.9,275.1c-4.8,0-8.7,3.9-8.7,8.7c0,4.8,3.9,8.7,8.7,8.7s8.7-3.9,8.7-8.7 C132.6,278.9,128.7,275.1,123.9,275.1z M254,123.2c-0.1,6-5.3,10.8-11.4,10.8H204c-6.1,0-11-4.9-11-11V95.8l-31.4,55.9l33.5,31.2 c4.4,4.1,5.7,10.7,3.1,16.2l-25.9,54.8c-0.5,1.2-1.3,2.2-2.1,3.1h21.6c10.2,0,20-2,29.3-5.8l6.4-2.7l5.1,12l-6.4,2.7 c-10.9,4.5-22.4,6.8-34.3,6.8h-65.6c-11.6,0-23.2-2.3-34.2-6.8l-6.5-2.7l5.1-12l6.4,2.7c9.4,3.8,19.3,5.8,29.3,5.8H149 c-3.5-4.1-4.5-9.9-2.1-15.1l21.6-45.5c0,0-39.6-36.9-43.3-40.4c-7.8-7.2-7.9-17.2-3.8-24.3l20.5-36l-45.7,44 c-4.4,4.2-11.4,4.1-15.6-0.3c-4.2-4.4-4.1-11.4,0.3-15.6l52.2-50.3c5-4.8,11.5-7.5,18.5-7.5h46.3c12.3,0,17.1,10.7,17.1,18v28h28 C249.2,112,254.1,117,254,123.2z"/></g></svg>');
}

.subject-icon-sharp.action-mode {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff9f0a" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g transform="scale(-1, 1) translate(-300, 0)"><path d="M179.5,60.1c11.2,0,20.2-9,20.5-20.1h-41C159.4,51,168.5,60.1,179.5,60.1z M217,32v-7h-17.4c-1.1-10.3-9.6-18-20.2-18 c-11,0-19.9,8.7-20.4,19.6V32H217z M128.1,209l14.7-25.6l-21-19.6L107.9,188H59c-7.7,0-14,6.3-14,14s6.3,14,14,14h57 C121,216,125.7,213.3,128.1,209z M194.3,275.1c-4.8,0-8.6,3.9-8.6,8.6c0,4.8,3.8,8.7,8.6,8.7s8.6-3.9,8.6-8.7 C202.9,278.9,199,275.1,194.3,275.1z M123.9,275.1c-4.8,0-8.7,3.9-8.7,8.7c0,4.8,3.9,8.7,8.7,8.7s8.7-3.9,8.7-8.7 C132.6,278.9,128.7,275.1,123.9,275.1z M254,123.2c-0.1,6-5.3,10.8-11.4,10.8H204c-6.1,0-11-4.9-11-11V95.8l-31.4,55.9l33.5,31.2 c4.4,4.1,5.7,10.7,3.1,16.2l-25.9,54.8c-0.5,1.2-1.3,2.2-2.1,3.1h21.6c10.2,0,20-2,29.3-5.8l6.4-2.7l5.1,12l-6.4,2.7 c-10.9,4.5-22.4,6.8-34.3,6.8h-65.6c-11.6,0-23.2-2.3-34.2-6.8l-6.5-2.7l5.1-12l6.4,2.7c9.4,3.8,19.3,5.8,29.3,5.8H149 c-3.5-4.1-4.5-9.9-2.1-15.1l21.6-45.5c0,0-39.6-36.9-43.3-40.4c-7.8-7.2-7.9-17.2-3.8-24.3l20.5-36l-45.7,44 c-4.4,4.2-11.4,4.1-15.6-0.3c-4.2-4.4-4.1-11.4,0.3-15.6l52.2-50.3c5-4.8,11.5-7.5,18.5-7.5h46.3c12.3,0,17.1,10.7,17.1,18v28h28 C249.2,112,254.1,117,254,123.2z"/></g></svg>');
}

/* ===== FIN BLOQUE ACCIÓN ===== */
html.dark-theme .subject.other-mode,
html.dark-theme .focus-subject-bg.other-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="%23B0B0B0" stroke-width="2" d="M2.444 10c0 2.209-.222 5.293-.352 6.91A1.006 1.006 0 003.093 18h13.814c.588 0 1.048-.503 1-1.09-.13-1.617-.351-4.701-.351-6.91 0-2.158.212-5.153.343-6.798a1.02 1.02 0 00-1.1-1.095c-1.646.139-4.64.364-6.799.364-2.159 0-5.154-.225-6.799-.364a1.02 1.02 0 00-1.1 1.095c.131 1.645.343 4.64.343 6.798z"/></svg>');
}

.subject.other-mode,
.focus-subject-bg.other-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="%236C757D" stroke-width="2" d="M2.444 10c0 2.209-.222 5.293-.352 6.91A1.006 1.006 0 003.093 18h13.814c.588 0 1.048-.503 1-1.09-.13-1.617-.351-4.701-.351-6.91 0-2.158.212-5.153.343-6.798a1.02 1.02 0 00-1.1-1.095c-1.646.139-4.64.364-6.799.364-2.159 0-5.154-.225-6.799-.364a1.02 1.02 0 00-1.1 1.095c.131 1.645.343 4.64.343 6.798z"/></svg>');
}

.subject-icon-sharp.other-mode,
.focus-subject-sharp.other-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="%23ff9f0a" stroke-width="2" d="M2.444 10c0 2.209-.222 5.293-.352 6.91A1.006 1.006 0 003.093 18h13.814c.588 0 1.048-.503 1-1.09-.13-1.617-.351-4.701-.351-6.91 0-2.158.212-5.153.343-6.798a1.02 1.02 0 00-1.1-1.095c-1.646.139-4.64.364-6.799.364-2.159 0-5.154-.225-6.799-.364a1.02 1.02 0 00-1.1 1.095c.131 1.645.343 4.64.343 6.798z"/></g></svg>');
}

/* ========================== INICIO CORRECCIÓN (Iconos Desaparecidos) ========================== */
/* --- Icono: Paisaje (Genérico) --- (NUEVO SVG) */
html.dark-theme .subject.landscape-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23B0B0B0" d="M3 20h18a1 1 0 0 0 .864-1.504l-7-12c-.359-.615-1.369-.613-1.729 0L9.866 12.1l-1.02-1.632A.998.998 0 0 0 8 10h-.001a1 1 0 0 0-.847.47l-5 8A1 1 0 0 0 3 20zM14 8.985 19.259 18h-5.704l-2.486-3.987L14 8.985zm-5.999 3.9L11.197 18H4.805l3.196-5.115zM6 8c1.654 0 3-1.346 3-3S7.654 2 6 2 3 3.346 3 5s1.346 3 3 3zm0-4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
}

.subject.landscape-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%236C757D" d="M3 20h18a1 1 0 0 0 .864-1.504l-7-12c-.359-.615-1.369-.613-1.729 0L9.866 12.1l-1.02-1.632A.998.998 0 0 0 8 10h-.001a1 1 0 0 0-.847.47l-5 8A1 1 0 0 0 3 20zM14 8.985 19.259 18h-5.704l-2.486-3.987L14 8.985zm-5.999 3.9L11.197 18H4.805l3.196-5.115zM6 8c1.654 0 3-1.346 3-3S7.654 2 6 2 3 3.346 3 5s1.346 3 3 3zm0-4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
}

.subject-icon-sharp.landscape-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23ff9f0a" d="M3 20h18a1 1 0 0 0 .864-1.504l-7-12c-.359-.615-1.369-.613-1.729 0L9.866 12.1l-1.02-1.632A.998.998 0 0 0 8 10h-.001a1 1 0 0 0-.847.47l-5 8A1 1 0 0 0 3 20zM14 8.985 19.259 18h-5.704l-2.486-3.987L14 8.985zm-5.999 3.9L11.197 18H4.805l3.196-5.115zM6 8c1.654 0 3-1.346 3-3S7.654 2 6 2 3 3.346 3 5s1.346 3 3 3zm0-4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
}

/* --- Icono: Callejera (Street) --- (NUEVO SVG) */
html.dark-theme .subject.street-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%23B0B0B0" d="M239.103,99.037c27.354,0,49.524-22.17,49.524-49.513C288.627,22.17,266.457,0,239.103,0 C211.75,0,189.58,22.17,189.58,49.524C189.58,76.867,211.75,99.037,239.103,99.037z"/><path fill="%23B0B0B0" d="M427.361,241.153l-32.838-49.377c-7.974-11.666-18.555-21.326-30.88-28.235l-64.396-36.065 c-11.802-5.514-20.726-9.021-31.937-7.509l-30.812,4.185c-11.492,1.561-21.966,7.413-29.311,16.376l-58.651,62.42l-53.718,19.796 c-10.174,3.75-15.639,14.805-12.422,25.164l0.252,0.795c3.16,10.183,13.653,16.201,24.039,13.808l43.778-10.107 c10.919-2.519,21.288-7.015,30.57-13.275l30.445-20.473l10.756,81.74c0.785,5.998-0.427,12.083-3.44,17.335l-91.159,158.327 c-6.502,11.279-2.655,25.697,8.595,32.266l0.784,0.456c10.648,6.201,24.272,3.207,31.326-6.889l101.895-145.75l30.872,61.625 c2.286,4.554,5.309,8.692,8.953,12.248l68.486,66.964c8.643,8.44,22.315,8.818,31.394,0.862l1.095-0.95 c4.651-4.079,7.48-9.844,7.848-16.016s-1.744-12.238-5.882-16.831l-57.827-64.416l-31.414-113.697l-0.116,0.097l-9.011-88.95 l31.839,14.332L397.392,265c6.405,6.743,16.772,7.828,24.427,2.548l0.523-0.358C430.84,261.337,433.078,249.748,427.361,241.153z" /></g></svg>');
}

.subject.street-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%236C757D" d="M239.103,99.037c27.354,0,49.524-22.17,49.524-49.513C288.627,22.17,266.457,0,239.103,0 C211.75,0,189.58,22.17,189.58,49.524C189.58,76.867,211.75,99.037,239.103,99.037z"/><path fill="%236C757D" d="M427.361,241.153l-32.838-49.377c-7.974-11.666-18.555-21.326-30.88-28.235l-64.396-36.065 c-11.802-5.514-20.726-9.021-31.937-7.509l-30.812,4.185c-11.492,1.561-21.966,7.413-29.311,16.376l-58.651,62.42l-53.718,19.796 c-10.174,3.75-15.639,14.805-12.422,25.164l0.252,0.795c3.16,10.183,13.653,16.201,24.039,13.808l43.778-10.107 c10.919-2.519,21.288-7.015,30.57-13.275l30.445-20.473l10.756,81.74c0.785,5.998-0.427,12.083-3.44,17.335l-91.159,158.327 c-6.502,11.279-2.655,25.697,8.595,32.266l0.784,0.456c10.648,6.201,24.272,3.207,31.326-6.889l101.895-145.75l30.872,61.625 c2.286,4.554,5.309,8.692,8.953,12.248l68.486,66.964c8.643,8.44,22.315,8.818,31.394,0.862l1.095-0.95 c4.651-4.079,7.48-9.844,7.848-16.016s-1.744-12.238-5.882-16.831l-57.827-64.416l-31.414-113.697l-0.116,0.097l-9.011-88.95 l31.839,14.332L397.392,265c6.405,6.743,16.772,7.828,24.427,2.548l0.523-0.358C430.84,261.337,433.078,249.748,427.361,241.153z" /></g></svg>');
}

.subject-icon-sharp.street-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-512, 0)"><path fill="%23ff9f0a" d="M239.103,99.037c27.354,0,49.524-22.17,49.524-49.513C288.627,22.17,266.457,0,239.103,0 C211.75,0,189.58,22.17,189.58,49.524C189.58,76.867,211.75,99.037,239.103,99.037z"/><path fill="%23ff9f0a" d="M427.361,241.153l-32.838-49.377c-7.974-11.666-18.555-21.326-30.88-28.235l-64.396-36.065 c-11.802-5.514-20.726-9.021-31.937-7.509l-30.812,4.185c-11.492,1.561-21.966,7.413-29.311,16.376l-58.651,62.42l-53.718,19.796 c-10.174,3.75-15.639,14.805-12.422,25.164l0.252,0.795c3.16,10.183,13.653,16.201,24.039,13.808l43.778-10.107 c10.919-2.519,21.288-7.015,30.57-13.275l30.445-20.473l10.756,81.74c0.785,5.998-0.427,12.083-3.44,17.335l-91.159,158.327 c-6.502,11.279-2.655,25.697,8.595,32.266l0.784,0.456c10.648,6.201,24.272,3.207,31.326-6.889l101.895-145.75l30.872,61.625 c2.286,4.554,5.309,8.692,8.953,12.248l68.486,66.964c8.643,8.44,22.315,8.818,31.394,0.862l1.095-0.95 c4.651-4.079,7.48-9.844,7.848-16.016s-1.744-12.238-5.882-16.831l-57.827-64.416l-31.414-113.697l-0.116,0.097l-9.011-88.95 l31.839,14.332L397.392,265c6.405,6.743,16.772,7.828,24.427,2.548l0.523-0.358C430.84,261.337,433.078,249.748,427.361,241.153z" /></g></svg>');
}

/* --- Icono: Inmobiliaria (Realty) --- (NUEVO SVG) */
html.dark-theme .subject.realty-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -6.75 122.88 122.88" xmlns="http://www.w3.org/2000/svg"><g><path fill="%23B0B0B0" fill-rule="evenodd" clip-rule="evenodd" d="M112.28,107.53c0,1.01-0.82,1.84-1.84,1.84H11.93c-1.01,0-1.84-0.82-1.84-1.84V51.67 c-2.06,0.79-3.97,0.8-5.57,0.27c-1.25-0.42-2.3-1.17-3.07-2.15c-0.77-0.97-1.26-2.16-1.41-3.46C-0.18,44.3,0.43,42,2.15,39.85l0,0 c0.09-0.11,0.19-0.21,0.3-0.3l57.6-39.07c0.65-0.6,1.65-0.66,2.37-0.1l57.7,38.99l0,0c0.08,0.06,0.15,0.13,0.22,0.2 c2.32,2.5,2.9,5.27,2.34,7.62c-0.28,1.15-0.83,2.2-1.59,3.05c-0.76,0.86-1.73,1.52-2.84,1.92c-1.76,0.64-3.84,0.61-5.96-0.39 C112.28,67.37,112.28,91.94,112.28,107.53L112.28,107.53L112.28,107.53z M45.33,36.35h32.21v21.69H45.33V36.35L45.33,36.35 L45.33,36.35z M56.28,42.24c0.93,0,1.69,0.76,1.69,1.69s-0.76,1.69-1.69,1.69c-0.93,0-1.69-0.76-1.69-1.69 C54.59,42.99,55.34,42.24,56.28,42.24L56.28,42.24L56.28,42.24z M63.39,49.49l3.8-5.84l3.59,9.08h-17.6V51.6l1.41-0.07L56,48.08 l1.12,2.47h2.11l1.83-4.72L63.39,49.49L63.39,49.49L63.39,49.49z M47.27,38.58h28.35v17.23H47.27V38.58L47.27,38.58z M60.93,74.68 c0.04,0.01,0.09,0,0.13-0.04c2.16-1.69,5.33-0.98,6.78,2.56h-0.03c-2.86,2.43-4.91,5.07-5.65,8.02h-4.14L60.93,74.68L60.93,74.68 L60.93,74.68z M75.35,81.43c0.35,3-2.73,5.59-5.44,4.77c-0.38,0.66-0.67,1.49-0.9,2.49c-0.51,2.33-0.36,1.62-0.14,3.88 c0.3,3.01-0.02,5.06-1.96,5.94v1.16H27.73v-1.16c-1.51-0.54-2.16-2.02-1.93-4.45c0.5-4.58,0.19-6.01-0.96-7.74 c-2.02,0.07-3.48-0.41-4.39-1.43c-1.86-2.07-1.29-5.1,1.03-6.55c0.48-0.3,1.04-0.53,1.69-0.67c4.98-1.05,7.73,4.05,9.05,8.07 l13.07,0.35c0.89,0.12,1.46,0.52,1.84,1.06c0.35-0.53,0.86-0.93,1.64-1.11c4.07-0.18,6.98,0.36,9.95,0.36h3.46 c0.71,0,1.08-0.31,1.2-0.88c0.88-2.68,4-8.06,7.27-7.96C72.66,77.63,74.85,79.01,75.35,81.43L75.35,81.43L75.35,81.43z M27.14,76.88L27.14,76.88c1.32-2.94,3.38-3.67,6.19-2.69l3.01,10.35h-3.25C31.58,81.46,30.58,78.33,27.14,76.88L27.14,76.88 L27.14,76.88z M34.6,74.27c0.04-0.02,0.07-0.05,0.09-0.1c1.11-2.56,4.17-3.28,6.67-2.18c0-0.01,0.01-0.01,0.01-0.01l0.68,13.18 h-4.33L34.6,74.27L34.6,74.27L34.6,74.27z M42.7,71.71c0.81-3.37,8.49-2.68,9.2-0.36c0.1-0.01-0.8,12.44-0.86,13.82H49.9 c-1.8,0-3.39,0-5.17,0h-1.44l-0.56-13.46L42.7,71.71L42.7,71.71L42.7,71.71z M52.9,72.28c0.02,0,0.05-0.01,0.08-0.02 c2.78-1.48,6.65-0.4,7.02,1.53l-0.19,0.07l-3.05,11.3h-4.51L52.9,72.28L52.9,72.28L52.9,72.28z M92.83,77.9v18.35h3.7 c0.57,0,1.03,0.67,1.03,1.24c0,0.57-0.46,1.24-1.03,1.24H86.28c-0.57,0-1.03-0.67-1.03-1.24c0-0.57,0.46-1.24,1.03,1.24h3.7V77.9 H92.83L92.83,77.9z M86.09,64h10.6l3.11,12.27h-16.8L86.09,64L86.09,64L86.09,64z M107.66,104.74V49.62c0-0.12,0.01-0.24,0.03-0.35 L61.62,18.58l-46.96,30.7c0.04,0.15,0.06,0.31,0.06,0.47v54.99C45.7,104.74,76.68,104.74,107.66,104.74L107.66,104.74 L107.66,104.74z"/></g></svg>');
}

.subject.realty-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -6.75 122.88 122.88" xmlns="http://www.w3.org/2000/svg"><g><path fill="%236C757D" fill-rule="evenodd" clip-rule="evenodd" d="M112.28,107.53c0,1.01-0.82,1.84-1.84,1.84H11.93c-1.01,0-1.84-0.82-1.84-1.84V51.67 c-2.06,0.79-3.97,0.8-5.57,0.27c-1.25-0.42-2.3-1.17-3.07-2.15c-0.77-0.97-1.26-2.16-1.41-3.46C-0.18,44.3,0.43,42,2.15,39.85l0,0 c0.09-0.11,0.19-0.21,0.3-0.3l57.6-39.07c0.65-0.6,1.65-0.66,2.37-0.1l57.7,38.99l0,0c0.08,0.06,0.15,0.13,0.22,0.2 c2.32,2.5,2.9,5.27,2.34,7.62c-0.28,1.15-0.83,2.2-1.59,3.05c-0.76,0.86-1.73,1.52-2.84,1.92c-1.76,0.64-3.84,0.61-5.96-0.39 C112.28,67.37,112.28,91.94,112.28,107.53L112.28,107.53L112.28,107.53z M45.33,36.35h32.21v21.69H45.33V36.35L45.33,36.35 L45.33,36.35z M56.28,42.24c0.93,0,1.69,0.76,1.69,1.69s-0.76,1.69-1.69,1.69c-0.93,0-1.69-0.76-1.69-1.69 C54.59,42.99,55.34,42.24,56.28,42.24L56.28,42.24L56.28,42.24z M63.39,49.49l3.8-5.84l3.59,9.08h-17.6V51.6l1.41-0.07L56,48.08 l1.12,2.47h2.11l1.83-4.72L63.39,49.49L63.39,49.49L63.39,49.49z M47.27,38.58h28.35v17.23H47.27V38.58L47.27,38.58z M60.93,74.68 c0.04,0.01,0.09,0,0.13-0.04c2.16-1.69,5.33-0.98,6.78,2.56h-0.03c-2.86,2.43-4.91,5.07-5.65,8.02h-4.14L60.93,74.68L60.93,74.68 L60.93,74.68z M75.35,81.43c0.35,3-2.73,5.59-5.44,4.77c-0.38,0.66-0.67,1.49-0.9,2.49c-0.51,2.33-0.36,1.62-0.14,3.88 c0.3,3.01-0.02,5.06-1.96,5.94v1.16H27.73v-1.16c-1.51-0.54-2.16-2.02-1.93-4.45c0.5-4.58,0.19-6.01-0.96-7.74 c-2.02,0.07-3.48-0.41-4.39-1.43c-1.86-2.07-1.29-5.1,1.03-6.55c0.48-0.3,1.04-0.53,1.69-0.67c4.98-1.05,7.73,4.05,9.05,8.07 l13.07,0.35c0.89,0.12,1.46,0.52,1.84,1.06c0.35-0.53,0.86-0.93,1.64-1.11c4.07-0.18,6.98,0.36,9.95,0.36h3.46 c0.71,0,1.08-0.31,1.2-0.88c0.88-2.68,4-8.06,7.27-7.96C72.66,77.63,74.85,79.01,75.35,81.43L75.35,81.43L75.35,81.43z M27.14,76.88L27.14,76.88c1.32-2.94,3.38-3.67,6.19-2.69l3.01,10.35h-3.25C31.58,81.46,30.58,78.33,27.14,76.88L27.14,76.88 L27.14,76.88z M34.6,74.27c0.04-0.02,0.07-0.05,0.09-0.1c1.11-2.56,4.17-3.28,6.67-2.18c0-0.01,0.01-0.01,0.01-0.01l0.68,13.18 h-4.33L34.6,74.27L34.6,74.27L34.6,74.27z M42.7,71.71c0.81-3.37,8.49-2.68,9.2-0.36c0.1-0.01-0.8,12.44-0.86,13.82H49.9 c-1.8,0-3.39,0-5.17,0h-1.44l-0.56-13.46L42.7,71.71L42.7,71.71L42.7,71.71z M52.9,72.28c0.02,0,0.05-0.01,0.08-0.02 c2.78-1.48,6.65-0.4,7.02,1.53l-0.19,0.07l-3.05,11.3h-4.51L52.9,72.28L52.9,72.28L52.9,72.28z M92.83,77.9v18.35h3.7 c0.57,0,1.03,0.67,1.03,1.24c0,0.57-0.46,1.24-1.03,1.24H86.28c-0.57,0-1.03-0.67-1.03-1.24c0-0.57,0.46-1.24,1.03,1.24h3.7V77.9 H92.83L92.83,77.9z M86.09,64h10.6l3.11,12.27h-16.8L86.09,64L86.09,64L86.09,64z M107.66,104.74V49.62c0-0.12,0.01-0.24,0.03-0.35 L61.62,18.58l-46.96,30.7c0.04,0.15,0.06,0.31,0.06,0.47v54.99C45.7,104.74,76.68,104.74,107.66,104.74L107.66,104.74 L107.66,104.74z"/></g></svg>');
}

.subject-icon-sharp.realty-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -6.75 122.88 122.88" xmlns="http://www.w3.org/2000/svg"><g><path fill="%23ff9f0a" fill-rule="evenodd" clip-rule="evenodd" d="M112.28,107.53c0,1.01-0.82,1.84-1.84,1.84H11.93c-1.01,0-1.84-0.82-1.84-1.84V51.67 c-2.06,0.79-3.97,0.8-5.57,0.27c-1.25-0.42-2.3-1.17-3.07-2.15c-0.77-0.97-1.26-2.16-1.41-3.46C-0.18,44.3,0.43,42,2.15,39.85l0,0 c0.09-0.11,0.19-0.21,0.3-0.3l57.6-39.07c0.65-0.6,1.65-0.66,2.37-0.1l57.7,38.99l0,0c0.08,0.06,0.15,0.13,0.22,0.2 c2.32,2.5,2.9,5.27,2.34,7.62c-0.28,1.15-0.83,2.2-1.59,3.05c-0.76,0.86-1.73,1.52-2.84,1.92c-1.76,0.64-3.84,0.61-5.96-0.39 C112.28,67.37,112.28,91.94,112.28,107.53L112.28,107.53L112.28,107.53z M45.33,36.35h32.21v21.69H45.33V36.35L45.33,36.35 L45.33,36.35z M56.28,42.24c0.93,0,1.69,0.76,1.69,1.69s-0.76,1.69-1.69,1.69c-0.93,0-1.69-0.76-1.69-1.69 C54.59,42.99,55.34,42.24,56.28,42.24L56.28,42.24L56.28,42.24z M63.39,49.49l3.8-5.84l3.59,9.08h-17.6V51.6l1.41-0.07L56,48.08 l1.12,2.47h2.11l1.83-4.72L63.39,49.49L63.39,49.49L63.39,49.49z M47.27,38.58h28.35v17.23H47.27V38.58L47.27,38.58z M60.93,74.68 c0.04,0.01,0.09,0,0.13-0.04c2.16-1.69,5.33-0.98,6.78,2.56h-0.03c-2.86,2.43-4.91,5.07-5.65,8.02h-4.14L60.93,74.68L60.93,74.68 L60.93,74.68z M75.35,81.43c0.35,3-2.73,5.59-5.44,4.77c-0.38,0.66-0.67,1.49-0.9,2.49c-0.51,2.33-0.36,1.62-0.14,3.88 c0.3,3.01-0.02,5.06-1.96,5.94v1.16H27.73v-1.16c-1.51-0.54-2.16-2.02-1.93-4.45c0.5-4.58,0.19-6.01-0.96-7.74 c-2.02,0.07-3.48-0.41-4.39-1.43c-1.86-2.07-1.29-5.1,1.03-6.55c0.48-0.3,1.04-0.53,1.69-0.67c4.98-1.05,7.73,4.05,9.05,8.07 l13.07,0.35c0.89,0.12,1.46,0.52,1.84,1.06c0.35-0.53,0.86-0.93,1.64-1.11c4.07-0.18,6.98,0.36,9.95,0.36h3.46 c0.71,0,1.08-0.31,1.2-0.88c0.88-2.68,4-8.06,7.27-7.96C72.66,77.63,74.85,79.01,75.35,81.43L75.35,81.43L75.35,81.43z M27.14,76.88L27.14,76.88c1.32-2.94,3.38-3.67,6.19-2.69l3.01,10.35h-3.25C31.58,81.46,30.58,78.33,27.14,76.88L27.14,76.88 L27.14,76.88z M34.6,74.27c0.04-0.02,0.07-0.05,0.09-0.1c1.11-2.56,4.17-3.28,6.67-2.18c0-0.01,0.01-0.01,0.01-0.01l0.68,13.18 h-4.33L34.6,74.27L34.6,74.27L34.6,74.27z M42.7,71.71c0.81-3.37,8.49-2.68,9.2-0.36c0.1-0.01-0.8,12.44-0.86,13.82H49.9 c-1.8,0-3.39,0-5.17,0h-1.44l-0.56-13.46L42.7,71.71L42.7,71.71L42.7,71.71z M52.9,72.28c0.02,0,0.05-0.01,0.08-0.02 c2.78-1.48,6.65-0.4,7.02,1.53l-0.19,0.07l-3.05,11.3h-4.51L52.9,72.28L52.9,72.28L52.9,72.28z M92.83,77.9v18.35h3.7 c0.57,0,1.03,0.67,1.03,1.24c0,0.57-0.46,1.24-1.03,1.24H86.28c-0.57,0-1.03-0.67-1.03-1.24c0-0.57,0.46-1.24,1.03,1.24h3.7V77.9 H92.83L92.83,77.9z M86.09,64h10.6l3.11,12.27h-16.8L86.09,64L86.09,64L86.09,64z M107.66,104.74V49.62c0-0.12,0.01-0.24,0.03-0.35 L61.62,18.58l-46.96,30.7c0.04,0.15,0.06,0.31,0.06,0.47v54.99C45.7,104.74,76.68,104.74,107.66,104.74L107.66,104.74 L107.66,104.74z"/></g></svg>');
}

/* --- Icono: Conciertos (Concerts) --- (NUEVO SVG, volteado) */
html.dark-theme .subject.concerts-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 193 256" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-193, 0)"><path fill="%23B0B0B0" d="M184,90.6L170.8,78l-21.9,21.2c-3.6,3.5-9.2,4.2-13.6,1.5l-20.8-12.5l-27,47.5l22.9,40.5c1.2,2.1,1.8,4.5,1.8,7v56.7 c0,8-6.7,14.5-14.8,14.1c-7.6-0.4-13.5-6.9-13.5-14.5v-52.6l-22.1-39.1v35.4c0,1.7-0.3,3.3-0.9,4.9l-20.8,56.7 c-2.1,5.7-7.5,9.3-13.3,9.3c-1.6,0-3.3-0.3-4.9-0.9c-7.3-2.7-11.1-10.8-8.4-18.1l20-54.4v-49.1c0-6,1.7-11.9,4.9-17l19.7-31 l-39.1,24c-1.8,1.1-3.8,1.7-5.8,1.7c-3.8,0-7.4-1.9-9.6-5.3C0.4,98.5,2,91.6,7.3,88.3l61.4-37.6c8.3-5.1,18.6-5.1,26.9-0.1 l43.9,26.5l15-14.5l-5.1-4.8c-3.1,0.7-6.5-0.2-9-2.5c-4-3.8-4.2-10.1-0.4-14.2c3.8-4,10.1-4.2,14.2-0.4c2.8,2.7,3.7,6.6,2.7,10.1 l4.9,4.7l1.5-1.4c4.5-4.3,11.7-4.2,16,0.4c4.2,4.5,3.7,11.7-0.7,15.9l-0.5,0.5L191,83.1L184,90.6z M149.3,30.2l31.5-2.3l-0.4-5.9 l-31.5,2.3L149.3,30.2z M147.2,16.7l24.9-9.2l-2-5.5l-24.9,9.2L147.2,16.7z M135.7,29.1c0,11.7-9.5,21.2-21.2,21.2 s-21.2-9.5-21.2-21.2s9.5-21.2,21.2-21.2C126.2,7.9,135.7,17.4,135.7,29.1z"/></g></svg>');
}

.subject.concerts-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 193 256" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-193, 0)"><path fill="%236C757D" d="M184,90.6L170.8,78l-21.9,21.2c-3.6,3.5-9.2,4.2-13.6,1.5l-20.8-12.5l-27,47.5l22.9,40.5c1.2,2.1,1.8,4.5,1.8,7v56.7 c0,8-6.7,14.5-14.8,14.1c-7.6-0.4-13.5-6.9-13.5-14.5v-52.6l-22.1-39.1v35.4c0,1.7-0.3,3.3-0.9,4.9l-20.8,56.7 c-2.1,5.7-7.5,9.3-13.3,9.3c-1.6,0-3.3-0.3-4.9-0.9c-7.3-2.7-11.1-10.8-8.4-18.1l20-54.4v-49.1c0-6,1.7-11.9,4.9-17l19.7-31 l-39.1,24c-1.8,1.1-3.8,1.7-5.8,1.7c-3.8,0-7.4-1.9-9.6-5.3C0.4,98.5,2,91.6,7.3,88.3l61.4-37.6c8.3-5.1,18.6-5.1,26.9-0.1 l43.9,26.5l15-14.5l-5.1-4.8c-3.1,0.7-6.5-0.2-9-2.5c-4-3.8-4.2-10.1-0.4-14.2c3.8-4,10.1-4.2,14.2-0.4c2.8,2.7,3.7,6.6,2.7,10.1 l4.9,4.7l1.5-1.4c4.5-4.3,11.7-4.2,16,0.4c4.2,4.5,3.7,11.7-0.7,15.9l-0.5,0.5L191,83.1L184,90.6z M149.3,30.2l31.5-2.3l-0.4-5.9 l-31.5,2.3L149.3,30.2z M147.2,16.7l24.9-9.2l-2-5.5l-24.9,9.2L147.2,16.7z M135.7,29.1c0,11.7-9.5,21.2-21.2,21.2 s-21.2-9.5-21.2-21.2s9.5-21.2,21.2-21.2C126.2,7.9,135.7,17.4,135.7,29.1z"/></g></svg>');
}

.subject-icon-sharp.concerts-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 193 256" xmlns="http://www.w3.org/2000/svg"><g transform="scale(-1, 1) translate(-193, 0)"><path fill="%23ff9f0a" d="M184,90.6L170.8,78l-21.9,21.2c-3.6,3.5-9.2,4.2-13.6,1.5l-20.8-12.5l-27,47.5l22.9,40.5c1.2,2.1,1.8,4.5,1.8,7v56.7 c0,8-6.7,14.5-14.8,14.1c-7.6-0.4-13.5-6.9-13.5-14.5v-52.6l-22.1-39.1v35.4c0,1.7-0.3,3.3-0.9,4.9l-20.8,56.7 c-2.1,5.7-7.5,9.3-13.3,9.3c-1.6,0-3.3-0.3-4.9-0.9c-7.3-2.7-11.1-10.8-8.4-18.1l20-54.4v-49.1c0-6,1.7-11.9,4.9-17l19.7-31 l-39.1,24c-1.8,1.1-3.8,1.7-5.8,1.7c-3.8,0-7.4-1.9-9.6-5.3C0.4,98.5,2,91.6,7.3,88.3l61.4-37.6c8.3-5.1,18.6-5.1,26.9-0.1 l43.9,26.5l15-14.5l-5.1-4.8c-3.1,0.7-6.5-0.2-9-2.5c-4-3.8-4.2-10.1-0.4-14.2c3.8-4,10.1-4.2,14.2-0.4c2.8,2.7,3.7,6.6,2.7,10.1 l4.9,4.7l1.5-1.4c4.5-4.3,11.7-4.2,16,0.4c4.2,4.5,3.7,11.7-0.7,15.9l-0.5,0.5L191,83.1L184,90.6z M149.3,30.2l31.5-2.3l-0.4-5.9 l-31.5,2.3L149.3,30.2z M147.2,16.7l24.9-9.2l-2-5.5l-24.9,9.2L147.2,16.7z M135.7,29.1c0,11.7-9.5,21.2-21.2,21.2 s-21.2-9.5-21.2-21.2s9.5-21.2,21.2-21.2C126.2,7.9,135.7,17.4,135.7,29.1z"/></g></svg>');
}

/* =========================== FIN CORRECCIÓN (Iconos Desaparecidos) ============================ */
/* --- TAREA 4 REVISADA (ASTRO): Icono de Astro (Luna y Estrellas) --- */
html.dark-theme .subject.astro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.9 2.307c-.16-.409-.738-.409-.9 0l-.43 1.095c-.049.125-.148.224-.272.274l-1.091.432c-.408.161-.408.741 0 .902l1.091.432c.124.049.223.149.272.274l.43 1.095c.16.41.738.41.9 0l.43-1.095c.049-.125.148-.224-.272.274l1.091-.432c.408-.161.408-.741 0-.902l-1.091-.432c-.124-.049-.223-.149-.272-.274L19.9 2.307z" stroke="%23B0B0B0"/><path d="M16.033 8.13c-.16-.41-.738-.41-.9 0l-.157.4c-.049.125-.148.224-.272.274l-.398.157c-.408.162-.408.742 0 .903l.398.157c.124.049.223.149.272.274l.157.4c.16.41.738.41.9 0l.157-.4c.049-.125.148-.224-.272-.274l.398-.157c.408-.161.408-.741 0-.903l-.398-.157c-.124-.049-.223-.149-.272-.274l-.157-.4z" stroke="%23B0B0B0"/><path d="M21.25 12c0 5.109-4.141 9.25-9.25 9.25V22.75c5.937 0 10.75-4.813 10.75-10.75h-1.5zM2.75 12c0-5.109 4.141-9.25 9.25-9.25V1.25C6.063 1.25 1.25 6.063 1.25 12h1.5zm12.75 2.25C12.324 14.25 9.75 11.676 9.75 8.5H8.25c0 4.004 3.246 7.25 7.25 7.25v-1.5zm-5-5.75c0-2.088 1.113-3.917 2.781-4.925L11.755 2.29C9.656 3.56 8.25 5.865 8.25 8.5h1.5zm-.268-4.925C11.648 2.356 11.646 2.446 11.65 2.477c.004.025.019.088.082.154.075.078.179.118.268.118v-1.5c-1.079 0-1.738.571-1.87 1.017-.135.455-.07 1.012.433 1.316l.776-.708zM20.425 11.469C19.417 13.137 17.588 14.25 15.5 14.25v1.5c2.635 0 4.941-1.406 6.209-3.505l-1.284-.776zm1.284-.224C21.758 11.148 21.848 11.146 21.879 11.15c.03.004.093.019.159.083.078.075.112.179.112.917h1.5c0-.934-.571-1.293-1.026-1.354-.44-.06-.997.101-1.301.605l1.284.776zM12 21.25c-1.686 0-3.265-.45-4.624-1.237l-.751 1.298C8.206 22.227 10.043 22.75 12 22.75v-1.5zm-8.013-4.625C3.201 15.265 2.75 13.686 2.75 12H1.25c0 1.957.524 3.794 1.439 5.376l1.298-.751z" fill="%23B0B0B0"/></svg>');
}

.subject.astro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.9 2.307c-.16-.409-.738-.409-.9 0l-.43 1.095c-.049.125-.148.224-.272.274l-1.091.432c-.408.161-.408.741 0 .902l1.091.432c.124.049.223.149.272.274l.43 1.095c.16.41.738.41.9 0l.43-1.095c.049-.125.148-.224-.272.274l1.091-.432c.408-.161.408-.741 0-.902l-1.091-.432c-.124-.049-.223-.149-.272-.274L19.9 2.307z" stroke="%236C757D"/><path d="M16.033 8.13c-.16-.41-.738-.41-.9 0l-.157.4c-.049.125-.148.224-.272.274l-.398.157c-.408.162-.408.742 0 .903l.398.157c.124.049.223.149.272.274l.157.4c.16.41.738.41.9 0l.157-.4c.049-.125.148-.224-.272-.274l.398-.157c.408-.161.408-.741 0-.903l-.398-.157c-.124-.049-.223-.149-.272-.274l-.157-.4z" stroke="%236C757D"/><path d="M21.25 12c0 5.109-4.141 9.25-9.25 9.25V22.75c5.937 0 10.75-4.813 10.75-10.75h-1.5zM2.75 12c0-5.109 4.141-9.25 9.25-9.25V1.25C6.063 1.25 1.25 6.063 1.25 12h1.5zm12.75 2.25C12.324 14.25 9.75 11.676 9.75 8.5H8.25c0 4.004 3.246 7.25 7.25 7.25v-1.5zm-5-5.75c0-2.088 1.113-3.917 2.781-4.925L11.755 2.29C9.656 3.56 8.25 5.865 8.25 8.5h1.5zm-.268-4.925C11.648 2.356 11.646 2.446 11.65 2.477c.004.025.019.088.082.154.075.078.179.118.268.118v-1.5c-1.079 0-1.738.571-1.87 1.017-.135.455-.07 1.012.433 1.316l.776-.708zM20.425 11.469C19.417 13.137 17.588 14.25 15.5 14.25v1.5c2.635 0 4.941-1.406 6.209-3.505l-1.284-.776zm1.284-.224C21.758 11.148 21.848 11.146 21.879 11.15c.03.004.093.019.159.083.078.075.112.179.112.917h1.5c0-.934-.571-1.293-1.026-1.354-.44-.06-.997.101-1.301.605l1.284.776zM12 21.25c-1.686 0-3.265-.45-4.624-1.237l-.751 1.298C8.206 22.227 10.043 22.75 12 22.75v-1.5zm-8.013-4.625C3.201 15.265 2.75 13.686 2.75 12H1.25c0 1.957.524 3.794 1.439 5.376l1.298-.751z" fill="%236C757D"/></svg>');
}

.subject-icon-sharp.astro-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.9 2.307c-.16-.409-.738-.409-.9 0l-.43 1.095c-.049.125-.148.224-.272.274l-1.091.432c-.408.161-.408.741 0 .902l1.091.432c.124.049.223.149.272.274l.43 1.095c.16.41.738.41.9 0l.43-1.095c.049-.125.148-.224-.272.274l1.091-.432c.408-.161.408-.741 0-.902l-1.091-.432c-.124-.049-.223-.149-.272-.274L19.9 2.307z" stroke="%23ff9f0a"/><path d="M16.033 8.13c-.16-.41-.738-.41-.9 0l-.157.4c-.049.125-.148.224-.272.274l-.398.157c-.408.162-.408.742 0 .903l.398.157c.124.049.223.149.272.274l.157.4c.16.41.738.41.9 0l.157-.4c.049-.125.148-.224-.272-.274l.398-.157c.408-.161.408-.741 0-.903l-.398-.157c-.124-.049-.223-.149-.272-.274l-.157-.4z" stroke="%23ff9f0a"/><path d="M21.25 12c0 5.109-4.141 9.25-9.25 9.25V22.75c5.937 0 10.75-4.813 10.75-10.75h-1.5zM2.75 12c0-5.109 4.141-9.25 9.25-9.25V1.25C6.063 1.25 1.25 6.063 1.25 12h1.5zm12.75 2.25C12.324 14.25 9.75 11.676 9.75 8.5H8.25c0 4.004 3.246 7.25 7.25 7.25v-1.5zm-5-5.75c0-2.088 1.113-3.917 2.781-4.925L11.755 2.29C9.656 3.56 8.25 5.865 8.25 8.5h1.5zm-.268-4.925C11.648 2.356 11.646 2.446 11.65 2.477c.004.025.019.088.082.154.075.078.179.118.268.118v-1.5c-1.079 0-1.738.571-1.87 1.017-.135.455-.07 1.012.433 1.316l.776-.708zM20.425 11.469C19.417 13.137 17.588 14.25 15.5 14.25v1.5c2.635 0 4.941-1.406 6.209-3.505l-1.284-.776zm1.284-.224C21.758 11.148 21.848 11.146 21.879 11.15c.03.004.093.019.159.083.078.075.112.179.112.917h1.5c0-.934-.571-1.293-1.026-1.354-.44-.06-.997.101-1.301.605l1.284.776zM12 21.25c-1.686 0-3.265-.45-4.624-1.237l-.751 1.298C8.206 22.227 10.043 22.75 12 22.75v-1.5zm-8.013-4.625C3.201 15.265 2.75 13.686 2.75 12H1.25c0 1.957.524 3.794 1.439 5.376l1.298-.751z" fill="%23ff9f0a"/></svg>');
}

/* --- TAREA NUEVA (STACKING): Icono de Stacking --- */
html.dark-theme .subject.stacking-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="%23B0B0B0" d="M85,38.33H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,38.33,85,38.33z"/><path fill="%23B0B0B0" d="M85,55H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,55,85,55z"/><path fill="%23B0B0B0" d="M85,71.67H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,71.67,85,71.67z"/></svg>');
}

.subject.stacking-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="%236C757D" d="M85,38.33H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,38.33,85,38.33z"/><path fill="%236C757D" d="M85,55H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,55,85,55z"/><path fill="%236C757D" d="M85,71.67H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,71.67,85,71.67z"/></svg>');
}

.subject-icon-sharp.stacking-mode {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="%23ff9f0a" d="M85,38.33H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,38.33,85,38.33z"/><path fill="%23ff9f0a" d="M85,55H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,55,85,55z"/><path fill="%23ff9f0a" d="M85,71.67H15c-2.76,0-5-2.24-5-5s2.24-5,5-5h70c2.76,0,5,2.24,5,5S87.76,71.67,85,71.67z"/></svg>');
}

/* --- FIN TAREA NUEVA (STACKING) --- */

/* --- TAREA NUEVA (STACKING): Estilos para Barras y Marcadores --- */
.stacking-dof-bar {
    position: absolute;
    height: 60%;
    /* Ocupa el 60% central de la altura */
    top: 20%;
    background-color: rgba(79, 172, 254, 0.4);
    /* Naranja muy transparente (40%) para ALTO CONTRASTE en solape */
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    z-index: 1;
    pointer-events: none;
}

/* Marcadores numerados Stacking */
/* Marcadores numerados Stacking */
.marker.stacking-marker {
    /* POSICIONAMIENTO ABSOLUTO SUPERIOR: Ajuste de precisión */
    top: 5px;
    bottom: auto;
    font-weight: 800;
    color: var(--bg-main);
    font-size: 1.1em;
    z-index: 5;
}

.marker.stacking-marker span {
    background-color: var(--marker-focus-color);
    /* Cyan */
    /* Corrección Forma: Círculo Perfecto */
    width: 26px;
    /* Ancho fijo */
    height: 26px;
    /* Alto fijo del mismo valor */
    border-radius: 50%;
    display: flex;
    /* Flexbox para centrar el número */
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Sin padding que deforme */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.marker.stacking-marker::before {
    display: none;
    /* ELIMINADO: Sin línea conectora (User Request) */
}

/* Variación para impares (bajar más para escalonar) */
.marker.stacking-marker.marker-odd {
    /* Justo debajo de la fila 1: 5px + 26px + 4px = 35px */
    top: 35px;
    bottom: auto;
}

.marker.stacking-marker.marker-odd::before {
    display: none;
}

/* ============================ SEGUNDO VISUALIZADOR HIPERFOCAL ============================ */

/* Contenedor principal del visualizador hiperfocal */
.hyperfocal-visualizer-container {
    margin-top: 20px;
    padding: 15px;
    background: rgba(74, 144, 226, 0.05);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 8px;
}

/* Label de sección */
.visualizer-section-label {
    font-size: 14px;
    color: rgba(74, 144, 226, 0.95);
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

/* Visualizador hiperfocal sin margen extra */
.hyperfocal-visualizer {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Barra DoF hiperfocal - gradient con fade-out para efecto "infinito" */
.hyperfocal-dof-bar {
    /* Gradient de izquierda a derecha: sólido → desvanece → traslúcido */
    background: linear-gradient(to right,
            rgba(74, 144, 226, 0.6) 0%,
            /* Sólido al inicio */
            rgba(74, 144, 226, 0.6) 70%,
            /* Sólido hasta 70% */
            rgba(74, 144, 226, 0.3) 90%,
            /* Desvanece en penúltima sección */
            rgba(74, 144, 226, 0.1) 100%
            /* Traslúcido al final (efecto "lo pierdo de vista") */
        );
    border: 2px solid rgba(74, 144, 226, 0.5);
    border-right: 1px dashed rgba(74, 144, 226, 0.2);
    /* Borde derecho más sutil para infinito */
}

/* Icono del sujeto en visualizador hiperfocal - Tamaño Original Ajustado */
.hyperfocal-visualizer #hyperfocal-subject-marker {
    transform: translate(-50%, -50%);
    /* REVERTIDO: Centrado estándar */
    /* Solo centrado, sin reducción */
    transform-origin: center center;
    z-index: 10;
    /* Encima de la barra DoF */
}

/* (Revertido: Sin línea guía vertical ni flip horizontal) */

.hyperfocal-visualizer #hyperfocal-subject-marker .subject-icon-sharp {
    /* Asegurar visibilidad resetando el clip-path */
    opacity: 1;
    clip-path: inset(0 0 0 0) !important;
}

/* Alturas escalonadas para marcadores hiperfocal (evitar solapamiento) */
.hyperfocal-visualizer-container .marker.hyperfocal-near {
    bottom: 0 !important;
    /* Abajo */
}

.hyperfocal-visualizer-container .marker.hyperfocal-dist {
    bottom: 25px !important;
    /* Arriba (Focus) */
    z-index: 20;
}

.hyperfocal-visualizer-container .marker.hyperfocal-infinity {
    bottom: 0 !important;
    /* Abajo */
}

/* Entre near y dist */

/* Toggle container para mostrar/ocultar hiperfocal */
.hyperfocal-toggle-container {
    margin: 12px 0 8px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Label del toggle */
.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--text-secondary);
    user-select: none;
    transition: color 0.2s ease;
}

.toggle-label:hover {
    color: var(--text-primary);
}

/* Input checkbox oculto */
.toggle-label input[type="checkbox"] {
    display: none;
}

/* Switch visual del toggle */
.toggle-switch {
    position: relative;
    width: 42px;
    height: 24px;
    background-color: var(--border-color);
    border-radius: 12px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

/* Estado activo del toggle */
.toggle-label input[type="checkbox"]:checked+.toggle-switch {
    background-color: rgba(74, 144, 226, 0.8);
}

.toggle-label input[type="checkbox"]:checked+.toggle-switch::after {
    transform: translateX(18px);
}

/* Texto del toggle */
.toggle-text {
    font-weight: 500;
}

/* ============================ FIN REFERENCIA VISUAL HIPERFOCAL ============================ */

/* ============================================================================ */
/* MODALS.CSS */
/* ============================================================================ */

/* --- MODALES (ESTILOS ORIGINALES RESTAURADOS) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Padding original de 25px restaurado para que los modales antiguos se vean bien */
.modal-content {
    background-color: var(--bg-container);
    padding: 25px;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden; /* FIX: evitar scroll horizontal en todos los modales */
    position: relative;
    margin: auto;
    transform: none;
    transition: opacity 0.3s ease;

/* Glassmorphism universal para TODOS los modales */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

/* [FIX Javier] Modal de kit y avisos en modo CLARO: fondo sólido/claro para que no aparezca oscuro */
html.light-theme #backpack-modal .modal-content,
html.light-theme .modal-content.gear-modal-content,
html.light-theme #interactive-warning-modal .modal-content {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
html.light-theme #interactive-warning-modal-content {
    color: #1a1a1a !important;
}
html.light-theme #backpack-modal .gear-modal-header h3,
html.light-theme #backpack-modal .gear-item-name,
html.light-theme #backpack-modal .gear-item-detail {
    color: #1a1a1a !important;
}

/* Borde degradado interrumpido universal */
.modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.0) 20%,
            rgba(255, 255, 255, 0.0) 40%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.0) 60%,
            rgba(255, 255, 255, 0.0) 80%,
            rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.modal-overlay.open .modal-content {
    transform: scale(1);
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 10;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    /* Header con color de acento original */
    color: var(--accent);
}

.modal-content ul {
    list-style-type: none;
    padding: 0;
}

.modal-content li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9) !important;
}

.modal-content li:last-child {
    border-bottom: none;
}

/* --- ESTILOS MODAL DE ALERTA (Legacy) --- */
#alerts-modal-content .alert-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 5px;
    border-bottom: 1px solid var(--border-color);
}

#alerts-modal-content .alert-item:last-child {
    border-bottom: none;
}

#alerts-modal-content .alert-item::before {
    content: '⚠️';
    margin-right: 12px;
    font-size: 1.2em;
    line-height: 1.6;
}

/* --- ESTILOS MODAL DE ENFOQUE (Originales) --- */
#focus-modal .notice {
    margin-top: 15px;
    margin-bottom: 0;
    padding: 8px 12px;
    font-size: 0.85em;
}

#focus-modal-visualizer {
    position: relative;
    width: 100%;
    padding-bottom: 40px;
    margin-top: 20px;
}

#focus-modal-visualizer .timeline-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 150px;
    width: calc(100% - var(--camera-icon-width));
    margin-left: var(--camera-icon-width);
    box-sizing: border-box;
    border-bottom: 2px solid var(--border-color);
    gap: 0;
}

.modal-person-block {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
}

.modal-spacing-block {
    height: 100%;
    flex-basis: 0;
    flex-grow: 1;
}

.focus-modal-person {
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.focus-modal-person svg {
    max-width: 100%;
    max-height: 100%;
}

.focus-modal-person svg path {
    fill: var(--text-primary);
}

.focus-modal-label {
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-secondary);
}

.focus-modal-label .dist {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--text-primary);
    margin-top: 1px;
    display: block;
}

.focus-modal-line {
    position: absolute;
    bottom: 0;
    width: 3px;
    background-color: var(--accent);
    transform: translateX(-50%);
    z-index: 5;
    transition: height 0.3s ease;
}

.focus-modal-label.focus-point-marker {
    color: var(--accent);
    font-weight: bold;
    white-space: nowrap;
}

.focus-modal-label.focus-point-marker .dist {
    color: var(--accent);
}

/* --- OTROS MODALES (Conciertos, Info) --- */
#concerts-info-modal .modal-content h3,
#info-modal .modal-content h3 {
    font-size: 1.2em;
    color: var(--accent);
    margin-top: 20px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

#concerts-info-modal .modal-content p,
#info-modal .modal-content p,
.modal-content p {
    margin-top: 0;
    line-height: 1.7;
    /* Texto blanco brillante y legible */
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.98em;
}

#concerts-info-modal .modal-content h3:first-of-type,
#info-modal .modal-content h3:first-of-type {
    margin-top: 0;
}

/* --- MODAL SELECTOR --- */
.selector-modal-content {
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* FIX: evitar scroll horizontal en el picker de focal */
    box-sizing: border-box;
}

.selector-modal-handle {
    width: 40px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    margin: 0 auto 15px;
    flex-shrink: 0;
}

.selector-modal-search-wrapper {
    margin-bottom: 15px;
    position: relative;
    flex-shrink: 0;
}

#selector-modal-search {
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
}

html.dark-theme #selector-modal-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B0B0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

.selector-modal-search-wrapper.hidden {
    display: none;
}

#selector-modal-list {
    overflow-y: auto;
    overflow-x: hidden; /* FIX: evitar scroll horizontal en la lista de valores */
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}

.selector-option {
    padding: 15px 10px;
    font-size: 1.1em;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.selector-option:last-child {
    border-bottom: none;
}

.selector-option:hover {
    background-color: var(--bg-card);
}

.selector-option.is-active {
    font-weight: 700;
    color: var(--accent);
}

@media (max-width: 768px) {
    #selector-modal-overlay {
        align-items: flex-end;
    }

    .selector-modal-content {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        border-radius: 16px 16px 0 0;
        max-height: 50vh;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #selector-modal-overlay.open .selector-modal-content {
        transform: translateY(0);
    }
}

/* --- ESTILOS ESPECÍFICOS PARA MODAL INTERACTIVO DE AVISOS --- */
/* Solo este modal tendrá los bordes de color y el header completo */

#interactive-warning-modal .modal-content {
    padding: 0;
    /* Override para permitir header full-width */
    max-width: 500px;

    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    border: none !important;
    border-radius: 16px !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(255, 255, 255, 0.1) inset !important;

    /* Borde degradado interrumpido usando pseudo-elemento */
    position: relative !important;
    z-index: 1;
}

/* Borde degradado interrumpido (iOS Frost Style) */
#interactive-warning-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.0) 20%,
            rgba(255, 255, 255, 0.0) 40%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.0) 60%,
            rgba(255, 255, 255, 0.0) 80%,
            rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Ajuste del botón de cierre solo para este modal */
#interactive-warning-modal .modal-close-button {
    top: 15px;
    right: 15px;
    font-size: 1.5em;
    color: inherit;
    /* Hereda color del header */
    opacity: 0.7;
}

#interactive-warning-modal .modal-close-button:hover {
    opacity: 1;
}

/* Cabecera específica con fondo de color */
#interactive-warning-modal .modal-content h2 {
    margin: 0;
    padding: 22px 85px 22px 25px; /* Added right padding to prevent overlap with Volver button */
    font-size: 1.25em;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
}

/* Contenido interno con padding manual */
#interactive-warning-modal-content {
    padding: 20px 25px 0 25px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95em;
}

/* --- COLORES DEL MODAL INTERACTIVO --- */

/* INFO (Azul) */
#interactive-warning-modal.modal-info .modal-content {
    border-top-color: var(--accent);
}

#interactive-warning-modal.modal-info .modal-content h2 {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

#interactive-warning-modal.modal-info .modal-close-button {
    color: #2980b9;
}

html.dark-theme #interactive-warning-modal.modal-info .modal-content h2 {
    background-color: rgba(52, 152, 219, 0.25);
    color: #5dade2;
}

html.dark-theme #interactive-warning-modal.modal-info .modal-close-button {
    color: #5dade2;
}

/* WARNING (Naranja) */
#interactive-warning-modal.modal-warning .modal-content {
    border-top-color: var(--warning-text);
}

#interactive-warning-modal.modal-warning .modal-content h2 {
    background-color: rgba(79, 172, 254, 0.15);
    color: #00c6fb;
}

#interactive-warning-modal.modal-warning .modal-close-button {
    color: #00c6fb;
}

html.dark-theme #interactive-warning-modal.modal-warning .modal-content h2 {
    background-color: rgba(79, 172, 254, 0.25);
    color: #4facfe;
}

html.dark-theme #interactive-warning-modal.modal-warning .modal-close-button {
    color: #4facfe;
}

/* Acciones */
.modal-actions {
    padding: 20px 25px 25px 25px;
    /* Padding específico */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Actions defined in modern-index.css for beautiful glassmorphism */

/* Lista de opciones (Fallback) */
.fallback-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 15px;
    list-style: none;
    padding: 0;
}

.fallback-list li {
    border: none;
    padding: 0;
}

.fallback-button {
    width: 100%;
    padding: 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.fallback-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================================ */
/* ASSISTANTS.CSS */
/* ============================================================================ */

/* --- ESTILOS DE ASISTENTE (UNIDADES) --- */
/* Ocultar inputs imperiales por defecto */
.imperial-input-group {
    display: none;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas para pies y pulgadas */
    gap: 10px;
    align-items: flex-end;
    /* Alinea los labels y los inputs */
}

/* Mostrar inputs imperiales y ocultar métricos cuando el body tenga la clase */
body.imperial-units .imperial-input-group {
    display: grid;
}

body.imperial-units .metric-input-group {
    display: none;
}

/* Estilo para los sub-grupos de ft/in */
.imperial-input-group .input-group-imperial {
    display: flex;
    flex-direction: column;
}

.imperial-input-group .input-group-imperial label {
    font-size: 0.85em;
    /* Etiqueta más pequeña para ft/in */
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.imperial-input-group .input-with-unit {
    flex-grow: 1;
    /* Asegura que ocupe el espacio */
}

/* Asegurarse que el input y el span se vean bien */
.imperial-input-group input[type="number"] {
    width: 100%;
    /* Asegura que el input ocupe el espacio */
    box-sizing: border-box;
    /* Importante para el layout */
}

/* --- ESTILOS DE ASISTENTE (STACKING) --- */
/* (Movido desde el style.css monolítico y el <style> del HTML) */

/* Estilos para la lista de tomas de stacking */
#stacking-focus-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.stacking-shot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-main);
    padding: 5px 8px;
    border-radius: 6px;
}

.stacking-shot-item .shot-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--marker-focus-color);
    color: var(--bg-container);
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.9em;
    flex-shrink: 0;
}

.stacking-shot-item .shot-distance {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
}

/* Estilos para el resumen de stacking */
#stacking-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

#stacking-summary .summary-item .label {
    display: block;
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

#stacking-summary .summary-item .value {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary);
}

/* (Estilos del visualizador Stacking movidos a visualizer.css para evitar duplicidad y conflictos) */

/* ============================================================================ */
/* PAYWALL.CSS */
/* ============================================================================ */

/* --- PAYWALL MODAL STYLES --- */
#paywall-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#paywall-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.paywall-content {
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: paywall-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes paywall-slide-up {
    from {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.paywall-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.paywall-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.paywall-header {
    margin-bottom: 30px;
}

.paywall-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(255, 152, 0, 0.4));
}

.paywall-header h2 {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    background: linear-gradient(45deg, var(--accent), #ffca28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.paywall-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.paywall-products {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.paywall-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px 20px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.paywall-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.paywall-card:active {
    transform: scale(0.98);
}

.paywall-card.featured {
    border-color: var(--accent);
    background: linear-gradient(to right, rgba(255, 152, 0, 0.1), transparent);
}

.paywall-card.disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(1);
}

.save-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: black;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 8px;
    border-bottom-left-radius: 8px;
    text-transform: uppercase;
}

.card-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.plan-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
}

.plan-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
}

.plan-period {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 2px;
}

.paywall-loading {
    padding: 40px;
    color: var(--text-secondary);
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 15px auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.paywall-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.text-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 5px;
    margin-bottom: 10px;
}

.text-button:hover {
    color: var(--text-primary);
}

.terms-text {
    margin: 5px 0;
}

.legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.legal-links a:hover {
    text-decoration: underline;
}

div.paywall-card .card-content {
    flex-wrap: wrap;
}

div.paywall-card .card-content .plan-title {
    width: 100%;
}

div.paywall-card .card-content .plan-price {
    font-size: 1.2rem;
}

/* ============================================================================ */
/* MODERN-CALCULATOR.CSS */
/* ============================================================================ */

/* ==============================================
   MODERN CALCULATOR - CSS OVERLAY
   Strategy: Override old styles without breaking JS
   ============================================== */

/* === VARIABLES === */
:root {
    /* Colors matching index.html */
    /* --calc-bg-main: #0a0a0a; */
    /* BACKUP: Original Dark Gray */
    --calc-bg-main: #0a0a0a;
    /* DASHBOARD MATCH */

    /* --calc-bg-card: rgba(255, 255, 255, 0.05); */
    /* BACKUP: Original Opacity */
    --calc-bg-card: rgba(255, 255, 255, 0.05);
    /* DASHBOARD MATCH */

    /* Ensure legacy variables use modern values */
    --bg-container: var(--calc-bg-card);
    --bg-main: var(--calc-bg-main);

    --calc-bg-card-hover: rgba(255, 255, 255, 0.08);
    --calc-text-primary: #ffffff;
    --calc-text-secondary: rgba(255, 255, 255, 0.7);
    --calc-border-glow: #4facfe;
    --calc-accent-primary: #667eea;
    --calc-accent-secondary: #4facfe;
    /* Changed to Electric Blue */
    --calc-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
    --calc-shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.3);

    /* Gradients for cards */
    --calc-gradient-blue: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
    --calc-gradient-purple: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    --calc-gradient-orange: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
    /* Replaced with Blue Gradient */
}

/* Light Theme */
html.light-theme,
html.light-theme *,
html.light-theme ::before,
html.light-theme ::after {
    --calc-bg-main: #f5f5f5 !important;
    --calc-bg-card: rgba(255, 255, 255, 0.8) !important;
    --calc-bg-card-hover: rgba(255, 255, 255, 0.95) !important;
    --calc-text-primary: #1a1a1a !important;
    --calc-text-secondary: rgba(0, 0, 0, 0.6) !important;
    --calc-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    --calc-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* === GLOBAL OVERRIDES === */
body {
    background: var(--calc-bg-main) !important;
    color: var(--calc-text-primary) !important;
}

.container {
    max-width: 1200px;
    padding: 20px;
    /* [FIX Javier] Respetar la barra de status del dispositivo */
    padding-top: max(20px, env(safe-area-inset-top));
    /* FIX: Remove gray background container to match Dashboard floating cards */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Force fieldsets to match Dashboard Card style */
html:not(.light-theme) fieldset,
html:not(.light-theme) .glass-panel,
html:not(.light-theme) .results-panel,
html:not(.light-theme) .results-container,
html:not(.light-theme) .visualizer-container,
html:not(.light-theme) .action-button,
html:not(.light-theme) .control-group,
html:not(.light-theme) .input-group,
html:not(.light-theme) .summary-item,
html:not(.light-theme) .result-box,
html:not(.light-theme) .select-wrapper,
html:not(.light-theme) .dropdown-trigger,
html:not(.light-theme) input[type="number"],
html:not(.light-theme) input[type="text"],
html:not(.light-theme) select,
html:not(.light-theme) .button-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    position: relative !important;
    z-index: 1;
    padding: 12px !important;
}

/* Common Border Frame for Inputs */
.dropdown-trigger::before,
input[type="number"]::before,
input[type="text"]::before,
select::before,
.button-group::before {
    content: "";
    /* Note: ::before doesn't work on input/img, so we might need a wrapper for inputs. 
                  However, for select/divs it works. For exact inputs, we rely on the background/shadow 
                  or need a wrapper. Since we can't wrap easily in CSS-only, we accept soft frost for inputs 
                  OR we rely on the container. */
    display: none;
    /* inputs can't have pseudo-elements usually */
}

html:not(.light-theme) fieldset,
html:not(.light-theme) .glass-panel,
html:not(.light-theme) .results-panel,
html:not(.light-theme) .results-container,
html:not(.light-theme) .visualizer-container,
html:not(.light-theme) .action-button,
html:not(.light-theme) .control-group,
html:not(.light-theme) .input-group,
html:not(.light-theme) .summary-item,
html:not(.light-theme) .result-box,
html:not(.light-theme) .select-wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    color: white !important;
    position: relative !important;
    z-index: 1;
}

/* Common Border Frame */
fieldset::before,
.glass-panel::before,
.results-panel::before,
.results-container::before,
.visualizer-container::before,
.action-button::before,
.control-group::before,
.input-group::before,
.summary-item::before,
.result-box::before,
.select-wrapper::before,
/* .dropdown-trigger::before handled above or disabled for inputs */
.dummy-placeholder {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Action Button Specifics */
.action-button {
    border-radius: 12px !important;
}

.action-button::before {
    border-radius: 12px;
}

.action-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
}

/* Remove old gradients/borders from results panel specifically */
.results-panel,
.results-container {
    background-image: none !important;
    padding: 24px !important;
}

/* === MODERN HEADER === */
.tool-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 20px !important;
    margin-bottom: 40px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    flex: 0 0 auto;
}

/* === BACK BUTTON WITH FROST === */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--calc-bg-card);
    border: none;
    border-radius: 12px;
    color: var(--calc-text-primary) !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.back-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.back-button:before {
    content: "←";
    font-size: 1.2em;
}

.back-button:hover {
    background: var(--calc-bg-card-hover);
    transform: translateX(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.title-container {
    flex: 1;
    text-align: center;
}

.title-container h1 {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--calc-text-primary) !important;
}

.title-container p {
    font-size: 0.95em;
    color: var(--calc-text-secondary) !important;
}

.header-right {
    flex: 0 0 auto;
    display: flex;
    gap: 15px;
}

/* Theme Toggle - Standardized (matches dashboard) */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
}

/* Theme Toggle Label (Matches Dashboard Color but without glass) */
.theme-label {
    font-size: 0.9em;
    color: var(--calc-text-secondary) !important;
}

/* Ensure the toggle inside the calculator reverts to flat native styles 
   by overriding the dashboard's global glass toggle (if any) */
#calculator-page .theme-toggle-modern .toggle-slider,
#calculator-page .header-controls .theme-toggle-label .toggle-slider {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    height: 28px !important;
    width: 50px !important;
}

html.light-theme #calculator-page .theme-toggle-modern .toggle-slider,
html.light-theme #calculator-page .header-controls .theme-toggle-label .toggle-slider {
    background: rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#calculator-page .theme-toggle-modern:hover .toggle-slider,
#calculator-page .header-controls .theme-toggle-label:hover .toggle-slider {
    background: rgba(255, 255, 255, 0.25) !important;
}

html.light-theme #calculator-page .theme-toggle-modern:hover .toggle-slider,
html.light-theme #calculator-page .header-controls .theme-toggle-label:hover .toggle-slider {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Icon positioning */
html body .toggle-icon,
body .header-right #theme-icon {
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

/* Hide checkbox */
html body .theme-toggle-label input[type="checkbox"],
body .header-right input#theme-checkbox {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* === FIELDSETS AS GLASSMORPHIC CARDS WITH FROST BORDER === */
body fieldset,
html body fieldset {
    background: var(--calc-bg-card) !important;
    border: none !important;
    /* CRITICAL: Remove solid border for ::before to show */
    border-radius: 20px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--calc-shadow-lg) !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Subtle hover effect without colored gradients */
body fieldset:hover,
html body fieldset:hover {
    box-shadow: var(--calc-shadow-xl) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body fieldset legend,
html body fieldset legend {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    color: var(--calc-text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* === FORM GROUPS WITH FROST BORDER === */
.form-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

.form-group::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.form-group:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--calc-text-secondary) !important;
    font-size: 0.9em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === MODERN INPUTS === */
input[type="text"],
input[type="number"],
select,
.custom-select-wrapper input {
    width: 100%;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: var(--calc-text-primary) !important;
    font-size: 1em !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
.custom-select-wrapper input:focus {
    outline: none !important;
    border-color: rgba(200, 200, 200, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234facfe' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px !important;
}

/* === INPUT GROUPS WITH FROST === */
.metric-input-group,
.imperial-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

.metric-input-group::before,
.imperial-input-group::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.input-with-unit input {
    flex: 1;
}

.input-with-unit .unit-label {
    padding: 8px 12px;
    background: var(--calc-gradient-blue);
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--calc-text-primary);
    white-space: nowrap;
}

/* === NOTICES WITH FROST BORDER === */
.notice {
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
    border: none !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    font-size: 0.95em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

.notice::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.notice.good {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.15) 0%, rgba(72, 219, 251, 0.15) 100%) !important;
    border-left: 4px solid #2ed573 !important;
}

.notice.warning {
    background: linear-gradient(135deg, rgba(255, 159, 64, 0.15) 0%, rgba(255, 107, 107, 0.15) 100%) !important;
    border-left: 4px solid #ff9f40 !important;
}

.notice.tip {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%) !important;
    border-left: 4px solid #4facfe !important;
}

/* === RESULTS PANEL === */
.results-panel {
    background: var(--calc-gradient-blue) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    backdrop-filter: blur(20px) !important;
}

.results-panel h2 {
    color: var(--calc-text-primary) !important;
    font-size: 1.3em;
    margin-bottom: 20px;
}

.result-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.result-item strong {
    color: var(--calc-text-secondary);
    font-size: 0.9em;
}

.result-item span {
    color: var(--calc-text-primary);
    font-size: 1.1em;
    font-weight: 600;
}

/* === VISUALIZER === */
.visualizer-container {
    background: var(--calc-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    backdrop-filter: blur(20px) !important;
    position: relative;
    overflow: hidden;
}

/* Removed glow */
.visualizer-container::before {
    display: none !important;
}

/* === GLASS PANEL (For Hyperfocal & Tips) === */
.glass-panel {
    background: var(--calc-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--calc-shadow-lg) !important;
    transition: all 0.3s ease;
}

.glass-panel:hover {
    background: var(--calc-bg-card-hover) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--calc-shadow-xl) !important;
}

.tips-button.secondary-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--calc-text-primary) !important;
    box-shadow: none !important;
    margin-top: 15px !important;
    width: 100%;
    justify-content: center;
}

.tips-button.secondary-glass:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--calc-border-glow) !important;
    transform: translateY(-2px);
}

/* === BUTTONS === */
html:not(.light-theme) #calculator-page button:not(.ar-overlay-btn):not(#ar-overlay-toggle):not(.ar-stepper-btn):not(.ar-close-btn):not(.choice-button):not(.active-assistant),
html:not(.light-theme) #calculator-page .button {
    padding: 12px 24px !important;
    /* FROST STYLE FOR ALL BUTTONS */
    background:
        linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px) !important;
}

html:not(.light-theme) #calculator-page button:not(.ar-overlay-btn):not(#ar-overlay-toggle):not(.ar-stepper-btn):not(.ar-close-btn):hover,
html:not(.light-theme) #calculator-page .button:hover {
    transform: translateY(-2px) !important;
    background: #0039cb !important;
    /* Darker Blue on Hover */
    box-shadow: 0 6px 20px rgba(41, 98, 255, 0.6) !important;
}

html:not(.light-theme) #calculator-page button:active,
html:not(.light-theme) #calculator-page .button:active {
    transform: translateY(0) !important;
}

/* Secondary Buttons */
html:not(.light-theme) #calculator-page button.secondary,
html:not(.light-theme) #calculator-page .button.secondary {
    background: var(--calc-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--calc-text-primary) !important;
}

/* Active Assistant State (Blue — consistent with choice-button.active) */
html:not(.light-theme) #calculator-page button.active-assistant {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.85) 0%, rgba(79, 172, 254, 0.7) 100%) !important;
    border: 1px solid rgba(79, 172, 254, 0.8) !important;
    color: white !important;
    box-shadow: 0 0 14px rgba(79, 172, 254, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html:not(.light-theme) #calculator-page button.active-assistant:hover {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.9) 0%, rgba(79, 172, 254, 0.8) 100%) !important;
    transform: translateY(-1px) !important;
}

/* === MODALS === */
.modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

.modal-content {
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--calc-shadow-xl) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 16px !important;
}

.modal-header h3 {
    color: var(--calc-text-primary) !important;
}

.modal-close {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: rotate(90deg);
}

/* === TIME LAPSE MODULE === */

/* Hide standard DoF results in timelapse mode */
body[data-mode="timelapse"] .results-container,
body[data-mode="timelapse"] .hyperfocal-section,
body[data-mode="timelapse"] .hyperfocal-visualizer-container,
body[data-mode="timelapse"] #show-alerts-button,
body[data-mode="timelapse"] #show-tips-button {
    display: none !important;
}

/* Timelapse: single-column layout with moderate width for header + content */
body[data-mode="timelapse"] .container {
    max-width: 900px !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}

body[data-mode="timelapse"] main,
body[data-mode="timelapse"] .main-layout,
body[data-mode="timelapse"] .calculator-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
}

#timelapse-fieldset {
    padding: 20px !important;
}

/* Preset Chips Bar (desktop) */
.tl-presets-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

/* Mobile select hidden by default */
.tl-presets-bar-select {
    display: none;
}

.tl-presets-label {
    font-size: 0.85em;
    color: var(--calc-text-secondary);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-presets-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tl-preset-chip {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--calc-text-secondary) !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
}

.tl-preset-chip:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(79, 172, 254, 0.4) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.tl-preset-chip.active {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.2) 100%) !important;
    border-color: rgba(79, 172, 254, 0.5) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(79, 172, 254, 0.2) !important;
}

/* Calc Mode Row */
.tl-calc-mode-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 16px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.tl-calc-mode-row label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--calc-text-secondary);
    white-space: nowrap;
    margin-bottom: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-calc-select {
    flex: 1;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
}

/* Parameter Cards Grid */
.tl-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.tl-param-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.tl-param-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.tl-param-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.tl-param-icon {
    font-size: 1.5em;
    line-height: 1;
}

.tl-param-label {
    font-size: 0.75em !important;
    color: var(--calc-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
}

.tl-param-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.tl-input {
    flex: 1;
    text-align: center;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    padding: 6px 8px !important;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06) !important;
}

.tl-unit-select {
    width: auto !important;
    min-width: 50px;
    padding: 6px 24px 6px 8px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.tl-unit-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--calc-text-secondary);
    padding: 6px 10px;
    background: rgba(79, 172, 254, 0.1);
    border-radius: 8px;
    white-space: nowrap;
}

/* Results Section */
.tl-results {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.tl-result-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.tl-result-primary {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.1) 0%, rgba(72, 219, 251, 0.1) 100%) !important;
    border: 1px solid rgba(46, 213, 115, 0.25) !important;
}

.tl-result-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.tl-result-label {
    flex: 1;
    font-size: 0.9em;
    color: var(--calc-text-secondary);
    font-weight: 500;
}

.tl-result-value {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--calc-text-primary);
    white-space: nowrap;
}

.tl-result-primary .tl-result-value {
    color: #2ed573;
    font-size: 1.25em;
}

/* === TIMELAPSE RESPONSIVE === */

/* Fix: fieldset has default min-width: min-content which causes overflow */
#timelapse-fieldset {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.tl-param-card {
    position: relative;
}

@media (max-width: 768px) {
    body[data-mode="timelapse"] .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #timelapse-fieldset {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tl-params-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .tl-param-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tl-presets-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tl-calc-mode-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tl-calc-mode-row label {
        text-align: center;
    }

    .tl-param-input-row {
        max-width: 100% !important;
    }

    .tl-result-row {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .tl-param-card {
        padding: 10px !important;
    }

    .tl-input {
        font-size: 1.1em !important;
    }

    .tl-result-value {
        font-size: 1em;
    }

    .tl-result-primary .tl-result-value {
        font-size: 1.1em;
    }

    /* Hide chips, show native select on mobile */
    .tl-presets-bar-chips {
        display: none !important;
    }

    .tl-presets-bar-select {
        display: flex !important;
    }

    .tl-presets-bar-select .tl-calc-select {
        flex: 1;
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .tool-header {
        flex-wrap: wrap;
        gap: 15px;
    }

    .header-left {
        order: 1;
    }

    .title-container {
        order: 3;
        flex: 1 0 100%;
        margin-top: 15px;
    }

    .header-right {
        order: 2;
        margin-left: auto;
    }

    .title-container h1 {
        font-size: 1.4em;
    }

    fieldset {
        padding: 16px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .back-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }

    .theme-switch-wrapper {
        padding: 6px 12px;
    }

    .theme-label {
        display: none;
    }

    .title-container h1 {
        font-size: 1.2em;
    }

    .title-container p {
        font-size: 0.85em;
    }
}

/* === MOBILE SCROLL PERFORMANCE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* Reduce costly backdrop-filter on scroll-heavy elements */
    .form-group {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        transition: none !important;
    }

    .form-group:hover {
        transform: none !important;
    }

    .form-group::before {
        transition: none !important;
    }

    /* GPU compositing for scrollable fieldsets */
    body fieldset,
    html body fieldset {
        contain: layout style paint;
        will-change: auto;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: none !important;
    }

    /* Reduce blur on inputs — no visual need on mobile */
    input[type="text"],
    input[type="number"],
    select {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Disable hover effects on mobile (not applicable) */
    .result-item:hover {
        transform: none !important;
    }

    button:not(.numpad-btn):not(.numpad-adjust-btn):not(.numpad-confirm):hover,
    .button:hover {
        transform: none !important;
    }

    /* Smooth native scrolling */
    body, html {
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce blur on buttons — performance win (exclude numpad) */
    button:not(.numpad-btn):not(.numpad-adjust-btn):not(.numpad-confirm),
    .button {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .glass-panel {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: none !important;
    }

    .glass-panel:hover {
        transform: none !important;
    }

    .notice {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}
/* === PORTED MODAL FROM INDEX === */
.modern-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modern-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

/* ============================================================================ */
/* UNIT-SYSTEM-FIX.CSS */
/* ============================================================================ */

/* ==============================================
   UNIT SYSTEM VISIBILITY FIX
   Hide inactive measurement systems
   ============================================== */

/* Hide imperial inputs by default (show metric) */
html body .imperial-input-group,
body .form-group .imperial-input-group,
body fieldset .imperial-input-group {
    display: none !important;
}

/* Hide metric inputs when imperial is active */
html body.imperial-units .metric-input-group,
body.imperial-units .form-group .metric-input-group,
body.imperial-units fieldset .metric-input-group {
    display: none !important;
}

/* Show imperial when imperial is active */
html body.imperial-units .imperial-input-group,
body.imperial-units .form-group .imperial-input-group,
body.imperial-units fieldset .imperial-input-group {
    display: flex !important;
}

/* Ensure metric is visible by default */
html body .metric-input-group,
body .form-group .metric-input-group,
body fieldset .metric-input-group {
    display: flex !important;
}

/* ============================================================================ */
/* INFO-BUTTON-FIX.CSS */
/* ============================================================================ */

/* --- INFO BUTTON FIXES --- */
.gear-info-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 0.75em;
    line-height: 1.3;
}

.gear-info-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gear-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    /* Prevent shrinking */
    background: rgba(79, 172, 254, 0.25) !important;
    border: 1.5px solid rgba(79, 172, 254, 0.6) !important;
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 12px !important;
    font-weight: bold !important;
    font-family: monospace !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 0 6px rgba(79, 172, 254, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gear-info-btn:hover,
.gear-info-btn:active {
    background: rgba(79, 172, 254, 0.4) !important;
    color: white !important;
    border-color: rgba(79, 172, 254, 0.9) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.5) !important;
}

/* Specific text colors */
.gear-dla-text {
    color: #4facfe;
}

.gear-ss-text {
    color: #6dd5ed;
}

/* === REPLACE SVG "i" ICON WITH "?" IN ALL INFO BUTTONS === */
.info-button svg {
    display: none !important;
}

.info-button {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(79, 172, 254, 0.25) !important;
    border: 1.5px solid rgba(79, 172, 254, 0.6) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: monospace !important;
    cursor: pointer !important;
    box-shadow: 0 0 6px rgba(79, 172, 254, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.info-button::after {
    content: "?" !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: monospace !important;
    color: #fff !important;
}

.info-button:hover,
.info-button:active {
    background: rgba(79, 172, 254, 0.5) !important;
    border-color: rgba(79, 172, 254, 1) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6) !important;
}

/* === IPAD KIT MODAL FIX — single column layout === */
@media (min-width: 600px) and (max-width: 1024px) {
    #backpack-modal .modal-content {
        max-width: 400px !important;
    }

    #backpack-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #backpack-list .gear-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

/* ============================================================================ */
/* RED-MODE-RESTORE.CSS */
/* ============================================================================ */

/* ==============================================
   RED MODE EQUILIBRADO - Modo Nocturno Profesional
   Paleta balanceada para Astro y Conciertos
   ============================================== */

/* Variables de Color Equilibradas */
html body.astro-mode,
html body.concerts-mode {
    --bg-primary: #0a0000 !important;
    --bg-secondary: #1a0000 !important;
    --bg-panel: #2a2020 !important;
    --text-primary: #ff6666 !important;
    --text-secondary: #cc4444 !important;
    --text-muted: #994444 !important;
    --border-color: #442020 !important;
    --accent-red: #ff4444 !important;
}

/* Body - Fondo cálido oscuro */
body.astro-mode,
body.concerts-mode {
    background-color: #0a0000 !important;
    background: #0a0000 !important;
    color: #ff6666 !important;
}

/* Containers y Paneles - Jerarquía visual */
body.astro-mode .container,
body.astro-mode fieldset,
body.astro-mode .panel,
body.astro-mode .results-panel,
body.concerts-mode .container,
body.concerts-mode fieldset,
body.concerts-mode .panel,
body.concerts-mode .results-panel {
    background: #1a0000 !important;
    background-color: #1a0000 !important;
    border-color: #442020 !important;
}

/* Paneles especiales (más jerarquía) */
body.astro-mode .floating-card,
body.astro-mode .results-summary,
body.concerts-mode .floating-card,
body.concerts-mode .results-summary {
    background: #2a2020 !important;
    border-color: #442020 !important;
}

/* Headers - Rojo principal */
body.astro-mode h1,
body.astro-mode h2,
body.astro-mode h3,
body.astro-mode legend,
body.concerts-mode h1,
body.concerts-mode h2,
body.concerts-mode h3,
body.concerts-mode legend {
    color: #ff6666 !important;
}

/* Labels - Rojo secundario */
body.astro-mode label,
body.concerts-mode label {
    color: #cc4444 !important;
}

/* Text secundario y mutado */
body.astro-mode .text-secondary,
body.astro-mode p,
body.concerts-mode .text-secondary,
body.concerts-mode p {
    color: #cc4444 !important;
}

body.astro-mode .text-muted,
body.concerts-mode .text-muted {
    color: #994444 !important;
}

/* Inputs - Fondo oscuro con borde más visible */
body.astro-mode input,
body.astro-mode select,
body.astro-mode textarea,
body.concerts-mode input,
body.concerts-mode select,
body.concerts-mode textarea {
    background-color: #1a0000 !important;
    background: #1a0000 !important;
    color: #ff6666 !important;
    border: 1px solid #442020 !important;
}

/* Buttons - Gradación visual */
html body.astro-mode button,
html body.astro-mode .button,
html body.astro-mode .choice-button,
html body.concerts-mode button,
html body.concerts-mode .button,
html body.concerts-mode .choice-button {
    background: #2a2020 !important;
    color: #ff6666 !important;
    border: 1px solid #442020 !important;
}

html body.astro-mode button:hover,
html body.astro-mode .choice-button:hover,
html body.concerts-mode button:hover,
html body.concerts-mode .choice-button:hover {
    background: #330000 !important;
    color: #ff8888 !important;
    border-color: #552020 !important;
}

/* Active/Selected buttons */
html body.astro-mode button.active,
html body.astro-mode .choice-button.active,
html body.concerts-mode button.active,
html body.concerts-mode .choice-button.active {
    background: #440000 !important;
    color: #ff4444 !important;
    border: 1px solid #884444 !important;
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.3) !important;
}

/* Notices - Fondos apropiados */
body.astro-mode .notice,
body.concerts-mode .notice {
    background: #1a0000 !important;
    border: 1px solid #442020 !important;
    color: #ff6666 !important;
}

body.astro-mode .notice.warning,
body.concerts-mode .notice.warning {
    background: #2a1010 !important;
    border-color: #552020 !important;
}

body.astro-mode .notice.good,
body.concerts-mode .notice.good {
    background: #2a2020 !important;
    border-color: #442020 !important;
}

/* SVG - Rojo primario para íconos */
body.astro-mode svg path,
body.astro-mode svg,
body.concerts-mode svg path,
body.concerts-mode svg {
    stroke: #ff4444 !important;
    fill: #ff4444 !important;
}

/* Toggle switches */
body.astro-mode .slider,
body.concerts-mode .slider {
    background: #2a2020 !important;
    border: 1px solid #442020 !important;
}

body.astro-mode input:checked+.slider,
body.concerts-mode input:checked+.slider {
    background: #440000 !important;
}

/* Values y resultados - Destacados */
body.astro-mode .value,
body.astro-mode .result-value,
body.astro-mode strong,
body.concerts-mode .value,
body.concerts-mode .result-value,
body.concerts-mode strong {
    color: #ff4444 !important;
    font-weight: 700;
}

/* Form groups */
body.astro-mode .form-group,
body.concerts-mode .form-group {
    background: transparent !important;
}

/* Eliminar box shadows que no sean específicos */
body.astro-mode *:not(.active):not(.choice-button),
body.concerts-mode *:not(.active):not(.choice-button) {
    box-shadow: none !important;
}

/* Corrección de clase (concert vs concerts) */
body.concert-mode {
    background: #0a0000 !important;
    color: #ff6666 !important;
}

html body.concert-mode {
    --bg-primary: #0a0000 !important;
    --bg-secondary: #1a0000 !important;
    --bg-panel: #2a2020 !important;
}

/* Corrección de textos blancos específicos */
body.astro-mode .back-button,
body.astro-mode #hints-toggle-text,
body.astro-mode .theme-label,
body.concerts-mode .back-button,
body.concerts-mode #hints-toggle-text,
body.concerts-mode .theme-label,
body.concert-mode .back-button,
body.concert-mode #hints-toggle-text,
body.concert-mode .theme-label {
    color: #cc4444 !important;
}

/* Botón "Volver" específicamente */
body.astro-mode button.back-button,
body.concerts-mode button.back-button,
body.concert-mode button.back-button {
    color: #cc4444 !important;
}

/* Spans dentro de botones y labels */
body.astro-mode span,
body.concerts-mode span,
body.concert-mode span {
    color: inherit !important;
}
/* === CORRECCIÓN ULTRA-ESPECÍFICA DE TEXTOS BLANCOS === */

/* Botón Volver - Máxima especificidad */
html body.astro-mode .back-button,
html body.concerts-mode .back-button,
html body.concert-mode .back-button,
html body.astro-mode button.back-button,
html body.concerts-mode button.back-button,
html body.concert-mode button.back-button {
    color: #ff6666 !important;
}

html body.astro-mode .back-button:hover,
html body.concerts-mode .back-button:hover,
html body.concert-mode .back-button:hover {
    color: #ff8888 !important;
}

/* Distancia Hiperfocal y todos los labels */
html body.astro-mode .label,
html body.concerts-mode .label,
html body.concert-mode .label,
html body.astro-mode span.label,
html body.concerts-mode span.label,
html body.concert-mode span.label {
    color: #cc4444 !important;
}

/* Ver Consejos - Texto del botón */
html body.astro-mode [data-key="tips_button_text"],
html body.concerts-mode [data-key="tips_button_text"],
html body.concert-mode [data-key="tips_button_text"] {
    color: #cc4444 !important;
}

/* Todos los span dentro de botones */
html body.astro-mode button span,
html body.concerts-mode button span,
html body.concert-mode button span {
    color: #cc4444 !important;
}

/* FORZAR color en TODOS los spans */
html body.astro-mode * > span,
html body.concerts-mode * > span,
html body.concert-mode * > span {
    color: #cc4444 !important;
}

/* ============================================================================ */
/* MODERN-INDEX.CSS */
/* ============================================================================ */

/* ==============================================
   MODERN INDEX - CSS STYLES
   ============================================== */

/* === VARIABLES === */
:root {
    --bg-main: #0a0a0a;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --border-glow: #4facfe;
    --accent-orange: #4facfe;
    /* Changed to Electric Blue */
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Light Theme (default dark, toggle to light) */
html.light-theme,
html.light-theme *,
html.light-theme ::before,
html.light-theme ::after {
    --bg-main: #f5f5f5 !important;
    --bg-card: rgba(255, 255, 255, 0.8) !important;
    --bg-card-hover: rgba(255, 255, 255, 0.95) !important;
    --text-primary: #1a1a1a !important;
    --text-secondary: rgba(0, 0, 0, 0.6) !important;
    --border-glow: #4facfe !important;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

html.light-theme .modal-content {
    background-color: #f7f9fa !important;
}

html.light-theme .language-select-modern,
html.light-theme .theme-toggle-label {
    border-color: rgba(0, 0, 0, 0.1);
}

/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Dashboard-only: prevent scroll (only when modern-container is present) */
body:has(.modern-container) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Background Texture removed as per user request */

/* === CONTAINER === */
.modern-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 16px;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* === HEADER — Always centered like mobile === */
.modern-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px;
    gap: 10px !important;
}

.header-logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

.header-logo .logo {
    max-width: 80px;
    height: auto;
}

.header-title {
    order: 2 !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    margin-top: 0 !important;
}

.header-title h1 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.header-title p {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.header-right {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* === Custom Language Dropdown (replaces native <select>) === */
.lang-dropdown {
    position: relative;
    z-index: 100;
}

.lang-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;

    /* Same True Depth Glass as cards */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.88em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    min-width: 74px;
    position: relative;
    z-index: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.25),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.2);
}

.lang-dropdown-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.35),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.3);
}

.lang-dropdown-btn:active {
    transform: translateY(-1px);
    transition-duration: 0.1s;
}

.lang-dropdown-arrow {
    font-size: 1.3em;
    opacity: 0.85;
    transition: transform 0.2s ease;
    line-height: 1;
}

.lang-dropdown.open .lang-dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 130px;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(18, 18, 20, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    list-style: none;
    padding: 6px;
    z-index: 9999;
}

.lang-dropdown.open .lang-dropdown-list {
    display: block;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lang-dropdown-option {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.lang-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lang-dropdown-option.selected {
    background: rgba(79, 172, 254, 0.15);
    color: #4facfe;
    font-weight: 600;
}

/* Light theme overrides */
html.light-theme .lang-dropdown-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    color: #1a1a1a;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.95),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.08);
}

html.light-theme .lang-dropdown-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.85) 100%);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.98),
        inset -1px -1px 2px rgba(0, 0, 0, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.12);
}

html.light-theme .lang-dropdown-list {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

html.light-theme .lang-dropdown-option {
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .lang-dropdown-option:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

html.light-theme .lang-dropdown-option.selected {
    background: rgba(41, 98, 255, 0.08);
    color: #2962ff;
}

/* Scrollbar styling for dropdown list */
.lang-dropdown-list::-webkit-scrollbar {
    width: 4px;
}
.lang-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}
.lang-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Legacy Language Select (fallback, kept for compatibility) */
.language-select-modern {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 80px;  /* Prevents Russian/long-name truncation */
    max-width: 110px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.language-select-modern:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.language-select-modern:focus {
    outline: none;
    border-color: var(--border-glow);
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

/* Theme Toggle */
.theme-toggle-modern {
    position: relative;
}

.theme-checkbox-hidden {
    display: none;
}

.theme-toggle-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;

    /* Difusión: Fondo de muy baja opacidad y blur alto */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 12px;

    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    /* Arquitectura de Sombras 3D: Resplandor interno, sombra interna, sombra de oclusión y elevación */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Reflexión Especular (Rim Light) */
.theme-toggle-label::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.theme-toggle-label:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.45),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.3);
}

.theme-icon {
    font-size: 1.3em;
    transition: transform 0.3s ease;
}

.theme-checkbox-hidden:checked+.theme-toggle-label .theme-icon {
    transform: rotate(20deg);
}

/* === MAIN CONTENT === */
.modern-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

/* Force header-right (Language/Theme) to sit above the grid */
.modern-main>.header-right {
    order: -1 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
    gap: 12px;
}

.dashboard-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    flex: 1; /* Estira la grilla para ocupar exactamente el alto entre el header y los botones inferiores */
    min-height: 0;
    margin-bottom: 0 !important;
}

/* Cards always centered/vertical (icon on top, text below) */
/* FIXED percentage rows: icon always gets 55%, text always gets 45%. */
.floating-card,
.dashboard-card {
    display: grid !important;
    grid-template-rows: 55% 45%;
    align-items: stretch;
    justify-items: center;
    text-align: center;
    height: 100%; /* Adaptable a la altura automática de la grilla */
    min-height: 0;
    min-width: 0;
    padding: 10px 4px;
    overflow: hidden;
}

/* Exposure card — larger icon to match others */
#exposure-card .card-icon {
    transform: scale(1.35);
}

/* Settings button */
.settings-btn {
    background: transparent !important;
    border: none !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: 1.3em;
    cursor: pointer;
    padding: 6px;
    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    outline: none;
}
.settings-btn:active {
    transform: rotate(60deg);
}

/* === FLOATING CARDS (GRAYSCALE FROST) === */
.floating-card,
.dashboard-card {
    position: relative;
    gap: 0px;
    padding: 14px 12px 10px;

    /* Grayscale Frost Background (Overrides all color classes) */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px;

    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    -webkit-tap-highlight-color: transparent;
    z-index: 10;

    /* Removed heavy shadows, replaced with nothing as per user request */
    box-shadow: none !important;
}

/* Reflexión Especular (Rim Light Fino de 1.5px) */
.floating-card::before,
.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.0) 60%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.floating-card:hover,
.dashboard-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.45),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-card:active,
.dashboard-card:active {
    transform: translateY(-1px);
    transition-duration: 0.1s;
}

/* Animated Border Glow - DISABLED for Frost Style */
.card-border-glow {
    display: none !important;
}

/* 
.card-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.floating-card:hover .card-border-glow {
    opacity: 1;
    border-color: var(--border-glow);
    box-shadow: 0 0 20px var(--border-glow);
    animation: border-pulse 0.5s ease-out;
}

@keyframes border-pulse {
    0% {
        box-shadow: 0 0 0px var(--border-glow);
    }

    50% {
        box-shadow: 0 0 25px var(--border-glow);
    }

    100% {
        box-shadow: 0 0 20px var(--border-glow);
    }
}
*/

/* Card Icon */
.card-icon {
    font-size: 2.5em;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;        /* Fill the 55% grid zone */
    text-align: center;
    overflow: hidden;
}

/* Card Content */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.card-title {
    /* clamp() auto-shrinks the font for long translations */
    font-size: clamp(0.7em, 3.2vw, 1em);
    font-weight: 600;
    margin-bottom: 2px;
    /* Cap at 2 lines — consistent height, overflow hidden */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
    text-align: center;
}

.card-subtitle {
    font-size: 0.85em;
    color: var(--text-secondary);
    /* Hard cap at 1 line — prevents row height differences */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    /* Forces wrapping instead of horizontal clipping */
    word-break: break-word;
    white-space: normal;
    text-align: center;
}

/* Card Arrow */
.card-arrow {
    display: none !important;
    /* Removed to save vertical space for long translations */
}

.floating-card:hover .card-arrow {
    transform: translateX(6px);
    color: rgba(255, 255, 255, 0.8);
}

/* Card Indicator (for photo type) */
/* MUST be position: absolute so it doesn't participate in grid layout.
   Without this, it adds a 3rd grid item to "Tipo de Fotografía" card only,
   causing misalignment with cards that have 2 grid items. */
.card-indicator {
    position: absolute !important;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-card.selected .card-indicator {
    opacity: 1;
}

/* === CARD VARIANTS === */
/* All individual card gradients removed to preserve consistent Gray Frost aesthetic */
.card-purple,
.card-blue,
.card-orange,
.card-amber {
    /* Background handled by .floating-card Base Frost CSS */
}

/* === UNIT PILLS === */
.unit-pills {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.unit-pill {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.unit-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.unit-pill.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

/* Start button (kept for modals that still use start-button-modern class) */
html body .start-button-modern {
    width: 100%;
    padding: 18px;
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(65, 140, 255, 0.25) 0%, rgba(41, 98, 255, 0.30) 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* === RESTORE BUTTON === */
.restore-button-modern {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.restore-button-modern:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* === MODAL === */
.modern-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modern-modal.active {
    opacity: 1;
    /* FIX: Delay interaction to prevent ghost touches from underlying buttons */
    /* Increased to 700ms to allow all iOS touch events to clear */
    animation: enable-modal-interaction 0.7s step-end forwards;
}

@keyframes enable-modal-interaction {
    0% {
        pointer-events: none;
    }

    100% {
        pointer-events: auto;
    }
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: rgba(20, 20, 20, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: 1;
}

/* [FIX Javier] Modo claro: fondo blanco con texto oscuro para los modales del index */
html.light-theme .modal-content {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
}
html.light-theme .modal-content .modal-header h3,
html.light-theme .modal-content .type-name,
html.light-theme .modal-content .photo-type-label {
    color: #1a1a1a !important;
}
html.light-theme .photo-type-option,
html.light-theme .photo-type-button {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1a1a1a !important;
}
html.light-theme .photo-type-option:hover,
html.light-theme .photo-type-button:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}
html.light-theme .photo-type-option.selected,
html.light-theme .photo-type-button.selected {
    background: rgba(41, 98, 255, 0.05) !important;
    border-color: rgba(41, 98, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(41, 98, 255, 0.15) !important;
}

html.light-theme .photo-type-option.selected .type-name,
html.light-theme .photo-type-button.selected .type-name,
html.light-theme .photo-type-option.selected .photo-type-label,
html.light-theme .photo-type-button.selected .photo-type-label {
    color: #2962ff !important;
    font-weight: 700 !important;
}

.modal-content::before {
    display: none;
}

.modern-modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.modal-header h3 {
    font-size: 1.4em;
    font-weight: 600;
}

.modal-close {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* === INTERACTIVE WARNING MODAL ACTIONS === */
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 25px;
}

.fix-button {
    background: rgba(255, 255, 255, 0.08); /* fallback */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: 16px;
    border-radius: 50px;
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fix-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.fix-button.primary-action {
    background: linear-gradient(135deg, rgba(65, 140, 255, 0.25) 0%, rgba(41, 98, 255, 0.30) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: white;
    font-weight: 600;
    font-size: 1.1em;
    padding: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fix-button.primary-action:hover {
    background: linear-gradient(135deg, rgba(65, 140, 255, 0.35) 0%, rgba(41, 98, 255, 0.40) 100%);
}

html.light-theme .fix-button {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

html.light-theme .fix-button:hover {
    background: rgba(0, 0, 0, 0.08);
}

html.light-theme .fix-button.primary-action {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.8) 0%, rgba(0, 56, 204, 0.9) 100%);
    box-shadow: 0 10px 20px rgba(41, 98, 255, 0.2);
    border: none;
    color: white;
}

html.light-theme .fix-button.primary-action:hover {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.9) 0%, rgba(0, 56, 204, 1) 100%);
}

.reject-button {
    background: rgba(255, 255, 255, 0.05); /* very subtle background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 1em;
    padding: 16px 22px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none; /* remove underline for button look */
    opacity: 0.9;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 500;
}

.reject-button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

html.light-theme .reject-button {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a4a;
}

html.light-theme .reject-button:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}

.modal-text-message {
    font-size: 0.95em;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 4px;
}

/* === RESPONSIVE — Mobile adjustments === */
@media (max-width: 600px) {
    .modern-container {
        padding: 20px 16px;
    }

    .dashboard-cards-grid {
        gap: 12px;
    }

    .floating-card,
    .dashboard-card {
        padding: 8px 6px 6px;
    }

    .card-icon {
        font-size: 1.6em; /* Reduced for 3x3 mobile grid */
    }

    .card-title {
        font-size: clamp(0.65em, 2.8vw, 0.85em);
    }

    .card-subtitle {
        font-size: 0.6em;
    }

    .restore-button-modern {
        grid-column: 1 / -1;
    }

    .photo-types-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-logo .logo {
        max-width: 50px;
    }

    .dashboard-cards-grid {
        gap: 8px; /* Ajuste para móviles muy pequeños */
    }

    .header-title h1 {
        font-size: 1.1em;
    }

    .header-title p {
        font-size: 0.8em;
    }
}

/* === iPad / Tablet — Compact to fit no-scroll === */
@media (min-width: 768px) and (max-width: 1366px) {
    body:has(.modern-container) {
        overflow: hidden;
    }

    .modern-container {
        height: 100vh;
        height: 100dvh;
        min-height: unset;
        padding: 12px 24px;
        padding-top: calc(12px + env(safe-area-inset-top));
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .modern-header {
        margin-bottom: 14px;
    }

    .modern-main {
        gap: 10px;
    }

    .dashboard-cards-grid {
        gap: 5px;
        flex: 1;
        min-height: 0;
        margin-bottom: 0 !important;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .floating-card,
    .dashboard-card {
        padding: 6px 6px;
        gap: 8px !important;
        grid-template-rows: 55% 45% !important; /* Restore perfect icon-to-text ratio on tablet */
        min-height: 0;
        height: 100%;
    }

    .restore-button-modern {
        padding: 4px;
        margin-top: 2px;
        font-size: 0.75em;
    }
}

/* === PHOTO TYPE GRID & OPTIONS === */
.photo-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 10px 0;
}

.photo-type-option,
.photo-type-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    position: relative; /* Needed for checkmark badge ::after */

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-primary);
    z-index: 1;

    /* Removed bulky True 3D Shadows for minimalist look */
    box-shadow: none;

    /* Button reset */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 1em;
    width: 100%;
}

.photo-type-option:hover,
.photo-type-button:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: none;
}

.photo-type-option:active,
.photo-type-button:active {
    transform: translateY(0);
}

.photo-type-option.selected,
.photo-type-button.selected {
    border-color: rgba(79, 172, 254, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.3) !important;
}

/* Blue checkmark badge in top-right corner of the selected option */
.photo-type-option.selected::after,
.photo-type-button.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #2962ff, #4facfe);
    color: white;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 1px;
    box-shadow: 0 2px 8px rgba(41, 98, 255, 0.4);
    z-index: 2;
}

.photo-type-option.selected::before,
.photo-type-button.selected::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(79, 172, 254, 0.15) 50%, rgba(255, 255, 255, 0.1) 100%);
}

.type-icon,
.photo-type-icon {
    font-size: 2em;
    margin-bottom: 4px;
    line-height: 1;
}

.type-name,
.photo-type-label {
    font-size: 0.9em;
    font-weight: 500;
}

/* Hide checkmark by default, show on selected */
.photo-type-checkmark {
    display: none;
    font-size: 0.8em;
    color: #4facfe;
    margin-top: 4px;
}

.photo-type-button.selected .photo-type-checkmark {
    display: block;
}

/* ===================================================
   BUG 2 FIX — Botón "← Volver" reemplaza "×"
   =================================================== */
.modal-close.modal-back-btn {
    /* Override forma circular del modal-close */
    width: auto !important;
    height: auto !important;
    border-radius: 20px !important;
    font-size: 0.85em !important;
    padding: 8px 16px !important;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.modal-content > .modal-close.modal-back-btn {
    position: absolute !important;
    right: 20px !important;
    top: 15px !important;
    margin: 0 !important;
    z-index: 10;
}

.modal-close.modal-back-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateX(-2px);
}

html.light-theme .modal-close.modal-back-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1a1a1a !important;
}

html.light-theme .modal-close.modal-back-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* ===================================================
   BUG 4 FIX — Botón "?" junto a Iniciar Sesión
   =================================================== */
.gear-sync-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(79, 172, 254, 0.5);
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}

.gear-sync-help-btn:hover {
    background: #4facfe;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.4);
}

html.light-theme .gear-sync-help-btn {
    border-color: rgba(41, 98, 255, 0.4);
    background: rgba(41, 98, 255, 0.08);
    color: #2962ff;
}

html.light-theme .gear-sync-help-btn:hover {
    background: #2962ff;
    color: white;
    box-shadow: 0 0 10px rgba(41, 98, 255, 0.3);
}

/* Bloques información del modal de sincronización */
.sync-info-block {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

html.light-theme .sync-info-block {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.07);
}
/* =========================================================
   gear-save-btn — Base styles (dark + light mode)
   Definición base para que el botón sea visible en ambos
   temas. En dark-mode se mantiene el gradient azul-frost.
   En light-mode, light-mode-fixes.css lo override a azul
   sólido con texto blanco.
   ========================================================= */
.gear-save-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-top: 16px;
    border-radius: 12px;
    border: 1px solid rgba(79, 172, 254, 0.4);
    background: linear-gradient(135deg, rgba(65, 140, 255, 0.3) 0%, rgba(41, 98, 255, 0.35) 100%);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.25);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.gear-save-btn:hover {
    background: linear-gradient(135deg, rgba(65, 140, 255, 0.45) 0%, rgba(41, 98, 255, 0.5) 100%);
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.35);
}

/* =========================================================
   gear-toggle-manual-btn — "¿No encuentras tu cámara?"
   Botón de enlace para mostrar el formulario manual.
   ========================================================= */
.gear-toggle-manual-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(79, 172, 254, 0.45);
    color: #4facfe;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.gear-toggle-manual-btn:hover {
    background: rgba(79, 172, 254, 0.1);
}

/* Light mode: borde y texto visibles sobre fondo claro */
html.light-theme .gear-toggle-manual-btn {
    border-color: rgba(0, 102, 204, 0.5) !important;
    color: #0066cc !important;
    background: rgba(0, 102, 204, 0.04) !important;
}

html.light-theme .gear-toggle-manual-btn:hover {
    background: rgba(0, 102, 204, 0.1) !important;
}

/* ============================================================================ */
/* THEME-TOGGLE-RESTORE.CSS */
/* ============================================================================ */

/* ==============================================
   THEME TOGGLE - RESTORE ORIGINAL DESIGN
   Keep original position and style, just add icon
   ============================================== */

/* Override any broken checkbox styling */
html body .theme-toggle-label input[type="checkbox"],
body .header-right input#theme-checkbox {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Restore original toggle slider position */
html body .theme-toggle-label,
body .header-right .theme-toggle-label {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

html body .theme-toggle-label .toggle-slider,
body .header-right .toggle-slider {
    position: relative !important;
    width: 60px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

html body .theme-toggle-label:hover .toggle-slider,
body .header-right .theme-toggle-label:hover .toggle-slider {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Icon positioning - centered in slider */
html body .toggle-icon,
body .header-right #theme-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

/* Remove any checkbox visual artifacts */
html body input#theme-checkbox:checked+.toggle-slider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================================ */
/* HEADER-CONTROLS-RIGHT.CSS */
/* ============================================================================ */

/* ==============================================
   HEADER CONTROLS - TOP RIGHT (MORE SPACE)
   NEUTRALIZED FOR UI POLISH V3
   ============================================== */

/* Content removed to prevent conflict with ui-polish-fixes.css v3 architecture */
/* Previous rules forced min-height: 110px which broke vertical alignment */

/* ============================================================================ */
/* PHOTO-TYPE-FIX.CSS */
/* ============================================================================ */

/* ==============================================
   PHOTO TYPE GRID LAYOUT
   3 columns with Focus Stacking separated
   ============================================== */

/* Grid container */
#photo-types-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

/* Responsive grid */
@media (max-width: 768px) {
    #photo-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #photo-types-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === PHOTO TYPE BUTTONS WITH FROST === */
.photo-type-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
    padding: 24px 16px !important;
    border: none !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    font-weight: 500 !important;
    font-size: 0.95em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    text-align: center !important;
    min-height: 120px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}

.photo-type-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

@media (hover: hover) {
    .photo-type-button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    }
}

.photo-type-icon {
    font-size: 2.5em !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    /* Ensure icon doesn't clip shadow */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.photo-type-label {
    font-size: 0.95em !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

.photo-type-checkmark {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 1.4em !important;
    opacity: 0 !important;
    transform: scale(0) rotate(-180deg) !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    color: var(--border-glow) !important;
}

.photo-type-button.selected {
    background: rgba(79, 172, 254, 0.20) !important;
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.3) !important;
}

.photo-type-button.selected::before {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.9) 0%, rgba(79, 172, 254, 0.1) 50%, rgba(79, 172, 254, 0.6) 100%);
}

.photo-type-button.selected .photo-type-checkmark {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

/* Separator for Focus Stacking */
.photo-types-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    margin: 8px 0;
}

.photo-types-separator-label {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* ============================================================================ */
/* GEAR-UI.CSS */
/* ============================================================================ */

/* ==============================================
   GEAR UI - GLASSMORPHIC STYLES
   Theme: Professional Gray (#0a0a0a) + Electric Blue (#2962ff)
   ============================================== */

/* === MODAL CONTENT WITH FROST === */
#gear-manager-modal .modal-content {
    max-width: 95vw;
    width: 95vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: rgba(17, 17, 17, 0.95);
    border: none;
    border-radius: 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
}

#gear-manager-modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* === HELP SYSTEM === */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #4facfe;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
    cursor: pointer;
    border: 1px solid rgba(79, 172, 254, 0.3);
    pointer-events: auto;
    /* Ensure clickable */
    transition: all 0.2s ease;
}

.help-icon:hover {
    background: #4facfe;
    color: white;
    transform: scale(1.1);
}

/* Help Modal specific overrides */
#gear-help-modal {
    z-index: 11000 !important;
    /* Above everything (standard modal is 9999) */
}

/* === HEADER === */
.gear-modal-header {
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gear-modal-title h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.gear-modal-title p {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* === TABS === */
.gear-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.gear-tabs::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.gear-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 8px;
    white-space: nowrap;
    outline: none;
    flex-shrink: 1; /* Allow shrinking so they fit without scrolling */
    min-width: 0;   /* Allow text truncation if absolutely needed */
    padding-left: 8px;
    padding-right: 8px;
    /* Gradiente INTENSO glassmórfico gris (más premium como iOS) */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.gear-tab-btn:hover {
    color: #ffffff;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.12));
    border-color: rgba(255, 255, 255, 0.20);
}

@media (max-width: 480px) {
    .gear-tabs {
        padding: 0 4px;
        gap: 4px;
    }
    .gear-tab-btn {
        padding: 10px 4px;
        font-size: 0.85em; /* Smaller font on very small screens */
        text-align: center;
        flex: 1; /* evenly distribute */
    }
}

.gear-tab-btn.active {
    color: #ffffff;
    font-weight: 600;
    /* Gradiente AZUL glassmórfico (mismo efecto que gris) */
    background: linear-gradient(135deg,
            rgba(41, 98, 255, 0.45),
            rgba(79, 172, 254, 0.30)) !important;
    /* Important forces override on mobile touch states */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 172, 254, 0.6);
    box-shadow: 0 0 12px rgba(41, 98, 255, 0.3);
}

/* Eliminar línea azul - ya no es necesaria */
.gear-tab-btn.active::after {
    display: none;
}

/* === BODY === */
.gear-modal-body,
.gear-body {
    flex: 1;
    min-height: 0;
    /* Critical for flex overflow scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum scrolling */
    padding: 24px;
    padding-bottom: 80px;
    /* Space for the fixed footer */
    position: relative;
}

/* === EMPTY STATE === */
.gear-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.gear-empty-icon {
    font-size: 4em;
    margin-bottom: 16px;
    opacity: 0.8;
}

/* === GEAR GRID - RESPONSIVE 3 COLUMNS === */
.gear-grid {
    display: grid;
    /* Desktop: 3 columnas */
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

/* Tablet: 2 columnas */
@media (max-width: 1024px) {
    .gear-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil: 1 columna */
@media (max-width: 640px) {
    .gear-grid {
        grid-template-columns: 1fr;
    }
}

/* === GEAR CARD WITH FROST - VERTICAL LAYOUT === */
.gear-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.gear-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.gear-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

.gear-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: #4facfe;
    flex-shrink: 0;
}

.gear-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    /* Ensure truncation works */
}

/* UNIVERSAL VERTICAL ACTIONS */
.gear-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.gear-card-name {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.gear-card-detail {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
}

.gear-card-delete {
    background: transparent;
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.8);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.gear-card-delete:hover {
    background: rgba(255, 50, 50, 0.1);
    border-color: rgba(255, 50, 50, 0.8);
    color: #ff4444;
}

.gear-card-edit {
    background: transparent;
    border: 1px solid rgba(41, 98, 255, 0.3);
    color: rgba(41, 98, 255, 0.8);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.gear-card-edit *, .gear-card-delete * {
    pointer-events: none;
}

.gear-card-edit:hover {
    background: rgba(41, 98, 255, 0.1);
    border-color: rgba(41, 98, 255, 0.8);
    color: #2962ff;
}

/* Load Kit Button */
.gear-card-load {
    background: transparent;
    border: 1px solid rgba(79, 172, 254, 0.3);
    color: #4facfe;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Circle for Load */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gear-card-load:hover {
    background: rgba(79, 172, 254, 0.1);
    border-color: #4facfe;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.4);
}

/* === FAB (Floating Action Button) ===  */
.gear-fab {
    position: fixed !important;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2962ff 0%, #0039cb 100%);
    color: white;
    border: none;
    font-size: 1.6em;
    font-weight: 300;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(41, 98, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    z-index: 10000;
    /* Above modal content */
}

.gear-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(41, 98, 255, 0.6);
    background: #0039cb;
}

/* === FORM STYLES (Used in new modal) === */
.gear-input-group {
    margin-bottom: 16px;
}

.gear-input-group label {
    display: block;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    display: flex;
    /* Flex to align Help Icon */
    align-items: center;
    white-space: nowrap;
    /* Prevent wrapping */
    height: 24px;
    /* Fixed height for alignment */
}

/* Generalized input style for Dark Theme */
.gear-input,
.gear-search-input {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    /* Dark transparent bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    /* White text */
    font-size: 1em;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    /* Remove default styling on iOS */
}

.gear-input:focus,
.gear-search-input:focus {
    outline: none;
    border-color: #2962ff;
    background: rgba(255, 255, 255, 0.08);
}

/* Ensure placeholder text is visible but dim */
.gear-input::placeholder,
.gear-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* === SEARCH CLEAR BUTTON (×) — inside search wrapper === */
.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1;
    padding: 0;

    /* Dark circle — visible on both light and dark input backgrounds */
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.search-clear-btn:hover,
.search-clear-btn:active {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.gear-row {
    display: flex;
    gap: 16px;
}

.gear-row .gear-input-group {
    flex: 1;
}

/* Search Results */
.gear-search-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-result-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: rgba(41, 98, 255, 0.1);
}

.search-result-brand {
    font-size: 0.8em;
    color: #4facfe;
    text-transform: uppercase;
    font-weight: 600;
}

.search-result-model {
    font-size: 1em;
    color: white;
}

/* Save Button (Styled like Dashboard Start Button) */
.gear-save-btn {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, #2962ff 0%, #0039cb 100%);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(41, 98, 255, 0.4);
    text-align: center;
}

.gear-save-btn:hover {
    background: #0039cb;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(41, 98, 255, 0.6);
}

.gear-save-btn:active {
    transform: translateY(0);
}

/* === UTILITIES === */
.hidden {
    display: none !important;
}

.delete-btn {
    /* Alias */
    background: transparent;
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.8);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover {
    background: rgba(255, 50, 50, 0.1);
    border-color: rgba(255, 50, 50, 0.8);
    color: #ff4444;
}

/* === MULTI-SELECT MODE === */
.gear-card.selection-mode {
    cursor: pointer;
    border: 1px solid transparent;
}

.gear-card.selected {
    background: rgba(41, 98, 255, 0.15);
    border-color: #2962ff;
    box-shadow: 0 0 15px rgba(41, 98, 255, 0.2);
}

.gear-card-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    margin-right: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.gear-card.selection-mode .gear-card-checkbox {
    display: flex;
}

.gear-card.selected .gear-card-checkbox {
    background: #2962ff;
    border-color: #2962ff;
    color: white;
}

.gear-card-checkbox::after {
    content: '✓';
    font-size: 14px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.gear-card.selected .gear-card-checkbox::after {
    opacity: 1;
    transform: scale(1);
}

/* Header Buttons */
.gear-select-mode-btn,
.gear-delete-batch-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gear-select-mode-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.gear-select-mode-btn.active {
    background: #2962ff;
    border-color: #2962ff;
}

.gear-delete-batch-btn {
    background: rgba(255, 50, 50, 0.2);
    color: #ff8888;
    border-color: rgba(255, 50, 50, 0.3);
}

.gear-delete-batch-btn:hover {
    background: rgba(255, 50, 50, 0.3);
    color: #ff4444;
}

/* Batch Add Button (Search Results) */
.batch-add-btn {
    position: sticky;
    bottom: 0;
    margin-top: 10px;
    margin-bottom: 16px;
    width: 100%;
    background: #2962ff;
    color: white;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Search Result Selection */
.search-result-item {
    position: relative;
    padding-left: 16px;
}

.search-result-item.selected {
    background: rgba(41, 98, 255, 0.2);
    border: 1px solid rgba(41, 98, 255, 0.3);
}

.search-result-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
}

.search-result-checkbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: none;
    /* Only show on hover or select? Or always? Let's show always for batch add */
}

/* Only show checkbox if specifically enabling batch mode OR always for clarity */
.search-result-item .search-result-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-item.selected .search-result-checkbox {
    background: #2962ff;
    border-color: #2962ff;
}

.search-result-item.selected .search-result-checkbox::after {
    content: '✓';
    font-size: 12px;
    color: white;
}

/* === BACKPACK MODAL SPECIFIC FIX === */
#backpack-modal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    /* Ensure background is covered if backdrop is separate */
}

/* Ensure backdrop covers everything but sits behind content */
#backpack-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: -1;
}

#backpack-modal .modal-content {
    height: auto !important;
    max-height: 80vh !important;
    position: relative !important;
    margin: auto !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: 90% !important;
    max-width: 400px !important;

    /* Ensure flexbox parent treats it correctly */
    align-self: center !important;
    justify-self: center !important;
}

@media (max-width: 768px) {
    #backpack-modal .modal-content {
        width: 90% !important;
        max-width: 400px !important;
        border-radius: 16px !important;
        bottom: auto !important;
        /* Prevent bottom sticking */
    }
}

/* === GEAR CARD WITH FROST === */
.gear-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.gear-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.gear-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Top row: icon + text (takes full width) */
.gear-info-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 100%;
    min-width: 0;
}

/* Icon inside gear-info-wrapper */
.gear-icon {
    font-size: 2em;
    flex-shrink: 0;
    line-height: 1;
}

.gear-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Bottom row: action buttons (centered, full width) */
.gear-card-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex: 0 0 100%;
    margin-top: 8px;
}

/* ============================================
   RESPONSIVE MODAL WIDTH FIX
   ============================================ */

/* Mobile: Mantener comportamiento actual */
@media (max-width: 768px) {
    #gear-manager-modal .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
    }
}

/* Tablet/iPad: 90% del viewport */
@media (min-width: 769px) and (max-width: 1199px) {
    #gear-manager-modal .modal-content {
        max-width: 90vw !important;
        width: 90vw !important;
    }
}

/* Desktop: Máximo 1400px o 85% del viewport */
@media (min-width: 1200px) {
    #gear-manager-modal .modal-content {
        max-width: min(85vw, 1400px) !important;
        width: auto !important;
    }
}

/* === GEAR FOOTER (Hidden bar, FAB is fixed separately) === */
.gear-footer {
    display: none;
    /* Footer bar hidden — FAB floats independently */
}

/* === GEAR ADD FAB (Fixed to viewport, stays on scroll) === */

.gear-add-fab {
    position: absolute !important;
    bottom: max(24px, env(safe-area-inset-bottom));
    right: 24px;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2962ff 0%, #0039cb 100%);
    color: white;
    border: none;
    font-size: 1.6em;
    font-weight: 300;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(41, 98, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    z-index: 10000;
}

.gear-add-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(41, 98, 255, 0.6);
    background: linear-gradient(135deg, #0039cb 0%, #001e8a 100%);
}

.gear-add-fab:active {
    transform: scale(0.95);
}

/* Footer button styles */
.gear-footer-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.25) 0%, rgba(41, 98, 255, 0.15) 100%);
    border: 1px solid rgba(41, 98, 255, 0.4);
    color: white;
}

.gear-footer-btn:hover {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.4) 0%, rgba(41, 98, 255, 0.25) 100%);
}

.gear-footer-btn.danger {
    background: linear-gradient(135deg, rgba(255, 50, 50, 0.25) 0%, rgba(255, 50, 50, 0.15) 100%);
    border-color: rgba(255, 50, 50, 0.4);
    color: #ff8888;
}

.gear-footer-btn.danger:hover {
    background: linear-gradient(135deg, rgba(255, 50, 50, 0.4) 0%, rgba(255, 50, 50, 0.25) 100%);
    color: #ff4444;
}

/* =====================================================
   LIGHT MODE OVERRIDES — Mi Equipo (gear-ui.css)
   Todas las propiedades llevan !important para
   garantizar que ganen la cascada del bundle.
   ===================================================== */

html.light-theme #gear-manager-modal .modal-content {
    background: rgba(242, 245, 249, 0.98) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .gear-modal-header {
    background: rgba(255, 255, 255, 0.75) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .gear-modal-title h2,
html.light-theme #gear-manager-modal h2 {
    color: #111111 !important;
}

html.light-theme .gear-modal-title p,
html.light-theme #gear-manager-modal .gear-modal-header p {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* Tabs */
html.light-theme .gear-tabs {
    background: rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .gear-tab-btn {
    color: rgba(0, 0, 0, 0.65) !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .gear-tab-btn:hover {
    color: #111111 !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.04)) !important;
}

html.light-theme .gear-tab-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.85), rgba(79, 172, 254, 0.70)) !important;
    border-color: rgba(41, 98, 255, 0.6) !important;
    box-shadow: 0 2px 10px rgba(41, 98, 255, 0.3) !important;
}

/* Modal body background */
html.light-theme .gear-modal-body,
html.light-theme .gear-body {
    background: transparent !important;
}

/* Estado vacío */
html.light-theme .gear-empty-state {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* ---- CARDS ---- */
html.light-theme .gear-card {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .gear-card:hover {
    background: rgba(255, 255, 255, 1) !important;
}

/* Texto de cards — CRÍTICO */
html.light-theme .gear-card-name {
    color: #111111 !important;
}

html.light-theme .gear-card-detail {
    color: rgba(0, 0, 0, 0.5) !important;
}

html.light-theme .gear-card-icon {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #2962ff !important;
}

html.light-theme .gear-card-checkbox {
    border-color: rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

/* ---- INPUTS y LABELS ---- */
html.light-theme .gear-input,
html.light-theme .gear-search-input {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #111111 !important;
}

html.light-theme .gear-input:focus,
html.light-theme .gear-search-input:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #2962ff !important;
}

html.light-theme .gear-input::placeholder,
html.light-theme .gear-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}

html.light-theme .gear-input-group label {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* ---- RESULTADOS DE BÚSQUEDA ---- */
html.light-theme .search-result-item {
    background: rgba(0, 0, 0, 0.025) !important;
}

html.light-theme .search-result-item:hover {
    background: rgba(41, 98, 255, 0.07) !important;
}

html.light-theme .search-result-model {
    color: #111111 !important;
}

html.light-theme .search-result-brand {
    color: #2962ff !important;
}

html.light-theme .search-result-checkbox {
    border-color: rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* ---- BOTONES HEADER ---- */
html.light-theme .gear-select-mode-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* ---- BOTÓN GUÍA RÁPIDA (inline styles en gear-modal-body) ---- */
html.light-theme .gear-help-btn-bottom {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* ---- BOTÓN INICIAR SESIÓN (gear-cloud-status) ---- */
html.light-theme #gear-cloud-status {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html.light-theme #cloud-text {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* ---- MODAL CONFIRMAR ---- */
html.light-theme #gear-confirm-modal .modal-content {
    background: rgba(242, 245, 249, 0.98) !important;
}

html.light-theme #gear-confirm-modal .gear-modal-title h2 {
    color: #111111 !important;
}

html.light-theme #gear-confirm-modal p {
    color: rgba(0, 0, 0, 0.7) !important;
}

html.light-theme #gear-confirm-modal .gear-form-close {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #111111 !important;
}

/* ===================================================
   FIX: gear-add-fab cuadrado blanco en modo claro
   En modo claro el FAB debe mantener su color azul.
   =================================================== */
html.light-theme .gear-add-fab {
    background: linear-gradient(135deg, #2962ff 0%, #0039cb 100%) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(41, 98, 255, 0.5) !important;
}

/* ===================================================
   FIX: Agregar Cámara / Lente — modal en modo oscuro
   modals.css aplica background: rgba(255,255,255,0.08)
   lo que da aspecto blanquecino. Forzar fondo oscuro.
   =================================================== */
#add-gear-modal .modal-content,
#add-gear-modal.modern-modal .modal-content {
    background: rgba(17, 17, 27, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: white !important;
}
/* En modo claro: fondo blanco apropiado */
html.light-theme #add-gear-modal .modal-content {
    background: rgba(245, 247, 250, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #111111 !important;
}

/* ===================================================
   FIX: Header de Mi Equipo descuajado cuando hay
   equipo seleccionado — permite wrapping y limita
   el espacio que ocupa cada sección del header.
   =================================================== */
.gear-modal-header {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
}
.gear-modal-header > div:first-child {
    /* Título + subtítulo — crece pero no se parte */
    flex: 0 1 auto;
    min-width: 0;
}
.gear-modal-header > div:first-child p {
    /* El párrafo subtítulo puede truncar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
/* La sección derecha (cloud status + volver) queda en su propia línea en móvil */
@media (max-width: 480px) {
    .gear-modal-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .gear-modal-header > div:last-child {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Fix for blind buttons on Capacitor iOS/Android due to text nodes stealing touches and not bubbling correctly */
.gear-card-edit *, .gear-card-delete * {
    pointer-events: none !important;
}

.gear-card-edit, .gear-card-delete {
    position: relative !important;
    z-index: 10 !important;
    /* ensure touch target is prominent */
    min-width: 44px;
    min-height: 44px;
}

/* ============================================================================ */
/* BACKPACK-STYLES.CSS */
/* ============================================================================ */

/* Backpack Button & Kit Display Styles */
.gear-kit-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 5px;
    gap: 10px;
}

.backpack-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    position: relative;
    z-index: 1;
}

.backpack-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.backpack-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

.backpack-button:active {
    transform: translateY(1px);
}

.backpack-button svg {
    margin-top: -1px;
}

/* Active Kit Display */
.gear-kit-info {
    display: flex;
    align-items: center;
    background: rgba(4, 222, 113, 0.15);
    /* Matrix Green Tint */
    border: 1px solid rgba(4, 222, 113, 0.3);
    padding: 4px 8px 4px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    color: #04de71;
    /* Matrix Green Text */
    gap: 6px;
    flex: 1;
    /* Take remaining space */
    justify-content: space-between;
}

.gear-kit-info.hidden {
    display: none;
}

.kit-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.clear-kit-btn {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.clear-kit-btn:hover {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .gear-kit-header {
        flex-wrap: wrap;
    }

    .gear-kit-info {
        order: 2;
        width: 100%;
        margin-top: 5px;
    }
}

/* ============================================================================ */
/* BACKPACK-FIX.CSS */
/* ============================================================================ */

/* Fix for Backpack Modal Positioning */
/* Fix for Backpack Modal Positioning */
#backpack-modal {
    /* FIXED: Changed to flex to align with global modal strategy */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    display: flex !important;
    /* Forces centering */
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#backpack-modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#backpack-modal.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure content is centered and visible */
/* Ensure content is centered and visible */
#backpack-modal .modal-content {
    position: relative !important;
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    width: 90% !important;
    max-width: 400px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    /* CENTERING FIX */
    margin: auto !important;
    align-self: center !important;
    /* Allow positioning */
    transform: none !important;
    /* Avoid conflicts */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
}

/* Header inside modal */
#backpack-modal .gear-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#backpack-modal h3 {
    margin: 0;
    font-size: 1.2em;
    color: white;
}

/* Close button */
#backpack-modal .close-modal-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 5px;
}

/* ============================================================================ */
/* AR-VIEWFINDER.CSS */
/* ============================================================================ */

/* AR Viewfinder Styles */
#ar-viewfinder-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #000;
    /* Negro mientras carga la cámara */
    overflow: hidden;
}

#ar-viewfinder-modal.hidden {
    display: none !important;
}

.ar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    /* IMPORTANTE: Bloquea toques hacia la app trasera */
}

.ar-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: auto;
    z-index: 10;
    /* Mantener por encima del frame */
}

/* Sensor selector in the footer (standalone mode only) — full-width, touch-friendly */
.ar-sensor-footer-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 7px 32px 7px 12px;
    font-size: 0.8em;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 8px);
    background-position-y: 50%;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    min-height: 36px;     /* clear minimum touch target */
}

/* Ensure the sensor container has full touch area in the footer */
#ar-standalone-sensor-container {
    pointer-events: auto;
}

/* === TAP-TO-EDIT FOCAL VALUE INPUT === */
/* Applies to both #ar-slider-current-val and #ar-compare-val when editable */
#ar-slider-current-val,
#ar-compare-val,
.ar-compare-main-val {
    cursor: text;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s;
    touch-action: manipulation;
}
#ar-slider-current-val:active,
#ar-compare-val:active,
.ar-compare-main-val:active {
    opacity: 0.6;
}

/* Inline number input for focal value editing */
.ar-focal-input {
    width: 58px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-size: 1.05em;
    font-weight: 700;
    text-align: center;
    padding: 2px 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    /* Remove number input spinners */
    -moz-appearance: textfield;
}
.ar-focal-input::-webkit-inner-spin-button,
.ar-focal-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   COMPARE MODE — minimal footer: only sliders + 🔄 + Cerrar
   ============================================================ */

/* Elements to hide when compare mode is active */
#ar-viewfinder-modal.compare-mode #ar-slider-current-val,
#ar-viewfinder-modal.compare-mode #ar-bw-toggle,
#ar-viewfinder-modal.compare-mode #ar-comp-toggle,
#ar-viewfinder-modal.compare-mode #ar-ratio-toggle,
#ar-viewfinder-modal.compare-mode #ar-apply-btn,
#ar-viewfinder-modal.compare-mode #ar-help-btn,
#ar-viewfinder-modal.compare-mode .ar-info-chip,
#ar-viewfinder-modal.compare-mode .ar-overlay-bar {
    display: none !important;
}

/* Compact the controls container in compare mode */
#ar-viewfinder-modal.compare-mode .ar-controls-container {
    padding: 8px 14px 8px;
    gap: 4px;
    background: rgba(0, 0, 0, 0.45);
}

/* Tighten the footer in compare mode */
#ar-viewfinder-modal.compare-mode .ar-footer {
    gap: 4px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* In compare mode the action buttons row just shows 🔄 + Cerrar */
#ar-viewfinder-modal.compare-mode #ar-slider-actions-row {
    gap: 6px;
}

/* Main slider row: add the current focal value inline in compare mode */
#ar-viewfinder-modal.compare-mode .ar-compare-main-val {
    display: inline !important;
}

/* ... existing code ... */
.ar-frame-container {
    position: absolute;
    top: var(--ar-header-h, 0px);    /* start below header */
    left: 0;
    right: 0;
    bottom: var(--ar-footer-h, 0px); /* end above footer   */
    pointer-events: none;
    z-index: 1;
}

.ar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 10;
    /* Mantener por encima del frame */
}

.ar-controls-container {
    width: 100%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 16px;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* iPad and larger: expand container width but keep column layout */
@media (min-width: 768px) {
    .ar-controls-container {
        max-width: 90%;
    }
}

/* Desktop only: horizontal row layout.
   Requires BOTH wide + tall viewport (excludes tablets in landscape).
   pointer:fine = mouse/trackpad (excluye touch devices como iPads) */
@media (min-width: 1200px) and (pointer: fine) {
    .ar-controls-container {
        max-width: 90%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
    }
}

/* Safety: all touch devices keep column layout regardless of width */
@media (pointer: coarse) {
    #ar-controls-wrapper.ar-controls-container,
    .ar-controls-container {
        flex-direction: column !important;
    }
}

.ar-slider {
    width: 100%;
    margin-bottom: 8px;
    accent-color: #04de71;
}

.ar-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.7);
}

.ar-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    outline: 4000px solid rgba(0, 0, 0, 0.6);
    /* mask effect fix for Safari */
    border: 2px solid #04de71;          /* solid green — distinct from orange dashed compare */
    box-shadow: 0 0 0 1px rgba(4,222,113,0.2);
    z-index: 2;
    transition: width 0.3s ease-out, height 0.3s ease-out;
}

.ar-info-chip {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#ar-web-mock-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, #10182b 0%, #1a2a44 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#ar-web-mock-bg::after {
    content: '📷 Simulación de Visor (Mock Mode)';
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5em;
    font-weight: bold;
}

/* Adjust main body when AR is active */
body.ar-active {
    background: #000 !important;
    overflow: hidden !important;
}

/* Ocultar TODOS los hijos del body excepto el modal AR, el video y el tour */
body.ar-active>*:not(#ar-viewfinder-modal):not(.guided-tour-overlay) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Asegurar que el modal AR siempre sea visible y esté encima */
body.ar-active #ar-viewfinder-modal {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Prevent GPU Crash on Mobile when Lunar Calendar overlays the 4000px AR outline */
body.lunar-modal-active #ar-frame-container {
    display: none !important;
}

/* Enlarged touch target for AR close button */
.ar-close-btn {
    padding: 15px;
    margin: -15px;
    font-size: 28px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
}

/* === LANDSCAPE PHONES: Standalone AR controles ultra-compactos === */
@media (orientation: landscape) and (max-height: 500px) {
    .ar-footer {
        padding: 4px 10px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        gap: 4px;
    }

    .ar-controls-container {
        max-width: 100% !important;
        flex-direction: row !important;
        align-items: center;
        padding: 4px 10px;
        gap: 6px;
    }

    #ar-standalone-sensor-container {
        flex: 0 0 auto;
    }

    #ar-standalone-sensor-container select {
        padding: 3px 6px !important;
        font-size: 0.7em !important;
        max-width: 130px !important;
    }

    #ar-slider-actions-row {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    #ar-slider-actions-row>div:first-child {
        flex: 1 1 120px !important;
        min-width: 80px !important;
    }

    #ar-slider-current-val {
        font-size: 0.85em !important;
        min-width: 36px !important;
    }

    .ar-info-chip {
        display: none !important;
    }

    .ar-header {
        padding: 8px 16px 4px !important;
    }
}
/* =========================================================
   AR RATIO OVERLAYS — Barra flotante en top del visor
   ========================================================= */

/* Toggle button en el footer */
#ar-overlay-toggle {
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.72em;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}
#ar-overlay-toggle.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}

/* Barra flotante en la parte superior del visor (dentro del modal, sobre el frame-container) */
.ar-overlay-bar {
    position: absolute;
    /* Justo debajo del ar-header (~56px) */
    top: 56px;
    left: 0; right: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 12px;
    z-index: 200;
    pointer-events: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
    /* Oculta por defecto — se muestra con toggle */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
.ar-overlay-bar::-webkit-scrollbar { display: none; }

/* Cuando la barra está visible */
.ar-overlay-bar.bar-visible {
    max-height: 60px;
    opacity: 1;
    pointer-events: auto;
}

/* En landscape móvil: ajustar posición top */
@media (orientation: landscape) and (max-height: 500px) {
    .ar-overlay-bar {
        top: 40px;
    }
}

.ar-overlay-btn {
    padding: 5px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--overlay-color, rgba(255,255,255,0.4));
    background: rgba(0,0,0,0.55);
    color: var(--overlay-color, #fff);
    font-size: 0.7em;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Sin transition de background: los inline styles la gestionan directamente */
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* .ar-overlay-btn.active — estilos aplicados directamente por _syncButtonStyles() via inline styles
   No se define background aqui para que los inline styles tengan precedencia sin conflict */
.ar-overlay-btn.active {
    transform: scale(1.05);
}

.ar-overlay-btn:active {
    transform: scale(0.95);
}

/* Inputs para ratio custom */
.ar-custom-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.65);
    padding: 4px 8px;
    border-radius: 16px;
    border: 1.5px solid #ff6b6b;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.ar-custom-inputs.hidden {
    display: none;
}

.ar-custom-inputs input {
    width: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,100,100,0.4);
    border-radius: 6px;
    color: #ff6b6b;
    font-size: 0.85em;
    font-weight: 700;
    text-align: center;
    padding: 3px 4px;
}

/* Overlay box sobre el frame */
.ar-ratio-overlay {
    pointer-events: none;
}

/* Stepper buttons para ratio custom */
.ar-custom-inputs {
    /* Override: compacto inline, no full-width */
    width: auto !important;
    border-radius: 20px;
    padding: 5px 10px;
    gap: 4px;
    flex-wrap: nowrap;
}

.ar-stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #ff6b6b;
    background: rgba(0,0,0,0.5);
    color: #ff6b6b;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.ar-stepper-btn:active {
    background: #ff6b6b;
    color: #000;
    transform: scale(0.9);
}

.ar-stepper-val {
    color: #ff6b6b;
    font-weight: 700;
    font-size: 0.9em;
    min-width: 20px;
    text-align: center;
}

/* === WEB NOTICE — Aviso de app nativa (solo en navegador web) === */
.ar-web-notice {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 10px 16px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: ar-notice-in 0.3s ease;
}

@keyframes ar-notice-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ar-web-notice span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1.3;
}

.ar-web-notice button {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.ar-web-notice button:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ar-web-notice button:active {
    background: rgba(255, 255, 255, 0.4);
}

/* === B&W FILTER (WEB ONLY) === */
.ar-frame.bw-active video {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* === BOTONES ACTIVOS (B&W y COMPOSICIÓN) === */
.ar-circle-btn.active {
    background: #04de71 !important;
    color: black !important;
    border-color: #04de71 !important;
}

/* === MENÚ FLOTANTE DE COMPOSICIONES === */
.ar-overlay-menu {
    position: absolute;
    bottom: 80px; /* por encima del footer */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90vw;
}

.ar-overlay-menu.hidden {
    display: none !important;
}

.ar-comp-btn {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ar-comp-btn:active {
    transform: scale(0.95);
}

.ar-comp-btn.active {
    background: #04de71;
    color: black;
    border-color: #04de71;
    font-weight: 600;
}

/* === ESTILOS SVG DE COMPOSICIÓN === */
.ar-comp-svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Por encima de la cámara, por debajo de los controles */
    pointer-events: none; /* Dejar pasar los clics al frame interactivo */
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.7));
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ar-comp-svg path, 
.ar-comp-svg line, 
.ar-comp-svg circle,
.ar-comp-svg rect {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    vector-effect: non-scaling-stroke;
    stroke-width: 1.5px;
}

.ar-comp-svg path.guide {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-dasharray: 2, 2;
}

/* === TOOLTIP INTERACTIVO (TAP TO FLIP) === */
.ar-interactive-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.ar-interactive-tooltip.visible {
    opacity: 1;
}

/* ============================================================
   DUAL FOCAL COMPARE — Second concentric frame overlay
   ============================================================ */

/* The compare frame sits inside .ar-frame-container, centered like #ar-frame */
.ar-frame-compare {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed #f97316;       /* orange, distinct from main white frame */
    box-shadow: 0 0 0 1px rgba(249,115,22,0.25), inset 0 0 0 1px rgba(0,0,0,0.3);
    border-radius: 3px;
    pointer-events: none;
    z-index: 3;                        /* above #ar-frame (z-index:2) */
    transition: width 0.3s ease-out, height 0.3s ease-out;
}

.ar-frame-compare.hidden {
    display: none !important;
}

/* Focal length label chips on each frame */
.ar-frame-label {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.95);
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.25);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Main frame label — green tint to match slider accent */
#ar-label-a {
    background: rgba(4, 222, 113, 0.22);
    border-color: rgba(4, 222, 113, 0.4);
    color: #04de71;
    /* sits inside #ar-frame via JS injection */
}

/* Compare frame label — orange tint */
.ar-frame-label-compare {
    background: rgba(249, 115, 22, 0.22);
    border-color: rgba(249, 115, 22, 0.4);
    color: #f97316;
    bottom: auto;
    top: 5px;   /* top edge on the compare frame */
}

/* Compare toggle button — active state uses orange */
#ar-compare-toggle.active {
    background: #f97316 !important;
    color: black !important;
    border-color: #f97316 !important;
}

/* ── Compare slider row (stacked inside the slider container) ── */
.ar-compare-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid rgba(249, 115, 22, 0.3);  /* subtle orange divider */
    margin-top: 2px;
    animation: ar-compare-in 0.2s ease;
}

.ar-compare-row.hidden {
    display: none !important;
}

@keyframes ar-compare-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Orange accent on the compare slider */
.ar-compare-slider {
    accent-color: #f97316;
    width: 100%;
    margin-bottom: 0;
}


/* ============================================================================ */
/* ENVIRONMENTAL.CSS */
/* ============================================================================ */

/* ==============================================
   ENVIRONMENTAL MODULE CSS — v4 Redesign
   Responsive layout, no ratings, info tooltips
   ============================================== */

/* --- Modal Overlay --- */
.env-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.3s ease;
}

.env-modal-overlay.hidden {
    display: none;
}

/* --- Modal Container (Frost Glass) --- */
.env-modal-container {
    position: relative;
    width: 94%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 18, 28, 0.85);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Responsive modal width */
@media (min-width: 700px) {
    .env-modal-container {
        max-width: 680px;
        padding: 28px;
    }
}

@media (min-width: 1000px) {
    .env-modal-container {
        max-width: 860px;
        padding: 32px;
    }
}

/* Simple border (no frost gradient to avoid intersection with content) */

/* Scrollbar */
.env-modal-container::-webkit-scrollbar {
    width: 4px;
}

.env-modal-container::-webkit-scrollbar-track {
    background: transparent;
}

.env-modal-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* --- Header --- */
.env-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.env-modal-header h2 {
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}

.env-modal-close {
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;

    /* Frost glassmorphism */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    /* 3D shadows */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Specular rim light border */
.env-modal-close::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-modal-close:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.3);
}

/* --- Location Bar --- */
.env-location-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.env-loc-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-loc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-loc-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.env-loc-btn.env-loc-active {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.env-loc-btn.env-loc-active::before {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.6) 0%, transparent 50%, rgba(46, 204, 113, 0.3) 100%);
}

.env-loc-btn.env-loc-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Search --- */
.env-search-wrapper {
    flex: 1;
    position: relative;
}

.env-search-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: #fff;
    font-size: 0.95em;
    outline: none;
    transition: background 0.2s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.15),
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.env-search-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

.env-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: rgba(20, 20, 35, 0.95);
    border-radius: 12px;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 240px;
    overflow-y: auto;
}

.env-search-results.hidden {
    display: none;
}

.env-search-item {
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.env-search-item:last-child {
    border-bottom: none;
}

.env-search-item:hover {
    background: rgba(79, 172, 254, 0.15);
}

.env-search-item.env-search-loading {
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
    font-style: italic;
}

/* --- Active Location Label --- */
.env-active-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid rgba(79, 172, 254, 0.2);
    position: relative;
    z-index: 1;
}

.env-active-location.hidden {
    display: none;
}

.env-location-text {
    font-size: 0.9em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Date Bar --- */
.env-date-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.env-date-display {
    flex: 1;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.3px;
}

.env-cal-icon-btn {
    width: 42px !important;
    min-width: 42px;
    max-width: 42px;
    flex-shrink: 0;
    padding: 8px 0 !important;
    font-size: 1.15em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.env-date-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-date-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-date-btn.env-date-active {
    background: rgba(79, 172, 254, 0.2);
    color: #4facfe;
}

.env-date-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.env-date-picker-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    cursor: pointer;
    outline: none;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-date-picker-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-date-picker-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Custom Calendar Dropdown --- */
.env-calendar-dropdown {
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: envFadeIn 0.2s ease;
}

.env-cal-today-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.env-cal-today-row .env-date-btn {
    flex: 1;
    max-width: 120px;
}

.env-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.env-cal-month-label {
    font-size: 0.95em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.env-cal-nav {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.env-cal-nav:hover {
    background: rgba(255, 255, 255, 0.15);
}

.env-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.env-cal-wd {
    text-align: center;
    font-size: 0.75em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    padding: 4px 0;
}

.env-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.env-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.env-cal-day:hover:not(.env-cal-empty) {
    background: rgba(255, 255, 255, 0.1);
}

.env-cal-day.env-cal-empty {
    cursor: default;
}

.env-cal-day.env-cal-today {
    background: rgba(79, 172, 254, 0.15);
    color: #4facfe;
    font-weight: 700;
}

.env-cal-day.env-cal-selected {
    background: rgba(79, 172, 254, 0.35);
    color: #fff;
    font-weight: 700;
}

/* --- Placeholder --- */
.env-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.env-placeholder-icon {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.5;
}

.env-placeholder p {
    font-size: 1em;
    line-height: 1.5;
}

/* --- Solar Phase Banner --- */
.env-phase-banner {
    position: relative;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 200, 50, 0.06) 100%);
    text-align: center;
    z-index: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-phase-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.7) 0%, rgba(255, 152, 0, 0.05) 30%, transparent 70%, rgba(255, 200, 50, 0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.env-phase-label {
    font-size: 1.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* --- Next Golden/Blue Hour Info --- */
.env-next-light-info {
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}

.env-next-light-row {
    flex: 1;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.env-next-light-row strong {
    color: rgba(255, 255, 255, 0.95);
    margin-left: 4px;
}

/* --- Next Event --- */
.env-next-event {
    position: relative;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.12) 0%, rgba(39, 174, 96, 0.08) 100%);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 0.95em;
    font-weight: 500;
    z-index: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-next-event::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.7) 0%, rgba(46, 204, 113, 0.05) 30%, transparent 70%, rgba(46, 204, 113, 0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.env-countdown {
    opacity: 0.7;
    font-weight: 400;
}

/* ====================================================
   RESPONSIVE SECTIONS GRID
   ==================================================== */
.env-sections-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tablet: 2 columns for data items inside sections */
@media (min-width: 700px) {
    .env-data-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Data Sections --- */
.env-section {
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-section h3 {
    font-size: 1.05em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
}

/* --- Data Grid --- */
.env-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.env-data-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    position: relative;
    z-index: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-data-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-data-span2 {
    grid-column: 1 / -1;
}

.env-label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.env-value {
    font-size: 1.1em;
    font-weight: 700;
    color: #fff;
}

/* Weather loading */
.env-weather-loading {
    grid-column: 1 / -1;
}

/* ====================================================
   INFO TOOLTIP BUTTON (?)
   ==================================================== */
.env-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    vertical-align: middle;
    padding: 0;
    line-height: 1;
}

.env-tip-btn:hover {
    background: rgba(79, 172, 254, 0.25);
    color: #4facfe;
}

/* --- Tooltip Popover --- */
.env-tooltip-popover {
    position: absolute;
    z-index: 50;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(20, 25, 50, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(79, 172, 254, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: env-fadeIn 0.2s ease;
}

.env-tooltip-popover.hidden {
    display: none;
}

.env-tooltip-popover p {
    font-size: 0.9em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

@keyframes env-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================================
   CALCULATOR BUTTON (In-mode)
   ==================================================== */
.env-calc-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.env-calc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-calc-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

.env-calc-btn.hidden {
    display: none;
}

/* ====================================================
   LIGHT MODE
   ==================================================== */
html.light-theme .env-modal-container {
    background: rgba(245, 245, 250, 0.92);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

html.light-theme .env-modal-header h2 {
    color: #1a1a1a;
}

html.light-theme .env-modal-close {
    background: rgba(255, 255, 255, 0.7) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .env-modal-close::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.3) 100%) !important;
}

html.light-theme .env-loc-btn {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .env-search-input {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

html.light-theme .env-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

html.light-theme .env-section {
    background: rgba(0, 0, 0, 0.03);
}

html.light-theme .env-section h3 {
    color: #1a1a1a;
}

html.light-theme .env-data-item {
    background: rgba(0, 0, 0, 0.04);
}

html.light-theme .env-label {
    color: rgba(0, 0, 0, 0.5);
}

html.light-theme .env-value {
    color: #1a1a1a;
}

html.light-theme .env-active-location {
    background: rgba(79, 172, 254, 0.08);
    border-color: rgba(79, 172, 254, 0.2);
}

html.light-theme .env-location-text {
    color: rgba(0, 0, 0, 0.8);
}

html.light-theme .env-phase-label {
    color: #1a1a1a;
}

html.light-theme .env-tip-btn {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
}

html.light-theme .env-tooltip-popover {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(79, 172, 254, 0.3);
}

html.light-theme .env-tooltip-popover p {
    color: rgba(0, 0, 0, 0.8);
}

html.light-theme .env-section {
    border-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .env-data-item {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Calculator button: light mode */
html.light-theme .env-calc-btn {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 180, 50, 0.05));
    border-color: rgba(255, 152, 0, 0.2);
    color: rgba(0, 0, 0, 0.7);
}

/* Calendar: light mode */
html.light-theme .env-date-picker-btn {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

html.light-theme .env-calendar-dropdown {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
}

html.light-theme .env-cal-month-label {
    color: #1a1a1a;
}

html.light-theme .env-cal-nav {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.6);
}

html.light-theme .env-cal-wd {
    color: rgba(0, 0, 0, 0.35);
}

html.light-theme .env-cal-day {
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .env-cal-day:hover:not(.env-cal-empty) {
    background: rgba(0, 0, 0, 0.06);
}

html.light-theme .env-cal-day.env-cal-today {
    background: rgba(79, 172, 254, 0.12);
    color: #2a8af0;
}

html.light-theme .env-cal-day.env-cal-selected {
    background: rgba(79, 172, 254, 0.3);
    color: #1a1a1a;
}

/* ====================================================
   RESPONSIVE (small screens)
   ==================================================== */
@media (max-width: 480px) {
    .env-modal-container {
        padding: 18px;
        max-height: 90vh;
    }

    .env-modal-header h2 {
        font-size: 1.2em;
    }

    .env-data-grid {
        gap: 6px;
    }

    .env-data-item {
        padding: 8px 10px;
    }

    .env-value {
        font-size: 1em;
    }
}

/* ==============================================
   SMART ASSISTANT — Recommendation Cards
   ============================================== */

.env-section-assistant h3 {
    margin-bottom: 8px;
}

.env-assistant-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.env-rec-card {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9em;
    line-height: 1.4;
    border-left: 4px solid;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    animation: envRecSlideIn 0.3s ease-out;
    position: relative;
    z-index: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.env-rec-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.env-rec-info {
    border-left-color: #4ade80;
    color: #d1fae5;
}

.env-rec-warning {
    border-left-color: #fbbf24;
    color: #fef3c7;
}

.env-rec-alert {
    border-left-color: #f87171;
    color: #fee2e2;
    background: rgba(248, 113, 113, 0.08);
}

/* Light mode */
[data-theme="light"] .env-rec-card {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .env-rec-info {
    color: #166534;
}

[data-theme="light"] .env-rec-warning {
    color: #92400e;
}

[data-theme="light"] .env-rec-alert {
    color: #991b1b;
    background: rgba(248, 113, 113, 0.06);
}

@keyframes envRecSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================
   SKY VIEWER BUTTON
   ============================================== */

.env-section-sky {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.env-sky-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid rgba(100, 130, 255, 0.3);
    background: linear-gradient(135deg, rgba(30, 40, 80, 0.8), rgba(50, 30, 90, 0.8));
    color: rgba(200, 210, 255, 0.95);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.env-sky-btn:hover {
    background: linear-gradient(135deg, rgba(40, 50, 100, 0.9), rgba(60, 40, 110, 0.9));
    border-color: rgba(130, 160, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(80, 100, 200, 0.3);
}

.env-sky-btn:active {
    transform: translateY(0);
}

/* ============================================================================ */
/* SKY-VIEWER.CSS */
/* ============================================================================ */

/* ==============================================
   SKY VIEWER — Fullscreen star map CSS
   Clean UX: FAB → Bottom Sheet approach
   ============================================== */

.sky-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: #000;
    transition: opacity 0.3s ease;
}

.sky-viewer-overlay.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.sky-viewer-canvas {
    flex: 1;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* ==============================================
   TOP BAR
   ============================================== */
.sky-viewer-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    z-index: 35;
    /* Por encima de AR container (20), controls (25), toast (30) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.sky-viewer-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.sky-viewer-close {
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    transition: background 0.2s;
}

/* ==============================================
   PLANNING FAB (floating action button)
   ============================================== */
.sky-plan-fab {
    position: absolute;
    right: 16px;
    bottom: max(100px, calc(env(safe-area-inset-bottom) + 90px));
    width: auto;
    height: auto;
    border-radius: 18px;
    background: rgba(30, 35, 60, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 200, 80, 0.4);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    gap: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 200, 80, 0.15);
    transition: all 0.3s ease;
    z-index: 5;
}

body.sky-ar-active .sky-plan-fab {
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
    right: max(16px, env(safe-area-inset-right));
}

.sky-plan-fab:active {
    transform: scale(0.92);
}

.sky-plan-fab.hidden {
    display: none;
}

.sky-plan-fab-text {
    display: block;
    font-weight: 700;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    order: -1;
}

#sky-plan-fab-icon {
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 200, 80, 0.8);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-weight: 600;
}

@media (min-width: 768px) {
    .sky-plan-fab {
        width: 140px;
        height: 56px;
        border-radius: 16px;
        right: max(40px, env(safe-area-inset-right));
        bottom: 120px;
    }

    html body.sky-ar-active .sky-plan-fab {
        width: auto;
        height: auto;
        padding: 12px 16px;
        bottom: 110px;
        right: max(24px, env(safe-area-inset-right));
        flex-direction: column;
        gap: 2px;
    }

    .sky-plan-fab-icon {
        font-size: 20px;
        margin-right: 8px;
    }

    html body.sky-ar-active .sky-plan-fab-icon {
        margin-right: 8px;
        margin-left: 0;
        font-size: 20px;
    }

    .sky-plan-fab-text {
        display: block;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    html body.sky-ar-active .sky-plan-fab-text {
        display: block !important;
    }
}

/* ==============================================
   PLANNING BOTTOM SHEET
   ============================================== */
.sky-plan-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    background: rgba(12, 14, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 10px 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    animation: sheetSlideUp 0.3s ease-out;
}

.sky-plan-sheet.hidden {
    display: none;
}

@keyframes sheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.sky-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sky-plan-sheet-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.sky-plan-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sky-now-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid rgba(80, 200, 120, 0.3);
    background: rgba(80, 200, 120, 0.1);
    color: rgba(80, 200, 120, 0.9);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.sky-now-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #50c878;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.sky-plan-close-btn {
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Day/Date picker */
.sky-day-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.sky-date-picker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sky-date-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sky-date-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

/* Time Slider */
.sky-slider-wrap {
    position: relative;
    margin-bottom: 2px;
}

.sky-slider-bg {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 16px;
    border-radius: 8px;
    opacity: 0.6;
    pointer-events: none;
}

.sky-time-slider {
    width: 100%;
    height: 40px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    position: relative;
    z-index: 1;
}

.sky-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffc857;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 12px rgba(255, 200, 80, 0.5);
    cursor: pointer;
}

.sky-time-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffc857;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 12px rgba(255, 200, 80, 0.5);
    cursor: pointer;
}

.sky-time-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

.sky-slider-labels {
    display: flex;
    align-items: center;
    padding: 0 2px;
    margin-bottom: 6px;
    gap: 0;
}

.sky-slider-labels span {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* Current time — flex child in labels row, right-aligned */
.sky-slider-time {
    flex: 0 0 auto;
    margin-left: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #ffc857;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* ==============================================
   QUICK JUMP BUTTONS
   ============================================== */
.sky-quick-jumps {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

.sky-quick-jumps::-webkit-scrollbar {
    display: none;
}

.sky-quick-btn {
    flex: 1 1 calc(33% - 3px);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 3px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--btn-color) 30%, transparent);
    background: color-mix(in srgb, var(--btn-color) 8%, transparent);
    cursor: pointer;
    transition: all 0.15s;
}

.sky-quick-btn:active {
    transform: scale(0.96);
    background: color-mix(in srgb, var(--btn-color) 20%, transparent);
}

.sky-quick-icon {
    font-size: 14px;
}

.sky-quick-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.sky-quick-label {
    font-size: 7px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sky-quick-time {
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Planificar quick-btn: full width on mobile */
.sky-plan-quick-btn {
    flex: 1 1 100% !important;
    padding: 10px 14px !important;
    justify-content: center !important;
}

/* ==============================================
   BOTTOM INFO CARDS (hidden when planning is open)
   ============================================== */
.sky-viewer-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.sky-viewer-info.hidden {
    display: none;
}

.sky-info-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    transition: transform 0.3s ease, margin-bottom 0.3s ease;
}

.sky-ar-active .sky-info-cards {
    transform: scale(0.65);
    transform-origin: bottom left;
    margin-bottom: -15px;
}

/* iPad: subir tarjetas por encima de la barra de controles AR */
@media (min-width: 768px) {
    .sky-ar-active .sky-viewer-info {
        bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px));
        pointer-events: none;
        /* No bloquear toques al slider debajo */
    }

    .sky-ar-active .sky-info-cards {
        pointer-events: auto;
    }
}

.sky-info-card {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 200px;
}

.sky-info-card-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.sky-info-card-value {
    opacity: 0.8;
    font-size: 11px;
}

/* ==============================================
   TOAST
   ============================================== */
.sky-toast {
    position: absolute;
    top: max(60px, calc(env(safe-area-inset-top) + 48px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(20, 20, 40, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    z-index: 30;
    animation: toastSlideIn 0.3s ease-out;
    white-space: normal;
    text-align: center;
    max-width: 85vw;
}

.sky-toast.hidden {
    display: none;
}

.sky-toast-action {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(80, 200, 120, 0.4);
    background: rgba(80, 200, 120, 0.15);
    color: #50c878;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==============================================
   HINTS
   ============================================== */
.sky-touch-hint {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 10px 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    z-index: 4;
    animation: skyHintFade 3s ease-out forwards;
    pointer-events: none;
    text-align: center;
}

@keyframes skyHintFade {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ==============================================
   DESKTOP / WEB RESPONSIVE
   ============================================== */

@media (min-width: 768px) {

    /* FAB: vertical pill with "Planificar" text + digital time below */
    .sky-plan-fab {
        right: 32px;
        bottom: 120px;
        border-radius: 22px;
        padding: 16px 24px;
        gap: 4px;
        border-width: 2px;
    }

    .sky-plan-fab-text {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: 0.8px;
    }

    #sky-plan-fab-icon {
        font-size: 22px;
        font-weight: 700;
        color: rgba(255, 200, 80, 0.9);
    }

    /* Info cards at bottom: MUCH bigger */
    .sky-viewer-info {
        padding: 24px 40px;
        padding-bottom: 28px;
    }

    .sky-info-cards {
        justify-content: center;
        gap: 24px;
    }

    .sky-info-card {
        padding: 24px 36px;
        font-size: 18px;
        max-width: 400px;
        border-radius: 18px;
        border-width: 1.5px;
    }

    .sky-info-card-title {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .sky-info-card-value {
        font-size: 17px;
    }

    /* Planning sheet */
    .sky-plan-sheet {
        padding: 28px 48px;
        padding-bottom: 32px;
    }

    .sky-plan-header {
        margin-bottom: 22px;
    }

    .sky-plan-sheet-title {
        font-size: 22px;
    }

    /* "Ahora" button: much bigger */
    .sky-now-btn {
        padding: 10px 22px;
        font-size: 16px;
        border-radius: 18px;
    }

    .sky-now-dot {
        width: 8px;
        height: 8px;
    }

    /* Close button bigger */
    .sky-plan-close-btn {
        padding: 6px 16px;
        font-size: 0.85em;
    }

    /* Date picker button: bigger */
    .sky-date-btn {
        font-size: 20px;
        padding: 14px 32px;
        border-radius: 16px;
    }

    /* Slider time display */
    .sky-slider-time {
        font-size: 28px;
    }

    .sky-slider-labels span {
        font-size: 14px;
    }

    .sky-slider-labels {
        margin-bottom: 22px;
    }

    .sky-time-slider {
        height: 48px;
    }

    /* Quick-jump buttons: MUCH bigger */
    .sky-quick-jumps {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .sky-quick-btn {
        flex: 0 0 auto;
        padding: 18px 32px;
        border-radius: 18px;
        border-width: 2px;
        gap: 6px;
    }

    .sky-plan-quick-btn {
        flex: 0 0 auto !important;
        padding: 18px 32px !important;
    }

    .sky-quick-icon {
        font-size: 32px;
    }

    .sky-quick-label {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .sky-quick-time {
        font-size: 24px;
    }

    /* Toast — compacto arriba */
    .sky-toast {
        font-size: 13px;
        padding: 8px 18px;
        border-radius: 12px;
        max-width: 50vw;
    }

    /* Top bar */
    .sky-viewer-title {
        font-size: 22px;
    }

    .sky-viewer-close {
        padding: 8px 20px;
        font-size: 1em;
    }
}

/* Very wide screens (1200px+) */
@media (min-width: 1200px) {
    .sky-plan-sheet {
        padding: 32px 64px;
    }

    .sky-plan-fab {
        right: 48px;
        padding: 20px 28px;
    }

    #sky-plan-fab-icon {
        font-size: 26px;
    }

    .sky-plan-fab-text {
        font-size: 15px;
    }

    .sky-quick-btn {
        padding: 20px 36px;
    }

    .sky-info-card {
        padding: 28px 40px;
    }
}

/* ==============================================
   CAMERA AR MODE
   ============================================== */

/* Camera toggle button in topbar */
.sky-camera-btn,
.sky-ar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.sky-camera-btn.active,
.sky-ar-btn.active {
    background: rgba(80, 200, 120, 0.3);
    border: 1.5px solid rgba(80, 200, 120, 0.5);
    box-shadow: 0 0 12px rgba(80, 200, 120, 0.3);
}

@media (min-width: 768px) {

    .sky-camera-btn,
    .sky-ar-btn {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

#sky-ar-frame-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    /* Elevado para permitir clics sobre la UI inferior */
}

/* Override standalone AR viewfinder styling for Sky Viewer context */
#sky-ar-frame-container .ar-frame {
    outline: none;
    /* No necesita la máscara oscura de 4000px sobre cielo oscuro */
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: none;
    /* Evitar parpadeo/glitch al mover slider rápidamente */
    background: transparent;
    /* Centrar el frame en el visor de cielo (fix web: aparecía en esquina sup. izq.) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sky-ar-controls {
    position: absolute;
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
    left: max(16px, env(safe-area-inset-left));
    right: calc(max(16px, env(safe-area-inset-right)) + 80px);
    /* Leave room for FAB taking text horizontally */
    background: rgba(20, 25, 45, 0.4);
    padding: 8px 12px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: auto;
    z-index: 25;
    /* Siempre encima de sky-viewer-info! */
    animation: toastSlideIn 0.3s ease-out;
    display: flex;
    flex-wrap: nowrap;
    /* Evitar que envuelva a 2 líneas en horizontal celulares */
    align-items: center;
    gap: 12px;
}

/* Modificaciones extremas para Celulares en Apaisado (Landscape) */
@media (orientation: landscape) and (max-height: 600px) {
    .sky-ar-controls {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: max(16px, env(safe-area-inset-left));
        right: max(70px, calc(env(safe-area-inset-right) + 55px));
        padding: 3px 8px;
        gap: 4px;
        border-radius: 10px;
    }

    .sky-ar-controls select {
        padding: 3px 6px !important;
        font-size: 0.65em !important;
        flex: 0 0 80px !important;
        min-width: 80px !important;
        background-size: 10px !important;
    }

    .sky-ar-controls input[type="range"] {
        margin: 0 !important;
        height: 24px !important;
    }

    .sky-ar-controls span#sky-ar-slider-val {
        font-size: 0.75em !important;
        min-width: 30px !important;
    }

    /* Info cards: chip ultra-compacto en landscape AR */
    html body.sky-ar-active .sky-viewer-info {
        bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px));
        padding: 0 8px;
        background: none;
    }

    html body.sky-ar-active .sky-info-cards {
        transform: scale(0.55);
        transform-origin: bottom left;
        margin-bottom: -10px;
    }

    /* FAB compacto pero con hora legible */
    html body.sky-ar-active .sky-plan-fab {
        width: auto;
        height: auto;
        padding: 4px 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        right: max(8px, env(safe-area-inset-right));
        border-radius: 10px;
        flex-direction: column;
        gap: 0;
    }

    html body.sky-ar-active .sky-plan-fab #sky-plan-fab-icon {
        font-size: 14px !important;
    }

    html body.sky-ar-active .sky-plan-fab .sky-plan-fab-text {
        display: none !important;
    }

    /* Topbar más fino */
    .sky-viewer-topbar {
        padding-top: max(4px, env(safe-area-inset-top));
        padding-bottom: 4px;
    }

    /* Info bottom sin AR: reducir */
    .sky-viewer-info {
        padding: 4px 8px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }

    .sky-info-card {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Planning sheet compacto */
    .sky-plan-sheet {
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .sky-plan-header {
        margin-bottom: 6px;
    }

    .sky-slider-labels {
        margin-bottom: 4px;
    }

    .sky-quick-btn {
        padding: 4px 8px;
    }
}

@media (min-width: 768px) {
    .sky-ar-controls {
        left: max(220px, calc(env(safe-area-inset-left) + 200px));
        /* Deja espacio para Info Cards Vía Láctea en iPad */
        right: calc(max(24px, env(safe-area-inset-right)) + 90px);
        /* Deja espacio para el FAB */
        bottom: max(32px, env(safe-area-inset-bottom));
        /* Misma línea horizontal inferior que los otros elementos */
        transform: none;
        max-width: none;
        margin: auto;
    }
}

/* Web fallback video element (behind canvas) */
.sky-camera-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: none;
}

.sky-camera-video.active {
    display: block;
}

/* When camera is active: make everything transparent */
.sky-viewer-overlay.sky-camera-active {
    background: transparent !important;
}

.sky-camera-active .sky-viewer-canvas {
    background: transparent !important;
}

/* Topbar: slightly more opaque for legibility over camera */
.sky-camera-active .sky-viewer-topbar {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
}

/* Info cards: more opaque over camera */
.sky-camera-active .sky-viewer-info {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.sky-camera-active .sky-info-card {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Planning sheet: more opaque */
.sky-camera-active .sky-plan-sheet {
    background: rgba(12, 14, 28, 0.96);
}

/* Toast over camera */
.sky-camera-active .sky-toast {
    background: rgba(20, 20, 40, 0.95);
}

/* Prevent GPU Crash on Mobile when Lunar Calendar overlays the 4000px AR outline */
body.lunar-modal-active #sky-ar-frame-container {
    display: none !important;
}

/* ============================================================================ */
/* SESSION-PLANNER.CSS */
/* ============================================================================ */

/* ==============================================
   SESSION PLANNER — Mis Planes
   ============================================== */
.sp-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 10, 22, 0.97);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: spFadeIn 0.25s ease;
    overflow: hidden;
}

@keyframes spFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header */
.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.sp-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.sp-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sp-close-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background 0.2s;
}

.sp-close-btn:active { transform: scale(0.9); }

.sp-cloud-btn {
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-cloud-btn.connected {
    border-color: rgba(76,175,80,0.3);
    background: rgba(76,175,80,0.1);
    color: #81C784;
}

/* Content area */
.sp-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Empty state */
.sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.5);
}

.sp-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.sp-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
}

.sp-empty-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

/* Sessions Grid */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.sp-session-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.sp-session-card:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.08);
}

.sp-session-name {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-session-date {
    font-size: 12px;
    color: rgba(255,200,80,0.8);
    font-weight: 600;
    margin-bottom: 8px;
}

.sp-session-location {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-session-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sp-badge {
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.sp-badge-light {
    background: rgba(232,168,72,0.15);
    color: #e8a848;
}

.sp-badge-astro {
    background: rgba(124,77,255,0.15);
    color: #b39ddb;
}

.sp-badge-check {
    background: rgba(76,175,80,0.15);
    color: #81c784;
}

.sp-session-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255,59,48,0.15);
    color: #ff453a;
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.sp-session-card:hover .sp-session-delete,
.sp-session-card:active .sp-session-delete {
    display: flex;
}

/* FAB - Create new session */
.sp-fab {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom));
    right: 20px;
    padding: 14px 24px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #7C4DFF, #448AFF);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(124,77,255,0.4);
    z-index: 9001;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.sp-fab:active { transform: scale(0.95); }

/* Modal overlay for create/detail */
.sp-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: spFadeIn 0.2s ease;
}

.sp-modal {
    background: rgba(20,20,35,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.sp-modal h3 {
    margin: 0 0 16px 0;
    color: white;
    font-size: 18px;
    text-align: center;
}

.sp-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 15px;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 12px;
}

.sp-input:focus {
    border-color: rgba(124,77,255,0.5);
}

.sp-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.sp-date-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sp-date-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.sp-date-btn:active { background: rgba(255,255,255,0.12); }

/* Category buttons for loading plans */
.sp-category-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.sp-cat-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s;
}

.sp-cat-btn:active {
    background: rgba(255,255,255,0.1);
}

.sp-cat-count {
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* Selected items list */
.sp-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sp-selected-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sp-selected-tag.light { background: rgba(232,168,72,0.15); color: #e8a848; }
.sp-selected-tag.astro { background: rgba(124,77,255,0.15); color: #b39ddb; }
.sp-selected-tag.check { background: rgba(76,175,80,0.15); color: #81c784; }

.sp-selected-tag .sp-tag-remove {
    opacity: 0.6;
    font-size: 10px;
}

/* Save/action buttons */
.sp-save-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #7C4DFF, #448AFF);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}

.sp-save-btn:active { transform: scale(0.98); }

.sp-cancel-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    cursor: pointer;
    margin-top: 8px;
}

/* Detail view */
.sp-detail-section {
    margin-bottom: 16px;
}

.sp-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}

.sp-detail-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-detail-item {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
}

/* Picker modal for choosing items */
.sp-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.sp-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.15s;
}

.sp-picker-item:active {
    background: rgba(255,255,255,0.1);
}

.sp-picker-item.selected {
    border-color: rgba(124,77,255,0.4);
    background: rgba(124,77,255,0.1);
}

.sp-picker-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sp-picker-item.selected .sp-picker-check {
    border-color: #7C4DFF;
    background: #7C4DFF;
    color: white;
}

.sp-picker-label {
    flex: 1;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.sp-picker-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

/* Responsive - larger screens */
@media (min-width: 768px) {
    .sp-content { padding: 24px 32px; }
    .sp-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    .sp-session-card { padding: 20px; }
    .sp-fab { right: 32px; bottom: 32px; }
}

@media (min-width: 1200px) {
    .sp-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
}

/* ============================================================================ */
/* LIGHT-PLANNER.CSS */
/* ============================================================================ */

/* =============================================
   LIGHT PLANNER — CSS
   Premium glassmorphic map-based light planner
   ============================================= */

/* OVERLAY — Full screen */
.lp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0a0e1a;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.lp-overlay.hidden {
    display: none;
}

/* TOP BAR */
.lp-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom, rgba(10, 14, 26, 0.9) 0%, transparent 100%);
    pointer-events: none;
}

.lp-top-bar > * {
    pointer-events: auto;
}

/* Search Input */
.lp-search-container {
    flex: 1;
    position: relative;
}

.lp-search-input {
    width: 100%;
    padding: 10px 36px 10px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(20, 24, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    font-size: 0.92em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Search Clear Button */
.lp-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.lp-search-clear:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes pulse {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.6; }
}

.lp-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.lp-search-input:focus {
    border-color: rgba(255, 184, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.15);
}

/* Search Results Dropdown */
.lp-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(20, 24, 40, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.lp-search-results.hidden {
    display: none;
}

.lp-search-result {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88em;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lp-search-result:hover {
    background: rgba(255, 184, 0, 0.1);
}

.lp-search-result:last-child {
    border-bottom: none;
}

.lp-no-results {
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

/* Icon Buttons */
.lp-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(20, 24, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lp-icon-btn:hover {
    background: rgba(40, 50, 80, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

.lp-close-btn {
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

/* Date picker wrapper — positions input over button */
.lp-date-wrapper {
    position: relative;
    display: inline-flex;
}

/* Hidden date picker — transparent overlay on iOS-friendly approach */
.lp-date-picker-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    /* Remove default input chrome */
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

/* MAP CONTAINER */
.lp-map-container {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Golden Drop Pin Marker */
.lp-pin-golden {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: grab;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.lp-pin-golden:active {
    cursor: grabbing;
}

.lp-pin-drop {
    width: 32px;
    height: 42px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #E88D00 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    animation: lp-pin-pulse 2s ease-in-out infinite;
}

.lp-pin-dot {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.lp-pin-shadow {
    width: 16px;
    height: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    margin-top: 2px;
    filter: blur(2px);
}

@keyframes lp-pin-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 184, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 184, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.5); }
}

/* ARC CANVAS — Canvas 2D overlay for golden/blue hour sectors */
.lp-arc-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* FLOATING ACTION BUTTONS — Vertical Stack */
.lp-fab-stack {
    position: absolute;
    bottom: 170px;
    right: 16px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 200, 60, 0.35);
    background: rgba(15, 18, 35, 0.92);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 15px rgba(255, 184, 0, 0.08);
    transition: all 0.2s;
}

.lp-fab:hover {
    transform: scale(1.1);
    background: rgba(40, 50, 80, 0.95);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.lp-fab:active {
    transform: scale(0.95);
}

.lp-fab-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.lp-fab-active {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.7), rgba(80, 140, 255, 0.7)) !important;
    border-color: rgba(255, 220, 80, 0.8) !important;
    box-shadow: 0 0 12px rgba(255, 184, 0, 0.5), 0 0 12px rgba(80, 140, 255, 0.4) !important;
}

.lp-fab-inactive {
    background: rgba(15, 18, 35, 0.92) !important;
    border-color: rgba(100, 100, 120, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

#lp-fab-arcs {
    font-size: 1.5em;
}

/* Golden/Blue Hour Times Panel (glassmorphic) */
.lp-hours-panel {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    background: rgba(10, 15, 30, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 200, 60, 0.3);
    border-radius: 14px;
    padding: 12px 16px;
    min-width: 160px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.lp-hours-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0;
}

.lp-hours-row + .lp-hours-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
    padding-top: 6px;
}

.lp-hours-title {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.lp-hours-title-golden {
    color: #FFD080;
}

.lp-hours-title-blue {
    color: #88BBFF;
}

.lp-hours-times {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lp-hours-time {
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.lp-hours-golden .lp-hours-time {
    color: #FFE0A0;
}

.lp-hours-blue .lp-hours-time {
    color: #AACCFF;
}

/* HTML label markers on the map (above arc canvas) */
.lp-map-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1), 1px 1px 2px rgba(0,0,0,0.9);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* Responsive hours panel for phones */
@media (max-width: 480px) {
    .lp-hours-panel {
        padding: 6px 10px;
        min-width: auto;
        max-width: 140px;
        top: 35%;
    }
    .lp-hours-title {
        font-size: 0.6em;
    }
    .lp-hours-time {
        font-size: 0.6em;
    }
}
.lp-info-strip {
    position: absolute;
    bottom: 110px;
    left: 16px;
    right: 76px; /* Space for FABs */
    z-index: 15;
    padding: 10px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 18, 35, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.lp-info-strip:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.lp-info-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-info-expanded {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-info-expanded.hidden {
    display: none;
}

.lp-info-row {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82em;
    padding: 3px 0;
}

.lp-info-row strong {
    color: rgba(255, 255, 255, 0.95);
}

/* TIME SLIDER */
.lp-slider-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.7) 80%, transparent 100%);
}

.lp-slider-bg {
    display: none; /* Replaced by CSS gradient on track */
}

.lp-time-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    background: transparent;
    outline: none;
    position: relative;
    z-index: 2;
    margin: 0;
}

.lp-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 30%, #FFB800 100%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 184, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}

.lp-time-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.lp-time-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.8), 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Firefox */
.lp-time-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 30%, #FFB800 100%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 184, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.lp-time-slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: var(--lp-slider-gradient, rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-time-slider::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: var(--lp-slider-gradient, rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding: 0 4px;
}

.lp-slider-labels span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72em;
}

.lp-slider-current-time {
    color: #FFD700 !important;
    font-size: 0.95em !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Now Button */
.lp-now-btn {
    background: rgba(255, 184, 0, 0.15);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: #FFD700;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.lp-now-btn:hover {
    background: rgba(255, 184, 0, 0.3);
}

/* MENU DROPDOWN */
.lp-menu-dropdown {
    position: absolute;
    top: calc(60px + env(safe-area-inset-top, 0px));
    right: 60px;
    z-index: 25;
    background: rgba(20, 24, 40, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    min-width: 180px;
}

.lp-menu-dropdown.hidden {
    display: none;
}

.lp-menu-item {
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.lp-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.lp-menu-item + .lp-menu-item {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lp-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* WEATHER / SAVE / PLANS MODALS */
.lp-weather-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-weather-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lp-weather-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    max-height: 75vh;
    overflow-y: auto;
    background: rgba(20, 24, 40, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lp-weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.lp-weather-header h3 {
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
}

.lp-weather-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lp-weather-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lp-weather-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.lp-weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lp-wg-item {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
}

.lp-wg-item strong {
    color: #fff;
    font-size: 1.15em;
}

.lp-wg-item small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
}

.lp-weather-notice {
    color: rgba(255, 200, 60, 0.8);
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

.lp-weather-loading {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 20px;
}

/* SAVE FORM */
.lp-save-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-save-input,
.lp-save-textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.9em;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.lp-save-input:focus,
.lp-save-textarea:focus {
    border-color: rgba(255, 184, 0, 0.4);
}

.lp-save-textarea {
    resize: vertical;
    min-height: 60px;
}

.lp-save-summary {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82em;
    line-height: 1.6;
}

.lp-save-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.25), rgba(255, 140, 0, 0.35));
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.2);
}

.lp-save-btn:hover {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.35), rgba(255, 140, 0, 0.45));
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(255, 184, 0, 0.3);
}

/* PLANS LIST */
.lp-plans-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.lp-plan-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

.lp-plan-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.lp-plan-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-plan-info strong {
    color: #fff;
    font-size: 0.95em;
}

.lp-plan-info small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78em;
}

.lp-plan-notes {
    color: rgba(255, 255, 255, 0.35) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-plan-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.lp-plan-load,
.lp-plan-delete {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.lp-plan-load:hover {
    background: rgba(255, 184, 0, 0.15);
    border-color: rgba(255, 184, 0, 0.3);
}

.lp-plan-delete:hover {
    background: rgba(255, 60, 60, 0.15);
    border-color: rgba(255, 60, 60, 0.3);
}

.lp-no-plans {
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9em;
}

/* TOAST */
.lp-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    padding: 12px 24px;
    border-radius: 30px;
    background: rgba(20, 24, 40, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.9em;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.lp-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* RESPONSIVE — Small phones */
@media (max-width: 480px) {
    .lp-top-bar {
        gap: 6px;
        padding: 8px 10px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .lp-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 1em;
    }

    .lp-search-input {
        padding: 8px 14px;
        font-size: 0.85em;
    }

    .lp-fab {
        width: 40px;
        height: 40px;
        font-size: 1.1em;
    }

    .lp-fab-stack {
        bottom: 130px;
        right: 12px;
        gap: 8px;
    }

    .lp-info-strip {
        right: 66px;
        padding: 8px 12px;
    }

    .lp-info-text {
        font-size: 0.75em;
    }

    .lp-slider-container {
        padding: 6px 12px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
}

/* RESPONSIVE — Tablet */
@media (min-width: 768px) {
    .lp-info-strip {
        max-width: 500px;
    }

    .lp-slider-container {
        padding: 12px 24px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mapbox overrides for dark theme */
.lp-overlay .mapboxgl-ctrl-bottom-left {
    display: none !important; /* Hide attribution to avoid overlap */
}

.lp-overlay .mapboxgl-ctrl-bottom-right {
    display: none !important;
}

.mapboxgl-ctrl-attrib a {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mapboxgl-ctrl-group {
    background: rgba(20, 24, 40, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.mapboxgl-ctrl-group button {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.mapboxgl-ctrl-group button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    filter: invert(1) brightness(0.8);
}

/* ============================================================================ */
/* LUNAR-CALENDAR.CSS */
/* ============================================================================ */

/* ============================================ */
/* LUNAR CALENDAR MODAL                        */
/* ============================================ */

.lunar-cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.85); /* Matches checklist overlay bg */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lunar-cal-overlay.visible {
    opacity: 1;
}

.lunar-cal-overlay.hidden {
    display: none;
}

.lunar-cal-modal {
    width: 95vw;
    max-width: 450px;       /* Keeps it thin as it's a calendar, unlike checklist's 900px */
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(17, 17, 17, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* Mobile: near fullscreen like checklist */
@media (max-width: 640px) {
    .lunar-cal-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* Header */
.lunar-cal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.lunar-cal-month {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #f0f0f0;
    letter-spacing: 0.5px;
}

.lunar-cal-nav {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lunar-cal-nav:hover {
    background: rgba(255, 255, 255, 0.15);
}

.lunar-cal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: background 0.2s;
    white-space: nowrap;
}

.lunar-cal-close:hover {
    background: rgba(255, 80, 80, 0.2);
    color: #ff6b6b;
}

/* Weekday headers */
.lunar-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.lunar-cal-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    padding: 4px 0;
}

/* Calendar grid */
.lunar-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 16px;
}

.lunar-cal-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.03);
    gap: 1px;
}

.lunar-cal-cell:hover {
    background: rgba(255, 255, 255, 0.08);
}

.lunar-cal-empty {
    cursor: default;
    background: transparent;
}

.lunar-cal-empty:hover {
    background: transparent;
}

.lunar-cal-cell.lunar-cal-today {
    background: rgba(100, 160, 255, 0.1);
    border: 1px solid rgba(100, 160, 255, 0.3);
}

.lunar-cal-cell.lunar-cal-selected {
    background: rgba(232, 168, 72, 0.15);
    border: 2px solid rgba(232, 168, 72, 0.6);
    box-shadow: 0 0 12px rgba(232, 168, 72, 0.15);
}

.lunar-cal-cell.lunar-cal-eclipse {
    box-shadow: inset 0 0 0 1px rgba(200, 80, 80, 0.4);
}

.lunar-cal-day-num {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

.lunar-cal-day-moon {
    font-size: 16px;
    line-height: 1;
}

.lunar-cal-eclipse-dot {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 6px;
    color: #e85050;
}

/* Detail panel */
.lunar-cal-detail {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}

.lunar-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.lunar-detail-emoji {
    font-size: 36px;
    line-height: 1;
}

.lunar-detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lunar-detail-phase {
    font-size: 16px;
    font-weight: 700;
    color: #f0f0f0;
}

.lunar-detail-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.lunar-detail-times {
    display: flex;
    gap: 12px;
}

.lunar-detail-time {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lunar-detail-time-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.lunar-detail-time-value {
    font-size: 18px;
    font-weight: 700;
    color: #f0f0f0;
    font-variant-numeric: tabular-nums;
}

.lunar-detail-eclipse {
    margin-top: 10px;
    background: rgba(200, 80, 80, 0.12);
    border: 1px solid rgba(200, 80, 80, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #f0a0a0;
}

.lunar-detail-eclipse-vis {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Eclipses section */
.lunar-eclipses-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.lunar-eclipses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lunar-eclipse-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 12px;
}

.lunar-eclipse-date {
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
    min-width: 120px;
}

.lunar-eclipse-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.eclipse-total {
    background: rgba(200, 60, 60, 0.25);
    color: #ff8a8a;
    border: 1px solid rgba(200, 60, 60, 0.3);
}

.eclipse-partial {
    background: rgba(200, 160, 60, 0.2);
    color: #ffc870;
    border: 1px solid rgba(200, 160, 60, 0.3);
}

.eclipse-penumbral {
    background: rgba(100, 130, 200, 0.2);
    color: #90b0e0;
    border: 1px solid rgba(100, 130, 200, 0.3);
}

.lunar-eclipse-vis {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    flex-basis: 100%;
}

/* Button in environmental modal */
.env-lunar-cal-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;
    pointer-events: auto;
    position: relative;
    z-index: 5;
}

.env-lunar-cal-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(232, 168, 72, 0.4);
    transform: scale(1.05);
}

/* Sky Viewer moon card clickable */
.sky-info-card-moon {
    cursor: pointer !important;
    transition: all 0.2s;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.sky-info-card-moon:hover {
    border-color: rgba(232, 168, 72, 0.4);
    box-shadow: 0 0 12px rgba(232, 168, 72, 0.1);
    transform: translateY(-1px);
}

/* Hint text styling */
.sky-info-card-hint {
    font-size: 11px !important;
    color: rgba(232, 168, 72, 0.7) !important;
    margin-top: 4px;
    letter-spacing: 0.3px;
    animation: lunar-hint-pulse 2s ease-in-out infinite;
}

@keyframes lunar-hint-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* ============================================================================ */
/* PLOTTER-UI.CSS */
/* ============================================================================ */

/* plotter-ui.css */

.plotter-node {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(30, 30, 40, 0.96);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: grab;
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.5);
    
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
    z-index: 10;
}

.plotter-node:active {
    cursor: grabbing;
}

.plotter-node-icon {
    font-size: 24px;
    line-height: 1;
}

.plotter-node-label {
    position: absolute;
    bottom: -22px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0.8;
    background: rgba(0,0,0,0.6);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    text-align: center;
    line-height: 1.2;
}

/* ============================================================================ */
/* TRACKER-UI.CSS */
/* ============================================================================ */

/* tracker-ui.css - ShotPlanner Receptor Multi-Node Simulator */

.tracker-dashboard-overlay {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 600px;
    height: 75vh;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10000;
    transform: translate(-50%, 100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.tracker-dashboard-overlay.active {
    transform: translate(-50%, 0);
}

.tracker-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.tracker-dashboard-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

.tracker-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.tracker-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.tracker-segmented-control {
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 24px;
    padding: 6px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.1) inset;
}

.tracker-seg-btn {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    padding: 10px 0;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
}

.tracker-seg-icon {
    font-size: 18px;
    margin-bottom: 2px;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
}

.tracker-seg-btn.active {
    background: rgba(0, 242, 254, 0.15);
    color: #fff;
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.25);
    border: 1px solid rgba(0, 242, 254, 0.6);
}

.tracker-seg-btn.active .tracker-seg-icon {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.tracker-global-mix {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tracker-global-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.tracker-global-value {
    font-size: 42px;
    font-weight: 700;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tracker-global-value span {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.tracker-nodes-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding-bottom: 40px;
}

/* Hide scrollbar for a cleaner look */
.tracker-nodes-container::-webkit-scrollbar {
    display: none;
}

.tracker-node-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
}

/* Glow effects based on roles */
.tracker-node-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #00f2fe;
    box-shadow: 0 0 12px #00f2fe;
}

.tracker-node-card.fill-light::before {
    background: #a18cd1;
    box-shadow: 0 0 12px #a18cd1;
}

.tracker-node-card.back-light::before {
    background: #fbc2eb;
    box-shadow: 0 0 12px #fbc2eb;
}

.tracker-node-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tracker-node-name {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.tracker-node-battery {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.tracker-node-status {
    font-size: 11px;
    color: #4facfe;
    text-transform: uppercase;
    font-weight: 700;
}

.tracker-node-metrics {
    display: flex;
    justify-content: space-between;
}

.tracker-metric {
    display: flex;
    flex-direction: column;
}

.tracker-metric-value {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.tracker-metric-value span {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.8;
}

.tracker-metric-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Floating Action Button (Radar) */
.tracker-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 26px;
    border: none;
    z-index: 900;
    cursor: pointer;
    transition: transform 0.2s;
}

.tracker-fab:active {
    transform: scale(0.9);
}

/* ========================================================
   1. BACKDROP (Prevents clicks passing through)
======================================================== */
.tracker-backdrop {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.tracker-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================================
   2. LIGHT THEME OVERRIDES
======================================================== */
.light-theme .tracker-dashboard-overlay {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

.light-theme .tracker-dashboard-title { color: #1a1a1a; }
.light-theme .tracker-close-btn { color: #1a1a1a; background: rgba(0,0,0,0.05); }
.light-theme .tracker-global-label { color: rgba(0,0,0,0.5); }
.light-theme .tracker-global-value span { color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; }

.light-theme .tracker-node-card {
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.1);
}

.light-theme .tracker-node-name { color: #1a1a1a; }
.light-theme .tracker-node-battery { 
    color: rgba(0,0,0,0.7); 
    background: rgba(0,0,0,0.08); 
}

.light-theme .tracker-metric-value { color: #1a1a1a; }
.light-theme .tracker-metric-value span { color: #333; }
.light-theme .tracker-metric-label { color: rgba(0,0,0,0.5); }

/* ============================================================================ */
/* EXPOSURE.CSS */
/* ============================================================================ */


/* =============================================
   EXPOSURE MODULE - CSS STYLES
   True Depth Glassmorphism
   ============================================= */

/* Modal overlay */
.exposure-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.exposure-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.exposure-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Main content panel */
.exposure-content {
    position: relative;
    width: 92%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    background: rgba(18, 18, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 24px 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* True Depth Glassmorphism shadows */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.15),
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Rim light */
.exposure-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.exposure-modal.active .exposure-content {
    transform: scale(1) translateY(0);
}

/* Scrollbar styling */
.exposure-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.exposure-content::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Header */
.exposure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.exposure-header h3 {
    color: white;
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.exposure-close {
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    white-space: nowrap;
}
.exposure-close:hover { background: rgba(255,255,255,0.15); }

/* Gear info */
.exposure-gear-info {
    color: rgba(255,255,255,0.45);
    font-size: 0.82em;
    margin-bottom: 12px;
}

/* Kit selector section */
.exposure-kit-section {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 10px 12px;
}

.exposure-kit-section .exposure-select {
    max-width: 220px;
    font-size: 0.8em;
}

/* Manual gear inputs */
.exposure-manual-gear {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.exposure-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    font-size: 0.85em;
    min-width: 100px;
    max-width: 140px;
}

/* Light meter button */
.exposure-ev-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exposure-meter-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(76, 175, 80, 0.3);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.1) 100%);
    color: #81c784;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.exposure-meter-btn:active {
    background: rgba(76, 175, 80, 0.25);
    transform: scale(0.97);
}

.exposure-meter-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Meter status */
.exposure-meter-status {
    font-size: 0.78em;
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 6px;
}

.exposure-meter-status.measuring {
    color: #81c784;
    background: rgba(76, 175, 80, 0.06);
    animation: meter-pulse 1s infinite alternate;
}

.exposure-meter-status.measured {
    color: #81c784;
    background: rgba(76, 175, 80, 0.08);
}

.exposure-meter-status.error {
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.08);
}

@keyframes meter-pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Mode toggle (Photo / Video) */
.exposure-mode-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 4px;
}

.exposure-mode-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.exposure-mode-btn.active {
    background: rgba(0, 150, 255, 0.25) !important;
    border: none !important;
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.2),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 200, 255, 0.25);
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 242, 254, 0.8);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.exposure-mode-btn.active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, 
        rgba(0, 242, 254, 0.8) 0%, 
        rgba(255, 255, 255, 0.2) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(79, 172, 254, 0.5) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Video panel */
.exposure-video-panel {
    background: rgba(79, 172, 254, 0.06);
    border: 1px solid rgba(79, 172, 254, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.exposure-video-result {
    color: #4facfe;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 8px;
}

/* Min shutter info */
.exposure-min-shutter {
    color: rgba(255,255,255,0.4);
    font-size: 0.78em;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}

/* Sections */
.exposure-section {
    margin-bottom: 14px;
}

.exposure-section h4 {
    color: rgba(255,255,255,0.5);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Rows */
.exposure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.exposure-row label {
    color: rgba(255,255,255,0.6);
    font-size: 0.85em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
    flex-shrink: 0;
}

/* Selects */
/* Help button (?) for FPS/Angle */
.exp-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    font-size: 0.72em;
    font-weight: 700;
    cursor: pointer;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.exp-help-btn:hover,
.exp-help-btn:active {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

.exposure-select {
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 8px 24px 8px 12px;
    color: white;
    font-size: 0.85em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 140px;
}

/* Sliders */
.exposure-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    outline: none;
    margin: 6px 0;
}

.exposure-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe 0%, #3b8dd4 100%);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4);
}

.exposure-slider-ec::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffad4f 0%, #e8963a 100%);
    box-shadow: 0 2px 8px rgba(255, 173, 79, 0.4);
}

.exposure-ev-label,
.exposure-ec-label {
    color: #4facfe;
    font-size: 0.9em;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
}

.exposure-ec-label {
    color: #ffad4f;
}

.exposure-ev-desc {
    color: rgba(255,255,255,0.4);
    font-size: 0.8em;
    margin-top: 2px;
}

/* EC section */
.exposure-ec-section {
    position: relative;
    padding: 14px 16px;
    background: rgba(255, 173, 79, 0.04);
    border: none;
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.exposure-ec-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, 
        rgba(255, 173, 79, 0.4) 0%, 
        rgba(255, 255, 255, 0.05) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(255, 173, 79, 0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Triangle rows */
.exposure-triangle {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 16px;
    overflow: hidden;
    border: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.exposure-triangle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.05) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(255, 255, 255, 0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.exposure-tri-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.exposure-tri-row:last-child {
    border-bottom: none;
}

.exposure-tri-row.exposure-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.exposure-lock {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.exposure-lock.active {
    background: rgba(79, 172, 254, 0.15);
    box-shadow: 0 0 8px rgba(79,172,254,0.2);
}

.exposure-tri-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.82em;
    min-width: 70px;
}

.exposure-tri-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.exposure-tri-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 0.8em;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exposure-tri-btn:active {
    background: rgba(255,255,255,0.15);
}

.exposure-tri-value {
    color: white;
    font-size: 0.95em;
    font-weight: 700;
    min-width: 65px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ND section */
.exposure-nd-section {
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 12px 14px;
}

.exposure-nd-recommendation {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(79, 172, 254, 0.08);
    border: 1px solid rgba(79, 172, 254, 0.15);
    border-radius: 10px;
    color: #4facfe;
    font-size: 0.82em;
}

/* Warnings */
.exposure-warnings {
    margin-bottom: 10px;
}

.exposure-warning {
    padding: 8px 12px;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.12);
    border-radius: 10px;
    color: #ffb74d;
    font-size: 0.8em;
    margin-bottom: 6px;
}

/* Calibration tools */
.exposure-tools .exposure-row {
    gap: 8px;
}

.exposure-tool-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 0.82em;
    cursor: pointer;
    transition: background 0.2s;
}

.exposure-tool-btn:active {
    background: rgba(255,255,255,0.1);
}

/* ── Light Theme ── */
html.light-theme .exposure-content {
    background: rgba(250, 250, 252, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
}

html.light-theme .exposure-header h3,
html.light-theme .exposure-tri-value {
    color: #1a1a1a !important;
}

html.light-theme .exposure-tri-label,
html.light-theme .exposure-row label,
html.light-theme .exposure-gear-info,
html.light-theme .exposure-ev-desc,
html.light-theme .exposure-min-shutter {
    color: rgba(0,0,0,0.55) !important;
}

html.light-theme .exposure-select {
    background-color: rgba(0,0,0,0.04) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%231a1a1a' opacity='0.6' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}

html.light-theme .exposure-lock,
html.light-theme .exposure-tri-btn,
html.light-theme .exposure-tool-btn,
html.light-theme .exposure-input {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}

html.light-theme .exposure-triangle,
html.light-theme .exposure-nd-section,
html.light-theme .exposure-ec-section,
html.light-theme .exposure-kit-section {
    background: rgba(0,0,0,0.02) !important;
}

html.light-theme .exposure-slider {
    background: rgba(0,0,0,0.08) !important;
}

/* ── Mobile adjustments ── */
@media (max-width: 480px) {
    .exposure-content {
        padding: 18px 14px;
        border-radius: 20px;
        max-height: 92vh;
    }

    .exposure-tri-label {
        min-width: 55px;
        font-size: 0.78em;
    }

    .exposure-tri-value {
        font-size: 0.88em;
        min-width: 55px;
    }

    .exposure-mode-btn {
        padding: 8px;
        font-size: 0.82em;
    }
}

/* ── Tablet (iPad) ── */
@media (min-width: 768px) and (max-width: 1100px) {
    .exposure-content {
        max-height: 85vh;
    }
}

/* ── Web & Tablet Re-Layout ── */
@media (min-width: 768px) {
    /* Expand content width */
    .exposure-content {
        max-width: 850px;
        width: 95%;
    }

    /* Screen 1: Convert main buttons to 2 columns */
    .exp-grid-vars {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px !important;
        align-content: start;
    }

    /* Screen 3: Split into 2 columns */
    .exp-desktop-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;
        margin-top: 10px;
    }

    /* Delta EV Panel adjustments for vertical spacing */
    .exp-desktop-left .exp-delta-panel {
        padding-top: 10px !important;
    }
}

/* =============================================
   KIT BUTTON + MODAL (Calculator-style)
   ============================================= */

.exposure-kit-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exposure-kit-btn {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.exposure-kit-btn:hover,
.exposure-kit-btn:active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.exposure-active-kit {
    font-size: 0.82em;
    color: #4fc3f7;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Kit Selection Modal */
.exposure-kit-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.exposure-kit-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.exposure-kit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.exposure-kit-modal-content {
    position: relative;
    width: 88%;
    max-width: 400px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(30, 30, 40, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        0 16px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.92) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exposure-kit-modal.active .exposure-kit-modal-content {
    transform: scale(1) translateY(0);
}

.exposure-kit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.exposure-kit-modal-header h4 {
    color: white;
    font-size: 1.1em;
    font-weight: 700;
    margin: 0;
}

.exposure-kit-modal-close {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.exposure-kit-modal-item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exposure-kit-modal-item:hover,
.exposure-kit-modal-item:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.exposure-kit-modal-item-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exposure-kit-modal-icon {
    font-size: 1.3em;
    flex-shrink: 0;
}

.exposure-kit-modal-name {
    font-weight: 600;
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.95);
}

.exposure-kit-modal-details {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

.exposure-kit-modal-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.exposure-kit-modal-empty small {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    opacity: 0.6;
}

.exposure-kit-modal-manual {
    opacity: 0.65;
    border-style: dashed;
}

/* =============================================
   WARNING STRIP (below triangle)
   ============================================= */

.exposure-warning-strip {
    background: rgba(255, 160, 0, 0.08);
    border: 1px solid rgba(255, 160, 0, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 2px 0 12px;
    font-size: 0.78em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.exposure-warning-strip b {
    color: #ffa726;
}

/* ── Light mode ── */
html.light-theme .exposure-kit-btn {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.8);
}

html.light-theme .exposure-active-kit {
    color: #1976d2;
}

html.light-theme .exposure-kit-modal-content {
    background: rgba(245, 245, 248, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
}

html.light-theme .exposure-kit-modal-header h4 {
    color: rgba(0, 0, 0, 0.85);
}

html.light-theme .exposure-kit-modal-close {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .exposure-kit-modal-item {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}

html.light-theme .exposure-kit-modal-name {
    color: rgba(0, 0, 0, 0.85);
}

html.light-theme .exposure-kit-modal-details {
    color: rgba(0, 0, 0, 0.5);
}

html.light-theme .exposure-warning-strip {
    background: rgba(255, 160, 0, 0.06);
    border-color: rgba(255, 160, 0, 0.2);
    color: rgba(0, 0, 0, 0.75);
}

html.light-theme .exposure-warning-strip b {
    color: #e65100;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .exposure-warning-strip { font-size: 0.74em; padding: 8px 12px; }
    .exposure-kit-btn { padding: 8px 14px; font-size: 0.82em; }
}

/* ──────────────────────────────────────────────────
   Exposure Graphics: False Color + Zebra
   ────────────────────────────────────────────────── */

.exposure-graphics-section {
    padding: 0 !important;
}

.exposure-graphics-toggles {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 10px;
}

.exposure-graphics-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exposure-graphics-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.exposure-graphics-btn.active {
    background: rgba(79, 172, 254, 0.2);
    border-color: rgba(79, 172, 254, 0.5);
    color: #4facfe;
}

/* Camera container — fullscreen overlay */
.exposure-cam-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    background: #000;
    overflow: hidden;
}

.exposure-cam-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Close camera button */
.exp-cam-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    z-index: 100000;
    backdrop-filter: blur(8px);
}

/* ── Inline exposure controls overlay ── */
.exp-cam-controls {
    position: absolute;
    top: calc(50px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    z-index: 100000;
}

.exp-cam-ctrl-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.exp-cam-ctrl-label {
    font-size: 0.7em;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin-right: 2px;
}

.exp-cam-ctrl-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-cam-ctrl-btn:active {
    background: rgba(79, 172, 254, 0.3);
}

.exp-cam-ctrl-val {
    font-size: 0.82em;
    font-weight: 700;
    color: #4facfe;
    min-width: 26px;
    text-align: center;
}

.exp-cam-info {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.exp-cam-info span {
    font-size: 0.7em;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* ── Compact ND select in camera controls bar ── */
.exp-cam-ctrl-nd {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.exp-cam-nd-select {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 0.72em;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    min-width: 60px;
    max-width: 80px;
}

/* ── False Color Reference Bar — overlayed at bottom ── */
.exp-fc-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 5;
}

.exp-fc-gradient {
    height: 24px;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.exp-fc-gradient-zone {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.exp-fc-gradient-zone:last-child {
    border-right: none;
}

.exp-fc-labels {
    display: flex;
    justify-content: space-between;
    padding-top: 3px;
}

.exp-fc-labels span {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    flex: 1;
}

/* ── Δ EV indicator chip (in EV header row) ── */
.exp-ev-delta {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 6px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Zone EL: ND + Apply controls row ── */
.exp-fc-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-fc-nd-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.exp-fc-nd-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
}

.exp-fc-nd-select {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.72em;
    outline: none;
    cursor: pointer;
}

.exp-fc-apply-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 160, 50, 0.5);
    background: rgba(0, 160, 50, 0.15);
    color: #00dc00;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.exp-fc-apply-btn:active {
    background: rgba(0, 160, 50, 0.35);
}

@media (max-width: 480px) {
    .exp-fc-nd-label { display: none; }
    .exp-fc-apply-btn { font-size: 0.7em; padding: 5px 10px; }
}

/* ── Zebra Controls — overlayed at bottom ── */
.exp-zebra-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 5;
}

.exp-zebra-threshold-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.exp-zebra-threshold-row label {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    min-width: 90px;
}

.exp-zebra-threshold-row label span {
    font-weight: 700;
    color: #4facfe;
}

.exp-zebra-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.exp-zebra-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4facfe;
    cursor: pointer;
}

.exp-zebra-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.exp-zebra-preset {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exp-zebra-preset:hover {
    background: rgba(255, 255, 255, 0.1);
}

.exp-zebra-preset.active {
    background: rgba(79, 172, 254, 0.2);
    border-color: rgba(79, 172, 254, 0.4);
    color: #4facfe;
}

/* Light Theme */
html.light-theme .exposure-graphics-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .exposure-graphics-btn.active {
    background: rgba(79, 172, 254, 0.15);
    color: #1a73e8;
}

html.light-theme .exp-zebra-preset {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

html.light-theme .exp-zebra-preset.active {
    background: rgba(79, 172, 254, 0.15);
    color: #1a73e8;
}

/* Mobile */
@media (max-width: 480px) {
    .exposure-graphics-toggles { padding: 0 10px; gap: 6px; }
    .exposure-graphics-btn { font-size: 0.78em; padding: 8px 10px; }
    .exp-fc-labels span { font-size: 0.5em; }
    .exp-zebra-presets { gap: 4px; }
    .exp-zebra-preset { font-size: 0.65em; padding: 4px 8px; }
}

/* ── Redesign 2025: Δ EV Panel, ND stepper row, 2x2 grid ── */

/* Large Δ EV panel */
.exp-delta-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 20px;
    border-radius: 16px;
    margin: 0 0 14px;
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 74px;
    background: rgba(255,255,255,0.06);
}
.exp-delta-value {
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.exp-delta-desc {
    font-size: 0.82em;
    opacity: 0.85;
    text-align: center;
}

/* Triangle hint text */
.exposure-tri-hint {
    font-size: 0.75em;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin: -4px 0 8px;
    font-style: italic;
}
.exposure-calc-hint {
    font-size: 0.78em;
    text-align: center;
    margin: 6px 0 0;
    font-weight: 500;
}

/* Calculated variable row highlight */
.exposure-tri-row.calculated-row {
    border: 1px solid rgba(0, 242, 254, 0.35);
    background: rgba(0, 242, 254, 0.06);
    border-radius: 10px;
}

/* ND stepper row (no lock, neutral style) */
.exposure-tri-row-nd {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.03);
}
.exposure-nd-icon {
    width: 32px;
    text-align: center;
    font-size: 1.1em;
    flex-shrink: 0;
}

/* System-locked row (video shutter) */
.exposure-system-locked {
    opacity: 0.5;
    pointer-events: none;
}
.exposure-system-locked .exposure-lock {
    cursor: default;
}

/* 2×2 button grid */
.exposure-4btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.exposure-4btn-grid .exposure-graphics-btn,
.exposure-4btn-grid .exposure-tool-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* Mobile tweaks for new layout */
@media (max-width: 480px) {
    .exp-delta-value { font-size: 1.8em; }
    .exp-delta-panel { padding: 14px 16px; min-height: 64px; }
    .exposure-video-panel .exposure-select { font-size: 0.75em; }
}

/* =========================================================================
   BOTONES PREMIUM (TRUE DEPTH GLASSMORPHISM)
   ========================================================================= */

.premium-glass-btn {
    position: relative;
    background: rgba(0, 150, 255, 0.25) !important;
    border: none !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.4),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 200, 255, 0.15) !important;
    z-index: 1;
    overflow: hidden;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 242, 254, 0.5) !important;
    transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
}

.premium-glass-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, 
        rgba(0, 242, 254, 0.8) 0%, 
        rgba(255, 255, 255, 0.2) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(79, 172, 254, 0.5) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.premium-glass-btn:active {
    transform: scale(0.95);
    background: rgba(0, 150, 255, 0.35) !important;
}

/* =========================================================================
   GENERIC TRUE DEPTH CARD (Mantiene background dinámico)
   ========================================================================= */

.true-depth-card {
    position: relative;
    border: none !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.15),
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 1;
    overflow: hidden;
    transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
}

.true-depth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.05) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(255, 255, 255, 0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.true-depth-card:active {
    transform: scale(0.97);
    box-shadow: 
        inset 2px 2px 5px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================================================
   SÚPER TARJETA DE RESULTADOS (TRUE DEPTH GLASSMORPHISM)
   ========================================================================= */

.super-result-card {
    position: relative;
    background: rgba(0, 150, 255, 0.1) !important; /* Azul eléctrico transparente */
    border-radius: 20px;
    border: none !important;
    
    /* Desenfoque de Vidrio */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* Box Shadow Complejos 3D */
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.4),
        inset -1px -1px 4px rgba(0, 0, 0, 0.5),
        0 12px 30px rgba(0, 200, 255, 0.2) !important;
        
    z-index: 1;
    overflow: hidden;
}

/* Rim Light 1.5px (True Glass) */
.super-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    
    background: linear-gradient(135deg, 
        rgba(0, 242, 254, 0.8) 0%, 
        rgba(255, 255, 255, 0.2) 30%, 
        rgba(255, 255, 255, 0.0) 70%, 
        rgba(79, 172, 254, 0.5) 100%
    );
    
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: -1;
}

/* =========================================================================
   DESKTOP / TABLET RESPONSIVE LAYOUT (Arturo)
   ========================================================================= */

@media (min-width: 768px) {
    /* 1. Expand the master modal container */
    .exposure-content {
        max-width: 850px !important;
        width: 95% !important;
    }

    /* 2. Screen 1 Grid Layout */
    .exp-grid-vars {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
    .exp-grid-vars .exp-calc-card {
        padding: 20px 24px !important;
        height: 100%;
    }

    /* 3. Screen 3 High-Fidelity Split */
    .exp-desktop-split {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        width: 100%;
        margin-top: 10px;
    }
    .exp-desktop-left {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .exp-desktop-right {
        flex: 1.15; /* Give the triangle slightly more room */
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Center text nicely in big card layout */
    #exp-delta-super {
        padding: 16px !important;
    }
    #exp-super-val {
        font-size: 5em !important;
    }
}

/* ── Light cards: Full width on desktop/tablet ── */
@media (min-width: 600px) {
    #continuous-list-container {
        flex-direction: column !important;
    }
    #continuous-list-container > .true-depth-card {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    #continuous-list-container > .true-depth-card > div:first-child {
        flex-wrap: nowrap !important;
    }
}

/* --- Exposure Light Rows Fix for Mobile Vertical --- */
.exposure-light-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap; /* Allows wrapping */
}

@media (max-width: 580px) {
    .exposure-light-row {
        gap: 10px;
        padding-bottom: 8px; /* Slight breathing room if wrapped */
    }
    
    /* Make the Left section (Name, Base Star, Tally) take the full row */
    .exposure-light-row > div:nth-child(1) {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        margin-bottom: 4px;
    }
    
    /* Second row items spread out below it */
    .exposure-light-row > div:nth-child(2) {
        flex: 1 1 auto !important;
        justify-content: flex-start !important;
    }
    
    .exposure-light-row > div:nth-child(3) {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}
#exposure-kit-modal-list { max-height: 55vh; overflow-y: auto; padding-right: 5px; margin-right: -5px; }

/* ============================================================================ */
/* CHECKLIST.CSS */
/* ============================================================================ */

/* =============================================
   CHECKLIST MODULE — Session Checklist
   ============================================= */

/* === PILL BUTTONS ROW (Dashboard) === */
.dashboard-pills {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    margin-top: 10px;
    flex-shrink: 0;
    padding: 2px 4px;       /* Small padding to avoid edge clipping */
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;

    /* Same True Depth Glass as dashboard cards */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.25),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Rim light */
.dashboard-pill-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.dashboard-pill-btn:hover,
.dashboard-pill-btn:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.35),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.25);
}

.dashboard-pill-btn:hover {
    transform: translateY(-3px);     /* Same float as dashboard cards */
}

.dashboard-pill-btn:active {
    transform: translateY(-1px);     /* Snap back slightly on press */
    transition-duration: 0.1s;
}

.dashboard-pill-btn .pill-icon {
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;         /* Icon never shrinks */
}

/* Light theme */
html.light-theme .dashboard-pill-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%);
    color: rgba(0, 0, 0, 0.7);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.08);
}

html.light-theme .dashboard-pill-btn:hover,
html.light-theme .dashboard-pill-btn:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
    color: rgba(0, 0, 0, 0.85);
}

/* === CHECKLIST MODAL === */
.checklist-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.checklist-modal.active {
    opacity: 1;
    visibility: visible;
}

.checklist-modal-inner {
    width: 95vw;
    max-width: 900px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(17, 17, 17, 0.95);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    position: relative;
}

.checklist-modal-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Mobile: near fullscreen */
@media (max-width: 640px) {
    .checklist-modal-inner {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .checklist-modal-inner::before {
        border-radius: 0;
    }
}

.checklist-modal.active {
    opacity: 1;
    visibility: visible;
}

.checklist-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.checklist-back-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 14px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.checklist-header-title {
    flex: 1;
}

.checklist-header-title h2 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-primary, white);
}

.checklist-header-title p {
    margin: 2px 0 0;
    font-size: 0.8em;
    color: var(--text-secondary, rgba(255,255,255,0.5));
}

.checklist-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* === CHECKLISTS LIST VIEW === */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .checklist-grid {
        grid-template-columns: 1fr;
    }
}

.checklist-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.checklist-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.checklist-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3);
}

.checklist-card.active-checklist {
    border-left: 3px solid #04de71;
}

.checklist-card-name {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-primary, white);
    margin-bottom: 4px;
}

.checklist-card-desc {
    font-size: 0.82em;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    margin-bottom: 8px;
}

.checklist-card-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
}

.checklist-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    background: #04de71;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.checklist-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
}

.checklist-card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checklist-card-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.checklist-card-action-btn.delete-btn:hover {
    background: rgba(255, 50, 50, 0.2);
    color: #ff5555;
    border-color: rgba(255, 50, 50, 0.3);
}

/* New checklist button */
.checklist-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-new-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
}

/* === CHECKLIST EDIT VIEW === */
.checklist-name-input,
.checklist-desc-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary, white);
    font-size: 0.95em;
    font-family: inherit;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.checklist-name-input:focus,
.checklist-desc-input:focus {
    border-color: rgba(79, 172, 254, 0.5);
}

.checklist-name-input::placeholder,
.checklist-desc-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.checklist-desc-input {
    font-size: 0.85em;
    resize: none;
    min-height: 40px;
}

/* Category sections */
.checklist-category {
    margin-top: 20px;
}

.checklist-category-title {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Individual item row */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.checklist-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.checklist-item.checked {
    opacity: 0.65;
}

.checklist-item.checked .checklist-item-name {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
}

/* Checkbox circle */
.checklist-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 0.7em;
}

.checklist-item.checked .checklist-checkbox {
    background: #04de71;
    border-color: #04de71;
    color: white;
}

.checklist-item-info {
    flex: 1;
    min-width: 0;
}

.checklist-item-name {
    font-size: 0.92em;
    font-weight: 500;
    color: var(--text-primary, white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checklist-item-detail {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* Quantity stepper */
.checklist-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.checklist-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.checklist-qty-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.checklist-qty-val {
    min-width: 20px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Remove item button */
.checklist-remove-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.1em;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist-remove-btn:hover {
    color: #ff5555;
}

/* Add item buttons */
.checklist-add-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checklist-add-btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.checklist-add-btn .add-icon {
    font-size: 1.2em;
}

/* === CATALOG PICKER OVERLAY === */
.checklist-catalog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.checklist-catalog-overlay.active {
    opacity: 1;
    visibility: visible;
}

.checklist-catalog-sheet {
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    background: var(--bg-main, #1a1a2e);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checklist-catalog-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checklist-catalog-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-primary, white);
}

.checklist-catalog-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist-catalog-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 20px;
    -webkit-overflow-scrolling: touch;
}

.checklist-catalog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.checklist-catalog-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.checklist-catalog-item.already-added {
    opacity: 0.4;
    pointer-events: none;
}

.checklist-catalog-item .cat-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.checklist-catalog-item .cat-name {
    flex: 1;
    font-size: 0.9em;
    color: var(--text-primary, white);
}

.checklist-catalog-item .cat-added {
    font-size: 0.75em;
    color: #04de71;
}

/* Custom item inline form */
.checklist-custom-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.checklist-custom-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 0.9em;
    font-family: inherit;
    outline: none;
}

.checklist-custom-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.checklist-custom-submit {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: var(--accent-orange, #e8a430);
    color: white;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
}

/* === LIGHT THEME === */
html.light-theme .checklist-modal-inner {
    background: rgba(245, 245, 247, 0.97);
}

html.light-theme .checklist-modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .checklist-back-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .checklist-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .checklist-progress-bar {
    background: rgba(0, 0, 0, 0.06);
}

html.light-theme .checklist-name-input,
html.light-theme .checklist-desc-input,
html.light-theme .checklist-custom-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

html.light-theme .checklist-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html.light-theme .checklist-checkbox {
    border-color: rgba(0, 0, 0, 0.2);
}

html.light-theme .checklist-category-title {
    color: rgba(0, 0, 0, 0.35);
}

html.light-theme .checklist-catalog-sheet {
    background: var(--bg-main, #f5f5f7);
}

/* Responsive: compact on small screens */
@media (max-width: 380px) {
    .dashboard-pill-btn {
        padding: 5px 8px;
        font-size: 0.72em;
        gap: 4px;
    }
    .dashboard-pills {
        gap: 4px;
    }
}
/* === FIX #16: Unit pill inactive state more visible === */
html body .unit-pill {
    opacity: 0.65 !important; /* Was 0.5 — too dark on some screens */
}

/* === FIX #19: Empty checklist text always visible === */
.checklist-modal .checklist-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.checklist-modal .checklist-empty-state .empty-icon {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.6;
}

.checklist-modal .checklist-empty-state p {
    color: rgba(255, 255, 255, 0.5) !important;  /* Explicit — prevents cascade override */
    font-size: 0.95em;
    margin: 0;
}

.checklist-modal .checklist-empty-state p + p {
    font-size: 0.82em;
    margin-top: 4px;
}

html.light-theme .checklist-modal .checklist-empty-state p {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* ============================================================================ */
/* GUIDED-TOUR.CSS */
/* ============================================================================ */

/* ============================================================
   GUIDED TOUR — ShotPlanner Pro
   Interactive spotlight-based onboarding
   ============================================================ */

/* ---- OVERLAY (covers entire screen) ---- */
.guided-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 120000;
    pointer-events: all;
    transition: opacity 0.35s ease;
    opacity: 0;
}

.guided-tour-overlay.active {
    opacity: 1;
}

/* ---- BACKDROP (dark blurred layer for centered slides) ---- */
.guided-tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 120001;
    display: none;
    transition: opacity 0.35s ease;
}

/* ---- SPOTLIGHT (cutout that reveals the target element) ---- */
.guided-tour-spotlight {
    position: fixed;
    z-index: 120002;
    border-radius: 16px;
    transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* Massive box-shadow creates the "cutout" effect */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.82);
    /* Glow ring around the target */
    outline: 2px solid rgba(102, 126, 234, 0.6);
    outline-offset: 2px;
    pointer-events: none;
}

/* Glow pulse animation */
.guided-tour-spotlight::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    animation: guidedTourPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes guidedTourPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* ---- TOOLTIP (glassmorphism card with arrow) ---- */
.guided-tour-tooltip {
    position: fixed;
    z-index: 120003;
    width: calc(100vw - 40px);
    max-width: 380px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 22px 18px;
    border-radius: 20px;
    /* Glassmorphism */
    background: rgba(18, 18, 35, 0.75);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    /* Transitions for repositioning */
    transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    pointer-events: all;
}

/* Gradient border pseudo-element */
.guided-tour-tooltip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.0) 30%,
            rgba(255, 255, 255, 0.0) 50%,
            rgba(255, 255, 255, 0.2) 80%,
            rgba(255, 255, 255, 0.0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* ---- ARROW (CSS triangle pointing to target) ---- */
.guided-tour-arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    background: rgba(18, 18, 35, 0.75);
    transform: rotate(45deg);
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Arrow pointing UP (tooltip below target) */
.guided-tour-tooltip[data-position="below"] .guided-tour-arrow {
    top: -8px;
    border-right: none;
    border-bottom: none;
}

/* Arrow pointing DOWN (tooltip above target) */
.guided-tour-tooltip[data-position="above"] .guided-tour-arrow {
    bottom: -8px;
    border-left: none;
    border-top: none;
}

/* ---- TOOLTIP CONTENT ---- */
.guided-tour-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.35);
    color: rgba(170, 185, 255, 0.9);
    font-size: 0.72em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.guided-tour-title {
    font-size: 1.3em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
}

.guided-tour-body {
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.55;
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
}

/* ---- NAVIGATION ---- */
.guided-tour-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.guided-tour-btn-prev,
.guided-tour-btn-next {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guided-tour-btn-prev:active,
.guided-tour-btn-next:active {
    transform: scale(0.96);
}

/* Next button gets a subtle blue tint to hint forward progression */
.guided-tour-btn-next {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35) 0%, rgba(118, 75, 162, 0.35) 100%);
    border-color: rgba(102, 126, 234, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.guided-tour-btn-prev.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ---- DOTS (progress indicators) ---- */
.guided-tour-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
}

.guided-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
}

.guided-tour-dot.active {
    width: 16px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.8);
}

.guided-tour-dot.done {
    background: rgba(102, 126, 234, 0.6);
}

/* ---- SKIP BUTTON ---- */
.guided-tour-skip {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 14px));
    right: 16px;
    z-index: 120004;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guided-tour-skip:active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
    .guided-tour-tooltip {
        width: calc(100vw - 28px);
        padding: 20px 18px 14px;
        border-radius: 16px;
    }

    .guided-tour-title {
        font-size: 1.15em;
    }

    .guided-tour-body {
        font-size: 0.85em;
        margin-bottom: 14px;
    }

    .guided-tour-btn-prev,
    .guided-tour-btn-next {
        padding: 8px 14px;
        font-size: 0.8em;
    }

    .guided-tour-spotlight {
        border-radius: 12px;
    }
}

/* ---- SAFE AREA (iOS) ---- */
@supports (padding-top: env(safe-area-inset-top)) {
    .guided-tour-skip {
        top: calc(env(safe-area-inset-top) + 8px);
    }
}

/* ---- CLOSE BUTTON (✕ on tooltip) ---- */
.guided-tour-close {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1.2;
    white-space: nowrap;
}

.guided-tour-close:active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.guided-tour-close.hidden {
    display: none !important;
}

/* ---- CENTERED MODE (intro/outro — no spotlight) ---- */
.guided-tour-tooltip[data-position="centered"] {
    text-align: center;
}

.guided-tour-tooltip[data-position="centered"] .guided-tour-arrow {
    display: none !important;
}

.guided-tour-tooltip[data-position="centered"] .guided-tour-nav {
    justify-content: center;
    gap: 16px;
}

.guided-tour-tooltip[data-position="centered"] .guided-tour-body {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- EMOJI (large icon for intro/outro) ---- */
.guided-tour-emoji {
    font-size: 3.2em;
    margin-bottom: 14px;
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.15));
    animation: guidedTourPulse 3s ease-in-out infinite;
}

/* ============================================================================ */
/* COLOR-BALANCE.CSS */
/* ============================================================================ */

/* =============================================
   COLOR BALANCE MODULE - CSS STYLES
   True Depth Glassmorphism — Two-Mode Design
   ============================================= */

/* Modal wrapper */
.color-balance-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.color-balance-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.color-balance-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.color-balance-content {
    position: relative;
    width: 92%;
    max-width: 440px;
    max-height: 88vh;
    overflow-y: auto;
    background: rgba(18, 18, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 24px 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.15),
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        0 16px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.color-balance-modal.active .color-balance-content {
    transform: scale(1) translateY(0);
}

/* Rim light — same technique as Exposure */
.color-balance-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.12) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Header */
.cb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.cb-header h3 {
    color: white;
    font-size: 1.15em;
    font-weight: 700;
    margin: 0;
}

.cb-close {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    white-space: nowrap;
}

/* ── Mode Tabs ── */
.cb-mode-tabs {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cb-mode-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.cb-mode-tab.active {
    background: rgba(0, 150, 255, 0.15) !important;
    color: #ffffff;
    border: none !important;
    position: relative;
    box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), 0 10px 30px rgba(0,200,255,0.2);
    z-index: 1;
}

.cb-mode-tab.active::before,
.premium-clear-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.8) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(79, 172, 254, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.premium-clear-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff;
    border: none !important;
    position: relative;
    box-shadow: inset 1px 1px 3px rgba(255,255,255,0.2), 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1;
    overflow: hidden;
}

/* Section */
.cb-section {
    margin-bottom: 16px;
}

.cb-section h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Unified section title for both WB modes */
.cb-section-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    margin: 0 0 8px;
}

/* ── Temperature Bar ── */
.cb-temp-bar-container {
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0 6px;
    position: relative;
    background: linear-gradient(
        to right,
        #ff6b1a 0%,
        #ff9944 15%,
        #ffcc77 30%,
        #ffeedd 45%,
        #ffffff 55%,
        #cce0ff 70%,
        #99bbff 85%,
        #7799ff 100%
    );
}

.cb-temp-marker {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 18px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    transition: left 0.3s ease;
}

.cb-temp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
}

/* Value display */
.cb-measured-value {
    text-align: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.cb-kelvin-display {
    font-size: 2.2em;
    font-weight: 800;
    color: #ffcc77;
    font-variant-numeric: tabular-nums;
    display: block;
}

.cb-temp-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82em;
    margin-top: 4px;
}

/* Measure button */
.cb-measure-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(79, 172, 254, 0.3);
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    font-size: 0.9em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cb-measure-btn:active {
    background: rgba(79, 172, 254, 0.2);
}

.cb-measure-btn.measuring,
.cb-card-measure.measuring {
    animation: cb-pulse 1s infinite alternate;
}

@keyframes cb-pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Slider */
.cb-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    outline: none;
    margin: 8px 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
}

.cb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Chrome/Web fix: explicitly style the track so drag state doesn't override it */
.cb-slider::-webkit-slider-runnable-track,
.cb-slider:active::-webkit-slider-runnable-track,
.cb-slider:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #ff6b1a 0%, #ff9944 15%, #ffcc77 30%, #ffeedd 45%, #ffffff 55%, #cce0ff 70%, #99bbff 85%, #7799ff 100%) !important;
}

.cb-slider::-moz-range-track {
    background: linear-gradient(to right, #ff6b1a 0%, #ff9944 15%, #ffcc77 30%, #ffeedd 45%, #ffffff 55%, #cce0ff 70%, #99bbff 85%, #7799ff 100%);
}

/* ── Compare Cards (side by side) ── */
.cb-compare-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.cb-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 10px 12px;
    text-align: center;
}

.cb-card h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 8px;
}

.cb-card-kelvin {
    display: block;
    font-size: 1.6em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffcc77;
    margin-bottom: 2px;
}

.cb-card-desc {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72em;
    margin-bottom: 8px;
    min-height: 1.2em;
}

.cb-card-measure {
    width: 100%;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid rgba(79, 172, 254, 0.25);
    background: rgba(79, 172, 254, 0.08);
    color: #4facfe;
    font-size: 0.78em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cb-card-measure:active {
    background: rgba(79, 172, 254, 0.18);
}

.cb-card-slider-wrap {
    margin-top: 6px;
}

.cb-card-slider {
    height: 4px !important;
    margin: 4px 0 0 !important;
}

.cb-card-slider::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
}

/* Source/Ambient presets */
.cb-source-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.cb-preset-btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05em;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

/* Blue active state — consistent with calculator */
.cb-preset-btn.active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.35), rgba(79, 172, 254, 0.2));
    border-color: rgba(79, 172, 254, 0.6);
    color: #4facfe;
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.2);
}

/* Results card */
.cb-result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
}

.cb-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cb-result-row:last-child {
    border-bottom: none;
}

.cb-result-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82em;
}

.cb-result-value {
    color: white;
    font-weight: 700;
    font-size: 0.92em;
}

.cb-gel-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85em;
}

.cb-gel-cto {
    background: rgba(255, 152, 0, 0.2);
    color: #ffa726;
}

.cb-gel-ctb {
    background: rgba(66, 165, 245, 0.2);
    color: #42a5f5;
}

.cb-gel-none {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.cb-gel-green {
    background: rgba(129, 199, 132, 0.2);
    color: #66bb6a;
}

.cb-gel-magenta {
    background: rgba(224, 64, 251, 0.2);
    color: #e040fb;
}

/* Warning / disclaimer */
.cb-disclaimer {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    margin-top: 12px;
    padding: 8px;
    line-height: 1.4;
}

.cb-mixed-warning {
    padding: 10px 12px;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.15);
    border-radius: 10px;
    color: #ffb74d;
    font-size: 0.8em;
    margin-top: 10px;
}

/* Guide button */
.cb-guide-btn {
    padding: 10px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cb-guide-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

/* Tool button (gray card) */
.cb-tool-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cb-tool-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Light Theme ── */
html.light-theme .color-balance-modal .color-balance-backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html.light-theme .color-balance-content {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        0 24px 64px rgba(0, 0, 0, 0.18) !important;
    color: #1a1a1a !important;
}

html.light-theme .cb-section-title {
    color: rgba(0, 0, 0, 0.55) !important;
}

html.light-theme .cb-header h3 {
    color: #1a1a1a !important;
}

html.light-theme .cb-section h4,
html.light-theme .cb-card h4 {
    color: rgba(0, 0, 0, 0.45) !important;
}

html.light-theme .cb-kelvin-display,
html.light-theme .cb-card-kelvin {
    color: #e65100;
}

/* cb-kelvin-display is now inline — it adapts gracefully */ 
html.light-theme .cb-amb-preset-label-text {
    color: rgba(0,0,0,0.45) !important;
}

html.light-theme .cb-temp-desc,
html.light-theme .cb-card-desc,
html.light-theme .cb-result-label {
    color: rgba(0, 0, 0, 0.55) !important;
}

html.light-theme .cb-result-value {
    color: #1a1a1a !important;
}

html.light-theme .cb-measured-value,
html.light-theme .cb-result-card,
html.light-theme .cb-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .cb-preset-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.65);
}

html.light-theme .cb-close {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .cb-disclaimer {
    color: rgba(0, 0, 0, 0.35);
}

html.light-theme .cb-mode-tabs {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .cb-mode-tab {
    color: rgba(0, 0, 0, 0.45);
}

html.light-theme .cb-mode-tab.active {
    background: rgba(79, 172, 254, 0.12);
    color: #1976d2;
}

html.light-theme .cb-guide-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
}

/* #11 FIX: Compare Sources mode — light theme visibility */
html.light-theme .cb-card-measure {
    background: rgba(25, 118, 210, 0.07) !important;
    border-color: rgba(25, 118, 210, 0.25) !important;
    color: #1565c0 !important;
}

html.light-theme .cb-tool-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.65) !important;
}

html.light-theme .cb-mixed-warning {
    background: rgba(230, 81, 0, 0.07) !important;
    border-color: rgba(230, 81, 0, 0.2) !important;
    color: #bf360c !important;
}

html.light-theme .cb-preset-btn.active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.15), rgba(79, 172, 254, 0.1)) !important;
    border-color: rgba(41, 98, 255, 0.45) !important;
    color: #1976d2 !important;
    box-shadow: 0 0 8px rgba(41, 98, 255, 0.15);
}

/* Compare mode section labels (inline style overrides) */
html.light-theme .cb-source-presets-label {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .color-balance-content {
        padding: 18px 14px;
        border-radius: 20px;
        max-height: 92vh;
    }

    .cb-mode-tab {
        font-size: 0.76em;
        padding: 9px 6px;
    }

    .cb-card {
        padding: 10px 8px;
    }

    .cb-card-kelvin {
        font-size: 1.35em;
    }

    .cb-card-desc {
        font-size: 0.68em;
    }

    .cb-preset-btn {
        padding: 6px 10px;
        font-size: 0.72em;
    }
} /* END MAC-WIDTH: 480PX */

/* ── Redesign: True Depth Aesthetics & 2D Graph ── */

.cb-measure-circle {
    width: 64px;
    height: 64px;
    min-width: 64px;
    flex-shrink: 0;
    appearance: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset -2px -2px 6px rgba(0,0,0,0.3);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.cb-measure-circle:active {
    transform: scale(0.92);
}

.cb-measure-circle.measuring {
    animation: cb-pulse-circle 1.2s infinite alternate ease-in-out;
}

@keyframes cb-pulse-circle {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        transform: scale(1.05);
    }
}

.cb-color-swatch {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em; /* For a camera icon overlay if needed */
}

/* 2D Chromatic Graph */
.cb-2d-graph {
    position: relative;
    width: 100%;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.4);
    background: #000;
}

/* X-Axis: Warm to Cool (Left to Right) */
.cb-2d-graph-x {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #ff5500 0%,
        #ff8c00 15%,
        #ffcc77 30%,
        #ffeedd 45%,
        #ffffff 55%,
        #cce0ff 70%,
        #99bbff 85%,
        #5588ff 100%
    );
}

/* Y-Axis: Magenta (Top) to Green (Bottom) */
/* Using blend-mode or alpha overlay */
.cb-2d-graph-y {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 0, 255, 0.7) 0%, /* Magenta */
        rgba(255, 255, 255, 0) 50%,     
        rgba(0, 255, 0, 0.7) 100%  /* Green */
    );
    mix-blend-mode: overlay; /* or hard-light */
}

.cb-2d-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(0,0,0,0.8), inset 0 0 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: left 0.3s ease, top 0.3s ease;
    z-index: 2;
}

/* Crosshair lines */
.cb-2d-cross-x, .cb-2d-cross-y {
    position: absolute;
    background: rgba(255,255,255,0.4);
    pointer-events: none;
    transition: left 0.3s ease, top 0.3s ease;
    z-index: 1;
}

.cb-2d-cross-x { height: 100%; width: 1px; top: 0; transform: translateX(-50%); }
.cb-2d-cross-y { width: 100%; height: 1px; left: 0; transform: translateY(-50%); }

.cb-tint-pill {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 1.1em;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: inline-block;
    transition: background 0.3s ease, color 0.3s ease;
}

.cb-val-metric {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 10px 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.cb-val-metric.disabled {
    opacity: 0.4;
}

.cb-val-label {
    font-weight: 600;
    font-size: 0.75em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cb-val-num {
    font-weight: 700;
    font-size: 1.1em;
    color: white;
}

/* Compare Mode True Depth Overrides */
.cb-mode-compare .cb-compare-cards .cb-card {
    background: rgba(0, 150, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 18px 12px 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Rim light for compare cards */
.cb-mode-compare .cb-compare-cards .cb-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.15) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.cb-mode-compare .cb-result-card {
    background: rgba(0, 150, 255, 0.1) !important;
    border: none !important;
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.4), inset -1px -1px 4px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 200, 255, 0.2) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cb-mode-compare .cb-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.8) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(79, 172, 254, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* ── Web & Tablet Re-Layout ── */
@media (min-width: 768px) {
    /* Expand content width */
    .color-balance-content {
        max-width: 850px;
        width: 95%;
    }

    /* Layout: Split into 2 columns */
    .tracker-dual-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;
        margin-top: 10px;
    }
}

/* ═══════════════════════════════════════════════
   CREATIVE COLOR WHEEL — Styles
   ═══════════════════════════════════════════════ */

/* ── Internal Sub-Tabs (WB / Creative) ── */
.cb-internal-tabs {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 3px;
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cb-int-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.cb-int-tab.active {
    background: rgba(0, 150, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), 0 10px 30px rgba(0,200,255,0.2);
    z-index: 1;
}

/* ── Canvas Wrap ── */
.cw-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
    aspect-ratio: 1;
}

.cw-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    cursor: crosshair;
}

/* ── Dropdown Buttons ── */
.cw-dropdown-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

.cw-dropdown-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

/* ── Swatch Bar ── */
#cw-swatch-bar {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Mode Sliders ── */
.cw-slider-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
}

.cw-mode-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.cw-mode-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ── Brightness Slider Thumb ── */
#cw-brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Sensor Badge ── */
#cw-sensor-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

#cw-sensor-badge.connected {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

/* ── Light Theme Overrides ── */
html.light-theme .cb-int-tab {
    color: rgba(0, 0, 0, 0.45);
}

html.light-theme .cb-int-tab.active {
    background: rgba(79, 172, 254, 0.12) !important;
    color: #1976d2 !important;
}

html.light-theme .cw-dropdown-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

html.light-theme .cw-slider-group {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

html.light-theme .cw-mode-slider {
    background: rgba(0, 0, 0, 0.08);
}

html.light-theme .cw-mode-slider::-webkit-slider-thumb {
    background: #1a1a1a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

html.light-theme #cw-brightness-slider {
    background: linear-gradient(to right, #333 0%, #eee 100%) !important;
}

html.light-theme #cw-brightness-slider::-webkit-slider-thumb {
    background: #1a1a1a;
}

html.light-theme #cw-sensor-badge {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ── Mobile adjustments ── */
@media (max-width: 480px) {
    .cw-canvas-wrap {
        max-width: 260px;
    }
}


/* ============================================================================ */
/* UI-POLISH-FIXES.CSS */
/* ============================================================================ */

/* ==============================================
   UI POLISH FIXES - HEADER & ANDROID ADJUSTMENTS
   ============================================== */

/* === CALCULATOR HEADER V6 (TITLE TOP MOBILE) === */
/* Mobile First: Row 1 = Title. Row 2 = Back + Controls. */
/* User Request: Title first, then buttons below aligned left/right */

/* Force Container Padding for Header */
#calculator-page .container {
    padding-top: calc(10px + env(safe-area-inset-top));
}

/* HEADER CONTAINER */
#calculator-page .modern-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    /* ALLOW WRAPPING ON MOBILE */
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 50 !important;
    gap: 0 !important;
}

/* --- FLICKER FIX REMOVED --- */
/* caused ghost inputs */

/* --- MOBILE HEADER FIX (Calculator page only) --- */
@media (max-width: 600px) {
    #calculator-page .modern-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #calculator-page .header-logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #calculator-page .header-controls {
        width: 100%;
        justify-content: flex-end;
    }

    /* Ensure "Modo Nocturno" text is smaller on very small screens */
    .theme-toggle-label span {
        font-size: 0.7em !important;
    }
}

/* On small phones, hide Night Mode text — show only 🔴 icon */
@media (max-width: 420px) {
    #night-mode-toggle-wrapper .theme-toggle-label span {
        display: none !important;
    }
}

/* --- FLICKER FIX REMOVED (CAUSED GHOST INPUTS) --- */
/*
.notice,
.glass-panel,
.gear-card,
.dof-visualizer {
    transform: none !important;
    will-change: auto !important;
}
*/

/* --- GLOBAL MODAL FIXES (FLEXBOX + RELATIVE) --- */
/* 1. Overlay: Flexbox centering */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2. Content: RELATIVE to allow flexbox to center it, and allow scrolling if taller than screen */
.modal-content,
.modal-content[style] {
    position: relative !important;
    margin: auto !important;
    /* Auto margin handles centering in flexbox if needed */
    max-height: 85vh !important;
    max-width: 500px !important;
    width: 90% !important;
    overflow-y: auto !important;

    /* Reset fixed/absolute positioning that causes the "scroll to find" issue */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;

    /* Extra safety for flexbox children */
    align-self: center !important;
    justify-self: center !important;

    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Specific fix for Kit Modal to ensure it behaves */
#backpack-modal .modal-content {
    max-width: 400px !important;
}

/* --- DESKTOP/IPAD SPECIFIC OVERRIDE --- */
/* If legacy code has media queries that break this, we override them here */
@media (min-width: 768px) {
    .modal-overlay {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
        height: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .modal-content,
    .modal-content[style],
    #backpack-modal .modal-content {
        position: relative !important;
        margin: auto !important;
        top: auto !important;
        left: auto !important;
        transform: translate(0, 0) !important;
        /* Ensure no transform scaling messes up centering */
    }
}

/* --- MOBILE LAYOUT (< 600px) --- */
/* Fix header overlap by allowing wrapping */
@media (max-width: 600px) {
    #calculator-page .modern-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }
}

/* 1. TITLE (Top Row) - ORDER 1 */
#calculator-page .header-title {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    /* Space between title and buttons */
    margin-top: 5px !important;
}

#calculator-page .header-title h1 {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    word-break: break-word !important;
}

#calculator-page .header-title p {
    font-size: 0.85em !important;
    opacity: 0.7 !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.1 !important;
}

/* 2. LOGO / BACK BUTTON (Bottom Left) - ORDER 2 */
#calculator-page .header-logo {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 50% !important;
    /* Half width */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 44px !important;
}

/* 3. CONTROLS (Bottom Right) - ORDER 3 */
#calculator-page .header-controls {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: 50% !important;
    /* Half width */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 44px !important;
    gap: 8px !important;
}

/* --- DESKTOP / TABLET OVERRIDES (>= 600px) --- */
@media screen and (min-width: 600px) {
    #calculator-page .container {
        padding-top: calc(20px + env(safe-area-inset-top));
    }

    #calculator-page .modern-header {
        flex-wrap: nowrap !important;
        /* Single Row */
        gap: 20px !important;
        height: auto !important;
        margin-bottom: 40px !important;
    }

    #calculator-page .header-logo {
        width: auto !important;
        /* Shrink to fit */
        min-width: 100px !important;
    }

    #calculator-page .header-controls {
        width: auto !important;
        /* Shrink to fit */
        min-width: 100px !important;
        order: 3 !important;
        /* Keep on right */
    }

    #calculator-page .header-title {
        order: 2 !important;
        /* Move to middle */
        flex: 1 1 auto !important;
        width: auto !important;
        margin-top: 0 !important;
    }

    #calculator-page .header-title h1 {
        font-size: 1.6em !important;
    }
}

/* BACK BUTTON STYLE */
#calculator-page .back-button-modern {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) !important;
}

/* Theme Toggle Visibility Fix */
html body .theme-switch-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    min-height: 36px !important;
    /* Ensure height matches back button for alignment */
    margin: 0 !important;
}

html body .theme-label {
    font-size: 0.85em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    opacity: 1 !important;
}

html body #night-mode-toggle-wrapper .theme-label::before {
    content: '🌙' !important;
    margin-right: 6px !important;
}

@media (max-width: 360px) {
    html body .theme-label {
        font-size: 0 !important;
    }

    html body #night-mode-toggle-wrapper .theme-label::before {
        font-size: 1.2em !important;
    }
}

/* === PREVIOUS CONTENT BELOW (Keep existing logic if not overridden) === */

/* ALL choice buttons start dimmed */
/* === MODERN IOS FROST STYLE === */
/* ALL choice buttons: Frost Glass + Interrupted Gradient Border */
html body .choice-button {
    padding: 12px 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: none !important;
    border-radius: 12px !important;

    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;

    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;

    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25) !important;

    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    z-index: 1;
}

html body .choice-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* SELECTED: Solid Blue Background — Clearly Visible */
html body .choice-button.active {
    /* ACTIVE STATE: Solid blue background, immediately obvious */
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.85) 0%, rgba(79, 172, 254, 0.7) 100%) !important;

    color: white !important;
    font-weight: 700 !important;

    box-shadow:
        0 0 14px rgba(79, 172, 254, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;

    transform: scale(1.02) translateY(-2px) !important;
    border: 1px solid rgba(79, 172, 254, 0.8) !important;
}

html body .choice-button.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
}

/* FIX: REMOVE GHOST / TAP HIGHLIGHT */
html body .choice-button,
html body .option-card,
html body button {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

html body .choice-button:focus,
html body .choice-button:active {
    outline: none !important;
    /* Prevent default blue overlay on some browsers */
}

@media (hover: hover) {
    html body .choice-button:not(.active):hover {
        opacity: 0.6 !important;
        transform: translateY(-1px) !important;
    }
}

/* RED MODE OVERRIDES */
html body.astro-mode .choice-button,
html body.concerts-mode .choice-button {
    background: rgb(34, 0, 0) !important;
    opacity: 0.4 !important;
}

html body.astro-mode .choice-button.active,
html body.concerts-mode .choice-button.active {
    background: rgb(120, 20, 20) !important;
    opacity: 1 !important;
    border: 3px solid rgba(255, 100, 100, 0.9) !important;
    box-shadow:
        0 0 24px rgba(255, 50, 50, 0.9),
        0 8px 32px rgba(255, 50, 50, 0.7) !important;
    transform: scale(1.05) translateY(-3px) !important;
}

/* === FIX 2: DASHBOARD UNIT BUTTONS (MÉTRICO/IMPERIAL) === */

/* Base style for unit pills */
html body .unit-pill {
    transition: all 0.3s ease !important;
    opacity: 0.5 !important;
    /* Unselected = dimmed */
    border: 2px solid transparent !important;
    transform: scale(1) !important;
}

/* Selected unit pill */
html body .unit-pill.active {
    opacity: 1 !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
        0 0 20px rgba(79, 172, 254, 0.9),
        0 6px 24px rgba(79, 172, 254, 0.6) !important;
    transform: scale(1.05) translateY(-2px) !important;
}

html body .unit-pill:not(.active):hover {
    opacity: 0.7 !important;
    transform: translateY(-1px) !important;
}

/* === FIX 3: SMALLER TOGGLES === */

html body .theme-switch {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    height: 24px !important;
}

html body .theme-switch .slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

html body .theme-switch .slider:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

html body .theme-switch input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

html body .theme-switch input:checked+.slider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* === FIX 8: DASHBOARD HEADER (if exists) === */

html body .dashboard-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

@media (min-width: 769px) {
    html body .dashboard-header {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

/* === FIX 9: NIGHT MODE TOGGLE VISIBILITY === */
/* CRITICAL: Show ONLY in Astro and Concerts modes */

/* Hide by default (has .hidden class in HTML) */
html body #night-mode-toggle-wrapper.hidden {
    display: none !important;
}

/* Show ONLY when body has astro-mode or concerts-mode class */
html body.astro-mode #night-mode-toggle-wrapper.hidden,
html body.concerts-mode #night-mode-toggle-wrapper.hidden {
    display: flex !important;
}

/* === NIGHT MODE BAR (below header) === */
.night-mode-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.night-mode-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: rgba(255, 50, 50, 0.12);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 25px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.night-mode-bar-label:active {
    transform: scale(0.97);
}

.night-mode-bar-text {
    font-size: 0.85em;
    font-weight: 600;
    color: #ff4444;
}

.night-mode-bar-icon {
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

/* When checked — brighter glow */
#header-night-mode-toggle:checked ~ .night-mode-bar-icon {
    transform: scale(1.2);
    filter: brightness(1.5);
}

/* === FIX 10: DASHBOARD HEADER — CENTERED LOGO+TITLE === */
/* Source fixed in modern-index.css: flex-wrap: nowrap, flex: 0 1 auto */
/* Only mobile size adjustments needed here */

@media (max-width: 480px) {
    .header-logo .logo {
        max-width: 50px !important;
    }

    .modern-header {
        gap: 8px;
    }

    .header-title h1 {
        font-size: 1.1em;
    }

    .header-title p {
        font-size: 0.75em;
    }
}

/* === iPad/Tablet — Force no-scroll === */
@media (min-width: 768px) and (max-width: 1100px) {
    html body .floating-card {
        display: grid !important;
        grid-template-rows: 55% 45% !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        min-height: 80px !important;
        padding: 16px !important;
        gap: 0px !important;
    }

    html body .card-icon {
        font-size: 2.2em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .modern-main {
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    html body .start-button-modern {
        margin-top: 8px !important;
        padding: 12px !important;
    }

    html body .restore-button-modern {
        padding: 8px !important;
        margin-top: 4px !important;
    }
}

/* === FIX 12: ELEGANT DASHBOARD UNIT PILLS === */
/* Apply same opacity-based design as calculator buttons (user request) */
/* Remove bright orange, use grayscale + opacity + subtle border */

/* === FROST STYLE: Unit Pills === */
html body .unit-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    opacity: 0.5 !important;
    transform: scale(1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

html body .unit-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

html body .unit-pill:hover {
    opacity: 0.7 !important;
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body .unit-pill.active {
    /* Same blue gradient as calculator choice-button.active */
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.85) 0%, rgba(79, 172, 254, 0.7) 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    opacity: 1.0 !important;
    transform: scale(1.03) translateY(-2px) !important;
    box-shadow:
        0 0 14px rgba(79, 172, 254, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(79, 172, 254, 0.6) !important;
}

html body .unit-pill.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
}

/* Light theme adjustments for unit pills */
html.light-theme body .unit-pill {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light-theme body .unit-pill:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme body .unit-pill.active {
    background: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow:
        0 0 12px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* === FROST STYLE: Language Selector === */
html body .language-select-modern {
    max-width: 100px !important;
    padding: 8px 28px 8px 12px !important;
    font-size: 0.9em !important;
    /* Eliminar flecha nativa y poner SVG custom */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    /* Difusión física realista */
    background-color: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;

    /* Arquitectura Sombras 3D */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

html body .language-select-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

html body .language-select-modern:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.45),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Start and Restore buttons - full width on grid */
html body .start-button-modern,
html body .restore-button-modern {
    margin-top: 12px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* === FROST STYLE WITH BLUE: Start Button === */
html body .start-button-modern {
    /* BLUE FROST BACKGROUND */
    background: linear-gradient(135deg,
            rgba(65, 140, 255, 0.4) 0%,
            rgba(41, 98, 255, 0.5) 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;

    /* Profundidad 3D */
    box-shadow:
        inset 0px 2px 2px rgba(255, 255, 255, 0.4),
        inset 0px -2px 2px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    z-index: 10 !important;
}

html body .start-button-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(65, 140, 255, 0.1) 40%,
            rgba(65, 140, 255, 0.05) 60%,
            rgba(65, 140, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

html body .start-button-modern:hover {
    background: linear-gradient(135deg,
            rgba(65, 140, 255, 0.25) 0%,
            rgba(41, 98, 255, 0.1) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.45),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 15px 32px rgba(65, 140, 255, 0.3) !important;
}

/* === QUICK ACCESS BUTTONS (GLOBAL) === */
html body .dashboard-quick-access {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 4px !important;
}

html body .quick-access-btn {
    flex: 1 !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    font-size: 0.82em !important;
    font-weight: 600 !important;

    /* Difusión física realista */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    text-align: center !important;
    position: relative !important;

    /* Arquitectura Sombras 3D */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25) !important;
}

html body .quick-access-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

html body .quick-access-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

html body .quick-access-btn:active {
    transform: scale(0.97) !important;
}

/* === FROST STYLE: Restore Button === */
html body .restore-button-modern {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-radius: 50px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

html body .restore-button-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 75%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

html body .restore-button-modern:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Light theme adjustments */
html.light-theme body .floating-card {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme body .floating-card:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow:
        0 0 16px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme body .card-title {
    color: rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
}

html.light-theme body .card-subtitle {
    color: rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

html.light-theme body .language-select-modern {
    background-color: rgba(0, 0, 0, 0.03) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.55)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.8) !important;
}

html.light-theme body .restore-button-modern {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* === FIX 14: UNIFIED THEME TOGGLE === */
/* Apply same text-based toggle design as calculator modes */

html body .theme-switch-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .theme-switch {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}

html body .theme-label {
    font-size: 0.9em !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
    user-select: none !important;
}

html body .theme-switch input[type="checkbox"] {
    display: none !important;
}

html body .theme-switch .slider {
    position: relative !important;
    width: 50px !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 13px !important;
    transition: all 0.3s ease !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

html body .theme-switch .slider::before {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    left: 3px !important;
    top: 2px !important;
    background: white !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

html body .theme-switch input:checked+.slider {
    background: rgba(79, 172, 254, 0.3) !important;
    border-color: rgba(79, 172, 254, 0.5) !important;
}

html body .theme-switch input:checked+.slider::before {
    transform: translateX(24px) !important;
}

/* Light theme adjustments */
html.light-theme body .theme-label {
    color: rgba(0, 0, 0, 0.7) !important;
}

html.light-theme body .theme-switch .slider {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* === FIX 15: REVERTED DARK MODE TOGGLE (SWITCH STYLE) === */
html body .theme-switch-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;

    /* Difusión física realista */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;

    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.35),
        inset -1px -1px 3px rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1;
}

html body .theme-switch-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

html body .theme-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
}

html body .theme-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

html body .slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    transition: .4s !important;
    border-radius: 34px !important;
    backdrop-filter: blur(4px) !important;
}

html body .slider:before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    transition: .4s !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

html body input:checked+.slider {
    background-color: var(--calc-accent) !important;
    /* Gold/Yellow */
}

html body input:checked+.slider:before {
    transform: translateX(20px) !important;
}

/* === FIX 16: HYPERFOCAL SINGLE LINE & GREEN BOX OVERFLOW === */

/* Force Hyperfocal Line to stay together */
#calculator-page .hyperfocal-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
}

#calculator-page .hyperfocal-section .label {
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 0.9em !important;
}

#calculator-page .hyperfocal-section .value {
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
}

/* Fix Green Box (Success Notice) Overflow & Text Wrapping */
#calculator-page #sharp-face-result:not(.hidden),
#calculator-page .notice.good:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    /* Stack content vertically */
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 50px !important;
    white-space: normal !important;
    /* Allow text wrapping */
    word-wrap: break-word !important;
    overflow: visible !important;
    padding: 12px 15px !important;
    text-align: center !important;
    /* Center text lines */
}

#calculator-page #sharp-face-result span,
#calculator-page .notice.good span {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.4 !important;
    display: block !important;
    /* Ensure splitting works nicely */
    width: 100% !important;
}

/* Ensure visualizer container doesn't get cut off */
#calculator-page .dof-visualizer {
    overflow: visible !important;
}

/* === FIX 17: RESTORE DROPDOWN ARROWS (INDICATORS) === */
html body select,
html body .custom-select-wrapper input {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
}

html.dark-theme body select,
html.dark-theme body .custom-select-wrapper input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B0B0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
}

/* === FIX 18: FIX Z-INDEX LAYOUT FOR DROPDOWNS === */
/* Ensure the open dropdown container sits on top of everything */
html body .custom-select-wrapper.open {
    z-index: 1000 !important;
}

/* Ensure the PARENT form-group lifts above siblings */
html body .form-group:has(.custom-select-wrapper.open) {
    z-index: 1000 !important;
    position: relative !important;
}

/* Ensure the GRANDPARENT fieldset lifts above other fieldsets */
html body fieldset:has(.custom-select-wrapper.open) {
    z-index: 1000 !important;
    position: relative !important;
}

/* === FIX 19: DASHBOARD HEADER & BLUE LINE FIX === */

/* 1. Kill the "Blue Line" Artifact (Hidden Input focus/border) */
html body .theme-switch input[type="checkbox"] {
    display: none !important;
    /* Ensures it takes no space and shows no artifacts */
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 2. Fix Toggle Layout (Text + Switch side-by-side) */
html body .theme-switch {
    width: auto !important;
    /* Allow width to grow for text */
    height: auto !important;
    /* Allow height to adjust */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    /* Remove any pill background on the label itself */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Ensure Slider is a contained block, not absolute covering everything */
html body .theme-switch .slider {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 4. Fix Slider Knob Position (Relative to new static slider) */
html body .theme-switch .slider:before {
    top: 2px !important;
    /* Adjust for border */
    left: 2px !important;
    width: 18px !important;
    /* Ensure size fits */
    height: 18px !important;
}

html body .theme-switch input:checked+.slider:before {
    transform: translateX(20px) !important;
}

/* 5. Clean up Wrapper Styles (Remove unwanted pill/border on Dashboard) */
html body .modern-header .theme-switch-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
}

/* 6. Ensure Language Select aligns nicely */
html body .language-select-modern {
    height: 36px !important;
    /* Match toggle visual height roughly */
    display: flex !important;
    align-items: center !important;
}

/* --- FIX: Remove Unnecessary Spacing in Assistant Cards --- */
/* User requested removal of lines/space in Portrait, Landscape, Astro, and Street */
#portrait-options .divider,
#sharpness-assistant-options .divider,
#astro-options .divider,
#street-assistant-controls+.divider {
    display: none !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* === SECONDARY ACTION BUTTON (Smart Assistant) === */
.secondary-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;

    background: rgba(255, 255, 255, 0.08);
    /* Dark base for glass */
    border: none;
    /* Removing border to use ::before */
    border-radius: 12px;

    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95em;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Subtle depth shadows */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.25),
        /* Inner highlight */
        inset -1px -1px 3px rgba(0, 0, 0, 0.4),
        /* Inner shadow */
        0 4px 12px rgba(0, 0, 0, 0.2);
    /* Drop shadow */

    /* MOBILE FIX: Prevent Blue Highlight on Tap */
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    z-index: 1;
}

/* 1.5px Rim Light using mask-composite */
.secondary-action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.secondary-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.35),
        inset -1px -1px 4px rgba(0, 0, 0, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.3);
}

.secondary-action-btn:active,
.secondary-action-btn:focus {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.2);
    outline: none !important;
    box-shadow: none !important;
}

/* === FORCE ACTIVE ASSISTANT STYLE (Mobile Fix) === */
/* ID Selector + !important to override any other mobile styles */
/* === FORCE ACTIVE ASSISTANT STYLE (Mobile Fix) === */
/* ID Selector + !important to override any other mobile styles */
button#sharpness-assistant-btn.active-assistant {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.4) 0%, rgba(72, 219, 251, 0.4) 100%) !important;
    border: 1px solid #2ed573 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 15px rgba(46, 213, 115, 0.4) !important;

    /* Disable backdrop-filter in active state to prevent rendering glitches */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

button#sharpness-assistant-btn.active-assistant:hover,
button#sharpness-assistant-btn.active-assistant:active,
button#sharpness-assistant-btn.active-assistant:focus {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.5) 0%, rgba(72, 219, 251, 0.5) 100%) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
    box-shadow: 0 0 20px rgba(46, 213, 115, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- SMART ASSISTANT BADGES & BUTTONS --- */
.badge-success,
.badge-warning {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}

.badge-success {
    background-color: rgba(40, 200, 69, 0.15);
    color: #4cd964;
    border: 1px solid rgba(40, 200, 69, 0.3);
}

.badge-warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Fix Button Styles (Interactive Modal) */
.fix-button {
    width: 100%;
    margin-bottom: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fix-button:active,
.fix-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.fix-button strong {
    color: #ffffff;
    font-weight: 800;
}

/* Special style for the "Solution" button if needed (primary) */
.fix-button[data-primary="true"] {
    background: rgba(79, 172, 254, 0.15);
    border-color: rgba(79, 172, 254, 0.4);
}

/* --- Smart Assistant Explanatory Text --- */
.modal-text-message {
    color: #ddd;
    margin: 15px 0 10px;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fix-button.primary-action {
    background: linear-gradient(135deg, #4cd964, #2c8c43);
    color: white;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px rgba(76, 217, 100, 0.3) !important;
}

/* --- Phase 3 Refinements (Mobile Friendly) --- */
.fix-button {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

/* Adjust badge block to flow */
.badge-block {
    display: inline-block;
    /* Allow normal flow */
    margin-top: 2px;
    padding: 4px 8px;
    white-space: normal;
    /* Allow text wrapping */
    line-height: 1.2;
    text-align: left;
}

.highlight-distance {
    color: #64dd17; /* Brighter neon green for exceptional contrast in dark mode */
    font-size: 1.1em;
    font-weight: 800;
    margin-right: 4px;
}

html.light-theme .highlight-distance {
    color: #008ba3; /* Darker cyan for crisp readability in light mode */
}

/* Darker Blue for Primary Actions */
.fix-button[data-primary="true"] {
    background: rgba(41, 98, 255, 0.25);
    border-color: rgba(41, 98, 255, 0.6);
}

.fix-button strong {
    color: #ffffff; /* Pure white for maximum contrast in dark mode */
    font-weight: 800;
}

html.light-theme .fix-button strong {
    color: #000000; /* Pure black for maximum contrast in light mode */
}

/* === GEAR INFO BUTTON OVERRIDE (must be at END of last CSS file) === */
html body button.gear-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(79, 172, 254, 0.3) !important;
    border: 1.5px solid rgba(79, 172, 254, 0.7) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    font-family: monospace !important;
    cursor: pointer !important;
    box-shadow: 0 0 8px rgba(79, 172, 254, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    line-height: 1 !important;
}

html body button.gear-info-btn:hover,
html body button.gear-info-btn:active {
    background: rgba(79, 172, 254, 0.5) !important;
    border-color: rgba(79, 172, 254, 1) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6) !important;
}

/* === BACKPACK KIT LIST — ALWAYS single column (modal is only 400px wide) === */
#backpack-modal #backpack-list.gear-grid,
#backpack-modal .gear-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    grid-template-columns: none !important;
}

#backpack-modal #backpack-list .gear-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* === ASTRO TRAIL RESULT: Force single horizontal line === */
#astro-trail-result {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

#astro-trail-result>span {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}

#astro-trail-result>span>strong {
    display: inline !important;
}

#astro-trail-result .info-button {
    flex-shrink: 0 !important;
}

/* === DECLINATION: "Apuntar al Cielo" Button === */
.secondary-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 3px rgba(0, 0, 0, 0.25),
        0 6px 16px rgba(0, 0, 0, 0.2);
    position: relative;
}

.secondary-action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.secondary-action-btn:active {
    transform: scale(0.97);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
}

/* === SKY VIEWER: Declination Picker FAB === */
.sky-pick-fab {
    background: linear-gradient(135deg, #04de71, #00b85c) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(4, 222, 113, 0.4) !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 30px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    position: fixed !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: skyPickFabPulse 2s ease-in-out infinite;
}

@keyframes skyPickFabPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(4, 222, 113, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(4, 222, 113, 0.6);
    }
}

/* === GLOBAL FIX: SUBTLE FOCUS INDICATOR (Gray, not Blue) === */
/* This must be at the END of the stylesheet to override everything */
html body input:focus,
html body input[type="text"]:focus,
html body input[type="number"]:focus,
html body select:focus,
html body textarea:focus,
html body .custom-select-wrapper input:focus,
html body .form-group input:focus,
html body .form-group select:focus {
    outline: none !important;
    border-color: rgba(200, 200, 200, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.12) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* =====================================================
   BUG 3 FIX — Prevenir scroll horizontal en iOS/Android
   ===================================================== */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    overscroll-behavior-x: none !important;
}

/* Contenedor principal del calculador */
#calculator-page .container,
.calculator-wrapper,
.main-content {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    max-width: 100% !important;
}

/* Aplicar también en el body del dashboard */
#dashboard-body {
    overflow-x: hidden !important;
}

/* =====================================================
   BUG 6 FIX — Botón "Volver" demasiado cerca del reloj iOS
   ===================================================== */

/* En iPhone (< 600px) el safe-area-inset-top puede ser 44–54px
   pero el padding actual es solo 10px + safe-area lo que no da
   suficiente separación visual. Aumentamos a 16px mínimo y 
   añadimos un margen de seguridad adicional de 6px. */
@media (max-width: 599px) {
    #calculator-page .container {
        padding-top: calc(16px + env(safe-area-inset-top)) !important;
    }

    /* El botón Volver también necesita un pequeño empuje para 
       estar cómodamente separado del status bar */
    #calculator-page .header-logo {
        padding-top: 4px !important;
    }

    #calculator-page .back-button-modern {
        margin-top: 4px !important;
    }
}

/* === GRADIENT BORDERS FOR MODALS (Glassmorphism) === */
/* Match the gradient border style used on gear cards */
.modal-content.glass-panel.gear-form-modal,
.modal-content.glass-panel,
#cw-add-light-overlay .modal-content,
#cw-import-alert .modal-content,
#cw-import-overlay .modal-content,
#plotter-confirm-overlay .modal-content,
.exposure-kit-modal-content {
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}

.modal-content.glass-panel.gear-form-modal::before,
.modal-content.glass-panel::before,
#cw-add-light-overlay .modal-content::before,
#cw-import-alert .modal-content::before,
#cw-import-overlay .modal-content::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 24px !important;
    padding: 1.5px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 25%, rgba(255,255,255,0.0) 75%, rgba(255,255,255,0.2) 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#plotter-confirm-overlay .modal-content::before,
.exposure-kit-modal-content::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 20px !important;
    padding: 1.5px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 25%, rgba(255,255,255,0.0) 75%, rgba(255,255,255,0.2) 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ============================================================================ */
/* WHEEL-SELECTOR.CSS */
/* ============================================================================ */

/* ==============================================
   WHEEL SELECTOR — HORIZONTAL SCROLL STRIP
   True Depth Glassmorphism style
   Compact but AIRY layout for mobile + tablet + desktop
   ============================================== */

/* === LAYOUT OVERRIDE ===
 * Force form-groups containing wheels to full-width in the 2-col grid
 * so the horizontal strip has room on tablet/desktop. */
@media (min-width: 600px) {
    .form-group:has(.wheel-selector-container) {
        grid-column: 1 / -1;
    }
}

/* Container for the wheel (replaces custom-select-wrapper) */
.wheel-selector-container {
    position: relative;
    width: 100%;
    margin: 2px 0;
}

/* Label row: title + keyboard button */
.wheel-selector-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.wheel-selector-label-text {
    font-size: 0.78em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Right side group (chip + keyboard button) */
.wheel-label-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Keyboard toggle button */
.wheel-numpad-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72em;
    padding: 2px 6px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.wheel-numpad-btn:active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* The scrollable strip wrapper */
.wheel-strip-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.wheel-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 4px 0;
    position: relative;

    /* Glass background */
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: none;

    /* Depth physics */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15);

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wheel-strip::-webkit-scrollbar {
    display: none;
}

/* Glass rim light */
.wheel-strip-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.03) 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* Fade-out edges */
.wheel-strip-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(90deg,
        rgba(10, 10, 10, 0.9) 0%,
        rgba(10, 10, 10, 0) 14%,
        rgba(10, 10, 10, 0) 86%,
        rgba(10, 10, 10, 0.9) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Center indicator line */
.wheel-center-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 5px;
    background: #4facfe;
    border-radius: 0 0 2px 2px;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(79, 172, 254, 0.5);
}

/* Individual value item — AIRY with scroll-snap-stop */
.wheel-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;  /* CRITICAL: prevents momentum from skipping items */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 44px;
    cursor: pointer;
    transition: all 0.12s ease-out;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    padding: 0 2px;
}

.wheel-item-value {
    font-size: 0.85em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.12s ease-out;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Full stop marker dot (for aperture) */
.wheel-item-marker {
    position: absolute;
    top: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.12s;
}

/* Active (centered) item */
.wheel-item.is-active .wheel-item-value {
    font-size: 1.3em;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 14px rgba(79, 172, 254, 0.4),
                 0 0 28px rgba(79, 172, 254, 0.15);
}

.wheel-item.is-active .wheel-item-marker {
    background: #4facfe;
    box-shadow: 0 0 4px rgba(79, 172, 254, 0.5);
}

/* Adjacent items */
.wheel-item.is-near .wheel-item-value {
    font-size: 0.98em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

/* Spacer elements */
.wheel-spacer {
    flex: 0 0 auto;
    min-width: calc(50% - 32px);
}

/* Blue glow */
.wheel-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: radial-gradient(ellipse, rgba(79, 172, 254, 0.5) 0%, transparent 70%);
    z-index: 4;
    pointer-events: none;
    border-radius: 2px;
}

/* ===== SENSOR WHEEL (wider items, smaller text, more spacing) ===== */
.wheel-selector-container[data-wheel-type="sensor"] .wheel-item {
    min-width: 96px;
}

.wheel-selector-container[data-wheel-type="sensor"] .wheel-strip {
    gap: 6px;
}

.wheel-selector-container[data-wheel-type="sensor"] .wheel-item-value {
    font-size: 0.76em;
}

.wheel-selector-container[data-wheel-type="sensor"] .wheel-item.is-active .wheel-item-value {
    font-size: 1.1em;
}

.wheel-selector-container[data-wheel-type="sensor"] .wheel-item.is-near .wheel-item-value {
    font-size: 0.88em;
}

/* ===== CUSTOM VALUE ITEM (user-entered via numpad) ===== */
.wheel-item-custom .wheel-item-value {
    color: rgba(255, 180, 50, 0.5) !important;
}

.wheel-item-custom.is-active .wheel-item-value {
    color: #ffb830 !important;
    text-shadow: 0 0 12px rgba(255, 184, 48, 0.4),
                 0 0 24px rgba(255, 184, 48, 0.15) !important;
}

.wheel-item-custom.is-near .wheel-item-value {
    color: rgba(255, 180, 50, 0.55) !important;
}

/* Custom item bottom indicator (orange) */
.wheel-item-custom::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 184, 48, 0.7);
}

html.light-theme .wheel-item-custom .wheel-item-value {
    color: rgba(180, 100, 0, 0.5) !important;
}

html.light-theme .wheel-item-custom.is-active .wheel-item-value {
    color: #b86800 !important;
    text-shadow: none !important;
}

html.true-dark-mode .wheel-item-custom .wheel-item-value {
    color: rgba(255, 100, 50, 0.4) !important;
}

html.true-dark-mode .wheel-item-custom.is-active .wheel-item-value {
    color: #ff6432 !important;
    text-shadow: 0 0 10px rgba(255, 100, 50, 0.3) !important;
}

/* ===== MANUAL MODE: chip + dimmed wheel ===== */

/* The orange chip badge showing the custom value */
.wheel-manual-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 160, 0, 0.25) 0%, rgba(255, 120, 0, 0.2) 100%);
    border: 1px solid rgba(255, 180, 48, 0.5);
    color: #ffb830;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(255, 184, 48, 0.15);
}

.wheel-manual-chip:active {
    transform: scale(0.94);
    background: rgba(255, 160, 0, 0.35);
}

/* Dimmed wheel strip when manual value is active */
.wheel-strip-wrapper.is-manual-override {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.6);
    transition: opacity 0.3s, filter 0.3s;
}

/* Light mode manual chip */
html.light-theme .wheel-manual-chip {
    background: linear-gradient(135deg, rgba(180, 100, 0, 0.12) 0%, rgba(200, 120, 0, 0.1) 100%);
    border-color: rgba(180, 100, 0, 0.4);
    color: #b86800;
    box-shadow: 0 0 6px rgba(180, 100, 0, 0.1);
}

/* Red night mode manual chip */
html.true-dark-mode .wheel-manual-chip {
    background: linear-gradient(135deg, rgba(200, 50, 0, 0.2) 0%, rgba(180, 30, 0, 0.15) 100%);
    border-color: rgba(255, 80, 50, 0.5);
    color: #ff6432;
    box-shadow: 0 0 6px rgba(255, 50, 0, 0.15);
}

/* ===== LOCKED STATE ===== */
.wheel-strip.is-locked {
    pointer-events: none;
    opacity: 0.65;
}

.wheel-strip.is-locked .wheel-item.is-active .wheel-item-value {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

/* ===== TC SLIDER (Teleconverter) ===== */
.tc-slider-container {
    display: flex;
    gap: 6px;
    width: 100%;
}

.tc-slider-pill {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.08),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
}

.tc-slider-pill.is-active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.7) 0%, rgba(79, 172, 254, 0.5) 100%);
    color: #ffffff;
    font-weight: 600;
    border: 1px solid rgba(79, 172, 254, 0.6);
    box-shadow:
        0 0 12px rgba(79, 172, 254, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.tc-slider-pill:active {
    transform: scale(0.96);
}

/* TC — force full-width */
@media (min-width: 600px) {
    #tc-group-container {
        grid-column: 1 / -1;
    }
}

/* ===== LIGHT MODE ===== */
html.light-theme .wheel-strip {
    background: rgba(0, 0, 0, 0.04);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.05);
}

html.light-theme .wheel-strip-wrapper::after {
    background: linear-gradient(90deg,
        rgba(245, 245, 248, 0.9) 0%,
        rgba(245, 245, 248, 0) 14%,
        rgba(245, 245, 248, 0) 86%,
        rgba(245, 245, 248, 0.9) 100%
    );
}

html.light-theme .wheel-strip-wrapper::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.2) 100%
    );
}

html.light-theme .wheel-item-value {
    color: rgba(0, 0, 0, 0.25);
}

html.light-theme .wheel-item.is-active .wheel-item-value {
    color: #1a1a1a;
    text-shadow: none;
}

html.light-theme .wheel-item.is-near .wheel-item-value {
    color: rgba(0, 0, 0, 0.5);
}

html.light-theme .wheel-item-marker {
    background: rgba(0, 0, 0, 0.15);
}

html.light-theme .wheel-item.is-active .wheel-item-marker {
    background: #4facfe;
}

html.light-theme .wheel-selector-label-text {
    color: rgba(0, 0, 0, 0.55);
}

html.light-theme .wheel-numpad-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.35);
}

html.light-theme .tc-slider-pill {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.5),
        inset -1px -1px 2px rgba(0, 0, 0, 0.06);
}

html.light-theme .tc-slider-pill.is-active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.8) 0%, rgba(79, 172, 254, 0.6) 100%);
    color: #ffffff;
}

/* ===== RED NIGHT MODE ===== */
html.true-dark-mode .wheel-strip {
    background: rgba(30, 0, 0, 0.5);
    box-shadow:
        inset 1px 1px 2px rgba(255, 0, 0, 0.08),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

html.true-dark-mode .wheel-strip-wrapper::after {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0) 14%,
        rgba(0, 0, 0, 0) 86%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

html.true-dark-mode .wheel-center-indicator {
    background: #ff4444;
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.5);
}

html.true-dark-mode .wheel-item.is-active .wheel-item-value {
    color: #ff4444;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.35);
}

html.true-dark-mode .wheel-item.is-near .wheel-item-value {
    color: rgba(255, 68, 68, 0.45);
}

html.true-dark-mode .wheel-item-value {
    color: rgba(255, 68, 68, 0.2);
}

html.true-dark-mode .wheel-item.is-active .wheel-item-marker {
    background: #ff4444;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.4);
}

html.true-dark-mode .wheel-glow {
    background: radial-gradient(ellipse, rgba(255, 0, 0, 0.4) 0%, transparent 70%);
}

html.true-dark-mode .tc-slider-pill {
    background: rgba(50, 0, 0, 0.4);
    color: rgba(255, 68, 68, 0.4);
}

html.true-dark-mode .tc-slider-pill.is-active {
    background: linear-gradient(135deg, rgba(180, 0, 0, 0.7) 0%, rgba(255, 40, 40, 0.4) 100%);
    color: #ff4444;
    border-color: rgba(255, 68, 68, 0.5);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* ===== RESPONSIVE ===== */

/* Very small screens */
@media (max-height: 600px) {
    .wheel-item {
        min-width: 54px;
        height: 36px;
    }
    .wheel-item.is-active .wheel-item-value {
        font-size: 1.15em;
    }
    .wheel-selector-container[data-wheel-type="sensor"] .wheel-item {
        min-width: 72px;
    }
}

/* Tablet/Desktop: wider items since form-group is now full-width */
@media (min-width: 600px) {
    .wheel-item {
        min-width: 70px;
        height: 46px;
    }
    .wheel-item.is-active .wheel-item-value {
        font-size: 1.35em;
    }
    .wheel-selector-container[data-wheel-type="sensor"] .wheel-item {
        min-width: 100px;
    }
}

/* Large desktop */
@media (min-width: 1024px) and (pointer: fine) {
    .wheel-item {
        min-width: 76px;
    }
    .wheel-selector-container[data-wheel-type="sensor"] .wheel-item {
        min-width: 115px;
    }
}

/* Warning state for Trepidation / Risks */
.wheel-warning-active .wheel-item.is-active .wheel-item-value {
    color: #ff5050 !important;
    text-shadow: 0 0 16px rgba(255, 80, 80, 0.4) !important;
}
.wheel-warning-active .wheel-item.is-active .wheel-item-marker {
    background: #ff5050 !important;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.5) !important;
}

/* ============================================================================ */
/* MOBILE-NUMPAD.CSS */
/* ============================================================================ */

/* ==============================================
   MOBILE NUMPAD (MODAL SHEET)
   ============================================== */
.mobile-numpad-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body.numpad-open {
    padding-bottom: 50vh !important;
}

.mobile-numpad-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-numpad-sheet {
    width: calc(100% - 24px);
    max-width: 380px;
    margin: 0 auto max(12px, env(safe-area-inset-bottom)) auto;
    background: rgba(28, 28, 30, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 16px;
    transform: translateY(120%);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.mobile-numpad-overlay.active .mobile-numpad-sheet {
    transform: translateY(0);
}

.numpad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 6px;
    flex-shrink: 0;
}

.numpad-title {
    font-size: 1em;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.numpad-value-display {
    font-size: 1.5em;
    font-weight: 700;
    color: #4facfe;
    letter-spacing: 1px;
}

.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.numpad-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 40px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: none;
    /* Prevent flickering on iOS/Android WebView */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.numpad-btn:active {
    background: rgba(255,255,255,0.2);
    transform: scale(0.95);
}

.numpad-btn.action {
    background: rgba(79, 172, 254, 0.15);
    color: #4facfe;
}

.numpad-btn.action:active {
    background: rgba(79, 172, 254, 0.3);
}

.numpad-adjust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}

.numpad-adjust-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 8px 0;
    font-size: 1.1em;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.numpad-adjust-btn:active {
    background: rgba(255,255,255,0.15);
}

.numpad-confirm {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    border-radius: 12px;
    padding: 11px;
    font-size: 1.05em;
    font-weight: 700;
    color: #fff;
    width: 100%;
    margin-top: 2px;
    box-shadow: 0 4px 15px rgba(79,172,254,0.4);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.numpad-confirm:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(79,172,254,0.4);
}

/* Extra compact for very small screens (SE, older devices) */
@media (max-height: 667px) {
    .mobile-numpad-sheet {
        padding: 8px 12px;
        gap: 4px;
        max-height: 60vh;
    }
    .numpad-btn {
        padding: 7px 0;
        font-size: 1.15em;
        min-height: 34px;
    }
    .numpad-value-display {
        font-size: 1.3em;
    }
    .numpad-confirm {
        padding: 9px;
        font-size: 1em;
    }
    .numpad-adjust-btn {
        padding: 6px 0;
        font-size: 1em;
    }
}

/* Tablet floating style */
@media (min-width: 550px) {
    .mobile-numpad-sheet {
        border-radius: 20px;
        margin-bottom: 24px;
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 10px 50px rgba(0,0,0,0.6);
    }
}

/* ============================================================================ */
/* ONBOARDING.CSS */
/* ============================================================================ */

/* ============================================================
   ONBOARDING SYSTEM — Depth Planner Pro
   True Depth Glassmorphism Aesthetic
   ============================================================ */

/* ---- MODAL BASE DE ONBOARDING ---- */
.onboarding-modal {
    position: fixed;
    inset: 0;
    z-index: 110000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    /* Backdrop oscuro premium */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.onboarding-modal.active {
    opacity: 1;
    visibility: visible;
}

/* ---- CONTENEDOR INTERNO (Glassmorphism) ---- */
.onboarding-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    /* Permitir que el box ocupe max el 90% de la pantalla y sea scrollable */
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;

    /* Glassmorphism translúcido (Apple frosted glass) */
    background: rgba(18, 18, 30, 0.55);
    backdrop-filter: blur(45px) saturate(1.8);
    -webkit-backdrop-filter: blur(45px) saturate(1.8);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.15) inset;

    /* Borde degradado interrumpido (Frost Style) */
    outline: none;

    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-modal.active .onboarding-box {
    transform: translateY(0) scale(1);
}

/* Borde degradado pseudo-elemento */
.onboarding-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.0) 25%,
            rgba(255, 255, 255, 0.0) 50%,
            rgba(255, 255, 255, 0.25) 75%,
            rgba(255, 255, 255, 0.0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* ---- SLIDER ---- */
.onboarding-slider {
    /* El slider ocupa el espacio disponible y hace scroll vertical si es necesario */
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    flex: 1 1 auto;
    /* Ocupa el espacio libre dejando nav y footer anclados */
    -webkit-overflow-scrolling: touch;
}

.onboarding-slides-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    /* La pista se estira al alto del slide más alto para que el scroll funcione bien */
    align-items: flex-start;
}

.onboarding-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 36px 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* Ícono grande por slide */
.onboarding-slide-icon {
    font-size: 3.8em;
    margin-bottom: 20px;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
    animation: onboardingIconFloat 3s ease-in-out infinite;
}

@keyframes onboardingIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* Título del slide */
.onboarding-slide-title {
    font-size: 1.55em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
}

/* Cuerpo del slide */
.onboarding-slide-body {
    font-size: 0.97em;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
    margin: 0;
    max-width: 340px;
    font-family: 'Inter', sans-serif;
}

/* Features list (slide 2) */
.onboarding-feature-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    text-align: left;
    width: 100%;
    max-width: 340px;
}

.onboarding-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9em;
    font-family: 'Inter', sans-serif;
}

.onboarding-feature-list li .fi {
    font-size: 1.2em;
    flex-shrink: 0;
}

/* ---- CTA BUTTON (últimaslide) ---- */
.onboarding-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 14px 28px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
    /* Gradiente accent premium */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow:
        0 8px 24px rgba(102, 126, 234, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.onboarding-cta-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.onboarding-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 32px rgba(102, 126, 234, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.onboarding-cta-btn:active {
    transform: translateY(0);
}

/* ---- DOTS (indicadores de página) ---- */
.onboarding-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0 8px;
    flex-shrink: 0;
    /* No hace scroll, queda anclado */
}

.onboarding-dot {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.onboarding-dot.active {
    width: 22px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
}

/* ---- NAVEGACIÓN (prev/next) ---- */
.onboarding-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px 16px;
    gap: 12px;
    flex-shrink: 0;
    /* No hace scroll, queda anclado */
}

.onboarding-btn-prev,
.onboarding-btn-next {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 90px;
}

.onboarding-btn-prev:hover,
.onboarding-btn-next:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
}

.onboarding-btn-prev.invisible,
.onboarding-btn-next.invisible {
    opacity: 0;
    pointer-events: none;
}

.onboarding-btn-next.primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.5) 0%, rgba(118, 75, 162, 0.5) 100%);
    border-color: rgba(102, 126, 234, 0.4);
    color: rgba(255, 255, 255, 0.95);
}

.onboarding-btn-next.primary:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.7) 0%, rgba(118, 75, 162, 0.7) 100%);
}

/* ---- FOOTER: "No volver a mostrar" ---- */
.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 24px;
    flex-shrink: 0;
    /* No hace scroll, queda anclado */
}

.onboarding-dont-show {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.82em;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s ease;
    user-select: none;
}

.onboarding-dont-show:hover {
    color: rgba(255, 255, 255, 0.6);
}

.onboarding-dont-show input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.onboarding-dont-show input[type="checkbox"]:checked {
    background: rgba(102, 126, 234, 0.7);
    border-color: rgba(102, 126, 234, 0.9);
}

.onboarding-dont-show input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: white;
    font-weight: 700;
}

/* ---- MODAL CONTEXTUAL (simple, sin slider) ---- */
.onboarding-simple-modal .onboarding-box {
    max-width: 400px;
}

.onboarding-simple-content {
    padding: 32px 28px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Scroll interno para contenido largo (guías con imagen + texto) */
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- IMAGEN PLACEHOLDER en modales (guide, equipment, lunar, etc.) ---- */
/* Evita que flexbox con overflow-y:auto aplaste la imagen a 0px de alto */
.onboarding-simple-content>div[style*="border-radius"],
.onboarding-simple-content>div[style*="overflow: hidden"] {
    flex-shrink: 0;
}

.onboarding-simple-content img {
    max-height: 40vh;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.onboarding-simple-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.18);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: rgba(180, 190, 255, 0.9);
    font-size: 0.78em;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ---- DIVIDER ---- */
.onboarding-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0;
    flex-shrink: 0;
    /* No hace scroll, queda anclado */
}

/* ---- BOTÓN ÚNICO (Entendido) ---- */
.onboarding-btn-got-it {
    display: block;
    width: calc(100% - 48px);
    margin: 16px 24px 24px;
    padding: 14px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
}

.onboarding-btn-got-it:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ---- CLOSE BUTTON (X) ---- */
.onboarding-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.45);
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
}

.onboarding-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
    .onboarding-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .onboarding-box {
        border-radius: 20px 20px 16px 16px;
        max-width: 100%;
        /* En móvil el box ocupa hasta el 92% de la altura visible */
        max-height: 92dvh;
    }

    .onboarding-slide {
        padding: 28px 24px 16px;
    }

    .onboarding-slide-icon {
        font-size: 3em;
    }

    .onboarding-slide-title {
        font-size: 1.35em;
    }

    .onboarding-nav {
        padding: 8px 16px 14px;
        /* La nav y los dots NO hacen scroll — quedan fijos al fondo del box */
        flex-shrink: 0;
    }

    .onboarding-btn-prev,
    .onboarding-btn-next {
        min-width: 80px;
        padding: 9px 16px;
    }
}

/* ---- SAFE AREA (iOS) ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 480px) {
        .onboarding-footer {
            padding-bottom: calc(24px + env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================================ */
/* MOBILE-COMPACT.CSS */
/* ============================================================================ */

/* ==============================================
   MOBILE COMPACT UI v2 — Depth Planner Pro
   Corrected selectors matching real DOM structure.
   Only affects screens ≤600px (except graph modal base styles).
   ============================================== */

/* ===================================================
   BLOQUE 1: CALCULATOR HEADER — Compacto, sin espacio extra
   Real DOM: .modern-header > .header-logo + .header-title + .header-controls
   NOTE: Inline styles on HTML require !important to override
   =================================================== */
@media (max-width: 600px) {

    /* Header container: ultra-compact */
    #calculator-page .modern-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
        padding: 8px 12px !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    /* Back button: compact, fixed width for centering balance */
    #calculator-page .header-logo {
        order: 1 !important;
        flex: 0 0 60px !important;
    }

    /* Title: truly centered, full text, smaller font — OVERRIDE inline style="font-size:1.4em" */
    #calculator-page .header-title {
        order: 2 !important;
        flex: 1 1 0% !important;
        text-align: center !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #calculator-page .header-title h1 {
        font-size: 1em !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Hide subtitle on mobile */
    #calculator-page .header-title p {
        display: none !important;
    }

    /* Hide header-right-mobile (empty container) */
    #calculator-page .header-right-mobile {
        display: none !important;
    }

    /* Controls (dark mode toggle): compact, same row, fixed width for centering balance */
    #calculator-page .header-controls {
        order: 3 !important;
        flex: 0 0 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
    }

    #calculator-page .header-controls .theme-switch-wrapper {
        margin-left: 0 !important;
    }

    #calculator-page .header-controls .theme-label {
        display: none !important;
    }

    /* Night mode toggle: compact */
    #calculator-page .header-controls .theme-toggle-modern {
        margin-right: 4px !important;
    }

    #calculator-page .header-controls .theme-toggle-modern .theme-toggle-label {
        padding: 0 6px !important;
        gap: 4px !important;
    }

    #calculator-page .header-controls .theme-toggle-modern span {
        font-size: 0.65em !important;
    }

    /* Body container: less padding */
    #calculator-page .container {
        padding: 0 8px !important;
    }
}

/* ===================================================
   BLOQUE 2: FIELDSETS, FORM GROUPS, INPUTS
   Real DOM: fieldset > legend + .form-grid > .form-group > label + input/select
   =================================================== */
@media (max-width: 600px) {

    /* --- Fieldsets: less padding, less margin --- */
    #calculator-page fieldset {
        padding: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    #calculator-page fieldset legend {
        padding: 4px 10px !important;
        font-size: 0.78em !important;
        border-radius: 10px !important;
    }

    /* --- Form Groups: tighter --- */
    #calculator-page .form-group {
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
        border-radius: 10px !important;
    }

    #calculator-page .form-group label {
        margin-bottom: 2px !important;
        font-size: 0.72em !important;
        letter-spacing: 0.3px !important;
    }

    /* --- Inputs: smaller --- */
    #calculator-page input[type="text"],
    #calculator-page input[type="number"],
    #calculator-page select {
        padding: 6px 8px !important;
        font-size: 0.88em !important;
        border-radius: 8px !important;
    }

    #calculator-page .custom-select-wrapper select,
    #calculator-page .custom-select-wrapper input {
        padding: 6px 8px !important;
        font-size: 0.88em !important;
    }

    /* --- Distance input groups: tighter --- */
    #calculator-page .metric-input-group,
    #calculator-page .imperial-input-group {
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    #calculator-page .input-group-imperial label {
        font-size: 0.68em !important;
        margin-bottom: 2px !important;
    }

    /* --- Notices: compact --- */
    #calculator-page .notice {
        padding: 6px 10px !important;
        font-size: 0.82em !important;
        margin-top: 4px !important;
        border-radius: 10px !important;
    }

    /* --- Camera Params: 2-column grid for Sensor + Focal --- */
    #camera-params-fieldset>.form-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    /* Full-width items span both columns */
    #camera-params-fieldset>.form-grid>.full-width {
        grid-column: 1 / -1 !important;
    }

    /* Hidden elements don't affect grid */
    #camera-params-fieldset>.form-grid>.hidden {
        display: none !important;
    }

    /* --- Gear Kit header: compact --- */
    #calculator-page .gear-kit-header {
        padding: 4px 0 !important;
        margin-bottom: 4px !important;
    }

    #calculator-page .backpack-button {
        padding: 5px 10px !important;
        font-size: 0.78em !important;
        border-radius: 8px !important;
    }

    /* --- Choice Buttons (photo mode pills): compact --- */
    #calculator-page .choice-button {
        padding: 6px 10px !important;
        font-size: 0.76em !important;
        border-radius: 10px !important;
    }

    /* --- Button Groups: tighter --- */
    #calculator-page .button-group,
    #calculator-page .segmented-control,
    #calculator-page .mode-selector,
    #calculator-page .choice-group {
        gap: 3px !important;
    }

    /* --- Secondary action buttons (assistants) --- */
    #calculator-page .secondary-action-btn {
        padding: 7px 12px !important;
        font-size: 0.8em !important;
    }

    /* --- Toggles: compact --- */
    #calculator-page .theme-switch {
        transform: scale(0.85) !important;
    }

    /* --- Dividers: minimal --- */
    #calculator-page hr.divider {
        margin: 4px 0 !important;
    }

    /* --- Results Summary: 3 columns in one row --- */
    #calculator-page .results-summary {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    #calculator-page .summary-item {
        padding: 6px 6px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #calculator-page .summary-item .label {
        font-size: 0.72em !important;
    }

    #calculator-page .summary-item .value {
        font-size: 0.92em !important;
    }

    /* --- Hyperfocal --- */
    #calculator-page .hyperfocal-section .label {
        font-size: 0.78em !important;
    }

    /* --- Glass Panel --- */
    #calculator-page .glass-panel {
        padding: 10px !important;
        border-radius: 14px !important;
        margin-top: 8px !important;
    }

    /* --- Action/Tips buttons --- */
    #calculator-page .tips-button,
    #calculator-page .action-button {
        padding: 7px 12px !important;
        font-size: 0.82em !important;
        border-radius: 10px !important;
    }

    /* --- Stacking focus list --- */
    #calculator-page #stacking-focus-list-container {
        font-size: 0.82em !important;
    }

    /* --- Label with info: inline flex helper --- */
    #calculator-page .label-with-info {
        gap: 4px !important;
    }

    /* --- Environmental button (Clima) in Calculator --- */
    #calculator-page .open-environmental-modal-btn {
        padding: 8px 12px !important;
        font-size: 0.82em !important;
        margin-top: 4px !important;
    }

    /* --- Visualizer: compact but VISIBLE (inline, not hidden) --- */
    #calculator-page .visualizer-wrapper {
        margin-top: 6px !important;
        padding: 4px 0 !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Compact the DoF bar visualizer */
    #calculator-page .dof-visualizer {
        height: 70px !important;
        min-height: 70px !important;
    }

    /* Clamp subject icon so it never overlaps results */
    #calculator-page .subject {
        max-height: 55px !important;
        max-width: 35px !important;
    }

    #calculator-page .distance-markers {
        font-size: 0.68em !important;
        margin-top: 2px !important;
        height: 40px !important;
    }

    /* Force focus/subject markers down on mobile to sit below the icon */
    #calculator-page .marker.marker-focus {
        bottom: 0 !important;
    }

    #calculator-page .marker.subject-marker {
        bottom: 0 !important;
    }

    #calculator-page .camera-icon {
        width: 22px !important;
        height: 22px !important;
        background-size: contain !important;
    }

    /* Make the visualizer feel more compact but still wow */
    #calculator-page .dof-bar {
        height: 28px !important;
        border-radius: 6px !important;
    }

    #calculator-page #focus-mode-visualizer {
        height: 50px !important;
        min-height: 50px !important;
    }

    #calculator-page #focus-mode-visualizer .focus-subject-bg,
    #calculator-page #focus-mode-visualizer .focus-subject-sharp {
        width: 70px !important;
        height: 90px !important;
    }
}

/* ===================================================
   BLOQUE 3: DASHBOARD COMPACT (Grid 2×2 + Quick Access)
   =================================================== */
@media (max-width: 600px) {

    /* Grid 2×2 for dashboard cards */
    html body .modern-main {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    /* Dashboard cards: compact grid style — aligned icons + titles */
    html body .floating-card {
        display: grid !important;
        grid-template-rows: 55% 45% !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        min-height: 110px !important;
        padding: 10px 8px 6px !important;
        gap: 0px !important;
        text-align: center !important;
    }

    html body .card-icon {
        font-size: 2em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body .card-content {
        align-items: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    html body .card-title {
        font-size: 0.82em !important;
        margin-bottom: 1px !important;
    }

    html body .card-subtitle {
        font-size: 0.68em !important;
    }

    /* Hide arrow on cards */
    html body .card-arrow {
        display: none !important;
    }

    /* Start button span full width */
    html body .start-button-modern {
        grid-column: 1 / -1 !important;
    }

    /* Quick Access buttons container */
    .dashboard-quick-access {
        grid-column: 1 / -1 !important;
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }

    .quick-access-btn {
        flex: 1 !important;
        padding: 10px 12px !important;
        border-radius: 20px !important;
        font-size: 0.82em !important;
        font-weight: 600 !important;

        /* Difusión física realista - fondo sutil */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        text-align: center !important;
        position: relative !important;

        /* Oclusión Ambiental Elevación y Brillos Internos */
        box-shadow:
            inset 1px 1px 2px rgba(255, 255, 255, 0.35),
            inset -1px -1px 3px rgba(0, 0, 0, 0.3),
            0 8px 16px rgba(0, 0, 0, 0.25) !important;
    }

    /* Reflexión Especular Fina */
    .quick-access-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1.5px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.2) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .quick-access-btn:active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
        transform: scale(0.97) !important;
        box-shadow:
            inset 1px 1px 2px rgba(255, 255, 255, 0.4),
            inset -1px -1px 2px rgba(0, 0, 0, 0.25),
            0 4px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Modern container: tighter padding */
    .modern-container {
        padding: 16px 12px !important;
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        padding-left: calc(12px + env(safe-area-inset-left)) !important;
        padding-right: calc(12px + env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Header: reduce margin */
    .modern-header {
        margin-bottom: 12px !important;
    }
}

/* ===================================================
   BLOQUE 4: INFO BUTTONS (?) — visible and tappable
   =================================================== */
@media (max-width: 600px) {

    #calculator-page .info-button {
        min-width: 24px !important;
        min-height: 24px !important;
        width: 24px !important;
        height: 24px !important;
        opacity: 0.7 !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #calculator-page .info-button svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ===================================================
   LIGHT THEME ADJUSTMENTS (Mobile)
   =================================================== */
@media (max-width: 600px) {
    html.light-theme .quick-access-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: rgba(0, 0, 0, 0.7) !important;
    }

    html.light-theme .quick-access-btn:active {
        background: rgba(0, 0, 0, 0.08) !important;
    }
}

/* ===================================================
   GLOBAL: Hide Restaurar Compras on ALL screens
   =================================================== */
.restore-button-modern {
    display: none !important;
}

/* ===================================================
   GLOBAL: Quick Access Buttons — Styled for all screens
   These appear on Dashboard (iPad, Web, and mobile)
   =================================================== */
.dashboard-quick-access {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    grid-column: 1 / -1;
}

.quick-access-btn {
    padding: 12px 28px;
    border-radius: 24px;
    font-size: 0.92em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    white-space: nowrap;
}

.quick-access-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quick-access-btn:active {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(0.97);
}

/* Light theme quick-access */
html.light-theme .quick-access-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.7);
}

html.light-theme .quick-access-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.85);
}

/* ===================================================
   TABLET (601px - 1024px): Centered, spaced quick-access
   =================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    .dashboard-quick-access {
        gap: 16px;
        margin-top: 20px;
        justify-content: center;
    }

    .quick-access-btn {
        min-width: 160px;
        padding: 14px 32px;
        font-size: 0.95em;
    }
}
/* ===================================================
   iOS AUTO-ZOOM PREVENTION
   iOS Safari hace zoom automático en inputs con 
   font-size < 16px. Forzar 16px mínimo en iOS.
   =================================================== */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* ============================================================================ */
/* LIGHT-MODE-FIXES.CSS */
/* ============================================================================ */

/* =================================================================
   LIGHT MODE FIXES — Loaded LAST to override all white text rules
   Applies when html does NOT have .dark-theme class
   All rules use !important to beat inline styles and bundled CSS
   ================================================================= */

/* ---------------------------------------------------------------
   1. ROOT FIX — Safari Variable Repaint Bug Override
   En Safari iOS, cambiar CSS Vars en html dinámicamente no repinta
   --------------------------------------------------------------- */
html.light-theme body {
    color: #111111 !important;
}

html.light-theme body {
    background-color: #f0f2f5 !important;
}

/* ---------------------------------------------------------------
   2. CALCULATOR — glass-panel, fieldset, control-group, etc.
   modern-calculator.css hardcodea color:white !important en estos
   --------------------------------------------------------------- */
html.light-theme fieldset,
html.light-theme .glass-panel,
html.light-theme .results-panel,
html.light-theme .results-container,
html.light-theme .visualizer-container,
html.light-theme .control-group,
html.light-theme .input-group,
html.light-theme .select-wrapper,
html.light-theme .form-group {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #111111 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .summary-item,
html.light-theme .result-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 100%) !important;
    color: #111111 !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.03),
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
}

/* Light mode: style theme toggle to match language selector */
html.light-theme .theme-switch-wrapper {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .theme-switch-wrapper::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.0) 70%, rgba(255, 255, 255, 0.3) 100%) !important;
}

/* Todos los descendientes de glass-panel en modo claro */
html.light-theme .glass-panel *,
html.light-theme fieldset *,
html.light-theme .results-panel *,
html.light-theme .control-group *,
html.light-theme .input-group *,
html.light-theme .result-box *,
html.light-theme .summary-item *,
html.light-theme .form-group * {
    color: #111111 !important;
}

/* Excepciones: elementos con color explícito de acento (azul, rojo, etc.) */
html.light-theme .glass-panel .accent,
html.light-theme .glass-panel .blue,
html.light-theme .glass-panel [style*="color: #4facfe"],
html.light-theme .glass-panel [style*="color: #2962ff"] {
    color: #2962ff !important;
}

/* ---------------------------------------------------------------
   3. CALCULATOR — choice-buttons (Una Persona, Dos Personas, etc.)
   ui-polish-fixes.css tiene .choice-button { color: white !important }
   --------------------------------------------------------------- */
html.light-theme body .choice-button,
html.light-theme .choice-button {
    color: #111111 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .choice-button.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2962ff 0%, #4facfe 100%) !important;
    border: 1px solid rgba(41, 98, 255, 0.6) !important;
    box-shadow: 0 4px 14px rgba(41, 98, 255, 0.3) !important;
}

/* ---------------------------------------------------------------
   4. CALCULATOR — Botones genéricos
   modern-calculator.css tiene button { color: white !important }
   Excluir botones azules/de acción que deben seguir en blanco
   --------------------------------------------------------------- */
html.light-theme #calculator-page button:not(.gear-add-fab):not(.gear-card-edit):not(.gear-card-delete):not(.start-button-modern):not(.gear-save-btn):not(.modal-close):not([class*="blue"]):not([class*="primary"]):not(.active-assistant):not(.choice-button) {
    color: #111111 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Active assistant state (Asegurar Nitidez, etc.) — light mode */
html.light-theme #calculator-page button.active-assistant {
    background: linear-gradient(135deg, #2962ff 0%, #4facfe 100%) !important;
    border: 1px solid rgba(41, 98, 255, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(41, 98, 255, 0.3) !important;
}
html.light-theme #calculator-page button.active-assistant:hover {
    background: linear-gradient(135deg, #1a4fd4 0%, #3d9ae0 100%) !important;
}

/* Timelapse preset chip active — light mode */
html.light-theme .tl-preset-chip.active {
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.2), rgba(79, 172, 254, 0.15)) !important;
    border-color: rgba(41, 98, 255, 0.5) !important;
    color: #2962ff !important;
    box-shadow: 0 2px 10px rgba(41, 98, 255, 0.15) !important;
}

/* ---------------------------------------------------------------
   5. LEGENDS (section titles in fieldsets)
   --------------------------------------------------------------- */
html.light-theme fieldset legend,
html.light-theme .section-header,
html.light-theme .panel-title,
html.light-theme .card-header-title {
    color: #111111 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---------------------------------------------------------------
   6. LABELS e INPUTS en calculator light mode
   --------------------------------------------------------------- */
html.light-theme .form-group label,
html.light-theme fieldset label,
html.light-theme .input-label,
html.light-theme .control-label {
    color: rgba(0, 0, 0, 0.6) !important;
}

html.light-theme input[type="text"],
html.light-theme input[type="number"],
html.light-theme select:not(.language-select-modern) {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #111111 !important;
}

html.light-theme select option {
    background: #ffffff !important;
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   7. MI EQUIPO — gear cards (usa h4 dentro de .gear-info)
   gear-ui.js genera: <div class="gear-info"><h4>Nombre</h4></div>
   --------------------------------------------------------------- */
html.light-theme .gear-card.glass-panel {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #111111 !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .gear-card.glass-panel h4,
html.light-theme .gear-card.glass-panel h3,
html.light-theme .gear-card.glass-panel h2,
html.light-theme .gear-card.glass-panel p,
html.light-theme .gear-card.glass-panel span,
html.light-theme .gear-info h4,
html.light-theme .gear-info h3,
html.light-theme .gear-info p,
html.light-theme .gear-info span {
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   8. TIPO DE FOTOGRAFÍA Y UNIDADES — labels y botones de tipo
   --------------------------------------------------------------- */
html.light-theme .photo-type-label,
html.light-theme .type-name {
    color: #111111 !important;
}

html.light-theme .photo-type-button,
html.light-theme .photo-type-option {
    color: #111111 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.04),
        0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .photo-type-button:hover,
html.light-theme .photo-type-option:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 100%) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ---------------------------------------------------------------
   9. MODAL HEADERS (Tipo de Fotografía, Sistema de Unidades)
   modern-calculator.css: .modal-content { background: rgba(20,20,20) !important }
   --------------------------------------------------------------- */
html.light-theme .modern-modal .modal-content {
    background: rgba(244, 246, 249, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .modern-modal .modal-header,
html.light-theme .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

html.light-theme .modern-modal .modal-header h3,
html.light-theme .modal-header h3 {
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   10. RESULT BOXES / DISPLAY ITEMS (Plano Cercano, PdC Total, etc.)
   --------------------------------------------------------------- */
html.light-theme .result-item,
html.light-theme .dof-result,
html.light-theme .summary-box {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #111111 !important;
}

html.light-theme .result-item strong,
html.light-theme .result-item span {
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   11. NOTICE boxes en modo claro
   --------------------------------------------------------------- */
html.light-theme .notice {
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   12. BACK BUTTON en modo claro
   --------------------------------------------------------------- */
html.light-theme .back-button-modern,
html.light-theme #calculator-page .back-button-modern {
    color: #111111 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ---------------------------------------------------------------
   13. HEADER TITLE en calculadora modo claro
   --------------------------------------------------------------- */
html.light-theme #calculator-page .modern-header h1 {
    color: #111111 !important;
}

html.light-theme #calculator-page .modern-header p {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* ---------------------------------------------------------------
   14. DASHBOARD — Quick Access Buttons (Ver Cielo, Lunar, Visor AR)
   ui-polish-fixes.css: .quick-access-btn { color: rgba(255,255,255,0.8) !important }
   --------------------------------------------------------------- */
html.light-theme body .quick-access-btn,
html.light-theme .quick-access-btn {
    color: rgba(0, 0, 0, 0.75) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .quick-access-btn:hover,
html.light-theme .quick-access-btn:active {
    color: rgba(0, 0, 0, 0.9) !important;
    background: rgba(255, 255, 255, 1) !important;
}

/* ---------------------------------------------------------------
   15. SYNC INFO MODAL — párrafos casi invisibles
   El modal usa style="color: var(--text-secondary)" que en dark mode
   resuelve a rgba(255,255,255,0.5) — invisible en fondo blanco.
   Forzamos directo con !important en el modal de sincronización.
   --------------------------------------------------------------- */
html.light-theme #gear-sync-info-modal .modal-content {
    background: rgba(244, 246, 249, 0.98) !important;
}

html.light-theme #gear-sync-info-modal .sync-info-block {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-theme #gear-sync-info-modal .sync-info-block h4 {
    color: #111111 !important;
}

html.light-theme #gear-sync-info-modal .sync-info-block p {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* Todas las p y span dentro del modal de sync */
html.light-theme #gear-sync-info-modal p,
html.light-theme #gear-sync-info-modal span,
html.light-theme #gear-sync-info-modal h3,
html.light-theme #gear-sync-info-modal h4 {
    color: rgba(0, 0, 0, 0.75) !important;
}

html.light-theme #gear-sync-info-modal h3 {
    color: #111111 !important;
}

/* ---------------------------------------------------------------
   16. BOTÓN "?" GEAR SYNC HELP — visible en modo claro
   --------------------------------------------------------------- */
html.light-theme .gear-sync-help-btn,
html.light-theme #gear-sync-help-btn {
    background: rgba(41, 98, 255, 0.1) !important;
    color: #2962ff !important;
    border-color: rgba(41, 98, 255, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---------------------------------------------------------------
   17. CLIMA/CIELO — campos que se leen mal en modo claro
   environmental.css tiene light mode parcial pero falta:
   env-date-btn, env-next-event text, env-phase-label, rec-cards
   --------------------------------------------------------------- */
html.light-theme .env-date-btn {
    background: rgba(255, 255, 255, 0.85) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .env-date-btn.env-date-active {
    background: rgba(41, 98, 255, 0.1) !important;
    color: #2962ff !important;
}

html.light-theme .env-date-picker-btn {
    color: rgba(0, 0, 0, 0.65) !important;
}

html.light-theme .env-next-event {
    color: rgba(0, 0, 0, 0.8) !important;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08) 0%, rgba(39, 174, 96, 0.05) 100%) !important;
}

html.light-theme .env-phase-label {
    color: rgba(0, 0, 0, 0.85) !important;
}

html.light-theme .env-phase-banner {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 200, 50, 0.04) 100%) !important;
}

html.light-theme .env-section h3 {
    color: #111111 !important;
}

html.light-theme .env-data-item {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme .env-label {
    color: rgba(0, 0, 0, 0.5) !important;
}

html.light-theme .env-value {
    color: #111111 !important;
}

/* Recommendation cards en modo claro */
html.light-theme .env-rec-card {
    background: rgba(255, 255, 255, 0.85) !important;
}

html.light-theme .env-rec-info {
    color: #166534 !important;
}

html.light-theme .env-rec-warning {
    color: #92400e !important;
}

html.light-theme .env-rec-alert {
    color: #991b1b !important;
    background: rgba(248, 113, 113, 0.06) !important;
}

/* Sky viewer button en modo claro */
html.light-theme .env-sky-btn {
    background: linear-gradient(135deg, rgba(30, 40, 80, 0.12), rgba(50, 30, 90, 0.08)) !important;
    color: #2940a0 !important;
    border-color: rgba(100, 130, 255, 0.2) !important;
}

/* Botón de calcular / acceso en clima */
html.light-theme .env-calc-btn {
    color: rgba(0, 0, 0, 0.75) !important;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 180, 50, 0.04)) !important;
}

/* Tip buttons en modo claro */
html.light-theme .env-tip-btn {
    background: rgba(0, 0, 0, 0.07) !important;
    color: rgba(0, 0, 0, 0.55) !important;
}

/* ---------------------------------------------------------------
   18. CLIMA/CIELO — Botón "Ubicación Actual" y guía bottom
   --------------------------------------------------------------- */
html.light-theme .env-loc-btn,
html.light-theme #env-gps-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .env-location-text,
html.light-theme #env-location-label {
    color: rgba(0, 0, 0, 0.75) !important;
}

/* Botón de guía rápida bottom del modal de clima (usa inline styles)
   !important en CSS externo sobreescribe inline sin !important */
html.light-theme .env-help-btn-bottom {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

html.light-theme .env-active-location,
html.light-theme .env-loc-active {
    background: rgba(79, 172, 254, 0.08) !important;
    border-color: rgba(79, 172, 254, 0.25) !important;
    color: #2962ff !important;
}

/* ---------------------------------------------------------------
   20. env-modal-close — el botón de cerrar Clima/Cielo
   env-modal-close tiene su propio CSS con color blanco que
   gana incluso al modal-back-btn light mode de modern-index.css
   --------------------------------------------------------------- */
html.light-theme .env-modal-close,
html.light-theme #env-modal-close {
    color: rgba(0, 0, 0, 0.75) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light-theme .env-modal-close:hover,
html.light-theme #env-modal-close:hover {
    color: rgba(0, 0, 0, 0.9) !important;
    background: rgba(255, 255, 255, 1) !important;
}

/* También el modal-close circular (×) sin modal-back-btn en light mode */
html.light-theme .modal-close:not(.modal-back-btn) {
    color: rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ---------------------------------------------------------------
   21. env-modal-close — evitar que el texto desborde en idiomas
   con palabras largas (Tillbaka, Zurück, Indietro, etc.)
   --------------------------------------------------------------- */
.env-modal-close.modal-back-btn,
#env-modal-close {
    min-width: fit-content !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* ---------------------------------------------------------------
   22. gear-save-btn — botón Aceptar/Guardar en Cámara/Lente/Kit
   En dark mode tiene texto blanco sobre gradient azul, en light
   mode el color de texto queda invisible.
   --------------------------------------------------------------- */
html.light-theme .gear-save-btn {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0066cc, #0099ff) !important;
    border: none !important;
}

html.light-theme .gear-save-btn:hover {
    background: linear-gradient(135deg, #0055bb, #0088ee) !important;
}

/* ---------------------------------------------------------------
   23. BOTÓN × BÚSQUEDA (search-clear-btn) — adaptativo por tema
   Dark: blanco semitransparente | Light: negro semitransparente
   --------------------------------------------------------------- */
.search-clear-btn {
    color: rgba(255, 255, 255, 0.85) !important;
}
html.light-theme .search-clear-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.6) !important;
}
html.light-theme .search-clear-btn:hover {
    background: rgba(0, 0, 0, 0.15) !important;
    color: rgba(0, 0, 0, 0.9) !important;
}

/* ---------------------------------------------------------------
   24. HEADER BUTTONS de Mi Equipo — en light mode son cajas
   blancas sin texto (hereda color:white de gear-ui.css)
   Afecta: modal-back-btn (← Volver), gear-delete-batch-btn,
   gear-toggle-manual-btn y gear-cloud-status ya cubierto arriba
   --------------------------------------------------------------- */

/* Botón ← Volver en header del modal de gear */
html.light-theme #gear-manager-modal .modal-back-btn,
html.light-theme #add-gear-modal .modal-back-btn {
    color: #111111 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Botón eliminar seleccionados (rojo) */
html.light-theme .gear-delete-batch-btn {
    color: #cc2222 !important;
    background: rgba(200, 0, 0, 0.07) !important;
    border-color: rgba(200, 0, 0, 0.2) !important;
}

/* Botón "¿No encuentras tu cámara/lente? Añadir manualmente" */
html.light-theme .gear-toggle-manual-btn {
    color: rgba(0, 0, 0, 0.65) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* =================================================================
   PHASE 1 LIGHT MODE FIXES — Beta tester reported + audit findings
   Added 2026-03-22
   ================================================================= */

/* ── GUIDED TOUR — tooltips & backdrop ─────────────────────────── */
html.light-theme .guided-tour-backdrop {
    background: rgba(0, 0, 0, 0.35) !important;
}
html.light-theme .guided-tour-tooltip {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}
html.light-theme .guided-tour-tooltip * {
    color: #111111 !important;
}
html.light-theme .guided-tour-dot {
    background: rgba(0,0,0,0.20) !important;
}
html.light-theme .guided-tour-dot.active {
    background: #2962ff !important;
}
html.light-theme .guided-tour-arrow {
    background: rgba(0,0,0,0.15) !important;
}

/* ── LUNAR CALENDAR — modal & overlay ──────────────────────────── */
html.light-theme .lunar-cal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.light-theme .lunar-cal-modal {
    background: rgba(245, 245, 247, 0.97) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
html.light-theme .lunar-cal-modal * {
    color: #111111 !important;
}
html.light-theme .lunar-cal-modal h3,
html.light-theme .lunar-cal-modal h4 {
    color: #111111 !important;
}

/* ── LUZ PLANNER — full module ──────────────────────────────────── */
html.light-theme .lp-search-input {
    background: rgba(255,255,255,0.85) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}
html.light-theme .lp-search-input::placeholder { color: #888 !important; }
html.light-theme .lp-icon-btn {
    background: rgba(255,255,255,0.75) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}
html.light-theme .lp-fab {
    background: #2962ff !important;
    color: #ffffff !important;
}
html.light-theme .lp-weather-header,
html.light-theme .lp-weather-close,
html.light-theme .lp-save-input {
    color: #111111 !important;
    background: rgba(255,255,255,0.85) !important;
}
html.light-theme [class^="lp-"],
html.light-theme [class*=" lp-"] {
    color: #111111;
}
/* Override for accent/colored elements */
html.light-theme .lp-fab,
html.light-theme .lp-fab * { color: #ffffff !important; }

/* ── SESSION PLANNER — full module ─────────────────────────────── */
html.light-theme .sp-overlay {
    background: rgba(0,0,0,0.40) !important;
}
html.light-theme .sp-modal {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}
html.light-theme .sp-modal * { color: #111111 !important; }
html.light-theme .sp-close-btn {
    background: rgba(0,0,0,0.08) !important;
    color: #111111 !important;
}
html.light-theme .sp-fab {
    background: #2962ff !important;
    color: #ffffff !important;
}
html.light-theme .sp-fab * { color: #ffffff !important; }
html.light-theme .sp-input,
html.light-theme .sp-date-btn {
    background: rgba(255,255,255,0.85) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}
html.light-theme .sp-input::placeholder { color: #888 !important; }
html.light-theme [class^="sp-"],
html.light-theme [class*=" sp-"] { color: #111111; }
/* Keep action buttons white text */
html.light-theme .sp-fab,
html.light-theme .sp-fab * { color: #ffffff !important; }

/* ── AR VIEWFINDER — labels & overlay menus ─────────────────────── */
html.light-theme .ar-overlay-menu {
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    backdrop-filter: blur(20px) !important;
}
html.light-theme .ar-overlay-menu * { color: #111111 !important; }
html.light-theme .ar-info-chip {
    background: rgba(255,255,255,0.88) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    text-shadow: none !important;
}
html.light-theme .ar-close-btn {
    background: rgba(0,0,0,0.10) !important;
    color: #111111 !important;
}
html.light-theme .ar-comp-btn {
    background: rgba(255,255,255,0.80) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}
html.light-theme .ar-custom-inputs,
html.light-theme .ar-web-notice {
    background: rgba(255,255,255,0.90) !important;
    color: #111111 !important;
}
/* Remove heavy text-shadow on AR labels (issue #8) */
html.light-theme .ar-viewfinder-label,
html.light-theme [class*="ar-"] [class*="label"],
html.light-theme [class*="ar-"] [class*="text"] {
    text-shadow: none !important;
}

/* ── SKY VIEWER — panels & FAB ──────────────────────────────────── */
html.light-theme .sky-plan-sheet {
    background: #ffffff !important;
    color: #111111 !important;
    border-top: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
}
html.light-theme .sky-plan-sheet * { color: #111111 !important; }
html.light-theme .sky-touch-hint {
    background: rgba(255,255,255,0.85) !important;
    color: #333333 !important;
}
html.light-theme .sky-info-card {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}
html.light-theme .sky-info-card * { color: #111111 !important; }
html.light-theme .sky-plan-fab {
    background: #2962ff !important;
    color: #ffffff !important;
}
html.light-theme .sky-camera-btn {
    background: rgba(255,255,255,0.85) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* ── CHECKLIST — submit button ──────────────────────────────────── */
html.light-theme .checklist-custom-submit {
    color: #ffffff !important; /* white on colored bg is intentional */
}

/* ── MODALS / INFO GUIDES — all module intro modals ────────────── */
/* Balance de Blancos, Calendario Lunar guide, Exposición guide, etc. */
html.light-theme .guide-card,
html.light-theme .meter-guide-overlay,
html.light-theme .info-modal,
html.light-theme .module-intro-card,
html.light-theme .exp-guide-card,
html.light-theme .wb-guide-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}
html.light-theme .guide-card *,
html.light-theme .meter-guide-overlay *,
html.light-theme .info-modal *,
html.light-theme .module-intro-card *,
html.light-theme .exp-guide-card *,
html.light-theme .wb-guide-card * {
    color: #111111 !important;
}
/* Keep the action buttons readable */
html.light-theme .guide-card .btn-primary,
html.light-theme .meter-guide-overlay .btn-primary,
html.light-theme button[class*="go"],
html.light-theme button[class*="start"] {
    color: #ffffff !important;
}

/* ── EXPOSICIÓN — close button in light mode (issue #20) ────────── */
html.light-theme .exposure-modal .exposure-close,
html.light-theme #exposure-close,
html.light-theme .exposure-modal > button:first-of-type,
html.light-theme [id*="exposure"][id*="close"] {
    background: rgba(0,0,0,0.10) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

/* ── AR VIEWFINDER — text-shadow removal (issue #8) ─────────────── */
html.light-theme .ar-focal-label,
html.light-theme .ar-sensor-label,
html.light-theme [class*="ar-"][class*="label"] {
    text-shadow: none !important;
    color: #111111 !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}

/* ── CONSEJOS MODALS (landscape tips, etc.) — issue #16 ─────────── */
html.light-theme .tips-modal,
html.light-theme .consejos-modal,
html.light-theme #tips-modal .modal-content,
html.light-theme [class*="tips"],
html.light-theme [class*="consejos"] {
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
}
html.light-theme .tips-modal *,
html.light-theme .consejos-modal *,
html.light-theme #tips-modal .modal-content *,
html.light-theme #tips-modal h2,
html.light-theme #tips-modal li,
html.light-theme [class*="tips"] *,
html.light-theme [class*="consejos"] * {
    color: #111111 !important;
}
html.light-theme #tips-modal .modal-close-button {
    color: #111111 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* =================================================================
   TARGETED LIGHT MODE FIXES — Round 2 (2026-03-22)
   Fixes for: inline-style modals, correct class names, missing selectors
   ================================================================= */

/* ── "Cómo medir la luz" guide modal — inline style override via id ── */
html.light-theme #exp-meter-guide,
html.light-theme .exp-meter-guide-overlay {
    background: rgba(0, 0, 0, 0.50) !important;
}
html.light-theme #exp-meter-guide > div,
html.light-theme .exp-meter-guide-overlay > div {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
    color: #111111 !important;
}
html.light-theme #exp-meter-guide h3,
html.light-theme #exp-meter-guide p,
html.light-theme #exp-meter-guide li,
html.light-theme #exp-meter-guide div,
html.light-theme #exp-meter-guide span,
html.light-theme #exp-meter-guide label,
html.light-theme .exp-meter-guide-overlay h3,
html.light-theme .exp-meter-guide-overlay p,
html.light-theme .exp-meter-guide-overlay li {
    color: #111111 !important;
}
html.light-theme #meter-guide-cancel {
    background: rgba(0,0,0,0.06) !important;
    color: #555555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}
html.light-theme #meter-guide-go {
    background: linear-gradient(135deg,rgba(76,175,80,0.9),rgba(56,142,60,0.8)) !important;
    color: #ffffff !important;
}

/* ── Exposure Tour guide overlay ─────────────────────────────────── */
html.light-theme #exp-tour-guide,
html.light-theme .exp-tour-guide-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}
html.light-theme #exp-tour-guide > div,
html.light-theme .exp-tour-guide-overlay > div {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
    color: #111111 !important;
}
html.light-theme #exp-tour-guide *,
html.light-theme .exp-tour-guide-overlay * {
    color: #111111 !important;
}

/* ── "Repetir Tour de Exposición" button ────────────────────────── */
html.light-theme #exposure-guide-btn,
html.light-theme .exposure-guide-btn {
    background: rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    color: #333333 !important;
}

/* ── Session Planner — correct class names ──────────────────────── */
html.light-theme .sp-modal-overlay {
    background: rgba(0,0,0,0.40) !important;
}
html.light-theme .sp-modal-overlay .sp-modal {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}
html.light-theme .sp-modal-overlay .sp-modal * {
    color: #111111 !important;
}
/* Session planner main overlay (sidebar) */
html.light-theme #session-planner-overlay,
html.light-theme .sp-overlay {
    background: rgba(0,0,0,0.45) !important;
}
html.light-theme #session-planner-overlay > *,
html.light-theme .sp-overlay > :not([class*="sp-fab"]) {
    background: #ffffff !important;
    color: #111111 !important;
}

/* ── AR Viewfinder — "TAMAÑO DEL SENSOR" bar ────────────────────── */
/* The sensor bar is rendered on a dark strip — keep dark but reduce text-shadow */
html.light-theme .ar-controls-bar,
html.light-theme [class*="ar-controls"],
html.light-theme [class*="ar-bottom"],
html.light-theme [class*="ar-bar"] {
    text-shadow: none !important;
}
/* Specifically the sensor label text in the controls strip */
html.light-theme canvas ~ * [class*="label"],
html.light-theme canvas ~ * [class*="text"] {
    text-shadow: none !important;
}

/* ── Light Planner — ensure all content visible ──────────────────── */
html.light-theme [class^="lp-"]:not(.lp-fab),
html.light-theme [class*=" lp-"]:not(.lp-fab) {
    color: #111111 !important;
}
/* Info panel on top-right of light planner map */
html.light-theme .lp-info-panel,
html.light-theme .lp-event-card,
html.light-theme .lp-controls {
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}
html.light-theme .lp-info-panel *,
html.light-theme .lp-event-card *,
html.light-theme .lp-controls * {
    color: #111111 !important;
}

/* =================================================================
   TARGETED FIXES ROUND 3 — Light Planner & AR Viewfinder
   2026-03-22 — Using exact class names from CSS audit
   ================================================================= */

/* ── LIGHT PLANNER — all dark/white-text elements ───────────────── */
html.light-theme .lp-overlay {
    /* The full-screen map overlay itself stays transparent — map is always visible */
}
html.light-theme .lp-search-input {
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
}
html.light-theme .lp-search-input::placeholder { color: #777 !important; }
html.light-theme .lp-search-results {
    background: rgba(255,255,255,0.97) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}
html.light-theme .lp-search-results * { color: #111111 !important; }
html.light-theme .lp-icon-btn {
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}
html.light-theme .lp-icon-btn:hover {
    background: rgba(255,255,255,1) !important;
}
html.light-theme .lp-hours-panel {
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}
html.light-theme .lp-hours-panel * { color: #111111 !important; }
html.light-theme .lp-info-strip {
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
html.light-theme .lp-info-strip * { color: #111111 !important; }
html.light-theme .lp-menu-dropdown {
    background: rgba(255,255,255,0.97) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
html.light-theme .lp-menu-dropdown * { color: #111111 !important; }
html.light-theme .lp-weather-backdrop {
    background: rgba(0,0,0,0.40) !important;
}
html.light-theme .lp-weather-content {
    background: #ffffff !important;
    color: #111111 !important;
}
html.light-theme .lp-weather-content * { color: #111111 !important; }
html.light-theme .lp-weather-header h3,
html.light-theme .lp-weather-close { color: #111111 !important; }
html.light-theme .lp-wg-item strong { color: #111111 !important; }
html.light-theme .lp-save-input,
html.light-theme .lp-save-textarea {
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}
html.light-theme .lp-save-btn { /* keep accent color, white text is intentional */ }
html.light-theme .lp-plan-info strong { color: #111111 !important; }
html.light-theme .lp-toast {
    background: rgba(40,40,40,0.92) !important;
    color: #ffffff !important; /* Toast on dark bg — intentional */
}
html.light-theme .mapboxgl-ctrl-group {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}
html.light-theme .mapboxgl-ctrl-group * { color: #111111 !important; }

/* ── AR VIEWFINDER — remaining text-shadow + white text elements ── */
html.light-theme .ar-sensor-footer-select {
    background: rgba(255,255,255,0.15) !important; /* stays on camera — semi-transparent */
    text-shadow: none !important;
}
html.light-theme .ar-focal-input {
    text-shadow: none !important;
    color: #ffffff !important; /* on camera view — keep white but no shadow */
}
html.light-theme .ar-interactive-tooltip {
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    text-shadow: none !important;
}
html.light-theme .ar-interactive-tooltip * {
    color: #111111 !important;
    text-shadow: none !important;
}
/* Remove text-shadow from ALL AR overlay text in light mode */
html.light-theme .ar-info-chip,
html.light-theme .ar-comp-btn,
html.light-theme #ar-overlay-toggle {
    text-shadow: none !important;
}
/* The focal/sensor bottom bar stays dark (on camera) — just remove shadow */
html.light-theme [id*="ar-"] *,
html.light-theme [class*="ar-"] * {
    text-shadow: none !important;
}

/* ── LIGHT PLANNER — date picker hidden input must stay transparent & clickable ── */
html.light-theme .lp-date-picker-hidden {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    z-index: 3 !important;
}
html.light-theme .lp-date-wrapper {
    pointer-events: auto !important;
}
/* lp-menu-item text in light mode */
html.light-theme .lp-menu-item {
    color: #111111 !important;
}
html.light-theme .lp-menu-item:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* =================================================================
   PHASE 2A FIXES — Light Mode: 5 bugs restantes
   2026-03-22
   ================================================================= */

/* ── BUG #3 — BALANCE DE BLANCOS: backdrop + elementos hijos ───── */
html.light-theme .color-balance-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
html.light-theme .cb-temp-labels {
    color: rgba(0, 0, 0, 0.45) !important;
}
html.light-theme .cb-tool-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* ── BUG #6 — CALENDARIO LUNAR: fondos de botones/celdas/detalle ── */
html.light-theme .lunar-cal-nav {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #111111 !important;
}
html.light-theme .lunar-cal-close {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #555555 !important;
}
html.light-theme .lunar-cal-cell {
    background: rgba(0, 0, 0, 0.03) !important;
}
html.light-theme .lunar-cal-cell:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}
html.light-theme .lunar-cal-cell.lunar-cal-today {
    background: rgba(41, 98, 255, 0.08) !important;
    border-color: rgba(41, 98, 255, 0.3) !important;
}
html.light-theme .lunar-cal-cell.lunar-cal-selected {
    background: rgba(232, 168, 72, 0.12) !important;
    border-color: rgba(232, 168, 72, 0.5) !important;
}
html.light-theme .lunar-cal-detail {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light-theme .lunar-detail-time {
    background: rgba(0, 0, 0, 0.03) !important;
}
html.light-theme .lunar-cal-day-num {
    color: rgba(0, 0, 0, 0.7) !important;
}
html.light-theme .lunar-cal-weekdays span {
    color: rgba(0, 0, 0, 0.4) !important;
}
html.light-theme .lunar-eclipse-item {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ── BUG #9 — CHECKLIST: texto invisible (blanco sobre blanco) ──── */
html.light-theme .checklist-card-progress {
    color: rgba(0, 0, 0, 0.6) !important;
}
html.light-theme .checklist-qty-val {
    color: rgba(0, 0, 0, 0.8) !important;
}
html.light-theme .checklist-qty-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.7) !important;
}
html.light-theme .checklist-item-detail {
    color: rgba(0, 0, 0, 0.45) !important;
}
html.light-theme .checklist-remove-btn {
    color: rgba(0, 0, 0, 0.3) !important;
}
html.light-theme .checklist-remove-btn:hover {
    color: #ff5555 !important;
}
html.light-theme .checklist-add-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.45) !important;
}
html.light-theme .checklist-new-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.5) !important;
}
html.light-theme .checklist-catalog-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}
html.light-theme .checklist-catalog-close {
    background: rgba(0, 0, 0, 0.06) !important;
    color: rgba(0, 0, 0, 0.6) !important;
}
html.light-theme .checklist-catalog-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
html.light-theme .checklist-catalog-item .cat-name {
    color: #1a1a1a !important;
}
html.light-theme .checklist-custom-input {
    color: #1a1a1a !important;
}
html.light-theme .checklist-custom-input::placeholder {
    color: rgba(0, 0, 0, 0.35) !important;
}

/* ── BUG #16 — TIPS/CONSEJOS: modal completamente invisible ──────── */
/* .modal-content (modals.css) tiene background: rgba(255,255,255,0.08)
   y .modal-content li/p tienen color: rgba(255,255,255,0.9) !important
   — ambos invisibles en light mode. Override con alta especificidad. */
html.light-theme .modal-overlay .modal-content {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
html.light-theme .modal-overlay .modal-content h2 {
    color: #1a1a1a !important;
}
html.light-theme .modal-overlay .modal-content p,
html.light-theme .modal-overlay .modal-content li,
html.light-theme .modal-overlay .modal-content span {
    color: rgba(0, 0, 0, 0.85) !important;
}
html.light-theme .modal-overlay .modal-close-button {
    color: rgba(0, 0, 0, 0.7) !important;
}
/* Borde glassmorphism del pseudo-element: hacerlo sutil en light mode */
html.light-theme .modal-overlay .modal-content::before {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.08) 0%, transparent 20%,
        transparent 80%, rgba(0, 0, 0, 0.04) 100%) !important;
}

/* ── BUG #20 — EXPOSICIÓN: botón cerrar (✕) reforzado ────────────── */
html.light-theme .exposure-close,
html.light-theme .exposure-kit-modal-close {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html.light-theme .exposure-close:hover,
html.light-theme .exposure-kit-modal-close:hover {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* =================================================================
   PHASE 2A ROUND 2 — Backdrops estandarizados + Info buttons
   2026-03-22
   ================================================================= */

/* ── Backdrops estandarizados a 0.85 + blur ─────────────────────── */
html.light-theme .exposure-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
html.light-theme .checklist-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
html.light-theme .exposure-kit-modal-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
/* Modal genérico (Tipo de Foto, Unidades, etc.) */
html.light-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
/* Modal backdrop de modern-modal (.modal-backdrop dentro de .modern-modal) */
html.light-theme .modern-modal .modal-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Botones "?" (info-button) invisibles en calculator light mode ── */
html.light-theme .info-button {
    background: rgba(41, 98, 255, 0.12) !important;
    border-color: rgba(41, 98, 255, 0.4) !important;
    color: #2962ff !important;
    box-shadow: 0 0 6px rgba(41, 98, 255, 0.15) !important;
}
html.light-theme .info-button::after {
    color: #2962ff !important;
}
html.light-theme .info-button:hover,
html.light-theme .info-button:active {
    background: rgba(41, 98, 255, 0.22) !important;
    border-color: rgba(41, 98, 255, 0.6) !important;
}
/* gear-info-btn (? en Mi Equipo) */
html.light-theme .gear-info-btn {
    background: rgba(41, 98, 255, 0.12) !important;
    border-color: rgba(41, 98, 255, 0.4) !important;
    color: #2962ff !important;
    box-shadow: 0 0 6px rgba(41, 98, 255, 0.15) !important;
}