/* Panel de avisos — British Centre of Melilla
   Tokens del sistema de la web (prototipo + bcm.css). Look claro fijo.
   Cero fuentes externas: las del sistema, como en la web pública.

   Tres niveles tipográficos de texto (20 / 15 / 14) más el número (28).
   Si aparece un quinto tamaño, sobra. */

/* Poppins, servida desde NUESTRO dominio. El navegador no le pide nada a
   Google: el fichero viaja con el panel. Licencia SIL Open Font, 7,6 KB.
   Se usa SOLO para los números de teléfono — el resto sigue con las fuentes
   del sistema, como la web pública del centro. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;   /* si tardara, el número se lee igual mientras carga */
  src: url("/poppins-700.woff2") format("woff2");
  /* Solo los caracteres que aparecen en un teléfono: cifras, espacio y signos. */
  unicode-range: U+0020, U+002B, U+0030-0039;
}

:root {
  --bcm-blue: #345199;
  --bcm-blue-700: #2a4079;
  --bcm-blue-900: #1b2c56;
  --bcm-red: #fd0003;
  --bcm-ink: #101a33;
  --bcm-paper: #f4f7fc;
  --bcm-surface: #ffffff;
  --bcm-line: #d7deec;
  --bcm-muted: #4f5b7d;

  --ok-texto: #0b5c2e;
  --ok-fondo: #eaf7ef;
  --ok-borde: #bfe3cd;
  --err-texto: #8a0011;
  --err-fondo: #fdecee;
  --err-borde: #f5c2c7;
  --avi-texto: #7a4b00;
  --avi-fondo: #fff6e5;
  --avi-borde: #f0d8a8;

  --radio: 14px;
  --ease: cubic-bezier(.23, 1, .32, 1);

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tel: "Poppins", "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bcm-paper);
  color: var(--bcm-ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--bcm-red); outline-offset: 2px; border-radius: 4px; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  height: 56px; padding: 0 20px;
  background: var(--bcm-surface);
  border-bottom: 1px solid var(--bcm-line);
  box-shadow: 0 1px 2px rgba(16, 26, 51, .06);   /* la ÚNICA sombra del panel */
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca img { width: 28px; height: 28px; display: block; }
.marca b { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; }
.marca span { color: var(--bcm-muted); font-weight: 400; font-size: .95rem; }
.barra .dcha { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: .88rem; color: var(--bcm-muted); }
.barra .dcha a { color: var(--bcm-blue); text-decoration: none; font-weight: 600; }
.barra .dcha a:hover { text-decoration: underline; }

/* ── Contenido ────────────────────────────────────────────────────────────── */

.contenido { width: 960px; max-width: calc(100% - 32px); margin: 16px auto 40px; }

.titulo { margin: 0 0 4px; font-family: var(--serif); font-size: 28px; line-height: 35px; font-weight: 600; color: var(--bcm-blue-900); }
.sub { margin: 0 0 16px; font-size: 14px; color: var(--bcm-muted); }

/* ── Franjas de aviso ─────────────────────────────────────────────────────── */

.franja {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  border-radius: var(--radio); border: 1px solid;
  font-size: 15px; font-weight: 600;
}
.franja.ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.franja.aviso { background: var(--avi-fondo); border-color: var(--avi-borde); color: var(--avi-texto); }
.franja.mal { background: var(--err-fondo); border-color: var(--err-borde); color: var(--err-texto); }
.franja .detalle { font-weight: 400; }
/* El aviso recibe el foco al guardar para que los lectores de pantalla lo
   anuncien: el contorno tiene que verse, no esconderse. */
.franja:focus-visible { outline: 3px solid var(--bcm-red); outline-offset: 2px; }

/* ── Hoja y tarjetas ──────────────────────────────────────────────────────── */

/* Cada persona es una tarjeta suelta, no una fila de una tabla: con espacio
   entre ellas se ve dónde empieza una y acaba otra sin tener que leer. */
.hoja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.tarjeta {
  scroll-margin-top: 72px;
  padding: 16px 20px;
  background: var(--bcm-surface);
  border: 1px solid var(--bcm-line);
  border-radius: var(--radio);
  /* El filete azul de marca en todas: da estructura y ata la lista a la
     identidad del centro. El rojo se reserva para una sola tarjeta — una
     alarma encendida en las diez deja de ser una alarma. */
  border-inline-start: 4px solid var(--bcm-blue);
  box-shadow: 0 1px 2px rgba(16, 26, 51, .05), 0 8px 20px -14px rgba(16, 26, 51, .22);
}
.tarjeta.urge {
  border-inline-start-color: var(--bcm-red);
  border-inline-start-width: 5px;
  box-shadow: 0 1px 2px rgba(16, 26, 51, .05), 0 10px 24px -14px rgba(138, 0, 17, .3);
}

.cabeza { display: grid; grid-template-columns: 1fr 376px; column-gap: 24px; align-items: baseline; }

.lectura { min-width: 0; }
.linea1 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

.nombre {
  margin: 0;
  font-family: var(--serif); font-size: 20px; line-height: 26px; font-weight: 600;
  color: var(--bcm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.numero {
  /* El dato con el que de verdad se trabaja: se lee a 70 cm y se marca a mano
     en el fijo del mostrador. Peso 700 y cifras tabulares — las tabulares son
     lo que hace que no se confundan un 6 y un 8 al teclear. */
  font-family: var(--tel);
  font-size: 28px; line-height: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: var(--bcm-ink); white-space: nowrap;
  user-select: all;                 /* doble clic = número entero seleccionado */
}
.numero.no { font-size: 14px; font-weight: 600; color: var(--bcm-muted); user-select: auto; }

.motivo { margin-top: 4px; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--bcm-ink); }
.meta { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--bcm-muted); font-variant-numeric: tabular-nums; }
.meta.tarde { color: var(--bcm-ink); font-weight: 600; }
.meta .urgente { color: var(--err-texto); background: var(--err-fondo); padding: 0 6px; border-radius: 4px; font-weight: 600; }
.nota { margin-top: 4px; font-size: 14px; color: var(--bcm-muted); }
.nota.aviso-edad {
  color: var(--avi-texto); background: var(--avi-fondo);
  border: 1px solid var(--avi-borde); border-radius: 8px;
  padding: 3px 9px; display: inline-block; font-weight: 600;
}

.acciones { display: flex; gap: 16px; align-items: flex-start; }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 2px solid transparent; border-radius: var(--radio);
  background: var(--bcm-blue); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .num { font-family: var(--tel); font-weight: 700; }
.btn.sec { background: var(--bcm-surface); color: var(--bcm-blue); border-color: var(--bcm-blue); }
.btn.plano { background: transparent; color: var(--bcm-blue); border-color: transparent; font-size: 14px; font-weight: 500; padding: 0 12px; }
.btn:active { transform: scale(.97); transition: transform 140ms var(--ease); }
.btn[disabled] { opacity: .6; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--bcm-blue-700); }        /* sube el contraste */
  .btn.sec:hover, .btn.plano:hover { background: #eef2fa; }
}

