/* =====================================================
   THEMES / SKINS (MODO CLARO)
   ===================================================== */

/* 1. Classic (Azul Corporativo Elegante) */
:root,
[data-skin="classic"] {
    --bg-body:          linear-gradient(180deg, #1B365D 0%, #4A627A 100%); 
    --accent:           #C9A84C;
    --accent-soft:      rgba(201,168,76,0.15);
    --bg-filters:       #F4F6F8;
    --bg-container:     #FFFFFF;
    --border:           #D1D5DB;
    --border-accent:    #C9A84C;
    --text-main:        #1F2937;
    --text-muted:       #6B7280;
    --card-hover:       #F3F4F6;
    --bg-header:        #1B365D; 
    --tab-active-text:  #1B365D;
    --tab-active:       rgba(255, 255, 255, 0.95);
    --tab-inactive:     rgba(255, 255, 255, 0.2);
    --gold:             #C9A84C;
    --gold-light:       #E8D5A0;
    --gold-dark:        #A07830;
    --font-title:       'Playfair Display', 'Georgia', serif;
}

/* 2. Lavanda */
[data-skin="lavanda"] {
    --bg-body:       linear-gradient(180deg, #C4C9E4 0%, #9AA3CC 40%, #7B8DC4 100%);
    --accent:        #7B8DC4;
    --bg-filters:    #F0F2F9;
    --bg-container:  #FFFFFF;
    --border:        #D0D5EA;
    --text-main:     #2A2E45;
    --text-muted:    #6B7280;
    --card-hover:    #E8ECF8;
    --bg-header:     #4A5A9A; 
    --tab-active-text: #2A2E45;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.2);
}

/* 3. Scriptorium (Biblioteca Inglesa) */
[data-skin="scriptorium"] {
    /* Nogal oscuro → Caoba → Pizarra azul-gris */
    --bg-body:       linear-gradient(180deg, #2C1A0E 0%, #5C3820 50%, #2E3D52 100%);
    --accent:        #A0722A;          /* bronce elegante */
    --bg-filters:    #EDE8DC;          /* pergamino */
    --bg-container:  #F7F4EE;          /* vainilla */
    --border:        #C4B0A4;          /* borde marrón */
    --text-main:     #2C2420;          /* tinta */
    --text-muted:    #7A6A60;          /* sepia */
    --card-hover:    #E4DDD4;
    --bg-header:     #2E3D52;          /* ✨ pizarra azul-gris (antes verde) */
    --tab-active-text: #2C2420;
    --tab-active:    rgba(255, 255, 255, 0.92);
    --tab-inactive:  rgba(255, 255, 255, 0.18);
    /* Paleta biblioteca */
    --bronze:        #A0722A;
    --bronze-light:  #C4A052;
    --bronze-dark:   #6A4A10;
    --font-scripto:  'Playfair Display', 'Georgia', serif;
}

/* 4. Blossom */
[data-skin="blossom"] {
    --bg-body:       linear-gradient(180deg, #FDEEF4 0%, #FDCEDF 40%, #F8D8E8 100%);
    --accent:        #C9849A;
    --bg-filters:    #FEF4F8;
    --bg-container:  #FFFFFF;
    --border:        #F0C8D8;
    --text-main:     #3A2030;
    --text-muted:    #9A7080;
    --card-hover:    #FDEAF2;
    --bg-header:     #A05878; 
    --tab-active-text: #3A2030;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.25);
}

/* 5. Ocean (Maldivas — Versión Laguna) */
[data-skin="ocean"] {
    --bg-body:       linear-gradient(180deg, #E8F8F5 0%, #48CAE4 35%, #0096C7 65%, #03045E 100%);
    --accent:        #0096C7;
    --bg-filters:    #E8F6FA;          /* igual que antes */
    --bg-container:  #F2FAFB;          /* igual que antes */
    --border:        #A8D4E8;          /* igual que antes */
    --text-main:     #1A4050;          /* igual que antes */
    --text-muted:    #4A7A8A;          /* igual que antes */
    --card-hover:    #D0EDF5;          /* igual que antes */
    --bg-header:     #1A7A9A;          /* ✨ suavizado — antes #2A5068 */
    --tab-active-text: #1A4050;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.2);
    --highlight-bg:  #FFF3C0;
    --highlight-text: #7A5A00;
    --lagoon:        #48CAE4;
    --lagoon-deep:   #0096C7;
    --lagoon-dark:   #023E8A;
    --turquoise:     #00C9B1;
    --sand:          #F5E6C8;
    --font-ocean:    'Playfair Display', 'Georgia', serif;
}

/* 6. Sunset */
[data-skin="sunset"] {
    --bg-body:       linear-gradient(180deg, #6858A0 0%, #E89878 50%, #F8C8A8 100%);
    --accent:        #D07850;
    --bg-filters:    #FDF6F2;
    --bg-container:  #FFFBF8;
    --border:        #E8D0C0;
    --text-main:     #3A2820;
    --text-muted:    #7A6050;
    --card-hover:    #FFF0E8;
    --bg-header:     #4A3878; 
    --tab-active-text: #3A2820;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.25);
    --highlight-bg:  #F0E8FF;
    --highlight-text: #4A3878;
}

/* 7. Forest (Jardín Primaveral) */
[data-skin="forest"] {
    --bg-body:       linear-gradient(180deg, #51704D 0%, #2A3D27 100%); /* Verde hoja tranquilo */
    --accent:        #D68E36;          /* Madera/Sol primaveral (Naranja-dorado cálido) */
    --bg-filters:    #F8F7F4;          /* Piedra clara (neutro, sin verde) */
    --bg-container:  #FFFFFF;          /* Blanco puro para leer bien */
    --border:        #D6D3C9;          /* Gris cálido */
    --text-main:     #2F2D2A;          /* Gris carbón oscuro */
    --text-muted:    #6D6A61;          /* Gris topo */
    --card-hover:    #F2EFEB;
    --bg-header:     #2C4229;          /* Verde bosque profundo y elegante */
    --tab-active-text: #2C4229;
    --tab-active:    rgba(255, 255, 255, 0.98);
    --tab-inactive:  rgba(255, 255, 255, 0.15);
    /* Tonos primavera */
    --moss:          #4CAF50;
    --moss-light:    #81C784;
    --moss-dark:     #2E7D32;
    --amber:         #2E7D32; 
    --amber-light:   #66BB6A;
    --amber-dark:    #1B5E20;
    --font-forest:   'Playfair Display', 'Georgia', serif;
}

/* 8. Fire */
[data-skin="fire"] {
    --bg-body:       linear-gradient(180deg, #DF7131 0%, #E24013 60%, #C72213 100%);
    --accent:        #E24013;
    --bg-filters:    #FDF2EC;
    --bg-container:  #FFFAF7;
    --border:        #F2C4A8;
    --text-main:     #2A1008;
    --text-muted:    #8A4830;
    --card-hover:    #FDE8D8;
    --bg-header:     #C72213; 
    --tab-active-text: #2A1008;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.25);
}

/* =====================================================
   MODO OSCURO POR SKIN
   ===================================================== */

/* 1. Classic Oscuro */
[data-theme="dark"][data-skin="classic"],
[data-theme="dark"]:not([data-skin]) {
    --bg-body:       linear-gradient(180deg, #0F172A 0%, #111827 100%);
    --bg-container:  #1F2937;
    --bg-filters:    #374151;
    --border:        #4B5563;
    --border-accent: #A07830;
    --text-main:     #F9FAFB;
    --text-muted:    #9CA3AF;
    --accent:        #C9A84C;
    --card-hover:    #273344;
    --bg-header:     #0F172A; 
    --tab-active:    rgba(255, 255, 255, 0.12);
    --tab-inactive:  rgba(255, 255, 255, 0.08);
    --tab-active-text: #F9FAFB;
    --gold:          #C9A84C;
    --gold-light:    #8A6A20;
    --gold-dark:     #E8C870;
    --font-title:    'Playfair Display', 'Georgia', serif;
}

/* 2. Lavanda Oscuro */
[data-theme="dark"][data-skin="lavanda"] {
    --bg-body:      linear-gradient(180deg, #1E1E35 0%, #252A50 40%, #1A2040 100%);
    --bg-container: #1E2235;
    --bg-filters:   #252A42;
    --border:       #3A4060;
    --text-main:    #E0E4F4;
    --text-muted:   #8890B0;
    --accent:       #9AA3CC;
    --card-hover:   #2A3060;
    --bg-header:    #0E1228; 
    --tab-active:   rgba(255, 255, 255, 0.15);
    --tab-inactive: rgba(255, 255, 255, 0.08);
    --tab-active-text: #E0E4F4;
}

/* 3. Scriptorium Oscuro (Biblioteca Nocturna) */
[data-theme="dark"][data-skin="scriptorium"] {
    /* Noche de nogal → caoba oscura → pizarra nocturna */
    --bg-body:       linear-gradient(180deg, #180C04 0%, #2A1208 40%, #161E2C 100%);
    --bg-container:  #1E1A16;
    --bg-filters:    #26201A;
    --border:        #4A3C30;
    --text-main:     #EDE8DC;
    --text-muted:    #907868;
    --accent:        #A0722A;          /* bronce */
    --card-hover:    #2E2418;
    --bg-header:     #161E2C;          /* ✨ pizarra azul-gris muy oscura (antes verde) */
    --tab-active:    rgba(255, 255, 255, 0.12);
    --tab-inactive:  rgba(255, 255, 255, 0.07);
    --tab-active-text: #EDE8DC;
    --bronze:        #A0722A;
    --bronze-light:  #C4A052;
    --bronze-dark:   #6A4A10;
    --font-scripto:  'Playfair Display', 'Georgia', serif;
}

/* 4. Blossom Oscuro */
[data-theme="dark"][data-skin="blossom"] {
    --bg-body:      linear-gradient(180deg, #1E1824 0%, #251828 40%, #2E1828 100%);
    --bg-container: #261820;
    --bg-filters:   #301E28;
    --border:       #5A3048;
    --text-main:    #F8E8F0;
    --text-muted:   #C090A8;
    --accent:       #E898B8;
    --card-hover:   #3A2030;
    --bg-header:    #1A0E14; 
    --tab-active:   rgba(255, 255, 255, 0.12);
    --tab-inactive: rgba(255, 255, 255, 0.08);
    --tab-active-text: #F8E8F0;
}

/* 5. Ocean Oscuro (Maldivas Nocturno) */
[data-theme="dark"][data-skin="ocean"] {
    --bg-body:      linear-gradient(180deg, #012A4A 0%, #023E8A 35%, #03045E 100%);
    --bg-container: #001E2C;           /* igual que antes */
    --bg-filters:   #002638;           /* igual que antes */
    --border:       #005A78;           /* igual que antes */
    --text-main:    #D0EDF5;           /* igual que antes */
    --text-muted:   #60A8C0;           /* igual que antes */
    --accent:       #00BBD8;           /* igual que antes */
    --card-hover:   #003048;           /* igual que antes */
    --bg-header:    #011E36;           /* ✨ suavizado */
    --tab-active:   rgba(255, 255, 255, 0.15);
    --tab-inactive: rgba(255, 255, 255, 0.08);
    --tab-active-text: #D0EDF5;
    --lagoon:       #48CAE4;
    --lagoon-deep:  #0096C7;
    --lagoon-dark:  #023E8A;
    --turquoise:    #00C9B1;
    --sand:         #F5E6C8;
    --font-ocean:   'Playfair Display', 'Georgia', serif;
}

/* 6. Sunset Oscuro */
[data-theme="dark"][data-skin="sunset"] {
    --bg-body:      linear-gradient(180deg, #181830 0%, #281828 50%, #2A1810 100%);
    --bg-container: #1E1818;
    --bg-filters:   #282020;
    --border:       #4A3830;
    --text-main:    #F8E8E0;
    --text-muted:   #C0A090;
    --accent:       #F0A070;
    --card-hover:   #302020;
    --bg-header:    #181028; 
    --tab-active:   rgba(255, 255, 255, 0.12);
    --tab-inactive: rgba(255, 255, 255, 0.07);
    --tab-active-text: #F8E8E0;
}

/* 7. Forest Oscuro (Jardín Nocturno) */
[data-skin="fire"] {
    --bg-body:       linear-gradient(180deg,
                        #FFC94A 0%,      /* ✨ punta de llama: amarillo-ámbar */
                        #FF6B1A 15%,     /* naranja llama viva */
                        #E8320A 35%,     /* rojo-naranja intenso */
                        #C41A06 55%,     /* rojo profundo */
                        #7A0A00 78%,     /* granate oscuro */
                        #2A0500 100%     /* brasa casi negra */
                    );
    --accent:        #FF6B1A;            /* ✨ naranja llama vivo */
    --bg-filters:    #FDF2EC;
    --bg-container:  #FFFAF7;
    --border:        #F2C4A8;
    --text-main:     #2A1008;
    --text-muted:    #8A4830;
    --card-hover:    #FDE8D8;
    --bg-header:     #8A1200;            /* ✨ rojo brasa profundo */
    --tab-active-text: #2A1008;
    --tab-active:    rgba(255, 255, 255, 0.95);
    --tab-inactive:  rgba(255, 255, 255, 0.22);
    /* ✨ Paleta fuego */
    --flame-tip:     #FFC94A;
    --flame-mid:     #FF6B1A;
    --flame-base:    #C41A06;
    --ember:         #2A0500;
}

/* 8. Fire Oscuro */
[data-theme="dark"][data-skin="fire"] {
    --bg-body:       linear-gradient(180deg,
                        #3A1500 0%,      /* carbón cálido */
                        #5A0A00 25%,     /* rojo brasa */
                        #8A1200 50%,     /* rojo intenso */
                        #3A0800 75%,     /* profundo oscuro */
                        #0E0200 100%     /* negro carbón */
                    );
    --bg-container:  #1E0C05;
    --bg-filters:    #2A1208;
    --border:        #7A2810;
    --text-main:     #FDE8D8;
    --text-muted:    #C07850;
    --accent:        #FF7A2A;            /* ✨ llama más brillante en oscuro */
    --card-hover:    #321508;
    --bg-header:     #0E0400;
    --tab-active:    rgba(255, 255, 255, 0.12);
    --tab-inactive:  rgba(255, 255, 255, 0.07);
    --tab-active-text: #FDE8D8;
    --flame-tip:     #FFC94A;
    --flame-mid:     #FF6B1A;
    --flame-base:    #C41A06;
    --ember:         #0E0200;
}

/* =====================================================
   CLASSIC — DETALLES ELEGANTES
   ===================================================== */

[data-skin="classic"] #mainTitle,
[data-theme="dark"][data-skin="classic"] #mainTitle {
    font-family: var(--font-title);
    color: var(--gold);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-skin="classic"] .filter-group label,
[data-theme="dark"][data-skin="classic"] .filter-group label {
    font-family: var(--font-title);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

[data-theme="dark"][data-skin="classic"] .filter-group label {
    color: var(--gold);
}

[data-skin="classic"] .filters select:focus,
[data-theme="dark"][data-skin="classic"] .filters select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2);
}

[data-skin="classic"] .filters-toggle-hint,
[data-theme="dark"][data-skin="classic"] .filters-toggle-hint {
    color: var(--gold);
    opacity: 0.8;
    font-family: var(--font-title);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

[data-skin="classic"] .filters-toggle,
[data-theme="dark"][data-skin="classic"] .filters-toggle {
    border-bottom: 1px solid var(--gold-light);
}

[data-skin="classic"] p.placeholder,
[data-theme="dark"][data-skin="classic"] p.placeholder {
    font-family: var(--font-title);
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

[data-skin="classic"] p.placeholder::before,
[data-skin="classic"] p.placeholder::after,
[data-theme="dark"][data-skin="classic"] p.placeholder::before,
[data-theme="dark"][data-skin="classic"] p.placeholder::after {
    content: ' ✦ ';
    color: var(--gold);
    opacity: 0.6;
    font-style: normal;
}

[data-skin="classic"] .content,
[data-theme="dark"][data-skin="classic"] .content {
    border-top: none;
}

[data-skin="classic"] .reference,
[data-theme="dark"][data-skin="classic"] .reference {
    font-family: var(--font-title);
    color: var(--gold-dark);
    letter-spacing: 0.03em;
    border: none;
}

[data-theme="dark"][data-skin="classic"] .reference {
    color: var(--gold);
    border: none;
}

[data-skin="classic"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--gold);
    border-bottom: none;
    border-top: 2px solid var(--gold);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

[data-skin="classic"] .mode-tab.active .tab-icon {
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.5));
}

[data-theme="dark"][data-skin="classic"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--gold);
    border-bottom: none;
    border-top: 2px solid var(--gold);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

/* =====================================================
   SCRIPTORIUM — DETALLES ELEGANTES
   ===================================================== */

[data-skin="scriptorium"] #mainTitle,
[data-theme="dark"][data-skin="scriptorium"] #mainTitle {
    font-family: var(--font-scripto);
    color: var(--bronze-light);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-skin="scriptorium"] .filter-group label,
[data-theme="dark"][data-skin="scriptorium"] .filter-group label {
    font-family: var(--font-scripto);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bronze-dark);
}

[data-theme="dark"][data-skin="scriptorium"] .filter-group label {
    color: var(--bronze-light);
}

[data-skin="scriptorium"] .filters select:focus,
[data-theme="dark"][data-skin="scriptorium"] .filters select:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 2px rgba(160, 114, 42, 0.2);
}

[data-skin="scriptorium"] .filters-toggle-hint,
[data-theme="dark"][data-skin="scriptorium"] .filters-toggle-hint {
    color: var(--bronze);
    opacity: 0.85;
    font-family: var(--font-scripto);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

[data-skin="scriptorium"] .filters-toggle,
[data-theme="dark"][data-skin="scriptorium"] .filters-toggle {
    border-bottom: 1px solid var(--bronze-dark);
}

[data-skin="scriptorium"] p.placeholder,
[data-theme="dark"][data-skin="scriptorium"] p.placeholder {
    font-family: var(--font-scripto);
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

[data-skin="scriptorium"] p.placeholder::before,
[data-skin="scriptorium"] p.placeholder::after,
[data-theme="dark"][data-skin="scriptorium"] p.placeholder::before,
[data-theme="dark"][data-skin="scriptorium"] p.placeholder::after {
    content: ' ❧ ';
    color: var(--bronze);
    opacity: 0.7;
    font-style: normal;
}

[data-skin="scriptorium"] .content,
[data-theme="dark"][data-skin="scriptorium"] .content {
    border-top: none;
}

[data-skin="scriptorium"] .reference,
[data-theme="dark"][data-skin="scriptorium"] .reference {
    font-family: var(--font-scripto);
    color: var(--bronze-dark);
    letter-spacing: 0.03em;
    border: none;
}

[data-theme="dark"][data-skin="scriptorium"] .reference {
    color: var(--bronze-light);
    border: none;
}

[data-skin="scriptorium"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--bronze);
    border-bottom: none;
    border-top: 2px solid var(--bronze);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

[data-skin="scriptorium"] .mode-tab.active .tab-icon {
    filter: drop-shadow(0 0 4px rgba(160, 114, 42, 0.5));
}

[data-theme="dark"][data-skin="scriptorium"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--bronze);
    border-bottom: none;
    border-top: 2px solid var(--bronze);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

/* =====================================================
   OCEAN — DETALLES MALDIVAS LAGUNA
   ===================================================== */

[data-skin="ocean"] #mainTitle,
[data-theme="dark"][data-skin="ocean"] #mainTitle {
    font-family: var(--font-ocean);
    color: var(--sand);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"][data-skin="ocean"] #mainTitle {
    color: var(--turquoise);
}

[data-skin="ocean"] .filter-group label,
[data-theme="dark"][data-skin="ocean"] .filter-group label {
    font-family: var(--font-ocean);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lagoon-dark);
}

[data-theme="dark"][data-skin="ocean"] .filter-group label {
    color: var(--turquoise);
}

[data-skin="ocean"] .filters select:focus,
[data-theme="dark"][data-skin="ocean"] .filters select:focus {
    outline: none;
    border-color: var(--lagoon-deep);
    box-shadow: 0 0 0 2px rgba(0, 150, 199, 0.2);
}

[data-skin="ocean"] .filters-toggle-hint,
[data-theme="dark"][data-skin="ocean"] .filters-toggle-hint {
    color: var(--lagoon-deep);
    opacity: 0.85;
    font-family: var(--font-ocean);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

[data-theme="dark"][data-skin="ocean"] .filters-toggle-hint {
    color: var(--turquoise);
}

[data-skin="ocean"] .filters-toggle,
[data-theme="dark"][data-skin="ocean"] .filters-toggle {
    border-bottom: 1px solid var(--lagoon);
}

[data-skin="ocean"] p.placeholder,
[data-theme="dark"][data-skin="ocean"] p.placeholder {
    font-family: var(--font-ocean);
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

[data-skin="ocean"] p.placeholder::before,
[data-skin="ocean"] p.placeholder::after,
[data-theme="dark"][data-skin="ocean"] p.placeholder::before,
[data-theme="dark"][data-skin="ocean"] p.placeholder::after {
    content: ' 🐚 ';
    font-style: normal;
    opacity: 0.7;
}

[data-skin="ocean"] .content,
[data-theme="dark"][data-skin="ocean"] .content {
    border-top: none;
}

[data-skin="ocean"] .reference,
[data-theme="dark"][data-skin="ocean"] .reference {
    font-family: var(--font-ocean);
    color: var(--lagoon-dark);
    letter-spacing: 0.03em;
    border: none;
}

[data-theme="dark"][data-skin="ocean"] .reference {
    color: var(--turquoise);
    border: none;
}

[data-skin="ocean"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--lagoon-deep);
    border-bottom: none;
    border-top: 2px solid var(--lagoon);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

[data-skin="ocean"] .mode-tab.active .tab-icon {
    filter: drop-shadow(0 0 4px rgba(72, 202, 228, 0.6));
}

[data-theme="dark"][data-skin="ocean"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--turquoise);
    border-bottom: none;
    border-top: 2px solid var(--turquoise);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

/* =====================================================
   FOREST — DETALLES JARDÍN VIVO
   ===================================================== */

[data-skin="forest"] #mainTitle,
[data-theme="dark"][data-skin="forest"] #mainTitle {
    font-family: var(--font-forest);
    color: #E8C382; /* Tono madera clara para el título */
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-skin="forest"] .filter-group label,
[data-theme="dark"][data-skin="forest"] .filter-group label {
    font-family: var(--font-forest);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bg-header); /* Las etiquetas en verde oscuro elegante */
}

[data-theme="dark"][data-skin="forest"] .filter-group label {
    color: var(--accent);
}

[data-skin="forest"] .filters select:focus,
[data-theme="dark"][data-skin="forest"] .filters select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(214, 142, 54, 0.2);
}

[data-skin="forest"] .filters-toggle-hint,
[data-theme="dark"][data-skin="forest"] .filters-toggle-hint {
    color: var(--accent);
    opacity: 0.9;
    font-family: var(--font-forest);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

[data-skin="forest"] .filters-toggle,
[data-theme="dark"][data-skin="forest"] .filters-toggle {
    border-bottom: 1px solid var(--border);
}

[data-skin="forest"] p.placeholder,
[data-theme="dark"][data-skin="forest"] p.placeholder {
    font-family: var(--font-forest);
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

[data-skin="forest"] p.placeholder::before,
[data-skin="forest"] p.placeholder::after,
[data-theme="dark"][data-skin="forest"] p.placeholder::before,
[data-theme="dark"][data-skin="forest"] p.placeholder::after {
    content: ' 🌱 '; 
    font-style: normal;
    opacity: 0.8;
}

[data-skin="forest"] .content,
[data-theme="dark"][data-skin="forest"] .content {
    border-top: none;
}

[data-skin="forest"] .reference,
[data-theme="dark"][data-skin="forest"] .reference {
    font-family: var(--font-forest);
    color: var(--accent);
    letter-spacing: 0.03em;
    border: none;
}

[data-skin="forest"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--bg-header); /* Texto de la pestaña activa en verde oscuro */
    border-bottom: none;
    border-top: 2px solid var(--accent); /* Línea dorada arriba */
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

[data-skin="forest"] .mode-tab.active .tab-icon {
    filter: drop-shadow(0 0 4px rgba(44, 66, 41, 0.3));
}

[data-theme="dark"][data-skin="forest"] .mode-tab.active {
    background: var(--bg-container);
    color: var(--accent);
    border-bottom: none;
    border-top: 2px solid var(--accent);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}
/* =====================================================
   SELECTOR DE SKIN (UI en panel ajustes)
   ===================================================== */
.skin-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    max-width: 220px;
}

.skin-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.skin-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.skin-dot::before,
.skin-dot::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
}
.skin-dot::before { left: 0; }
.skin-dot::after  { right: 0; }

/* Colores de los selectores circulares */
.skin-dot[data-skin="classic"]::before     { background: #C9A84C; }
.skin-dot[data-skin="classic"]::after      { background: #1B365D; }

.skin-dot[data-skin="lavanda"]::before     { background: #7B8DC4; }
.skin-dot[data-skin="lavanda"]::after      { background: #9AA3CC; }

.skin-dot[data-skin="scriptorium"]::before { background: #C4A052; }
.skin-dot[data-skin="scriptorium"]::after  { background: #2E3D52; }

.skin-dot[data-skin="blossom"]::before     { background: #C9849A; }
.skin-dot[data-skin="blossom"]::after      { background: #FDCEDF; }

.skin-dot[data-skin="ocean"]::before       { background: #48CAE4; }
.skin-dot[data-skin="ocean"]::after        { background: #03045E; }

.skin-dot[data-skin="sunset"]::before      { background: #F8C8A8; }
.skin-dot[data-skin="sunset"]::after       { background: #6858A0; }

.skin-dot[data-skin="forest"]::before      { background: #66BB6A; }
.skin-dot[data-skin="forest"]::after       { background: #2E7D32; }

.skin-dot[data-skin="fire"]::before { background: #FFC94A; }
.skin-dot[data-skin="fire"]::after  { background: #7A0A00; }
/* Estados activos y hover */
.skin-dot.active {
    border-color: var(--accent);
    transform: scale(1.18);
    box-shadow:
        0 0 0 2px var(--bg-container),
        0 0 0 4px var(--accent);
}

.skin-dot:hover:not(.active) {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.skin-label {
    font-size: 0.70rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.settings-item.skin-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}