/* ===== Tema claro / oscuro de The Salmon's Academy =====
   El modo oscuro es el diseño original (los valores de cada pantalla). Aquí solo se definen
   los extras y el modo claro, que se activa con <html data-tema="claro">. */
:root{ --on-accent:#16120d; --sombra-fuerte:rgba(0,0,0,.55); color-scheme:dark; }

html[data-tema="claro"]{
  color-scheme:light;
  --bg:#f3ecdf; --surface:#fffaf1; --surface-2:#e9dfcb; --surface-alt:#f8f1e4;
  --text-1:#2b2218; --text-2:#54462f; --text-3:#6f5f46;
  --accent:#8a6114; --accent-2:#b98a2e; --accent-soft:rgba(138,97,20,.12);
  --hairline:rgba(138,97,20,.28);
  --on-accent:#fffaf1; --sombra-fuerte:rgba(74,52,16,.18);
}
html[data-tema="claro"] body{ background:var(--surface-2); }
/* En el celular la app ocupa todo el ancho: el fondo de detrás se iguala al de la app para que no asome ninguna raya en el borde */
@media (max-width:520px){
  html, html[data-tema="claro"] body:has(> .marco), body:has(> .marco){ background:var(--bg) !important; }
  .marco{ box-shadow:none !important; }
}

/* Zonas que siempre se ven oscuras (video, fotos con texto encima): conservan los colores del modo oscuro */
html[data-tema="claro"] #intro-cine,
html[data-tema="claro"] .plan-video,
html[data-tema="claro"] .tour-overlay,
html[data-tema="claro"] .overlay-ejercicio{
  --bg:#16120d; --surface:#201a12; --surface-2:#0f0c08; --surface-alt:#1b1610;
  --text-1:#f1e7d2; --text-2:#b6a482; --text-3:#a99a78;
  --accent:#cda75f; --accent-2:#8a6a35; --accent-soft:rgba(205,167,95,.12); --hairline:rgba(205,167,95,.22);
  --on-accent:#16120d;
}

/* Íconos y trazos que traen el dorado escrito a mano */
[stroke="#cda75f"]{ stroke:var(--accent); }
[fill="#cda75f"]{ fill:var(--accent); }

/* Botón del tema */
.tema-btn{ width:40px; height:40px; min-width:40px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface);
  color:var(--text-1); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0;
  transition:transform 140ms ease, border-color 200ms ease; }
.tema-btn:hover{ border-color:var(--accent); }
.tema-btn:active{ transform:scale(.94); }
.tema-btn svg{ width:18px; height:18px; display:block; }
.tema-btn .ic-sol{ display:none; } .tema-btn .ic-luna{ display:block; }
html[data-tema="claro"] .tema-btn .ic-sol{ display:block; } html[data-tema="claro"] .tema-btn .ic-luna{ display:none; }
.tema-grupo{ display:flex; align-items:center; gap:10px; }
.tema-flotante{ position:fixed; top:12px; right:12px; z-index:60; }

/* Cambio suave de tema (solo mientras se cambia, y no para quien tiene el movimiento reducido) */
@media (prefers-reduced-motion: no-preference){
  html.tema-anim, html.tema-anim *{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important; }
}

/* Stickers en modo claro: tema.js los aplana sobre su oscuro original (se ven igual que en modo oscuro).
   Mientras se preparan se ocultan un instante para que no se vea el dibujo deslavado. */
html[data-tema="claro"] img[src*="/sticker-"]:not([src*="/cut/"]):not([data-st-fallo]){ opacity:0; }
html[data-tema="claro"] img[data-st-flat]{ filter:drop-shadow(0 6px 8px rgba(74,52,16,.3)) !important; }
html[data-tema="claro"] .red-tile img[data-st-flat], html[data-tema="claro"] .pd-tile img[data-st-flat]{ filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)) !important; }

