/* HOY · La pantalla «Hoy» (arquitectura §5.13; diseño §10; maqueta docs/maquetas/2-portal-bitacora.html, «1 · Hoy»).
   Los pases son los de viajes.css (H3a) y el cupón el de guardado.css (H8a): aquí solo su lugar en la página.
   Las clases de H0 (.hoy__barra, .hoy__saludo, .hoy__vacio…) viven en portal.css y no se repiten. */
.hoy__dia { margin-top: 30px; }
.hoy__cargando { color: var(--gris); font: italic 400 16px var(--letra-titulo); }
.hoy__resumen { max-width: 62ch; font: italic 400 18px/1.45 var(--letra-titulo); color: #4A4439; animation: aparecer .4s var(--suave) both; }
.hoy__rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 24px; }
@media (max-width: 900px) { .hoy__rejilla { grid-template-columns: minmax(0, 1fr); } }
.hoy__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hoy__cabeza h2 { margin: 0; font-size: 19px; }
/* En gris y no en latón: a 10 px el latón no llega a 4,5:1 sobre la hoja. */
.hoy__cabeza a, .hoy__cabeza span { font: 600 10px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.hoy__nada { color: var(--gris); }
/* Los pases dentro de una tarjeta: más angostos, y las muescas de la tira del color de la tarjeta, no del papel. */
.hoy__salidas .viajes__pases { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hoy__salidas .viajes__tira::before, .hoy__salidas .viajes__tira::after { background: var(--hoja); }
/* El alto lo pone quien usa el mapa (contrato de pintarMapa, H3a). */
.hoy__mapa { position: relative; height: 220px; border-radius: var(--radio-chico); overflow: hidden; background: #EFE5D3; }
.hoy__viajeros { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.hoy__viajeros a { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.hoy__viajeros small { margin-left: auto; white-space: nowrap; font: 500 10.5px var(--letra-codigo); color: var(--gris); }
.hoy__pin { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--oxido); color: #FFF; font: 700 10px/18px var(--letra-codigo); text-align: center; }
.hoy__lista { list-style: none; margin: 0; padding: 0; }
.hoy__pendiente { position: relative; display: grid; gap: 2px; padding: 9px 0 9px 16px; border-bottom: 1px solid var(--borde); font-size: 13.5px; line-height: 1.4; }
.hoy__pendiente:last-child { border-bottom: 0; }
/* La urgencia va en el punto (y en palabras en el <small>): el color nunca es lo único que la dice. */
.hoy__pendiente::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gris-suave); }
.hoy__pendiente--hoy::before { background: var(--oxido); }
.hoy__pendiente--pronto::before { background: var(--laton); }
.hoy__pendiente small { font: 500 10.5px var(--letra-codigo); color: var(--gris); }
.hoy__cupones { display: grid; gap: 14px; }
.hoy__cupones h2 { margin: 0; font-size: 19px; }
.hoy__falla { display: grid; gap: 12px; justify-items: start; max-width: 560px; }

/* La campanita: la bolita sobre «Hoy» en el lomo (el punto rojo de la campana de la maqueta). Blanco sobre óxido: 8:1. */
.hoy__campanita {
  position: absolute; top: 7px; right: 10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--oxido); color: #FFF; font: 700 10px/17px var(--letra-codigo); text-align: center;
  box-shadow: 0 0 0 2px var(--lomo); animation: caer-campanita .3s var(--resorte) both;
}
.hoy__campanita i { font-style: normal; }
/* Sin saber: gris (blanco sobre el gris de la tinta: 6:1), para que no se lea como «hay algo urgente». */
.hoy__campanita--sin-saber { background: var(--gris); }
/* Un sello que cae una vez (algo cambió de estado); «reducir movimiento» lo apaga con la regla de portal.css. */
@keyframes caer-campanita { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }