/* Modo oscuro: lo que las variables no alcanzan.
 *
 * Casi toda la tienda se vuelve oscura sola porque usa `var(--bg)`,
 * `var(--card)`, `var(--border)`… Pero quedan sitios con el color escrito a
 * fuego, y esos hay que decírselos uno a uno. Son pocos y están aquí. */

/* La barra lleva un rgba claro con desenfoque metido en app.css. Se conserva el
   desenfoque —es lo que hace que el contenido se vea pasar por debajo— y sólo
   se cambia el color. */
.nav-inner { background: rgba(20, 26, 34, .86) !important; }

/* Los campos de formulario del navegador: sin esto, Chrome los pinta con su
   fondo claro y el texto que escribe el cliente sale casi invisible. */
input, select, textarea {
  background: var(--muted);
  color: var(--fg);
  border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--muted-fg); opacity: 1; }

/* El autocompletado de Chrome pinta un amarillo pálido imposible de quitar con
   `background`. El truco de la sombra interior es la única forma de taparlo. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px var(--muted) inset;
  caret-color: var(--fg);
}

/* Le dice al navegador que su interfaz (barras de desplazamiento, menús de
   select, calendarios) vaya en oscuro. Sin esto salen blancos de golpe. */
:root { color-scheme: dark; }

/* El botón «outline» hereda el fondo claro del motor y quedaría texto claro
   sobre claro. */
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-outline:hover { background: var(--muted); }

/* Las imágenes de producto suelen venir con fondo blanco. Sobre un fondo
   oscuro cantan, así que se les redondea la esquina y se les pone el mismo
   fondo de tarjeta detrás para que el corte no sea brusco. */
.pcard .thumb, .thumb { background: var(--muted); }