/* Parpadeo guía ("toca aquí") más intenso en claro, para que se note de lejos */
@keyframes orygnFlasheaClaro{
  0%,100%{ box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
  50%{ box-shadow:0 0 0 6px var(--accent), 0 0 34px 10px color-mix(in oklab, var(--accent) 70%, transparent); }
}
html[data-tema="claro"] .flashea{
  animation:orygnFlasheaClaro 1.2s ease-in-out infinite;
  background-image:linear-gradient(color-mix(in oklab, var(--accent) 24%, transparent), color-mix(in oklab, var(--accent) 24%, transparent));
}
html[data-tema="claro"] .flashea > .guia-chip{ font-size:12.5px; padding:5px 12px; box-shadow:0 6px 16px -4px color-mix(in oklab, var(--accent) 80%, transparent); }
@media (prefers-reduced-motion: reduce){ html[data-tema="claro"] .flashea{ animation:none; outline:4px solid var(--accent); } }

/* Reproductor de ejercicio: es como un video a pantalla completa, así que el texto va en blanco sobre un degradado oscuro */
html[data-tema="claro"] .overlay-ejercicio .ov-nombre{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55); }
html[data-tema="claro"] .overlay-ejercicio .ov-sub{ color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.55); }
html[data-tema="claro"] .overlay-ejercicio .ov-timer{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); }
html[data-tema="claro"] .overlay-ejercicio .ov-progreso-txt{ color:rgba(255,255,255,.85); }

/* Encabezado de la app: el nombre queda en 2 renglones cortos (THE SALMON'S / ACADEMY), nunca en columna */
.marca-top{ gap:6px; padding-left:16px !important; padding-right:16px !important; }
.marca-top .id{ min-width:0; flex:1 1 0; gap:7px; }
.marca-top .id img{ flex-shrink:0; }
.marca-top .id span{ min-width:0; font-size:10.5px; letter-spacing:.04em; line-height:1.22; overflow-wrap:normal; word-break:keep-all; text-wrap:balance; }
.marca-top .acciones{ flex-shrink:0; gap:6px; }
.marca-top .tema-btn{ width:34px; height:34px; min-width:34px; }
.marca-top .icon-btn{ width:36px; height:36px; }
/* Con letra grande hay menos espacio: solo se deja el logo, para que el nombre no se parta */
html[data-txt="grande"] .marca-top .id span, html[data-txt="extra"] .marca-top .id span{ display:none; }

/* Pantalla de bienvenida del día (frase del producto o del Salmón): en modo claro es CLARA */
html[data-tema="claro"] .bienvenida-overlay{ background:color-mix(in oklab, var(--bg) 97%, transparent); }
html[data-tema="claro"] .bienvenida-overlay.alerta-roja{ background:rgb(255 244 241 / .98); }
html[data-tema="claro"] .bienvenida-overlay.alerta-roja .nube-frase{ background:#fff; border-color:#c4483a; }
html[data-tema="claro"] .bienvenida-overlay.alerta-roja .nube-frase::before{ background:#fff; border-color:#c4483a; }
html[data-tema="claro"] .bienvenida-overlay.alerta-roja .nube-frase p{ color:#5c1a12; }
html[data-tema="claro"] .bienvenida-overlay.alerta-roja .alerta-titulo{ color:#b3261e; }

/* Stickers originales (fondo negro) mostrados tal cual en modo claro: solo esquinas suaves */
/* (los stickers recortados no llevan marco ni fondo) */

/* Barra de abajo y caja para escribir: están "fijas" dentro de la zona que se agranda con el tamaño de letra,
   así que su ancho se calcula con el mismo factor (1.22 normal · 1.4 grande · 1.6 enorme) para que NUNCA se salgan de la pantalla. */
.tabbar, .caja-msj:not([hidden]){ width:calc(100vw / 1.22); box-sizing:border-box; }
html[data-txt="grande"] .tabbar, html[data-txt="grande"] .caja-msj:not([hidden]){ width:calc(100vw / 1.4); }
html[data-txt="extra"] .tabbar, html[data-txt="extra"] .caja-msj:not([hidden]){ width:calc(100vw / 1.6); }
.caja-msj:not([hidden]) input{ min-width:0; }
.caja-msj:not([hidden]) button{ flex-shrink:0; }