/* Recepta · modo noche: fondo casi negro azulado, tarjetas apenas más claras con borde fino,
   cobalto y menta más luminosos para que se lean bien. Se activa con <html data-tema="oscuro"> (tema.js). */
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --niebla: #0b0e1a;
  --hoja: #121627;
  --perla: #252c43;
  --perla-suave: #1a2034;
  --tinta: #e7eaf4;
  --pizarra: #8d96ad;
  --cobalto: #5f74ff;
  --cobalto-hondo: #7b8cff;
  --cobalto-suave: rgba(95, 116, 255, 0.15);
  --menta: #22d3a6;
  --menta-texto: #4fe0bb;
  --menta-suave: rgba(34, 211, 166, 0.13);
  --ambar: #f5a524;
  --ambar-texto: #f7c35f;
  --ambar-suave: rgba(245, 165, 36, 0.13);
  --error: #ff6b81;
  --error-suave: rgba(255, 107, 129, 0.13);
  --si: #22d3a6; --si-suave: rgba(34, 211, 166, 0.13);
  --no: #ff6b81; --no-suave: rgba(255, 107, 129, 0.13);
  --logo-r: #7b8cff;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.25);
  --foco: 0 0 0 3px rgba(95, 116, 255, 0.35);
}

/* Cambio de tema: el modo nuevo se expande en círculo desde el botón, con el borde difuminado (tema.js) */
.tema-expandiendo::view-transition-old(root), .tema-expandiendo::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.tema-expandiendo::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--tema-x) var(--tema-y), #000 calc(var(--tema-r) - var(--tema-borde)), transparent var(--tema-r));
  mask-image: radial-gradient(circle at var(--tema-x) var(--tema-y), #000 calc(var(--tema-r) - var(--tema-borde)), transparent var(--tema-r));
}
/* Donde el navegador no tiene transiciones de vista: fundido corto de colores */
.cambiando-tema, .cambiando-tema * { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; }

