/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT.CSS — EL ASPECTO DEL PEDIDO, EN UN SOLO SITIO

   Sale de dentro de index.html para que la ficha del producto pueda
   enseñar el MISMO checkout sin copiar trescientas líneas de estilo.
   Dos copias de esto es dos formularios que se van pareciendo cada vez
   menos, y uno de los dos cobrando con reglas viejas.

   Aquí solo está lo que es del checkout. Lo que ya tenían las dos
   páginas —el marco de ventana, la letra, los colores de la marca— se
   queda donde estaba: esto se apoya en esas variables, no las repite.

   Lo carga la página ANTES de su propia hoja de estilos, para que si
   alguna vez hace falta afinar algo desde la página, la página gane.
   ═══════════════════════════════════════════════════════════════════ */

.order-btn {
  background:var(--boton-fondo);color:var(--boton-tinta);
  border:3px solid;border-color:var(--boton-luz) var(--boton-sombra) var(--boton-sombra) var(--boton-luz);
  font-family:'Press Start 2P',monospace;font-size:var(--fp-sm);
  padding:10px 20px;cursor:pointer;
  display:block;margin:16px auto;width:fit-content;
  box-shadow:4px 4px 0 #000;text-decoration:none;text-align:center;
  animation:shake 5s ease-in-out infinite;
}
/* Este hover también decía `#BE2358`, el mismo color del botón: lo
   único que se movía era el propio botón. Ahora además se aclara. */
.order-btn:hover{background:var(--boton-hover);transform:translate(4px,4px);box-shadow:none;}

/* ── Botón de WhatsApp de la pantalla de PEDIDO CONFIRMADO ──
   Va en el verde de WhatsApp porque ese color ES el cartel: se
   reconoce antes de leerlo.
   El texto va en negro y no en blanco: sobre ese verde el blanco se
   queda en 1.98 de contraste y a plena luz en el teléfono desaparece;
   el negro llega a 10.6. */
.wa-cta{
  display:block;margin:16px auto 6px;width:fit-content;max-width:100%;
  background:#25D366;color:#000;text-decoration:none;
  border:3px solid;border-color:#7BEDA8 #128C41 #128C41 #7BEDA8;
  font-family:'Press Start 2P',monospace;font-size:var(--fp-sm);
  padding:12px 18px;box-shadow:4px 4px 0 #000;
  text-align:center;line-height:1.7;overflow-wrap:anywhere;cursor:pointer;
}
.wa-cta:hover{background:#1DA851;transform:translate(4px,4px);box-shadow:none;}
.wa-cta-nota{
  font-family:'VT323',monospace;font-size:var(--fs-sm);
  color:var(--text-dark);text-align:center;line-height:1.4;
}
@keyframes shake{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-1deg)}94%{transform:rotate(1deg)}96%{transform:rotate(-1deg)}98%{transform:rotate(1deg)}}
/* ── CHECKOUT FORM ── */
.co-label {
  display:block;
  font-family:'Press Start 2P',monospace; font-size:var(--fp-sm);
  color:var(--text-dark); margin-bottom:5px; letter-spacing:.5px;
}
/* El permiso de WhatsApp. Va en el cuerpo del formulario y no en letra
   pequeña al final: es una decisión del cliente, no una condición que
   se acepta sin leer. */
.co-permiso{
  display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-family:'VT323',monospace; font-size:var(--fs-base);
  color:var(--text-dark); line-height:1.35;
  /* `--border-gray`, no `--midnight`: esa variable NO EXISTE en ninguna
     hoja del sitio. Un `border` con una variable inventada no falla
     ruidosamente — el navegador tira la declaración entera y la caja se
     queda SIN BORDE NINGUNO. Llevaba así desde el día que se escribió;
     salió al mover esto aquí. Ahora usa la misma que las demás cajas
     del formulario, que además cambia sola de día a noche. */
  background:var(--papel); border:2px solid var(--border-gray);
  padding:8px 10px; margin-top:-4px;
}
.co-permiso input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--teal); }
.co-permiso em{ display:block; font-style:normal; font-size:var(--fs-sm); color:var(--text-soft); }

