/* ═══════════════════════════ MODO OSCURO ═══════════════════════════════
   Mismo lenguaje del shot, en vidrio oscuro: fondo casi negro con brillos
   lavanda/verde/rosa/azul, superficies translúcidas y bordes finos de luz.
   Se activa con <html data-oscuro> (lo pone la app según Ajustes → Apariencia). */
html[data-oscuro] {
  --tinta: #f3f1f7;
  --tinta-2: #d2cddb;
  --gris: #9b95a8;
  --gris-2: #6f6980;
  --linea: rgba(255, 255, 255, 0.08);
  --fondo: #0f0e14;
  --fondo-2: #15131b;
  --vidrio: rgba(38, 35, 48, 0.66);
  --vidrio-fuerte: rgba(38, 35, 48, 0.84);
  --blanco-v: rgba(255, 255, 255, 0.08);
  --blanco-v2: rgba(255, 255, 255, 0.12);
  --borde-v: rgba(255, 255, 255, 0.1);
  --salvia-2: rgba(195, 220, 168, 0.16);
  --sombra-s: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  --sombra-m: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
  --sombra-l: 0 10px 30px rgba(0, 0, 0, 0.45), 0 30px 80px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
html[data-oscuro] #app { background: linear-gradient(180deg, #121019 0%, #100f16 55%, #170f17 100%); }
@media (min-width: 520px) {
  html[data-oscuro] body { background: radial-gradient(1200px 800px at 50% 0%, #1c1926 0%, #121019 60%, #0b0a0f 100%); }
  html[data-oscuro] #app { box-shadow: var(--sombra-l), 0 0 0 10px rgba(255, 255, 255, 0.04); }
}
html[data-oscuro] .mancha { opacity: 0.5; }
html[data-oscuro] .m1 { background: #3b2d6e; }
html[data-oscuro] .m2 { background: #2b4a26; }
html[data-oscuro] .m3 { background: #55213b; }
html[data-oscuro] .m4 { background: #1d3a78; opacity: 0.4; }

/* bordes de luz: finos, no blancos gruesos */
html[data-oscuro] :is(.panel, .ficha, .mosaico, .msj .burbuja, .tarjeta, .escribiendo, .sugerencia, .segmentos, .renglon, .alarma,
  .buscador, .etiqueta, .nota-c, .seccion .caja-s, .deslizador, .teclado button, .mini-circulos span, .opcion, .entrada, .chip, .boton.claro) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--sombra-s);
}
html[data-oscuro] .circulo:not(.azul):not(.vacio):not(.mas) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), var(--sombra-s); }
html[data-oscuro] .circulo.gris { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .circulo .punto { box-shadow: 0 0 0 2px var(--fondo); }

html[data-oscuro] .orbe { background: #2a2638; box-shadow: 0 10px 34px rgba(120, 90, 220, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

html[data-oscuro] .panel.verde {
  background: linear-gradient(180deg, rgba(76, 104, 56, 0.55) 0%, rgba(50, 76, 38, 0.62) 100%);
  box-shadow: inset 0 0 0 1px rgba(195, 220, 168, 0.16), 0 8px 28px rgba(0, 0, 0, 0.3);
}
html[data-oscuro] .panel .divisor { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .ficha.verde { background: rgba(195, 220, 168, 0.13); }
html[data-oscuro] .destacado { background: rgba(255, 255, 255, 0.06); }
html[data-oscuro] .mini-circulos span { background: rgba(255, 255, 255, 0.09); }

html[data-oscuro] .hoja-mosaicos { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
html[data-oscuro] .hoja-mosaicos::before { background: rgba(255, 255, 255, 0.16); }
html[data-oscuro] .mosaico { background: linear-gradient(160deg, rgba(54, 50, 68, 0.86) 0%, rgba(32, 30, 42, 0.86) 100%); }
html[data-oscuro] .mosaico .pie .circulo { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
html[data-oscuro] .mosaico .brillo { background: radial-gradient(180px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.14), transparent 60%); }
html[data-oscuro] .mosaico .contador:not(.rojo) { background: rgba(255, 255, 255, 0.14); color: var(--tinta); }

html[data-oscuro] .caja { background: rgba(36, 33, 46, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.4); }
html[data-oscuro] .caja textarea::placeholder { color: rgba(243, 241, 247, 0.4); }
html[data-oscuro] .caja .circulo:not(.mas):not(.grabando) { background: #f3f1f7; color: #121016; }

html[data-oscuro] .nav .barra { background: rgba(28, 26, 36, 0.74); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 34px rgba(0, 0, 0, 0.45); }
html[data-oscuro] .nav button:not(.activo) { background: rgba(255, 255, 255, 0.08); }

html[data-oscuro] .msj.yo .burbuja { background: rgba(255, 255, 255, 0.07); }
html[data-oscuro] .msj.genie .burbuja { background: rgba(255, 255, 255, 0.1); }
html[data-oscuro] .msj .acciones .circulo { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .msj.error .burbuja { background: rgba(239, 74, 60, 0.16); color: #ffb3ab; }
html[data-oscuro] .burbuja code, html[data-oscuro] .codigo { background: rgba(255, 255, 255, 0.09); }
html[data-oscuro] .tarjeta { background: linear-gradient(160deg, rgba(58, 54, 72, 0.96), rgba(38, 35, 48, 0.94)); }
html[data-oscuro] .tarjeta .mini-ilus { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .escribiendo { background: rgba(255, 255, 255, 0.09); }
html[data-oscuro] .sugerencia { background: rgba(255, 255, 255, 0.07); }

html[data-oscuro] .segmentos { background: rgba(255, 255, 255, 0.06); }
html[data-oscuro] .segmentos .pastilla { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
html[data-oscuro] .segmentos button .n { background: rgba(255, 255, 255, 0.1); }
html[data-oscuro] :is(.renglon, .alarma, .nota-c, .buscador, .seccion .caja-s, .opcion, .entrada, .chip) { background: rgba(255, 255, 255, 0.07); }
html[data-oscuro] .renglon .ico-c { background: rgba(255, 255, 255, 0.1); }
html[data-oscuro] .renglon .ico-c.azul { background: rgba(38, 132, 252, 0.2); color: #6fb0ff; }
html[data-oscuro] .renglon .ico-c.verde { background: rgba(195, 220, 168, 0.16); color: #b7dc95; }
html[data-oscuro] .renglon .ico-c.rojo { background: rgba(239, 74, 60, 0.2); }
html[data-oscuro] .renglon.sonando { background: linear-gradient(135deg, rgba(239, 74, 60, 0.24), rgba(239, 74, 60, 0.1)); }
html[data-oscuro] .nota-c.fijada { background: linear-gradient(170deg, rgba(76, 104, 56, 0.5), rgba(50, 76, 38, 0.55)); }
html[data-oscuro] .etiqueta { background: rgba(255, 255, 255, 0.07); }
html[data-oscuro] :is(.etiqueta.activo, .chip.si) { background: #f3f1f7; color: #121016; box-shadow: none; }
html[data-oscuro] .dias i { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .dias i.si { background: var(--azul); color: #fff; }
html[data-oscuro] .interruptor { background: rgba(255, 255, 255, 0.16); }
html[data-oscuro] .interruptor.si { background: #30d158; }
html[data-oscuro] .prioridad { background: rgba(255, 138, 61, 0.18); color: #ffad73; }
html[data-oscuro] .md blockquote { background: rgba(195, 220, 168, 0.1); }
html[data-oscuro] .barra-herr .grupo { background: rgba(30, 28, 38, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--sombra-m); }
html[data-oscuro] .ajuste .estado-ok { color: #4cd27a; }

html[data-oscuro] .boton:not(.azul):not(.rojo):not(.claro) { background: #f3f1f7; color: #121016; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
html[data-oscuro] .boton.claro { background: rgba(255, 255, 255, 0.1); color: var(--tinta); }

html[data-oscuro] .velo { background: rgba(0, 0, 0, 0.45); }
html[data-oscuro] .hoja { background: rgba(24, 22, 31, 0.96); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-oscuro] .hoja .asa::before { background: rgba(255, 255, 255, 0.22); }
html[data-oscuro] .reloj-sel .marco { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
html[data-oscuro] .barra-uso, html[data-oscuro] .linea-tiempo::before { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .evento::before { box-shadow: 0 0 0 3px #17151d; }

html[data-oscuro] .teclado button { background: rgba(255, 255, 255, 0.08); }
html[data-oscuro] .teclado button:active { background: rgba(255, 255, 255, 0.22); }
html[data-oscuro] .teclado button.vacio { background: none; box-shadow: none; }
html[data-oscuro] .puntos-pin i { background: rgba(255, 255, 255, 0.16); }
html[data-oscuro] .puntos-pin i.si { background: #f3f1f7; }
html[data-oscuro] .aviso { background: rgba(58, 54, 70, 0.96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.45); }
html[data-oscuro] .esqueleto { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%); background-size: 200% 100%; }

/* pantalla de recordatorio sonando (la de alarma ya es oscura) */
html[data-oscuro] .sonando-p:not(.alarma-t) { background: linear-gradient(180deg, #131120 0%, #191a33 45%, #2a1a30 100%); color: #fff; }
html[data-oscuro] .sonando-p:not(.alarma-t) .deslizador { background: rgba(255, 255, 255, 0.12); }
html[data-oscuro] .sonando-p:not(.alarma-t) .deslizador .texto-d { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, #fff 50%, rgba(255, 255, 255, 0.35) 100%); }
html[data-oscuro] .sonando-p:not(.alarma-t) .boton.claro { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* selector de apariencia (Ajustes) */
.apariencia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.apariencia button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 12px; border-radius: 20px; font-size: 14px; color: var(--tinta-2); transition: background 0.3s, transform 0.45s var(--resorte); }
.apariencia button.si { background: rgba(38, 132, 252, 0.12); color: var(--azul); font-weight: 500; }
.apariencia .muestra { width: 64px; height: 92px; border-radius: 16px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.25), var(--sombra-s); }
.apariencia .muestra i { position: absolute; left: 8px; right: 8px; height: 14px; border-radius: 7px; }
.apariencia .muestra i:nth-child(1) { top: 10px; width: 22px; right: auto; border-radius: 50%; height: 22px; background: conic-gradient(#b9a8ff, #8fc6ff, #c3dca8, #ffd6e4, #b9a8ff); }
.apariencia .muestra i:nth-child(2) { top: 40px; }
.apariencia .muestra i:nth-child(3) { top: 60px; width: 60%; }
.apariencia .claro { background: linear-gradient(180deg, #f3f1f6, #f7eff2); }
.apariencia .claro i:nth-child(n+2) { background: rgba(21, 20, 23, 0.1); }
.apariencia .oscuro { background: linear-gradient(180deg, #121019, #170f17); }
.apariencia .oscuro i:nth-child(n+2) { background: rgba(255, 255, 255, 0.14); }
.apariencia .auto { background: linear-gradient(135deg, #f3f1f6 50%, #121019 50%); }
.apariencia .auto i:nth-child(n+2) { background: rgba(127, 127, 127, 0.3); }

/* cambio de tema suave (respaldo cuando no hay View Transitions) */
html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
  transition: background-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease !important;
}