/* ---- Botón sol / luna ---- */
.boton-tema {
  width: 34px; height: 34px; padding: 0; flex: none; border-radius: 10px;
  display: inline-grid; place-items: center; color: var(--pizarra); background: var(--hoja); border: 1px solid var(--perla);
}
.boton-tema:hover { color: var(--tinta); background: var(--perla-suave); }
.boton-tema svg { width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.boton-tema:hover svg { transform: rotate(25deg); }
.boton-tema.flotante { position: absolute; top: 18px; right: 18px; }
.ingreso .panel { position: relative; }
header.barra .boton-tema { margin-left: auto; }
.tarjeta .arriba .boton-tema { margin-left: 8px; }

/* ---- Lo que tenía colores fijos de modo día ---- */
[data-tema='oscuro'] header.barra { background: rgba(11, 14, 26, 0.88); }
[data-tema='oscuro'] .barra-acciones { background: rgba(11, 14, 26, 0.92); }
[data-tema='oscuro'] button:hover, [data-tema='oscuro'] .boton:hover { border-color: #343d5a; background: var(--perla-suave); }
[data-tema='oscuro'] .primario, [data-tema='oscuro'] .primario:hover { color: #fff; }
[data-tema='oscuro'] .primario:hover { background: var(--cobalto-hondo); border-color: var(--cobalto-hondo); }
[data-tema='oscuro'] input::placeholder, [data-tema='oscuro'] textarea::placeholder { color: #5f6880; }
[data-tema='oscuro'] .chip.lleno, [data-tema='oscuro'] .calculo .total { border-color: rgba(95, 116, 255, 0.45); }
[data-tema='oscuro'] .segmentos button:hover { background: rgba(255, 255, 255, 0.05); }
[data-tema='oscuro'] .segmentos button.activo { background: var(--hoja); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
[data-tema='oscuro'] .toast { background: #222a44; color: var(--tinta); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
[data-tema='oscuro'] a.toast, [data-tema='oscuro'] a.toast:hover { color: var(--tinta); }
[data-tema='oscuro'] .en-proceso { border-bottom-color: rgba(95, 116, 255, 0.3); }
[data-tema='oscuro'] .velo, [data-tema='oscuro'] .ventana-fondo, [data-tema='oscuro'] .cajon-fondo { background: rgba(0, 0, 0, 0.55); }
[data-tema='oscuro'] .ventana, [data-tema='oscuro'] .cajon { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); border: 1px solid var(--perla); }
[data-tema='oscuro'] .regla .marca-precio { border-color: var(--hoja); }
[data-tema='oscuro'] .regla .marca-precio.anterior { background: var(--hoja); box-shadow: 0 0 0 1px #5f6880; }
[data-tema='oscuro'] .visor-imagen { background: #fff; }

/* Marcas y ✓ / ✕ */
[data-tema='oscuro'] .tarjeta-marca:hover { border-color: #343d5a; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); }
[data-tema='oscuro'] .logo-caja, [data-tema='oscuro'] .mini { background: var(--perla-suave); }
/* Los logos de las marcas van sobre fondo claro, como en papel */
[data-tema='oscuro'] .logo-caja:has(img), [data-tema='oscuro'] .mini:has(img) { background: #f4f6fb; }
[data-tema='oscuro'] .logo-caja.oscuro, [data-tema='oscuro'] .mini.oscuro { background: #05070d; }
[data-tema='oscuro'] .tarjeta-marca.todas .logo-caja, [data-tema='oscuro'] .todas-mini { background: var(--cobalto-suave); }
[data-tema='oscuro'] .compro button { color: #4a5370; }
[data-tema='oscuro'] .masivo.si { border-color: rgba(34, 211, 166, 0.35); }
[data-tema='oscuro'] .masivo.si:hover { background: rgba(34, 211, 166, 0.2); }
[data-tema='oscuro'] .masivo.no { border-color: rgba(255, 107, 129, 0.35); }
[data-tema='oscuro'] .masivo.no:hover { background: rgba(255, 107, 129, 0.2); }

/* Inventario */
[data-tema='oscuro'] .tareas-hoy li a:hover { border-color: rgba(95, 116, 255, 0.45); }
[data-tema='oscuro'] .mensaje-wa { background: #12301f; border-color: #1d4a30; color: #d7f5e1; }
[data-tema='oscuro'] .grafico line { stroke: var(--perla); }
[data-tema='oscuro'] .grafico circle { fill: var(--hoja); }
[data-tema='oscuro'] .grafico [data-serie='Promedio general'] polyline,
[data-tema='oscuro'] .grafico [data-serie='Promedio general'] circle { stroke: var(--tinta); }
[data-tema='oscuro'] .leyenda [data-serie-boton='Promedio general'] i { background: var(--tinta) !important; }
[data-tema='oscuro'] .anillo circle:first-child { stroke: var(--perla-suave); }
/* Las etiquetas de góndola se ven como en papel */
[data-tema='oscuro'] .etiqueta-gondola { background: #fff; color: #141a33; border-color: #5f6880; }
[data-tema='oscuro'] .etiqueta-gondola .pre { color: #141a33; }
[data-tema='oscuro'] .etiqueta-gondola .prov, [data-tema='oscuro'] .etiqueta-gondola .tenue { color: #6b7489; }

/* Pantalla Cargar documento (cargar.html tiene sus propios estilos) */
[data-tema='oscuro'] .tarjeta, [data-tema='oscuro'] .archivo, [data-tema='oscuro'] .formatos span,
[data-tema='oscuro'] input[type=text], [data-tema='oscuro'] .tarjeta textarea { background: var(--hoja); }
[data-tema='oscuro'] body > .tarjeta { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
[data-tema='oscuro'] .zona:not(:hover):not(.arrastrando) { border-color: rgba(95, 116, 255, 0.4); }
[data-tema='oscuro'] .volver:hover { background: rgba(95, 116, 255, 0.25); }
[data-tema='oscuro'] .marca svg path[stroke='#2b4bff'] { stroke: #7b8cff; }