.co-input {
  width:100%; padding:6px 8px;
  font-family:'VT323',monospace; font-size:var(--fs-base); color:var(--text-dark);
  background:var(--papel);
  border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.15);
  outline:none; resize:vertical;
}
.co-input:focus {
  border-color:var(--teal) var(--luz) var(--luz) var(--teal);
  box-shadow:inset 1px 1px 3px rgba(0,128,128,.2);
}
.co-input::placeholder { color:var(--text-soft); font-size:var(--fs-base); }
.co-input[disabled] { opacity:.5; cursor:not-allowed; }
#co-submit-btn[disabled] { opacity:.5; cursor:not-allowed; animation:none; }

/* ══════════════════════════════════════════════════════════════
   EL RESUMEN DEL PEDIDO: LOS NÚMEROS, EN COLUMNA

   Antes cada línea era «► Nombre ×1 — RD$350», con el precio pegado
   al final del texto. Con un producto se lee; con cinco de nombres
   distintos, los precios quedan en cinco sitios distintos y para
   sumarlos con la vista hay que ir cazándolos por la caja.

   Ahora nombre a la izquierda, precio a la derecha, todos en la
   misma columna. `tabular-nums` es lo que remata el efecto: obliga a
   que todas las cifras midan igual, así el 1 ocupa lo mismo que el 8
   y las unidades quedan una debajo de otra. Sin eso, alinear a la
   derecha no basta — los números bailan igual.
   ══════════════════════════════════════════════════════════════ */
.co-fila {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px;
}
.co-num {
  text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum';
}

/* Aquí estaba el estilo de cada producto del resumen del checkout. El
   resumen se fue al carrito, que ya llevaba su propia lista, así que
   estas dos reglas no las usaba ya nadie. Se van con él: CSS que no
   pinta nada es CSS que el día de mañana se copia por si acaso. */

/* El TOTAL. Misma fila que los demás para que su cifra caiga en la
   misma columna que el subtotal y el envío — que es todo el punto de
   ponerlos en columna.

   El RÓTULO va en Press Start, como los demás rótulos de la tienda.
   La CIFRA no: va en VT323, la misma letra que los precios de arriba,
   y un peldaño más grande.

   Esto es lo que hace que la columna funcione de verdad. Con el total
   en Press Start, las cuatro cifras estaban en dos tipografías con
   anchos distintos: aunque el borde derecho cuadrara, los dígitos no
   se correspondían y la columna se leía torcida. Y de paso el número
   más importante de la pantalla era el que menos se veía — Press
   Start engaña, sus 12px ocupan como 18px de una letra normal, así
   que un TOTAL en --fp-sm parecía un pie de página al lado de unos
   precios de 21px. */
.co-total-fila {
  font-family:'Press Start 2P',monospace; font-size:var(--fp-sm);
  color:var(--text-dark); margin-top:10px; line-height:1.5;
  /* Sobre crema, no sobre el gris del marco. El rojo de la cifra da
     3.23 sobre el gris —pasa el mínimo de texto grande por los pelos—
     y 5.68 sobre el crema. Es el número que más falta hace leer de
     toda la pantalla: no puede ser el que peor contraste tiene. */
  background:var(--cloud-white); padding:7px 9px;
  border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
}
.co-total-fila .co-num {
  font-family:'VT323',monospace; font-size:var(--fs-md);
  font-weight:bold; color:var(--retro-red); line-height:1;
}

/* ══════════════════════════════════════════════════════════════
   EL RECORDATORIO DE ANTES DEL BOTÓN

   El formulario es largo: para cuando alguien llega a CONFIRMAR
   PEDIDO, el resumen quedó a dos pantallas de scroll y el total ya
   no está a la vista. Nadie debería pulsar un botón de cobro sin
   tener delante lo que va a pagar.
   ══════════════════════════════════════════════════════════════ */
.co-recordatorio {
  margin-top:16px; padding:10px 12px;
  background:var(--cloud-white);
  border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  font-family:'VT323',monospace; font-size:var(--fs-base);
  color:var(--text-dark);
}
.co-recordatorio .co-total-fila {
  margin-top:8px; padding:6px 0 0; border:0;
  border-top:1px solid var(--border-gray);
  background:transparent;   /* ya está sobre crema: una caja dentro de
                               otra igual solo dibuja una raya doble */
}