/* ── Desplegable ──────────────────────────────────────────────────────────── */

details { margin-top: 12px; border-top: 1px solid var(--bcm-line); }
summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--bcm-blue);
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-inline: 3px 4px;
  transition: transform .15s var(--ease);
}
details[open] > summary::before { transform: rotate(45deg); }
@media (hover: hover) { summary:hover { text-decoration: underline; } }

.cuerpo { padding: 8px 0 20px; }
.cuerpo h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--bcm-blue-900); margin: 0 0 12px; }

/* ── Formulario ───────────────────────────────────────────────────────────── */

.firma {
  margin: 0 0 16px; font-size: 14px; color: var(--bcm-muted);
  background: var(--bcm-paper); border: 1px solid var(--bcm-line);
  border-radius: 8px; padding: 8px 12px; display: inline-block;
}
.firma b { color: var(--bcm-ink); }

.campo { margin-bottom: 16px; }
.campo > label { display: block; font-size: 14px; font-weight: 600; color: var(--bcm-ink); margin-bottom: 6px; }

select, textarea {
  font: inherit; font-size: 16px; color: var(--bcm-ink);
  background: var(--bcm-surface);
  border: 1px solid var(--bcm-muted); border-radius: 10px;
  padding: 10px 12px;
}
select { min-height: 44px; width: 260px; max-width: 100%; }
textarea { width: 620px; max-width: 100%; min-height: 88px; resize: vertical; line-height: 1.5; }
select:focus, textarea:focus { border-color: var(--bcm-blue); border-width: 2px; padding: 9px 11px; outline: none; }
select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bcm-red); outline-offset: 2px; }
.campo.mal select, .campo.mal textarea { border-color: var(--err-texto); border-width: 2px; }

