/* [PEDIR] La hoja de lo que reemplaza a `confirm()` y a `prompt()`.
 *
 * Tokens del host, sin reservas — la regla de `paleta_declarada`: con reserva, borrar un token
 * no rompe nada visible y esto se pinta con el color de otro sin que ninguna prueba lo note.
 *
 * Marca buscable: pedir_en_la_pantalla
 */

/* ── EL BOTON ARMADO ────────────────────────────────────────────────────────────────────
   Tiene que verse DISTINTO del que todavía no lo está. Un botón que sólo cambió de texto se
   aprieta igual de rápido, y el segundo clic es el que hace. */
.esta-armado {
  /*  FONDO Y TINTA, LOS DOS. La primera version solo cambiaba el color del texto a
   *  `var(--error)`, y en el banco de pruebas quedo rojo oscuro sobre el granate oscuro con el
   *  que el panel pinta TODOS sus botones: ilegible. Un estado que solo se declara a medias
   *  hereda el resto del host, y el host de este modulo pinta botones llenos.  */
  background: var(--error);
  color: var(--papel);
  border: 1px solid var(--error);
  font-weight: 600;
}
/*  Y SE QUEDA ROJO AL PASAR POR ENCIMA. `button:hover` del panel lo devolvia al granate justo
 *  en el momento en que el cursor esta sobre el: el color de peligro desaparecia un instante
 *  antes del clic que ejecuta.  */
.esta-armado:hover { background: var(--error); color: var(--papel); }

/* Lo que se conserva y lo que no, pegado al botón: en una tabla de veinte filas, un aviso
   arriba del todo no dice de cuál fila está hablando. */
.pedir-explica {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gris);
  max-width: 46ch;
}

/* ── EL CAMPO ───────────────────────────────────────────────────────────────────────────
   Va en una fila nueva debajo de la suya cuando el botón vive en una tabla: metido en la
   celda, una tabla de siete columnas lo deja de 40px de ancho. */
.pedir-fila > td { padding: 0; }
.pedir-caja {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--granate);
  background: var(--papel);
}
.pedir-etiqueta {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--tinta);
}
/* La ayuda es la mitad de por qué esto no es un `prompt()`: ahí cabía una línea. */
.pedir-ayuda {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gris);
  max-width: 60ch;
}
.pedir-fila-campo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pedir-campo {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  flex: 1 1 260px;
  min-width: 0;
}
.pedir-campo:focus-visible { outline: 2px solid var(--granate); outline-offset: 1px; }
.pedir-aceptar,
.pedir-cancelar {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  width: auto;
  margin: 0;
  white-space: nowrap;
}
.pedir-aceptar { border: 1px solid var(--granate); background: var(--granate); color: var(--papel); }
.pedir-cancelar { border: 1px solid var(--linea); background: transparent; color: var(--tinta); }

/* El error va al lado del campo y no cierra nada: lo escrito se queda. Un `prompt()` que
   rechazaba el valor lo perdía, y la vez siguiente salía vacío. */
.pedir-error {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--error);
}

@media (max-width: 560px) {
  .pedir-fila-campo { flex-direction: column; align-items: stretch; }
  .pedir-aceptar, .pedir-cancelar { width: 100%; }
}