/* ── LOS NOMBRES DE LO QUE SE COMPRA ────────────────────────────
   Encima de la cuenta, separados por una raya: son otra cosa —el QUÉ,
   no el CUÁNTO— y sin la raya se leen como una fila más del desglose.

   `--text-soft` y no `--text-dark`: la cuenta manda, y el nombre
   acompaña. Si los dos pesan igual, la vista no sabe dónde mirar.

   `overflow-wrap:anywhere` porque un nombre de producto puede ser
   largo —«Focaccia de cebollas y aceitunas negras»— y en una columna
   de teléfono tiene que partir en vez de ensanchar la caja. */
#co-r-items:not(:empty) {
  margin-bottom:8px; padding-bottom:8px;
  border-bottom:1px solid var(--border-gray);
}
.co-r-item {
  color:var(--text-soft); line-height:1.45;
  overflow-wrap:anywhere;
}
.co-r-item + .co-r-item { margin-top:2px; }

/* La línea de los términos. Va pegada al botón y en su propia caja
   crema para que se lea como parte del acto de confirmar, no como
   una nota al pie más de las muchas del formulario. */
.co-terminos {
  margin-top:16px; padding:9px 12px;
  background:var(--papel-nota); border:2px solid var(--sun-yellow);
  font-family:'VT323',monospace; font-size:var(--fs-base);
  color:var(--text-dark); line-height:1.45;
}
.co-terminos a {
  color:var(--link-blue); text-decoration:underline;
  /* 44px de alto de golpeo: en el móvil esto se pulsa con el pulgar,
     y un enlace de una línea de texto es imposible de acertar. */
  display:inline-flex; align-items:center; min-height:44px;
}
.co-terminos a:visited { color:var(--visited); }

/* ── EL CALENDARIO DE ENTREGA ──────────────────────────────────
   La misma ventana Win95 de siempre: caja hundida, dentro el papel
   crema, y cada día que sí se puede pedir como un botoncito gris
   con relieve. Si sobresale, se pulsa; si está plano, no.

   Los días que no se pueden pedir NO se distinguen solo por ser más
   claros: hay quien no ve esa diferencia. Se distinguen por el
   relieve —el que se puede pedir sobresale, el que no está plano— y
   por el borde, sólido contra punteado. Eso es forma, no color, que
   es lo que pide la norma. Igual el día elegido, con su marca ✓.

   Se probó también a tachar el número y se quitó: en un mes en que
   casi no se hornea salían treinta tachones y el calendario parecía
   roto, como si hubiera fallado algo. Un tachón es para un dato que
   valía y dejó de valer; un lunes en que no se hornea nunca valió. */
.cal95 {
  background:var(--bg-gray);
  border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.15);
  padding:4px;
}
.cal95[hidden] { display:none; }