.frases { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.frase {
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--bcm-muted); border-radius: 8px;
  background: var(--bcm-surface); color: var(--bcm-blue);
  font: inherit; font-size: 14px; cursor: pointer;
}
@media (hover: hover) { .frase:hover { background: #eef2fa; } }

.ayuda { margin: 6px 0 0; font-size: 14px; color: var(--bcm-muted); max-width: 62ch; }
.error { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--err-texto); background: var(--err-fondo); padding: 6px 10px; border-radius: 8px; display: inline-block; }
.guardar { margin-top: 20px; }
.guardar .btn { min-height: 48px; }

/* ── Histórico ────────────────────────────────────────────────────────────── */

.historico { margin-top: 24px; border-top: 1px solid var(--bcm-line); padding-top: 20px; }
.consulta { border-inline-start: 2px solid var(--bcm-line); padding-inline-start: 12px; margin-bottom: 14px; }
.consulta .cab { font-size: 14px; color: var(--bcm-muted); font-variant-numeric: tabular-nums; }
.consulta .txt { font-size: 15px; color: var(--bcm-ink); margin-top: 2px; }

/* ── Estado vacío ─────────────────────────────────────────────────────────── */

.caja { background: var(--bcm-surface); border: 1px solid var(--bcm-line); border-radius: var(--radio); padding: 48px 28px; text-align: center; }
.caja h2 { font-family: var(--serif); margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.caja p { margin: 0 auto; max-width: 52ch; color: var(--bcm-muted); font-size: 15px; }
.caja.mal { background: var(--err-fondo); border-color: var(--err-borde); }
.caja.mal h2, .caja.mal p { color: var(--err-texto); }

.pie { margin-top: 24px; text-align: center; font-size: 14px; color: var(--bcm-muted); }

/* ── Móvil ────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .barra { padding: 0 14px; gap: 12px; }
  .marca span { display: none; }
  .contenido { width: auto; max-width: none; margin: 12px 16px 32px; }
  .titulo { font-size: 24px; line-height: 30px; }

  .cabeza { grid-template-columns: 1fr; row-gap: 12px; }
  .linea1 { display: block; }
  .nombre { font-size: 19px; line-height: 25px; white-space: normal; }
  .numero { display: block; margin-top: 8px; font-size: 32px; line-height: 36px; letter-spacing: .02em; }
  .acciones { flex-direction: column; align-items: stretch; gap: 10px; }
  .acciones .btn { width: 100%; }
  textarea, select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, summary::before { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}

/* ── Pantallas de entrada ─────────────────────────────────────────────────── */

body.entrada {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
}
.tarjeta-entrada {
  width: 100%; max-width: 420px;
  background: var(--bcm-surface); border: 1px solid var(--bcm-line);
  border-radius: var(--radio); padding: 32px 28px 26px;
  box-shadow: 0 1px 2px rgba(16,26,51,.06), 0 12px 30px -14px rgba(16,26,51,.18);
}
.tarjeta-entrada .iso { display: block; margin-bottom: 18px; }
.tarjeta-entrada h1 {
  font-family: var(--serif); font-size: 24px; line-height: 30px; font-weight: 600;
  color: var(--bcm-blue-900); margin: 0 0 8px;
}
.tarjeta-entrada .intro { margin: 0 0 20px; font-size: 15px; color: var(--bcm-muted); }
.tarjeta-entrada .campo { margin-bottom: 18px; }
.tarjeta-entrada label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

input[type="text"], input[type="password"] {
  font: inherit; font-size: 16px; width: 100%; min-height: 44px;
  color: var(--bcm-ink); background: var(--bcm-surface);
  border: 1px solid var(--bcm-muted); border-radius: 10px; padding: 10px 12px;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--bcm-blue); border-width: 2px; padding: 9px 11px; outline: none;
}
input.pin {
  font-size: 28px; letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: .5em;
}

.btn.ancho { width: 100%; min-height: 48px; margin-top: 4px; }

.marca-equipo {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px;
  font-size: 14px; font-weight: 400 !important; color: var(--bcm-muted);
}
.marca-equipo input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }

.personas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.persona-op { margin: 0; }
.persona-op input { position: absolute; opacity: 0; pointer-events: none; }
.persona-op span {
  display: inline-block; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--bcm-border-strong); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--bcm-muted); cursor: pointer;
}
.persona-op input:checked + span {
  background: var(--bcm-blue); border-color: var(--bcm-blue); color: #fff;
}
.persona-op input:focus-visible + span { outline: 3px solid var(--bcm-red); outline-offset: 2px; }

.error.bloque { display: block; margin: 0 0 18px; }
.pie-entrada { margin: 20px 0 0; font-size: 14px; color: var(--bcm-muted); text-align: center; }
.pie-entrada a { color: var(--bcm-blue); font-weight: 600; }
.barra .quien { font-weight: 600; color: var(--bcm-ink); }
.barra .salir { margin: 0; }