/* Contenido › «la ola cambió, revisá antes de publicar» (19/10). Ver web/js/contenido-ola-cambio.js.
   Mockup aprobado: sesiones/2026-10-19-alerta-ola/mockup (repo del agente). Peso máximo 600; sin animaciones infinitas. */
.oc-alerta, .oc-antes, .oc-giro, .oc-gris, .oc-cuenta, .gu-oc, .gu-oc-aviso, .gu-cita-vieja {
  --oc-line: var(--line, var(--border));
  --oc-card: var(--card, var(--bg-card));
  --oc-ink: var(--ink, var(--text));
  --oc-ink-2: var(--ink-2, var(--text-muted));
  --oc-warn: var(--warn, oklch(70% 0.15 80));
  --oc-warn-soft: var(--warn-soft, oklch(75% 0.15 80 / .18));
  --oc-go: var(--go, oklch(70% 0.14 160));
  --oc-go-soft: var(--go-soft, oklch(70% 0.14 160 / .18));
  --oc-link: var(--link, var(--accent-blue, #5aa2f5));
}

/* el aviso del guion */
.oc-alerta { display: grid; gap: 14px; margin: 14px 0 4px; padding: 18px 20px; border: 1px solid var(--oc-warn); background: var(--oc-warn-soft); border-radius: 12px; color: var(--oc-ink); }
.oc-alerta h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-family: inherit; }
.oc-alerta p { margin: 0; max-width: 80ch; line-height: 1.55; }
.oc-alerta.oc-revisado { border-color: var(--oc-go); background: var(--oc-go-soft); }
.oc-chip { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 9px; white-space: nowrap; }
.oc-chip.warn { background: var(--oc-warn-soft); color: var(--oc-warn); border: 1px solid color-mix(in oklch, var(--oc-warn) 45%, transparent); }
.oc-chip.go { background: var(--oc-go-soft); color: var(--oc-go); }
.oc-lugares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oc-lugares li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px; background: var(--oc-card); border: 1px solid var(--oc-line); border-radius: 8px; }
.oc-lugares q { quotes: "«" "»"; }
.oc-donde { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-size: 12px; color: var(--oc-ink-2); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.oc-donde:hover { color: var(--oc-ink); }
.oc-ahora { display: grid; gap: 6px; }
.oc-ahora > b { font-size: 12px; letter-spacing: .06em; font-weight: 600; color: var(--oc-ink-2); }
.oc-nota { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 13px; }
.oc-sitio { font-size: 12px; color: var(--oc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-sitio a, .oc-antes a, .gu-oc-aviso a { color: var(--oc-link); }
.oc-mas summary { font-size: 12px; color: var(--oc-ink-2); cursor: pointer; }
.oc-mas .oc-nota { margin-top: 6px; }
.oc-pie { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid color-mix(in oklch, var(--oc-warn) 30%, transparent); }
.oc-revisado .oc-pie { border-top-color: color-mix(in oklch, var(--oc-go) 30%, transparent); }
.oc-pie small { font-size: 12px; color: var(--oc-ink-2); }
.oc-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.oc-gris { margin: 10px 0 0; font-size: 12.5px; color: var(--oc-ink-2); }

/* dentro del guion: lo marcado */
.gu-bl.gu-oc, .gu-paso.gu-oc, .gu-pl.gu-oc { border-color: var(--oc-warn); box-shadow: inset 3px 0 0 var(--oc-warn); }
.gu-oc-aviso { margin: 8px 0 0; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--oc-warn-soft); color: var(--oc-ink); grid-column: 1 / -1; line-height: 1.5; }
.gu-oc-aviso b { color: var(--oc-warn); font-weight: 600; }
.gu-cita.gu-cita-vieja { border-style: dashed; }
.gu-cita.gu-cita-vieja a { text-decoration: line-through; }

/* la ficha de la pieza */
.oc-antes { display: grid; gap: 10px; margin: 10px 0 14px; padding: 14px 16px; border: 1px solid var(--oc-warn); background: var(--oc-warn-soft); border-radius: 10px; color: var(--oc-ink); font-size: 13px; }
.oc-antes p { margin: 0; line-height: 1.55; }
.oc-antes .oc-chip { margin-right: 6px; }
.oc-antes .cnt-tar-btn { justify-self: start; }
.oc-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.oc-check input { width: 16px; height: 16px; accent-color: var(--oc-go); }

/* la tarjeta de la ola */
.ol-ola.ol-giro, .ol-fut.ol-giro { border-color: var(--warn, oklch(70% 0.15 80)); }
.oc-giro { display: grid; gap: 8px; font-size: 13px; padding: 10px 12px; border-radius: 8px; background: var(--oc-warn-soft); color: var(--oc-ink); }
.oc-giro > b { font-weight: 600; }
.oc-tl { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.oc-tl span:nth-child(odd) { color: var(--oc-ink-2); font-variant-numeric: tabular-nums; }
.oc-usan { display: grid; gap: 6px; }
.oc-usan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.oc-usan li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.oc-usan .oc-donde { font-size: 13px; color: var(--oc-link); text-decoration: none; }
.oc-usan .oc-donde:hover { text-decoration: underline; }

/* el contador del menú */
.oc-cuenta { margin-left: auto; font-size: 11px; font-weight: 600; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--oc-warn-soft); color: var(--oc-warn); text-align: center; line-height: 18px; }

@media (max-width: 760px) {
  .oc-alerta { padding: 16px; }
  .oc-lugares li, .oc-nota { grid-template-columns: 1fr; gap: 2px; }
  .oc-pie, .oc-pie .oc-fila { flex-direction: column; align-items: stretch; }
}