/* 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. */
/* ⚠️ El selector lleva `:not(...)` y no es adorno: es lo que hace que la regla
   gane y que no se quede nadie fuera.

   DOS PROBLEMAS QUE ARREGLA, los dos medidos el 11-09-2026 en las 5 páginas con
   formulario de la tienda:

   1. Los campos eran INVISIBLES. `app.css:155` fija el fondo con
      `input[type=text],…` —especificidad (0,1,1)— y esta regla, con (0,0,1),
      perdía contra ella en los `input` pero ganaba en `select`/`textarea` por ir
      después. Resultado: los `input` acababan con el MISMO color exacto que la
      tarjeta que los contiene (rgb(26,26,46) contra rgb(26,26,46) — 1,00:1) y
      los desplegables con otro distinto. Dentro del mismo formulario.

      Es la misma trampa de especificidad que `marca.css` ya documenta para
      `.footer .footer-grid`. Segunda vez que muerde: cargar después no basta
      cuando el otro selector es más específico.

   2. Un campo escrito `<input name="rif">` SIN atributo `type` no casa con
      `input[type=text]` y se cae del diseño entero. Ya pasó con los campos de
      /distribuidores, que en móvil salían como rayitas de 179x21 junto a uno
      normal de 308x43. Con `:not()` se recogen todos, incluidos los que alguien
      escriba mañana sin acordarse del `type`.

   POR QUÉ EL BORDE SUBE TANTO. Sobre una tarjeta de rgb(26,26,46), el negro puro
   sólo alcanza 1,23:1: el 3:1 que pide la norma es inalcanzable oscureciendo el
   relleno. Tiene que aclararse el BORDE, y #666691 es el primer valor que cruza.

   Y 16px de cuerpo, no 15: por debajo de 16, Safari de iOS hace zoom al enfocar
   y descoloca la página entera. Pasaba en los 21 campos de la tienda. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
select,
textarea {
  background: #0F0F1C;
  color: var(--fg);
  border: 1px solid #666691;     /* 3,15:1 sobre la tarjeta */
  font-size: 16px;
  min-height: 46px;
}
textarea { min-height: 90px; }

/* Al enfocar, el borde se aclara todavía más: es la señal de dónde estás
   escribiendo, y con teclado es la única. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
select:focus,
textarea:focus {
  border-color: #8E8EC0;
  background: #12121F;
}
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); }

/* ── La etiqueta de categoría: era BLANCA SOBRE BLANCA ─────────────────────
 *
 * `app.css` le pone `background: rgba(255,255,255,.92)` —pensado para una
 * tienda de fondo claro— y `color: var(--fg)`. En tema oscuro `--fg` es casi
 * blanco, así que quedaba texto blanco sobre fondo blanco.
 *
 * Medido en el navegador sobre los colores realmente pintados: **1,14:1**.
 * El mínimo legible es 4,5:1. Era, literalmente, invisible — y es lo que
 * Rafael veía como «badges blancas».
 *
 * Se usa el fondo de la tarjeta con algo de opacidad en vez de blanco: así
 * sigue leyéndose por encima de la foto del producto, que es para lo que
 * estaba el blanco, pero con el color del tema.
 */
.pcard .chip,
.chip {
  background: rgba(10, 10, 18, .82);
  border: 1px solid var(--border);
  color: var(--fg);
}
/* La de «Destacado» ya estaba bien (6,81:1): usa el color de marca con su
   propio color de texto. No se toca. */
.pcard .chip.feat, .chip.feat {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-fg);
}