/* ============================================================ TEMA.CSS — Modo de DÍA (luz) del Club de Alta Costura Manual cromático profesional · Carolina Sarmiento · jul-2026 ------------------------------------------------------------ El modo OSCURO es el vestido actual de cada página (no se toca). Cuando , este archivo re-viste TODO con la paleta oficial: Beige marfil cálido #F9F3F1 (fondo, ~70%) Azul marino académico #102D51 (títulos y texto, ~18%) Dorado champagne #C29B65 (acentos, ~7%) Marfil suave #E6D7C2 (franjas, ~3%) Rojo vino profundo #751E16 (microdetalles, ~2%) Blanco puro #FFFFFF (detalles mínimos) Lo conecta tema.js (botón flotante + memoria de la elección). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap'); /* ---------- Paleta oficial (nombres del manual) ---------- */ :root{ --color-fondo-principal: #F9F3F1; --color-azul-principal: #102D51; --color-dorado-premium: #C29B65; --color-rojo-acento: #751E16; --color-marfil-suave: #E6D7C2; --color-blanco-detalle: #FFFFFF; } /* ============================================================ 0. TIPOGRAFÍA EDITORIAL — ambos modos (14-jul-2026, tarde) Sistema: Cormorant Garamond SOLO en títulos y cifras grandes (estilo revista de moda) + Montserrat en textos, botones, etiquetas y formularios (limpia y minimalista). ============================================================ */ body, body *{font-family:'Montserrat','Nunito Sans',sans-serif !important;} /* La serif elegante se conserva en los títulos y momentos de lujo (incluidas las palabras doradas DENTRO de los títulos) */ h1, h2, h3, h4, h1 *:not(.paso-num), h2 *:not(.paso-num), h3 *, h4 *, .saludo *, .credencial b *, [style*="Cormorant"], .monograma, .mono, header .cs, .titulo-cab b, .titulo b, .cab-tit b, .saludo, .seccion-cabeza .numeral, .cabeza .numeral, .intro .by, .lema, .lema-v, .detalle-portada .lema, .firma, footer .firma, footer .firma-pie, .sig, .precio-ventana .cifra, .caja-compra .precio, /* (los NÚMEROS de Cose y Cobra ya no van en serif: Nancy los quiso claros, en Montserrat — reglas en calculadora.html, 14-jul noche) */ /* (.q, .card .sub, .builder-toggle b y .saved-title ya NO van en serif: la serif fina se desvanecía en las tarjetas claras — Nancy, 14-jul noche) */ .materiales .materiales-titulo, .proxima-titulo, .grupo-indice, .pregunta summary, .credencial b, .modulo > button, .alumna .inicial, .aviso-social .inicial, .biv-titulo, .cert-input, .p-neg-name, .p-meta-ttl, .p-total strong{ font-family:'Cormorant Garamond', Georgia, serif !important; } /* Etiquetas pequeñas: más finas y aireadas (jerarquía limpia) */ .maestra, .intro .eyebrow, .seclabel, .result-eyebrow, .rec-title, .final-label, .ref-label, .chips-label, .pasos-num, .titulo-cab span, .cab-tit span, .titulo span, .chip, .chip-lanzamiento, .chip-cop, .publi-sello, .dato, .insignia{ font-weight:600; } .boton, .btn, .boton-mini, .volver, .entrar-mini{letter-spacing:.02em;} body{letter-spacing:.002em;} /* ============================================================ 0.b EL MOTOR DE PATRONES, ORDENADO — ambos modos (solo aplica en patrones.html, la única página con #zonaImpresion) ============================================================ */ body:has(#zonaImpresion) main{gap:26px; padding:26px 22px;} body:has(#zonaImpresion) header{padding:16px 22px;} body:has(#zonaImpresion) header small{ letter-spacing:.16em; text-transform:uppercase; font-size:10.5px; font-weight:600; } body:has(#zonaImpresion) .caja{padding:22px 20px; border-radius:16px;} body:has(#zonaImpresion) .caja h2{ font-size:21px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--borde); } body:has(#zonaImpresion) .caja label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin:14px 0 5px; } body:has(#zonaImpresion) select, body:has(#zonaImpresion) input[type=number]{border-radius:10px; padding:11px 12px;} body:has(#zonaImpresion) .chip-ojo{font-size:12.5px; padding:5px 12px; margin:6px 6px 0 0;} body:has(#zonaImpresion) .zona-fotos{border-radius:14px; padding:30px 16px;} body:has(#zonaImpresion) .boton{border-radius:999px; padding:14px;} body:has(#zonaImpresion) .verif div{padding:7px 0;} body:has(#zonaImpresion) .nota{line-height:1.55;} /* ============================================================ 0.c COSE Y COBRA, LA APP (14-jul-2026, noche) — ajustes propios del rediseño tipo app. Solo aplica en calculadora.html (única página con #barraPrecio). Las LETRAS son las mismas de toda la plataforma (Cormorant + Montserrat, reglas de la sección 0): Nancy lo decidió así el 14-jul noche, segunda ronda. ============================================================ */ /* el botón de tema sube para no chocar con la barra tipo app */ body:has(#barraPrecio) #botonTema{bottom:96px;} /* modo luz: los componentes nuevos de la app conservan su joya púrpura-dorada */ html[data-tema="luz"] body:has(#barraPrecio) .result{background:transparent; box-shadow:none;} html[data-tema="luz"] body:has(#barraPrecio) .break-row{background:#FFFFFF; box-shadow:0 8px 20px rgba(16,45,81,.1);} html[data-tema="luz"] body:has(#barraPrecio) .break-row.tot{background:linear-gradient(150deg,#4B1E3D,#38142B);} html[data-tema="luz"] body:has(#barraPrecio) .break-row.tot span{color:#E9C87A;} html[data-tema="luz"] body:has(#barraPrecio) .break-row.tot b{color:#F6F1EB;} html[data-tema="luz"] body:has(#barraPrecio) .final{ background:linear-gradient(160deg,#4B1E3D,#2E1024); border:1.5px solid #D4AF37;} html[data-tema="luz"] body:has(#barraPrecio) .final .money{background:transparent; border:none;} html[data-tema="luz"] body:has(#barraPrecio) .final .money input{color:#E9C87A;} html[data-tema="luz"] body:has(#barraPrecio) .final-label{color:#D4AF37;} html[data-tema="luz"] body:has(#barraPrecio) .final-cop, html[data-tema="luz"] body:has(#barraPrecio) .final-hint{color:rgba(246,241,235,.6);} html[data-tema="luz"] body:has(#barraPrecio) .appbar{ background:rgba(249,243,241,.97); border-top:1px solid rgba(154,116,66,.45);} html[data-tema="luz"] body:has(#barraPrecio) .ab-item{color:#8895A6;} html[data-tema="luz"] body:has(#barraPrecio) .ab-item.activo, html[data-tema="luz"] body:has(#barraPrecio) .ab-item:hover{color:#8A6136;} html[data-tema="luz"] body:has(#barraPrecio) .intro-marca h1{ background:none; -webkit-text-fill-color:#102D51; color:#102D51;} html[data-tema="luz"] body:has(#barraPrecio) .intro-marca p{color:#22415F;} /* Mi libreta en modo luz */ html[data-tema="luz"] body:has(#barraPrecio) .lib-cifra, html[data-tema="luz"] body:has(#barraPrecio) .lib-mini, html[data-tema="luz"] body:has(#barraPrecio) .lib-meta, html[data-tema="luz"] body:has(#barraPrecio) .lib-nueva, html[data-tema="luz"] body:has(#barraPrecio) .lib-venta{ background:#FFFFFF; box-shadow:0 8px 20px rgba(16,45,81,.1);} html[data-tema="luz"] body:has(#barraPrecio) .lib-flecha{ background:rgba(255,255,255,.8); color:#8A6136; border-color:rgba(154,116,66,.5);} html[data-tema="luz"] body:has(#barraPrecio) .lib-mes-nombre{color:#102D51;} html[data-tema="luz"] body:has(#barraPrecio) .lib-vacia{color:#5B6B7D;} html[data-tema="luz"] body:has(#barraPrecio) .lib-meta-btn, html[data-tema="luz"] body:has(#barraPrecio) .lib-anotar{color:#8A6136; background:rgba(194,155,101,.1);} /* ============================================================ 1. EL BOTÓN FLOTANTE (existe en ambos modos) ============================================================ */ #botonTema{ position:fixed; right:16px; bottom:16px; z-index:960; width:54px; height:54px; border-radius:50%; border:1.5px solid rgba(207,167,82,.55); background:rgba(21,10,17,.8); color:#EFDFB2; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .2s, box-shadow .2s, background .3s; } #botonTema:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.5);} #botonTema:active{transform:scale(.94);} html[data-tema="luz"] #botonTema{ background:var(--color-azul-principal); color:#F9F3F1; border-color:var(--color-dorado-premium); box-shadow:0 8px 24px rgba(16,45,81,.35); } /* en el lector, el botón sube para no tapar la barra del libro */ #botonTema.tema-alto{bottom:78px;} @media print{ #botonTema{display:none!important;} } @media (max-width:760px){ #botonTema{width:48px; height:48px; font-size:21px; right:12px; bottom:12px;} } /* ============================================================ 2. VARIABLES DEL MODO LUZ (re-mapa de las variables de cada página) ============================================================ */ html[data-tema="luz"]{ --noche:#F9F3F1; /* fondo general → beige marfil cálido */ --violeta:#E6D7C2; /* brillos → marfil suave */ --violeta-claro:#EFE3D6; --tarjeta:#F4EBE1; /* tarjetas → marfil clarito */ --tarjeta-2:#F0E6D9; --borde:rgba(154,116,66,.45); /* bordes dorado champagne */ --oro:#A87B45; /* dorado legible sobre beige */ --oro-claro:#8C6742; /* textos dorados → champagne profundo */ --oro-prof:#8A6136; --marfil:#102D51; /* títulos → azul marino académico */ --marfil-2:#16385F; --texto:#22415F; /* texto de lectura */ --suave:#5B6B7D; /* texto secundario */ --champan:#F0E6D6; --champan-2:#E6D7C2; --tinta:#102D51; --tinta-suave:#4F6076; --ok:#47773B; --error:#8F2A1E; /* avisos → rojo vino */ --grad-oro:linear-gradient(120deg,#D8BB88 0%,#C29B65 45%,#96703F 100%); } /* ============================================================ 3. REGLAS GENERALES DEL MODO LUZ (sirven en las 7 páginas) ============================================================ */ html[data-tema="luz"]{background:#F9F3F1;} html[data-tema="luz"] body{ background: radial-gradient(90% 60% at 80% 0%, rgba(230,215,194,.6) 0%, transparent 60%), var(--noche); transition:background-color .35s, color .35s; } html[data-tema="luz"] ::selection{background:var(--color-dorado-premium); color:#FFFFFF;} /* Campos de escritura: papel blanco, letra azul marino */ html[data-tema="luz"] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-tema="luz"] select, html[data-tema="luz"] textarea{ background:#FFFFFF; color:var(--color-azul-principal); } html[data-tema="luz"] ::placeholder{color:rgba(16,45,81,.4);} html[data-tema="luz"] select option{background:#FFFFFF; color:#102D51;} html[data-tema="luz"] input[type=date]{color-scheme:light;} /* Botones de contorno oscuro → contorno claro */ html[data-tema="luz"] .boton.contorno{ background:rgba(255,255,255,.55); color:var(--color-azul-principal); } /* Microdetalles en rojo vino (energía institucional, con moderación) */ html[data-tema="luz"] .divisor .joya{color:var(--color-rojo-acento); text-shadow:none;} html[data-tema="luz"] .banda-dorada::before{color:var(--color-rojo-acento); text-shadow:none;} /* ============================================================ 4. ENTRAR.HTML — la puerta del Club ============================================================ */ html[data-tema="luz"] .tarjeta{ background:linear-gradient(165deg, #FFFFFF, var(--tarjeta)); box-shadow:0 24px 70px rgba(16,45,81,.14), 0 0 50px rgba(194,155,101,.1); } html[data-tema="luz"] .monograma{ background:radial-gradient(circle at 30% 25%, #FFFFFF, var(--color-marfil-suave)); box-shadow:0 0 26px rgba(194,155,101,.35); } html[data-tema="luz"] .volver-info{ background:rgba(255,255,255,.72); color:var(--color-azul-principal); } /* ============================================================ 5. INDEX.HTML — la página de venta ============================================================ */ html[data-tema="luz"] header{ background:linear-gradient(180deg, rgba(249,243,241,.96), rgba(249,243,241,.8)); border-bottom:1px solid rgba(154,116,66,.35); } html[data-tema="luz"] .mono{ background:radial-gradient(circle at 30% 25%, #FFFFFF, var(--color-marfil-suave)); box-shadow:0 0 18px rgba(194,155,101,.4); } html[data-tema="luz"] .heroe{ background: radial-gradient(90% 70% at 80% 10%, rgba(230,215,194,.9) 0%, transparent 60%), radial-gradient(70% 60% at 10% 90%, rgba(194,155,101,.28) 0%, transparent 55%), radial-gradient(120% 100% at 50% 30%, #F4ECE2 0%, #F1E8DC 55%, var(--noche) 100%); } html[data-tema="luz"] .heroe .velo-heroe{ background:linear-gradient(90deg, rgba(249,243,241,.97) 0%, rgba(249,243,241,.78) 42%, rgba(249,243,241,.3) 68%, rgba(249,243,241,.5) 100%); } /* palabras doradas de los títulos: en luz van en champagne sólido y profundo (el degradado se lavaba sobre la foto) */ html[data-tema="luz"] h1 .oro, html[data-tema="luz"] .saludo .nombre-oro{ background:none; -webkit-text-fill-color:#96703F; color:#96703F; } @media (max-width:760px){ html[data-tema="luz"] .heroe .velo-heroe{ background:linear-gradient(180deg, rgba(249,243,241,.3) 0%, rgba(249,243,241,.58) 34%, rgba(249,243,241,.96) 64%, var(--noche) 100%); } } html[data-tema="luz"] .chip{background:rgba(255,255,255,.66);} html[data-tema="luz"] .perfil{background:linear-gradient(165deg, #FFFFFF, var(--tarjeta));} html[data-tema="luz"] .perfil .foto-perfil{ background:radial-gradient(120% 120% at 30% 12%, var(--color-marfil-suave) 0%, var(--tarjeta) 60%, #E2D2BC 100%); } html[data-tema="luz"] .perfil .foto-perfil .icono{color:rgba(16,45,81,.25);} html[data-tema="luz"] .perfil .foto-perfil::after{ background:linear-gradient(180deg, transparent, rgba(247,240,231,.95)); } html[data-tema="luz"] .franja{ background:linear-gradient(180deg, #F3E9D8 0%, var(--color-marfil-suave) 45%, #D9C4A0 100%); border-top:1px solid rgba(154,116,66,.5); border-bottom:1px solid rgba(154,116,66,.5); } html[data-tema="luz"] .cartelito{ background:radial-gradient(120% 120% at 30% 12%, #EFE3D6 0%, var(--tarjeta) 58%, #E2D2BC 100%); box-shadow:0 14px 36px rgba(16,45,81,.16); } html[data-tema="luz"] .cartelito .icono{color:rgba(16,45,81,.22);} html[data-tema="luz"] .retrato{ background:radial-gradient(120% 120% at 30% 12%, #EFE3D6 0%, var(--tarjeta) 58%, #E2D2BC 100%); } html[data-tema="luz"] .retrato .icono{color:rgba(16,45,81,.22);} html[data-tema="luz"] .llamado{ background:linear-gradient(160deg, #FFFFFF, var(--tarjeta)); box-shadow:0 16px 50px rgba(16,45,81,.12), 0 0 50px rgba(194,155,101,.12); } html[data-tema="luz"] .ventana{ background:linear-gradient(170deg, #FFFFFF, #F7F0E7 60%, #EFE3D0); box-shadow:0 -10px 80px rgba(16,45,81,.25); } html[data-tema="luz"] .ventana .cerrar{background:rgba(255,255,255,.85);} html[data-tema="luz"] .ventana-fondo{background:rgba(23,35,52,.5);} html[data-tema="luz"] .video-pendiente, html[data-tema="luz"] .ventana .video-pendiente{ background:radial-gradient(110% 110% at 50% 0%, var(--color-marfil-suave), #F2E9DF); } html[data-tema="luz"] footer{ background:linear-gradient(180deg, var(--noche), #EFE3D0); border-top:1px solid rgba(154,116,66,.35); } html[data-tema="luz"] .reproductor .flecha-play{color:#F0E6D6;} /* ============================================================ 6. PLATAFORMA.HTML — la casa de las alumnas ============================================================ */ html[data-tema="luz"] body::-webkit-scrollbar-thumb{ background:linear-gradient(var(--color-dorado-premium), var(--color-marfil-suave)); } html[data-tema="luz"] .boton-salir{ border-color:rgba(16,45,81,.35); color:var(--color-azul-principal); } html[data-tema="luz"] .cartelera .fondo{ background: radial-gradient(90% 70% at 80% 10%, rgba(230,215,194,.9) 0%, transparent 60%), radial-gradient(70% 60% at 15% 90%, rgba(194,155,101,.25) 0%, transparent 55%), radial-gradient(120% 100% at 50% 30%, #F4ECE2 0%, #F1E8DC 55%, var(--noche) 100%); } html[data-tema="luz"] .cartelera .velo{ background:linear-gradient(180deg, rgba(249,243,241,.18) 0%, rgba(249,243,241,.5) 55%, var(--noche) 100%), linear-gradient(90deg, rgba(249,243,241,.8) 0%, rgba(249,243,241,.16) 55%, rgba(249,243,241,.38) 100%); } @media (max-width:760px){ html[data-tema="luz"] .cartelera .velo{ background:linear-gradient(180deg, rgba(249,243,241,.1) 0%, rgba(249,243,241,.18) 40%, rgba(249,243,241,.8) 68%, var(--noche) 96%); } } html[data-tema="luz"] .cartelera h2{text-shadow:0 2px 30px rgba(249,243,241,.85);} html[data-tema="luz"] .cartelera p{text-shadow:0 1px 14px rgba(249,243,241,.85);} html[data-tema="luz"] .chip-lanzamiento{background:rgba(249,243,241,.72); box-shadow:0 0 24px rgba(194,155,101,.25);} html[data-tema="luz"] .puntos button{background:rgba(16,45,81,.18);} html[data-tema="luz"] .puntos button.activo{background:var(--grad-oro);} html[data-tema="luz"] .flecha-car{background:rgba(255,255,255,.85); box-shadow:0 4px 18px rgba(16,45,81,.18), 0 0 18px rgba(194,155,101,.3);} html[data-tema="luz"] .cartel{ background:radial-gradient(120% 120% at 30% 12%, #EFE3D6 0%, var(--tarjeta) 58%, #E2D2BC 100%); } html[data-tema="luz"] .cartel:hover{box-shadow:0 22px 50px rgba(16,45,81,.22), 0 0 0 1px rgba(194,155,101,.55), 0 0 42px rgba(194,155,101,.25);} html[data-tema="luz"] .cartel .adorno{color:rgba(16,45,81,.2); text-shadow:none;} html[data-tema="luz"] .cartel .velo{ background:linear-gradient(180deg, rgba(249,243,241,0) 32%, rgba(249,243,241,.55) 68%, rgba(249,243,241,.97) 100%); } html[data-tema="luz"] .insignia.candado{background:rgba(255,255,255,.78);} html[data-tema="luz"] .insignia.tuya{background:rgba(46,107,82,.12); border-color:rgba(46,107,82,.55); color:#2E6B52;} html[data-tema="luz"] .publi-sello{background:rgba(255,255,255,.8); color:var(--color-azul-principal);} html[data-tema="luz"] .cartel .avance-mini{background:rgba(16,45,81,.14);} html[data-tema="luz"] .banda-dorada{ background:linear-gradient(180deg, #F3E9D8 0%, var(--color-marfil-suave) 45%, #D9C4A0 100%); border-top:1px solid rgba(154,116,66,.5); border-bottom:1px solid rgba(154,116,66,.5); box-shadow:inset 0 18px 60px rgba(194,155,101,.18), inset 0 -18px 60px rgba(194,155,101,.16); } html[data-tema="luz"] .banda-dorada .flecha-car{background:rgba(255,255,255,.92);} html[data-tema="luz"] .detalle-portada .fondo{ background:radial-gradient(110% 90% at 75% 0%, var(--color-marfil-suave) 0%, #F2E9DF 55%, var(--noche) 100%); } html[data-tema="luz"] .detalle-portada .velo{ background:linear-gradient(180deg, rgba(249,243,241,.28) 0%, rgba(249,243,241,.7) 60%, var(--noche) 100%); } html[data-tema="luz"] .barra-volver{ background:linear-gradient(180deg, rgba(249,243,241,.97), rgba(249,243,241,.86)); box-shadow:0 8px 24px rgba(16,45,81,.12); } html[data-tema="luz"] .barra{background:rgba(16,45,81,.12);} html[data-tema="luz"] .leccion{border-bottom:1px solid rgba(16,45,81,.08);} html[data-tema="luz"] .caja-compra, html[data-tema="luz"] .caja-proxima{ background:linear-gradient(160deg, #FFFFFF, var(--tarjeta)); box-shadow:0 12px 40px rgba(16,45,81,.12), 0 0 40px rgba(194,155,101,.1); } html[data-tema="luz"] .material{background:linear-gradient(160deg, #FFFFFF, var(--tarjeta));} html[data-tema="luz"] .reproductor .controles{background:#EFE3D0; border-top:1px solid rgba(154,116,66,.4);} html[data-tema="luz"] .reproductor .controles .ctrl{background:#FFFFFF; color:var(--color-azul-principal); border-color:rgba(154,116,66,.5);} html[data-tema="luz"] .reproductor .controles .ctrl.pantalla{background:var(--grad-oro); color:#2A1508;} html[data-tema="luz"] .reproductor .controles .tiempo{color:var(--color-azul-principal);} html[data-tema="luz"] .reproductor .controles .barra-tiempo::-webkit-slider-runnable-track{ background:linear-gradient(90deg, var(--color-dorado-premium) 0%, var(--color-dorado-premium) var(--avance,0%), rgba(16,45,81,.18) var(--avance,0%), rgba(16,45,81,.18) 100%); } html[data-tema="luz"] .reproductor .controles .barra-tiempo::-moz-range-track{background:rgba(16,45,81,.18);} html[data-tema="luz"] .cap-fondo{background:rgba(23,35,52,.55);} html[data-tema="luz"] .cap-tarjeta{ background:linear-gradient(165deg, #FFFFFF, var(--tarjeta)); box-shadow:0 30px 90px rgba(16,45,81,.25), 0 0 60px rgba(194,155,101,.12); } html[data-tema="luz"] .cap-cerrar{background:rgba(255,255,255,.7);} html[data-tema="luz"] .biv-card{background:#FFFFFF;} html[data-tema="luz"] .biv-foto{background-color:var(--color-marfil-suave);} html[data-tema="luz"] .tour-globo{ background:linear-gradient(165deg, #FFFFFF, var(--tarjeta)); box-shadow:0 26px 70px rgba(16,45,81,.28), 0 0 44px rgba(194,155,101,.15); } html[data-tema="luz"] .tour-globo::after{background:#FFFFFF;} @keyframes focoPulsoLuz{ 0%,100%{box-shadow:0 0 0 9999px rgba(20,32,48,.6), 0 0 18px rgba(194,155,101,.4), inset 0 0 14px rgba(194,155,101,.18);} 50% {box-shadow:0 0 0 9999px rgba(20,32,48,.6), 0 0 34px rgba(194,155,101,.72), inset 0 0 20px rgba(194,155,101,.32);} } html[data-tema="luz"] .tour-foco{animation-name:focoPulsoLuz;} html[data-tema="luz"] .cert-input{background:#FFFFFF;} /* ============================================================ 7. CALCULADORA.HTML — Cose y Cobra ============================================================ */ html[data-tema="luz"] .barra-precio{ background:linear-gradient(180deg, #FFFFFF, var(--tarjeta)); box-shadow:0 8px 22px rgba(16,45,81,.14); } html[data-tema="luz"] .card{background:linear-gradient(168deg, #FFFFFF, var(--tarjeta));} html[data-tema="luz"] .cat{background:#FFFFFF;} html[data-tema="luz"] .builder-toggle{background:#FFFFFF;} html[data-tema="luz"] .mat{background:#FFFFFF;} html[data-tema="luz"] .seg{background:rgba(255,255,255,.75);} html[data-tema="luz"] .result{ background:linear-gradient(165deg, #FFFFFF, #F0E6D9); box-shadow:0 18px 44px rgba(16,45,81,.14), 0 0 40px rgba(194,155,101,.14); } html[data-tema="luz"] .ref{background:rgba(16,45,81,.05);} html[data-tema="luz"] .opt{background:#FFFFFF;} html[data-tema="luz"] .final{background:linear-gradient(160deg, #FFFFFF, var(--tarjeta));} html[data-tema="luz"] .final .money{background:#FFFFFF;} html[data-tema="luz"] .money{background:#FFFFFF;} html[data-tema="luz"] .quote-box{background:#FFFFFF;} html[data-tema="luz"] .btn-pdf, html[data-tema="luz"] .saved-btn{background:#FFFFFF;} html[data-tema="luz"] .x, html[data-tema="luz"] .mat-x{background:#FFFFFF;} html[data-tema="luz"] .save{background:rgba(194,155,101,.16);} /* estados SELECCIONADOS: que no pierdan su dorado en modo luz */ html[data-tema="luz"] .cat.on{background:var(--grad-oro); color:#2A1508;} html[data-tema="luz"] .opt.on{background:rgba(194,155,101,.16);} /* ============================================================ 8. LECTOR.HTML — el libro ============================================================ */ html[data-tema="luz"] .flecha{background:rgba(255,255,255,.85); box-shadow:0 4px 18px rgba(16,45,81,.16), 0 0 18px rgba(194,155,101,.25);} html[data-tema="luz"] .nav-tactil .btn-ant{background:rgba(255,255,255,.8); color:var(--color-azul-principal); border-color:rgba(154,116,66,.55);} html[data-tema="luz"] .panel-indice{background:rgba(23,35,52,.5);} html[data-tema="luz"] .panel-caja{ background:linear-gradient(170deg, #FFFFFF, var(--tarjeta)); border:1px solid rgba(154,116,66,.5); } @media (orientation: landscape) and (max-height:600px){ html[data-tema="luz"] .flecha{background:rgba(255,255,255,.7);} } /* entrar / lector / calculadora: encabezados, pies y bloqueos oscuros → claros */ html[data-tema="luz"] .bloqueo{ background:radial-gradient(120% 90% at 50% 0%, var(--color-marfil-suave) 0%, var(--noche) 70%); } /* ============================================================ 9. PANEL-CAROLINA.HTML — el panel privado ============================================================ */ html[data-tema="luz"] .cifra-caja{background:linear-gradient(165deg, #FFFFFF, var(--tarjeta));} html[data-tema="luz"] .cifra-caja:hover{box-shadow:0 12px 30px rgba(16,45,81,.14), 0 0 24px rgba(194,155,101,.2);} html[data-tema="luz"] .pestanas button{background:rgba(255,255,255,.75);} html[data-tema="luz"] .pestanas button.activa{background:var(--grad-oro); color:#2A1508; border-color:transparent;} html[data-tema="luz"] .producto{background:#FFFFFF;} html[data-tema="luz"] .producto.marcado{background:rgba(194,155,101,.16);} html[data-tema="luz"] .codigo-grande{background:#FFFFFF; text-shadow:none; color:#8A6136;} html[data-tema="luz"] .alumna{background:#FFFFFF;} html[data-tema="luz"] .etiqueta.origen.manual{background:rgba(53,80,126,.1); border-color:rgba(53,80,126,.5); color:#35507E;} html[data-tema="luz"] .etiqueta.origen.auto2{background:rgba(46,107,82,.1); border-color:rgba(46,107,82,.5); color:#2E6B52;} /* ============================================================ 10. PATRONES.HTML — el Motor de Patrones (el lienzo #FBF7EF y la impresión NO cambian: el patrón se imprime igual en los dos modos) ============================================================ */ html[data-tema="luz"] .mini-foto button{background:rgba(255,255,255,.9); color:var(--color-azul-principal);} html[data-tema="luz"] .verif .alerta b{color:#A9702A;} /* ============================================================ Encabezados y pies con degradado oscuro → versión clara (calculadora, lector, panel, plataforma e index comparten la misma receta de "vidrio" claro) ============================================================ */ html[data-tema="luz"] header{ background:linear-gradient(180deg, rgba(249,243,241,.97), rgba(249,243,241,.84)); border-bottom:1px solid rgba(154,116,66,.35); } html[data-tema="luz"] footer{ background:linear-gradient(180deg, var(--noche), #EFE3D0); border-top:1px solid rgba(154,116,66,.35); }