/* ═══════════════════════════════════════════════════════════════════
   DIALOGOS.CSS — EL ASPECTO DE LOS CUADROS DE DIÁLOGO

   Estaba escrito dos veces, en index.html y en product.html, con este
   aviso encima: «SI ARREGLAS ALGO AQUÍ, ARRÉGLALO ALLÍ». No se
   cumplió, claro. Al juntarlas salieron dos diferencias, y lo curioso
   es que cada página tenía el fallo que la otra ya no tenía:

     · la barra del cuadro: index llevaba `color:#fff` a pelo y la
       ficha del producto ya usaba `--barra-tinta`;
     · el hover de los botones: la ficha llevaba `--text-dark`, que de
       noche es crema y sobre el amarillo del hover se queda en 1.2, e
       index ya usaba `--tinta-fija`.

   Aquí está la buena de cada una, una sola vez. La razón que daba
   aquel aviso para no compartir —«cada página se sube suelta y
   autocontenida»— dejó de valer el día que el checkout pasó a ser un
   archivo compartido.

   OJO: hay una TERCERA copia, en `build/base.py`, que es la que
   heredan las pantallas del panel. Esa ha derivado bastante más —usa
   colores escritos a mano en vez de las variables del modo— y no se
   toca aquí: son siete pantallas que habría que volver a revisar
   enteras. Queda dicho.
   ═══════════════════════════════════════════════════════════════════ */

/* El velo. z-index 2000 para quedar por encima de todo lo que ya
   había: la barra pegada arriba va en 150 y los modales del panel
   en 900. */
.bm-dlg-fondo {
  position:fixed; inset:0; z-index:2000;
  background:rgba(41,38,103,.62);
  display:flex; align-items:center; justify-content:center;
  padding:14px; overflow-y:auto;
}

/* La ventana. Mismo relieve que .win95-panel / .panel: claro arriba
   e izquierda, gris abajo y derecha. Es lo que la hace parecer una
   ventana levantada y no un recuadro pintado.
   `max-height:100%` mide contra el velo, que es fijo al tamaño de la
   pantalla: así la ventana nunca sobresale por arriba ni por abajo,
   y quien tiene que encogerse es el cuerpo del texto. */
.bm-dlg {
  background:var(--bg-gray); border:2px solid;
  border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
  box-shadow:3px 3px 0 #000;
  width:100%; max-width:460px; max-height:100%;
  display:flex; flex-direction:column;
  animation:bm-dlg-entra .12s ease-out;
}
@keyframes bm-dlg-entra {
  from { transform:translateY(-10px); opacity:0; }
  to   { transform:none; opacity:1; }
}
/* Quien pidió menos animación no ve ninguna. La regla general del
   sitio ya acorta las animaciones a .01ms, pero se dice también
   aquí: una ventana que aparece de golpe es lo correcto, no una que
   aparece muy rápido. */
@media (prefers-reduced-motion: reduce) { .bm-dlg { animation:none; } }

/* La barra de título, de las mismas variables que las ventanas: así el
   modo de color la pinta sin tener que repetir aquí la regla. */
.bm-dlg-titulo {
  background:linear-gradient(90deg,var(--barra-desde) 0%,var(--barra-hasta) 100%);
  /* La tinta sale de la variable, no de un #fff escrito a mano. Es el
     arreglo que ya tenía la ficha del producto y que aquí faltaba: el
     día que un modo le ponga a este cuadro una barra clara, con el
     blanco fijo el título desaparece. */
  color:var(--barra-tinta, #fff); font-family:'Press Start 2P',monospace; font-size:var(--fp-sm);
  padding:6px 8px; line-height:1.6;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
/* El tono de aviso solo cambia el color de la barra. El rojo de la
   marca ya es el color de «cuidado» en toda la página (precios,
   errores, el botón de borrar), así que no hay que aprenderlo. */
.bm-dlg.aviso .bm-dlg-titulo {
  background:linear-gradient(90deg,var(--retro-red) 0%,#7A1638 100%);
}

/* La ✕. Más grande que la de .win95-btn (14px) porque esta hay que
   poder darle con el dedo, no solo con el ratón. */
.bm-dlg-x {
  background:var(--bg-gray); border:1px solid;
  border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
  width:24px; height:24px; flex:0 0 auto; padding:0;
  font-family:'VT323',monospace; font-size:var(--fs-sm); color:var(--tinta-chrome);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.bm-dlg-x:hover { background:var(--retro-red); color:#fff; }

/* El texto. `pre-wrap` porque los mensajes que ya existían separan
   sus párrafos con saltos de línea de toda la vida —los escribió
   quien los escribió para un alert()— y se conservan tal cual.
   `min-height:0` es lo que le da permiso a un hijo de un flex para
   encoger por debajo de su contenido; sin eso no scrollea, crece. */
.bm-dlg-cuerpo {
  background:var(--cloud-white); padding:14px;
  font-family:'VT323',monospace; font-size:var(--fs-base);
  color:var(--text-dark); line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere;
  overflow-y:auto; min-height:0;
}

/* Los botones, abajo a la derecha. */
.bm-dlg-pie {
  padding:10px; display:flex; gap:8px;
  justify-content:flex-end; flex-wrap:wrap;
}
.bm-dlg-btn {
  background:var(--bg-gray); border:2px solid;
  border-color:var(--luz) var(--border-gray) var(--border-gray) var(--luz);
  padding:6px 14px; min-height:40px;
  font-family:'Press Start 2P',monospace; font-size:var(--fp-sm);
  line-height:1.6; color:var(--tinta-chrome); cursor:pointer; white-space:nowrap;
}
.bm-dlg-btn:hover  { background:var(--teal); color:var(--tinta-fija); }
.bm-dlg-btn:active { border-color:var(--border-gray) var(--luz) var(--luz) var(--border-gray); }
/* El botón que borra se pinta de rojo: la respuesta que no tiene
   vuelta atrás tiene que verse distinta de la que sí. */
.bm-dlg-btn.peligro {
  background:var(--retro-red); color:#fff;
  border-color:#F06156 #7A1638 #7A1638 #F06156;
}
.bm-dlg-btn.peligro:hover { background:#7A1638; color:#fff; }

/* En un teléfono estrecho los dos botones no caben en una fila sin
   apretarse: se ponen uno debajo del otro, a ancho completo.

   `column` y no `column-reverse`, aunque reverse dejaría arriba el
   botón de aceptar: con reverse el orden que se VE y el orden por el
   que pasa el tabulador dejan de coincidir, y quien navega con teclado
   acabaría pulsando el botón de abajo creyendo que va al de arriba.
   Así se lee de arriba abajo igual que en el escritorio se lee de
   izquierda a derecha: primero cancelar, después aceptar. */
@media (max-width:420px) {
  .bm-dlg-pie { flex-direction:column; }
  /* Se les quita el nowrap: a ancho completo una etiqueta larga
     prefiere partirse en dos líneas antes que salirse de la caja. */
  .bm-dlg-btn { width:100%; white-space:normal; }
}