/* ════════════════════════════════════════════════════════════════════
   «HORARIO DEL PUESTO» · el formulario de apostamiento (alta y edición)
   E5, 9-nov · maqueta docs/aud/mockups/horario-puesto/ (Dirección,
   6-nov 23:58) · Homologación 19 (a) y (b).

   Sólo tokens de 08-SISTEMA-VISUAL-v2: letra 17 (título de tarjeta) y 13
   (dato), radios de tarjeta (20) y de control (12), márgenes de la escala
   --e-*. Nada de colores a mano: el fondo, la línea, el texto y el ámbar
   salen de orvik-tokens.css, que los redefine en oscuro.
   ════════════════════════════════════════════════════════════════════ */
#modal-root .hp {
  margin: var(--e-4) 0;
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--superficie-2);
  color: var(--texto);
}
#modal-root .hp-titulo { font: var(--t-tarjeta); color: var(--texto); margin: 0 0 var(--e-1); }
#modal-root .hp-sub { font: var(--t-sec); color: var(--texto-2); margin: 0 0 var(--e-3); }
#modal-root .hp-g { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
#modal-root .hp-g .field { margin: 0; }
#modal-root .hp-fecha { position: relative; }
/* El calendario del navegador va ENCIMA del texto largo («Lunes 9 de
   noviembre de 2026»), transparente: tocar el campo lo abre. */
#modal-root .hp-fecha input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
}
#modal-root .hp-fecha .fi[readonly] { cursor: pointer; }
/* La tabla de letras va a lo ancho de su recuadro en TODOS los tamaños.
   panel.css, a lo angosto, vuelve toda tabla `display:block` (para que
   se desplace): así el cuerpo se encoge a su contenido y la tabla no
   llenaba el recuadro a 390 (auditor, 9-nov 14:30). Ésta cabe: es tabla. */
#modal-root .hp .hp-t { display: table; width: 100%; border-collapse: collapse; margin-top: var(--e-3); font: var(--t-sec); }
#modal-root .hp .hp-t th,
#modal-root .hp .hp-t td {
  text-align: left; padding: var(--e-2) var(--e-2);
  background: transparent; color: var(--texto);
  border: 0; border-bottom: 1px solid var(--linea);
}
#modal-root .hp .hp-t th {
  font: var(--t-sec); font-weight: 600; color: var(--texto-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
#modal-root .hp-t b { font-weight: 600; font-variant-numeric: tabular-nums; }
#modal-root .hp-avi {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-control);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font: var(--t-sec);
}
/* Sin hora de entrada: el campo sale con borde de ERROR, no con el anillo
   de «seleccionado», aunque tenga el cursor (auditor, 9-nov 14:30). Igual
   que los campos que faltan en el resto del panel (`.fi.falta`, `.field.err`):
   borde y anillo de peligro, y la etiqueta en el texto de peligro. */
#modal-root .hp .fi[aria-invalid="true"],
#modal-root .hp .fi[aria-invalid="true"]:focus {
  border-color: var(--peligro);
  box-shadow: 0 0 0 3px var(--peligro-suave);
}
#modal-root .hp .field:has(.fi[aria-invalid="true"]) > label { color: var(--peligro-texto); }
#modal-root .hp-err:empty { display: none; }
#modal-root .hp-err { margin-top: var(--e-2); }
@media (max-width: 700px) {
  #modal-root .hp-g { grid-template-columns: 1fr; }
}