/* ==========================================================================
   EL BUZÓN — cómo se ve
   Vive aparte porque lo abren tres pantallas: la página pública, la de
   prefectura y (pronto) la aplicación del maestro. Estaba copiado palabra por
   palabra en dos de ellas; la tercera copia habría sido la que se quedara
   atrás el día que cambiara un color.

   No va en base.css a propósito: base.css es lo que comparten TODAS las
   pantallas, y esto lo comparten tres.
   ========================================================================== */

/* Un recuadro encima de todo, del ancho de un teléfono. */
.bz-fondo{position:fixed;inset:0;background:rgba(20,12,35,.55);display:grid;place-items:center;
  padding:16px;z-index:9999}
.bz-caja{background:var(--panel);border-radius:var(--r-grande);padding:20px;max-width:440px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.25)}
.bz-caja h3{margin:0 0 6px;font-size:19px}
.bz-sub{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.5}
.bz-caja textarea{width:100%;font:15px var(--sans);padding:12px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2);color:var(--ink);resize:vertical}
.bz-caja input{width:100%;margin-top:9px;font:14px var(--sans);padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--ink)}
.bz-botones{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.bz-x{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:10px;
  padding:11px 16px;font:600 14px var(--sans);cursor:pointer;width:auto;margin:0}
.bz-ok{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px 20px;
  font:700 14px var(--sans);cursor:pointer;width:auto;margin:0}
/* El rojo sale de la base: estaba escrito a mano y ya iba camino de no ser el
   mismo rojo que el de los demás avisos. */
.bz-nota{margin:9px 0 0;font-size:13px;color:var(--err);text-align:center}