/* ============================================================
   Última hora (breaking) — BARRA de alerta bajo el menú.
   Del handoff design/portada/handoff-tiquer (solo la barra; el
   bloque hero no se implementa). Tokens mapeados al sistema real:
   --lv-brand → --lv-blue · --f-serif-text → --f-text.
   Clases con prefijo .lv-uh-. Demo-only (toggle ?uh=on).
   ============================================================ */

/* Marcador "en directo" con pulso */
.lv-uh-dot { position: relative; display: inline-block; width: 8px; height: 8px; flex-shrink: 0; }
.lv-uh-dot__core,
.lv-uh-dot__ping { position: absolute; inset: 0; border-radius: 50%; background: var(--live); }
.lv-uh-dot__ping { animation: lv-uh-pulse 1.8s ease-out infinite; }
@keyframes lv-uh-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* —— Barra de alerta —— */
.lv-uh-bar {
  border-top: 3px solid var(--live);
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
  position: relative;
  z-index: 6;
  /* Para fijarla bajo la cabecera (si es sticky), descomenta y ajusta el top:
  position: sticky; top: var(--lv-header-h, 0); */
}
.lv-uh-bar__row {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: flex;
  align-items: stretch;
  min-height: 54px;
  position: relative;
}

/* etiqueta roja */
.lv-uh-bar__label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  border-right: 1px solid var(--hair);
  flex-shrink: 0;
}
.lv-uh-bar__tag {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--live);
  white-space: nowrap;
}

/* titular rotativo */
.lv-uh-bar__ticker { flex: 1; min-width: 0; margin-left: 18px; display: flex; align-items: center; overflow: hidden; }
.lv-uh-ticker { width: 100%; height: 26px; overflow: hidden; position: relative; }
.lv-uh-ticker__track { transition: transform 0.55s cubic-bezier(.4, 0, .2, 1); }
.lv-uh-ticker__item {
  display: flex; align-items: center; gap: 10px;
  height: 26px; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.lv-uh-ticker__item .uh-head {
  font-family: var(--f-text); font-weight: 600; font-size: 16.5px; line-height: 26px;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis;
}
.lv-uh-ticker__item .uh-time { font-family: var(--f-sans); font-size: 12px; color: var(--meta); flex-shrink: 0; }

/* acciones */
.lv-uh-bar__actions { display: flex; align-items: center; gap: 16px; padding-left: 18px; flex-shrink: 0; }
.lv-uh-dots { display: flex; gap: 5px; }
.lv-uh-dots button { width: 6px; height: 6px; padding: 0; border: none; cursor: pointer; border-radius: 50%; background: var(--hair); transition: background 0.2s; }
.lv-uh-dots button[aria-current="true"] { background: var(--live); }
.lv-uh-bar__more { font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--lv-blue); text-decoration: none; white-space: nowrap; }
.lv-uh-bar__more:hover { text-decoration: underline; }
.lv-uh-chevron {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  border-radius: 50%; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.lv-uh-chevron:hover { border-color: var(--lv-blue); color: var(--lv-blue); background: var(--paper-2); }
.lv-uh-chevron svg { transition: transform 0.2s; transform: rotate(90deg); }
.lv-uh-bar[data-open="true"] .lv-uh-chevron svg { transform: rotate(-90deg); }

/* línea-temporizador de avance */
.lv-uh-bar__timer { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--live); opacity: 0.85; transform-origin: left; transform: scaleX(0); }
.lv-uh-bar[data-rotating="true"] .lv-uh-bar__timer { animation: lv-uh-fill 5.2s linear infinite; }
@keyframes lv-uh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* panel desplegable · minuto a minuto */
.lv-uh-panel { border-top: 1px solid var(--hair); background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,30,80,.08); }
.lv-uh-panel[hidden] { display: none; }
.lv-uh-panel__inner { max-width: var(--content-max); margin: 0 auto; padding: 20px var(--content-pad) 24px; }
.lv-uh-panel__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.lv-uh-panel__head .uh-mam { font-family: var(--f-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--live); }
.lv-uh-panel__head .uh-upd { font-family: var(--f-sans); font-size: 11px; color: var(--meta); }
.lv-uh-feed-row { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--hair-soft); text-decoration: none; }
.lv-uh-feed-row:first-of-type { border-top: none; }
.lv-uh-feed-row .uh-t { font-family: var(--f-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); }
.lv-uh-feed-row:first-of-type .uh-t { color: var(--live); }
.lv-uh-feed-row .uh-x { font-family: var(--f-text); font-size: 16px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

/* —— móvil —— */
@media (max-width: 720px) {
  .lv-uh-bar__row { padding: 0 14px; min-height: 46px; }
  .lv-uh-bar__label { padding-right: 0; border-right: none; gap: 6px; }
  .lv-uh-bar__tag { font-size: 10.5px; letter-spacing: 0.1em; }
  .lv-uh-bar__ticker { margin-left: 10px; }
  .lv-uh-ticker { height: 22px; }
  .lv-uh-ticker__item { height: 22px; }
  .lv-uh-ticker__item .uh-head { font-size: 14px; line-height: 22px; }
  .lv-uh-ticker__item .uh-time { display: none; }
  .lv-uh-bar__actions { gap: 0; padding-left: 10px; }
  .lv-uh-dots, .lv-uh-bar__more { display: none; }
  .lv-uh-chevron { width: 28px; height: 28px; border: none; }
  .lv-uh-panel__inner { padding: 12px 14px 16px; }
  .lv-uh-feed-row { grid-template-columns: 62px 1fr; gap: 12px; padding: 9px 0; }
  .lv-uh-feed-row .uh-t { font-size: 10.5px; }
  .lv-uh-feed-row .uh-x { font-size: 14.5px; }
}

/* —— Accesibilidad: sin movimiento —— */
@media (prefers-reduced-motion: reduce) {
  .lv-uh-dot__ping { animation: none; }
  .lv-uh-bar[data-rotating="true"] .lv-uh-bar__timer { animation: none; opacity: 0; }
  .lv-uh-ticker__track { transition: none; }
}