.wrap{max-width:var(--page-max-width);margin:0 auto;padding:28px var(--page-padding-x)}

.hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hd-actions{display:flex;gap:8px;align-items:center}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 24px}
.card{background:var(--bg-surface);border-radius:var(--radius);padding:14px 16px}
.card .lbl{font-size:13px;color:var(--tx-2)}
.card .val{font-size:24px;font-weight:500;margin-top:2px}

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px 180px;
  align-items:center;
  gap:16px;
  background:var(--bg-card);
  border:0.5px solid var(--bd-1);
  border-radius:0;
  padding:12px 16px;
  cursor:pointer;
}
.row+.row{margin-top:8px}
.row:hover{background:var(--bg-hover)}

.row .name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .venue{font-size:12px;color:var(--tx-2)}
.row .meta{font-size:12px;color:var(--tx-3)}
.row .titular{font-size:20px;font-weight:500}
.row .bar{height:5px;background:var(--bg-surface);border-radius:99px;margin-top:6px;overflow:hidden}
.row .bar>div{height:100%}
.row .small{font-size:11px;color:var(--tx-3);margin-top:3px}
.row .intensity{font-size:12px;color:var(--tx-2);line-height:1.5}

.empty{font-size:13px;color:var(--tx-3);padding:24px 0;text-align:center}

/* Separador entre "necesitan atención" y el resto en venta (verde = al día) */
.divider{display:flex;align-items:center;gap:12px;margin:26px 0 12px;color:var(--success-tx);font-size:12px;font-weight:500;white-space:nowrap}
.divider::before,.divider::after{content:"";height:1px;background:rgba(29,158,117,0.35);flex:1}

/* Subdivisor entre tramos de horizonte (más sobrio que el verde de "en línea") */
.divider.horizon{color:var(--tx-2);margin:22px 0 10px}
.divider.horizon::before,.divider.horizon::after{background:var(--bd-1)}
.divider.horizon .hh-inline{color:var(--tx-3);font-weight:400}

/* Cabecera del primer tramo de horizonte (ya sabemos que es prioridad alta — */
/* solo etiquetamos el rango temporal sin meter línea horizontal) */
.horizon-hd{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding-bottom:6px;border-bottom:0.5px solid var(--bd-1)}
.horizon-hd .hh-lbl{font-size:13px;font-weight:500;color:var(--tx-1)}
.horizon-hd .hh-sub{font-size:12px;color:var(--tx-3)}

/* Filas ligeras del resto: 2 columnas, clicables igual que las de arriba */
.row-lite{grid-template-columns:minmax(0,1fr) 200px;opacity:.9}
.row-lite:hover{background:var(--bg-hover)}

/* U5 — divider clicable que colapsa/expande "Resto en venta" */
.divider-toggle{cursor:pointer;user-select:none}
.divider-toggle svg{width:14px;height:14px;vertical-align:-3px;margin-left:2px;transition:transform .2s}
.divider-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.divider-toggle:hover{color:var(--tx-1)}
.divider-toggle:focus-visible{outline:2px solid var(--info);outline-offset:2px}

/* A11/A1 — foco visible en filas operables por teclado */
.row:focus-visible{outline:2px solid var(--info);outline-offset:-2px}

/* Mobile — debe ir al FINAL del archivo. Si va arriba, las reglas base
   posteriores (.row{grid-template-columns:1fr 170px 180px}) ganan al tener
   la misma especificidad y sobrescriben el override móvil → colapsa la col 1
   a 0px y el "0%" pinta sobre el badge "Prioridad alta" (bug 2026-06-01). */
@media (max-width:520px){
  .wrap{padding:20px 16px}
  /* Cards: 2 columnas en mobile en vez de 3 */
  .cards{grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 18px}
  .card .val{font-size:20px}
  /* Rows: una sola columna — name arriba, % abajo, intensidad oculta */
  .row,.row-lite{grid-template-columns:1fr;padding:10px 12px;gap:6px}
  .row .intensity{display:none}
  .row .titular{font-size:17px}
  /* Venue truncado con ellipsis (sin él se parte en múltiples líneas) */
  .row .venue{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}