.cal95-barra { display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.cal95-mes {
  flex:1 1 auto; min-width:0; text-align:center;
  font-family:'Press Start 2P',monospace; font-size:var(--fp-sm);
  color:var(--text-dark); letter-spacing:.5px; line-height:1.6;
}
.cal95-nav {
  flex:0 0 auto; min-width:40px; min-height:40px;
  background:var(--bg-gray); color:var(--text-dark);
  border:2px solid; border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
  font-family:'VT323',monospace; font-size:var(--fs-md); line-height:1;
  cursor:pointer;
}
.cal95-nav:hover:not([disabled]) { background:var(--highlight); }
.cal95-nav:active:not([disabled]) {
  border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
}
/* Sin mes al que ir, el botón se queda plano y no responde. El tono
   apagado sigue pasando el contraste: apagado no es ilegible. */
.cal95-nav[disabled] {
  color:var(--text-apagado); cursor:not-allowed;
  border:2px solid var(--border-gray);
}

.cal95-rejilla {
  background:var(--cloud-white);
  border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  padding:2px;
}
.cal95-fila { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal95-fila + .cal95-fila { margin-top:2px; }

.cal95-cabecera {
  font-family:'Press Start 2P',monospace; font-size:var(--fp-xs);
  color:var(--text-dark); text-align:center; padding:4px 0 5px;
}

/* El hueco de los días del mes de al lado: existe para que las siete
   columnas cuadren, pero no dice nada y no se pulsa. */
.cal95-hueco { min-height:40px; }

.cal95-dia {
  min-height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'VT323',monospace; font-size:var(--fs-base); line-height:1;
  color:var(--text-dark); background:var(--bg-gray);
  border:2px solid; border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
  cursor:pointer;
}
.cal95-dia:hover { background:var(--highlight); }
.cal95-dia:active { border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray); }

/* ── LA CELDA DE LOS DÍAS QUE SÍ SE PUEDEN PEDIR ────────────────
   En modo Día el papel del calendario y el botón del día son grises
   distintos y se ven de lejos. En Color los dos son crema —#F4F1DC el
   botón, #FFFDF0 el hueco— y la diferencia es casi nada: hay que
   fijarse en el relieve para saber qué días se pueden pedir. En
   Oscuro pasa lo mismo con dos morados.

   El relieve se queda, que es la señal que no depende de ver color.
   Encima va la CELDA ENTERA pintada, que es lo que se ve sin buscarlo.
   Modo Día se queda con su gris de Windows 95, donde el problema no
   existe.

   Se probó primero pintando solo el NÚMERO y no bastaba: un número de
   color dentro de una celda del color del papel se sigue leyendo como
   parte del fondo. Lo que se busca de un vistazo es el bloque, no la
   cifra.

   DE NOCHE: el amarillo de la marca, que es fijo.

   EN COLOR: el color que Juan haya elegido en AJUSTES para ese modo.
   No un color escrito aquí. Es el color con el que él pinta la página
   entera en modo Color, y el calendario no tiene por qué ser la única
   pieza que no lo siga.

   Y por eso la letra NO puede estar escrita aquí tampoco. Ese color es
   cualquiera —amarillo, morado, casi negro— y una tinta fija sería
   ilegible sobre la mitad de ellos. La calcula `assets/colores.js`,
   la misma cuenta que ya decide la letra de las barras de título y de
   los botones, y la deja en `--color-fondo-tinta`. El respaldo del
   `var()` es para el instante antes de que llegue la respuesta del
   servidor, no para quedarse. */
html[data-tema="color"] .cal95-dia:not([aria-disabled="true"]):not([aria-selected="true"]) {
  background:var(--color-fondo);
  color:var(--color-fondo-tinta, var(--tinta-fija));
}
html[data-tema="oscuro"] .cal95-dia:not([aria-disabled="true"]):not([aria-selected="true"]) {
  background:var(--bm-amarillo);         /* #EFE933                    */
  color:var(--tinta-fija);               /* añil encima: 10.02         */
}

/* ── Y QUÉ PASA AL PASAR EL RATÓN ───────────────────────────────
   El hover de toda la casa pinta de amarillo (`--highlight`), y esas
   dos reglas de arriba lo tapaban: pesan más, así que ganaban también
   con el ratón encima y la celda se quedaba quieta. Un botón que no
   responde al ratón parece un botón apagado.

   En Color se le devuelve el amarillo de la casa. Con una salvedad: si
   Juan eligiera justamente un amarillo para el fondo, repintar de
   amarillo no cambiaría nada. Por eso el hover de Color no es un color
   sino un ACLARADO del que ya hay —`--color-fondo-claro`, que sale de
   la misma cuenta de `colores.js`—, y eso se nota sea cual sea el
   color de abajo. El amarillo de la casa queda de respaldo, para el
   instante antes de que llegue la respuesta del servidor.

   De noche NO se puede repintar: la celda ya ES ese amarillo, y
   repintarla del mismo color es no hacer nada. Ahí el hover oscurece
   su propio amarillo. Es la única excepción al hover de la casa en
   todo el checkout, y existe por ese motivo y no por gusto. */
html[data-tema="color"] .cal95-dia:not([aria-disabled="true"]):not([aria-selected="true"]):hover {
  background:var(--color-fondo-claro, var(--highlight));
  color:var(--color-fondo-claro-tinta, var(--tinta-fija));
}
html[data-tema="oscuro"] .cal95-dia:not([aria-disabled="true"]):not([aria-selected="true"]):hover {
  background:#B4B72F;                    /* añil encima: 6.22          */
}

.cal95-dia[aria-disabled="true"] {
  background:var(--cloud-white); color:var(--text-apagado);
  border:2px dotted var(--border-gray);
  cursor:not-allowed;
}
.cal95-dia[aria-disabled="true"]:hover { background:var(--cloud-white); }

/* ── EL DÍA QUE ELEGISTE ────────────────────────────────────────
   Verde con su ✓, en los tres modos. Verde FIJO —`--grass-green`, el
   mismo número en Día, Color y Oscuro— porque es la única celda que
   importa de verdad y tiene que verse igual siempre, no cambiar de
   tono según cómo tengas puesta la tienda.

   Y por eso no puede ser un color que Juan elija: es el único de todo
   el calendario que está escrito aquí a propósito. Los días
   disponibles siguen su color; éste no sigue a nadie.

   Si algún día Juan elige un verde parecido para el fondo del modo
   Color, las dos celdas se parecerán. Lo que las separa entonces no es
   el color sino la FORMA: el ✓ y el aro blanco de dentro, que ninguna
   otra celda tiene. Es a propósito, y es la misma regla que sigue todo
   este calendario — lo que se puede pedir y lo que no también se
   distingue por el relieve, no solo por el color.

   El aro de dentro es blanco fijo y no `--cloud-white`: de noche ese
   token es el morado del papel, o sea un aro oscuro sobre el papel
   oscuro — un aro que no se ve no es un aro. */
.cal95-dia[aria-selected="true"] {
  background:var(--grass-green); color:#fff;   /* blanco encima: 5.85 */
  border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  box-shadow:inset 0 0 0 2px #fff;
}
.cal95-dia[aria-selected="true"]:hover { background:var(--grass-green); }
.cal95-dia[aria-selected="true"]::after {
  content:'✓'; font-size:var(--fs-xs); margin-left:3px;
}

/* La línea de debajo que repite en palabras el día elegido. Lleva el
   mismo verde que la celda, porque las dos dicen lo mismo y tienen que
   leerse como una sola cosa. */
.cal95-elegido {
  margin-top:6px; padding:6px 10px;
  background:var(--cloud-white); border-left:4px solid var(--grass-green);
  font-family:'VT323',monospace; font-size:var(--fs-sm);
  color:var(--bm-verde-ink); line-height:1.4;
}
.cal95-elegido:empty { display:none; }

/* Para el lector de pantalla, no para la vista: las cabeceras de
   columna dicen «lunes» aunque en pantalla ponga una L sola. */
.cal95-solo-lectores {
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* Selector de método de pago */
/* ── EL INTERRUPTOR DE ENTREGA / RECOGER ────────────────────────
   Dos botones de verdad con aria-pressed, no un par de radios
   disfrazados: son dos botones normales, cada uno con su tabulador,
   y decir lo que son es más honesto que montar un radiogroup que
   pide navegación con flechas. Mismo criterio que el interruptor de
   la tasa en el panel de ajustes.

   El elegido se hunde —borde invertido, que en Windows 95 es lo que
   significa «este está pulsado»— y además se pone en verde. Dos
   señales, forma y color, porque de una sola no se entera todo el
   mundo.

   44px de alto: es un botón que se toca con el dedo en el móvil, y
   por debajo de eso se falla el toque. */
.entrega-modo {
  display:flex; gap:6px; margin-top:4px;
}
.entrega-modo-btn {
  flex:1; min-height:44px; padding:6px 8px; cursor:pointer;
  font-family:'VT323',monospace; font-size:var(--fs-base); line-height:1.2;
  color:var(--text-dark); background:var(--bg-gray);
  border:2px solid; border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
}
.entrega-modo-btn:hover { background:var(--highlight); }
.entrega-modo-btn[aria-pressed="true"] {
  background:rgba(0,128,128,.14);
  border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  font-weight:bold;
}
.entrega-modo-btn small {
  display:block; font-size:var(--fs-sm); color:var(--text-dark); font-weight:normal;
}

.payment-methods {
  display:flex; flex-direction:column; gap:6px; margin-top:4px;
}
.payment-method-option {
  display:flex; align-items:center; gap:8px;
  background:var(--papel); border:2px solid; border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray);
  padding:6px 10px; cursor:pointer;
  font-family:'VT323',monospace; font-size:var(--fs-base); color:var(--text-soft);
}
.payment-method-option:hover{background:var(--highlight);}
.payment-method-option input[type=radio]{ accent-color:var(--teal); }
.payment-method-option.selected{
  background:rgba(0,128,128,.1);
  border-color:var(--teal) var(--luz) var(--luz) var(--teal);
}
.payment-loading {
  font-family:'VT323',monospace; font-size:var(--fs-base); color:var(--text-soft);
}
.co-aviso{
  margin-top:6px; padding:8px 10px;
  background:var(--papel-alerta); border-left:4px solid var(--retro-red);
  font-family:'VT323',monospace; font-size:var(--fs-base);
  color:var(--text-dark); line-height:1.4;
}

/* ══════════════════════════════════════════════════════════════
   LOS TRES MODOS

   El checkout vive en dos páginas y tiene que verse igual en las dos,
   así que sus colores de modo viajan con él y no con la página. Antes
   estaban sueltos entre las reglas de index.html: la ficha del
   producto se quedaba con la barra verde de siempre en modo color.
   ══════════════════════════════════════════════════════════════ */

/* ── PEDIDO CONFIRMADO SE QUEDA VERDE, ELIJA JUAN LO QUE ELIJA ───
   Es la única ventana de la tienda cuyo color SIGNIFICA algo. El
   verde ahí no es decoración de marca: es «ya está, salió bien», la
   misma señal que un semáforo. Si siguiera los colores de AJUSTES,
   el día que Juan pintara la tienda de rojo la pantalla de «pedido
   confirmado» saldría roja, y roja quiere decir lo contrario.

   Por eso no está entre las secciones que se eligen en el panel, y
   por eso lleva su color escrito aquí. Es una excepción a propósito,
   no un olvido — y el crema encima da 7.46 de contraste, medido. */
#checkout-success { --barra-desde:#1B5E4E; --barra-hasta:#004400; --barra-tinta:#FFFDF0; }

/* ── EL CHECKOUT SÍ SIGUE A LA CASA ─────────────────────────────
   Aquí había un azul para el modo de color: el checkout era azul
   «como el carrito, que es su continuación», y la pantalla de
   gracias morada. Tenía sentido cuando el modo de color repartía una
   paleta por secciones. Ya no la reparte — los colores los elige
   Juan y mandan en los tres modos.

   Dejar ese azul habría sacado al checkout del color de la tienda
   justo mientras el cliente paga, que es el peor momento para que
   algo parezca de otro sitio. Sin regla aquí, hereda el color de la
   casa —el del Market— como cualquier ventana sin sección propia. */

/* ── El amarillo del hover ───────────────────────────────────────
   Los tres sitios del checkout donde pasar el ratón pinta de amarillo.
   Van con `*` y no con la lista de hijos: da igual lo que se añada
   mañana dentro del botón, si está encima del amarillo se lee.

   `--tinta-fija` es añil que NO cambia de noche. `--text-dark` sí, y
   de noche es crema: sobre el amarillo se quedaba en 1.16.

   EL DÍA YA ELEGIDO SE QUEDA FUERA. Su fondo no se pone amarillo
   —tiene su regla y sigue verde—, pero esta línea sí le cambiaba la
   letra a añil, y añil sobre ese verde da 2.29. Pasaba solo con el
   ratón encima del día elegido, que es medio segundo y por eso nadie
   lo vio: al apartar el ratón volvía a estar bien. Las dos reglas
   tienen el mismo peso, así que ganaba ésta por venir después.

   Y EL DÍA TAPADO TAMBIÉN SE QUEDA FUERA, por lo mismo: su fondo no
   se pone amarillo —se queda en el papel del calendario— y esta línea
   le ponía añil encima. De día no se notaba; de noche ese papel es
   morado oscuro y el añil encima daba 1.21. Un día que no se puede
   pedir no tiene por qué leerse peor por pasarle el ratón por encima. */
.cal95-dia:not([aria-selected="true"]):not([aria-disabled="true"]):hover,
.cal95-dia:not([aria-selected="true"]):not([aria-disabled="true"]):hover *,
.entrega-modo-btn:hover,
.entrega-modo-btn:hover *,
.payment-method-option:hover,
.payment-method-option:hover * { color:var(--tinta-fija); }

/* ══════════════════════════════════════════════════════════════
   LO QUE SALIÓ AL MEDIR ESTA PANTALLA POR PRIMERA VEZ

   El barrido de contraste solo mide lo que se VE, y este formulario
   está escondido hasta que alguien pulsa HACER PEDIDO. O sea: la
   pantalla donde el cliente escribe su dirección y pulsa el botón de
   pagar no se había medido nunca — ni de día ni de noche.

   Se abre ahora dentro de `contraste.js`, y de la primera pasada
   salieron cinco cosas. Ninguna es nueva: llevaban ahí desde que se
   escribió el checkout. Se arreglan aquí, con variables, para que no
   vuelvan a depender de un color escrito a mano.
   ══════════════════════════════════════════════════════════════ */

/* ── LA TINTA DE LOS RÓTULOS VERDES ─────────────────────────────
   «► RESUMEN DE TU PEDIDO» y «► TUS DATOS» iban en `--bm-verde-ink`,
   que de día es #21715E. Sobre el gris de la ventana Win95 eso da
   3.22, y para letra de este tamaño hacen falta 4.5.

   No se cambia `--bm-verde-ink`: ese verde SÍ se lee bien donde vive
   normalmente, que es sobre el papel crema. El problema es este sitio
   —sobre el cromo gris— y por eso el arreglo es un token propio.
   #17513F es el mismo verde un peldaño más oscuro: 5.05 sobre el gris.

   De noche el verde claro de la marca ya se lee de sobra sobre la
   ventana oscura, así que ahí se queda como estaba. */
:root                      { --co-tinta-titulo: #17513F; }
html[data-tema="oscuro"]   { --co-tinta-titulo: #6FD9BB; }
html[data-tema="color"]    { --co-tinta-titulo: #17513F; }

/* ── EL NÚMERO DEL PEDIDO ───────────────────────────────────────
   «► PEDIDO 21387684 CREADO». Ese número iba en `--retro-red`, que es
   un rojo FIJO —relleno de botones y de la cinta, no letra— y por eso
   no se entera del modo: el mismo #BE2358 de día y de noche. Sobre el
   añil de esta caja se hundía.

   De noche va en el amarillo de la marca, que es donde han ido a parar
   todos los números de esta compra —el precio de la línea, el total
   del carrito, el total del recordatorio—. Éste es el más importante
   de todos: es el que el cliente copia para rastrear su pedido, y el
   único dato de la pantalla que no puede volver a mirar si lo lee mal.

   Y DE DÍA TAMPOCO SE LEÍA, QUE ESO NO LO VIO NADIE.
   Al ir a medirlo salió que sobre el gris del marco `--retro-red` da
   3.23, y a 12px hacen falta 4.5. O sea que el número más importante
   de la pantalla estaba flojo en dos modos de tres, y el de día
   llevaba así desde el principio sin que ningún barrido se quejara:
   esta pantalla solo existe después de crear un pedido con PayPal, y
   lo que no se pinta no se mide.

   De día y en Color va en `--tinta-alerta`, que es el MISMO rojo
   pensado para ser letra —granate #941A44—. No es un color nuevo: es
   el que ya usan los avisos. 4.63 sobre el gris y 8.4 sobre el papel.

   Es exactamente el lío que este proyecto ya se encontró una vez y
   dejó apuntado en index.html: `--retro-red` haciendo dos trabajos,
   relleno y letra. Aquí quedaba el último sitio donde seguía haciendo
   de letra. */
:root                      { --co-tinta-numero: var(--tinta-alerta); }
html[data-tema="oscuro"]   { --co-tinta-numero: var(--bm-amarillo); }
html[data-tema="color"]    { --co-tinta-numero: var(--tinta-alerta); }

.co-titulo {
  display:block;
  font-family:'Press Start 2P',monospace;
  color:var(--co-tinta-titulo);
  line-height:1.6;
}
.co-titulo-sm { font-size:var(--fs-xs); margin-bottom:8px; }
.co-titulo-md { font-size:var(--fp-sm); margin-bottom:12px; }

/* La nota de la anticipación mínima —«(mín. 1 día de anticipación)»—
   llevaba el #17513F escrito a mano dentro del HTML. De día está
   bien; de noche daba 1.08 sobre la ventana oscura, o sea invisible.
   Es exactamente lo que pasa con un color fijo en una página que
   cambia de día a noche. */
#co-date-nota { color:var(--co-tinta-titulo); }

/* ── LA CIFRA DEL TOTAL, DE NOCHE ───────────────────────────────
   El rojo de la marca sobre el fondo oscuro de la caja del total daba
   2.75, y para una cifra de 24px hacen falta 3. Es EL número de esta
   pantalla: no puede ser el que peor se lee.

   Estuvo en `--tinta-alerta` —rosa claro de noche— y se leía de sobra,
   7.9. Ahora va en el amarillo de la marca, y no por contraste:

     · `--tinta-alerta` es el color de AVISO, el de «ojo con esto».
       Un total no es un aviso.
     · y este número es EL MISMO que el del carrito. El carrito pasó al
       amarillo (ver `.cart-total-fila` en index.html); si éste se
       quedaba en rosa, el mismo total cambiaría de color al pasar de
       una caja a la otra, que parece un fallo aunque no lo sea.

   Las dos cajas se unificaron a propósito hace poco —el carrito y la
   de hacer pedido—, así que van juntas también en esto: son dos sitios
   donde se lee el mismo número y tienen que llegar a la misma
   solución. Si un día se cambia una, se cambia la otra. Da 12.6. */
html[data-tema="oscuro"] .co-total-fila .co-num { color:var(--bm-amarillo); }

/* ── LAS FLECHAS DEL CALENDARIO, DE NOCHE ───────────────────────
   `◄` y `►` heredaban `--luz`, que es la arista clara del bisel: sirve
   para dibujar un borde, no para escribir encima. 2.35 sobre el gris
   de la ventana. Los números de los días se quedaban en 4.45, a un
   pelo del 4.5 — pasaba lo mismo y por lo mismo.

   `--tinta-chrome` es literalmente el token de «letra sobre el gris de
   Windows 95»: 8.9 de noche.

   OJO CON EL ALCANCE. Esta regla decía `.cal95-dia` a secas y se
   llevaba por delante TAMBIÉN los días que no se pueden pedir, que
   tienen su propia letra apagada. Resultado: de noche los treinta días
   del mes salían igual de blancos, y la diferencia entre «este día sí»
   y «este día no» se quedaba solo en el relieve. Arreglar el contraste
   de una cosa borró el aviso de otra, y nadie lo vio porque las dos
   medidas —la del día bueno y la del tapado— daban de sobra.

   Por eso ahora dice a QUÉ días se aplica. Los que sí se pueden pedir
   llevan el amarillo de la marca (regla de arriba); los tapados llevan
   su tinta apagada. El día elegido sigue con su letra blanca sobre
   verde, igual que en los otros dos modos. */
html[data-tema="oscuro"] .cal95-nav { color:var(--tinta-chrome); }

/* El día tapado, de noche: `--text-apagado` (#8481B4) sobre el papel
   morado del calendario da 4.45, y el mínimo es 4.5. Cincuentavas
   partes por debajo, sí, pero el número es el número y aquí se mide,
   no se estima. Este violeta es el mismo tono un punto más claro:
   5.06 sobre el papel, y sigue estando muy por debajo del amarillo
   del día que sí se puede pedir, que es lo que tiene que destacar.

   No se toca `--text-apagado` en sí: ese token se usa en media tienda
   y ahí, sobre otros fondos, ya cumple. Lo que se queda corto es esta
   pareja concreta de letra y papel. */
html[data-tema="oscuro"] .cal95-dia[aria-disabled="true"] { color:#8E8BBD; }