/* Optimizo · Centro operativo (V03). Solo estilos propios de esta sección; los colores salen de tokens.css. */
.co { display: grid; gap: 22px; }
.co-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.co-lema { font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--opt-text-secondary); margin-bottom: 10px; }
.co-cab h1 { font-size: 2.125rem; }
.co-cab .sub { font-size: var(--opt-text-md); margin-top: 8px; }
.co-kpis { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.co-fila { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; }
.co-fila-b { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.co-fila > .card { display: flex; flex-direction: column; padding: 22px; }
#co-at, #co-mapa, #co-pulso, #co-acc { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.co-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.co-head > div:first-child { min-width: 0; }
.co-head h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.co-head .contador { min-width: 22px; height: 22px; font-size: 12px; }
.co-sub { font-size: var(--opt-text-sm); color: var(--opt-text-secondary); margin-top: 4px; }
.co-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--opt-text-sm); font-weight: 600; color: var(--opt-accent-text); white-space: nowrap; border-radius: 6px; padding: 2px 4px; }
.co-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-card-pie { margin: auto -22px -22px; padding: 14px 22px; border-top: 1px solid var(--opt-border); background: var(--opt-surface-inset); border-radius: 0 0 var(--opt-radius-card) var(--opt-radius-card); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-card-pie > span { display: inline-flex; align-items: center; gap: 6px; }

/* requieren tu atención */
.co-items { list-style: none; padding: 0; margin-bottom: 14px; }
.co-items li + li { border-top: 1px solid var(--opt-border); }
.co-item { display: flex; align-items: center; gap: 14px; padding: 13px 6px; color: inherit; border-radius: var(--opt-radius-control); }
.co-item:hover { background: var(--opt-surface-raised); }
.co-item-ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--opt-surface-raised); border: 1px solid var(--opt-border); color: var(--opt-heading); }
.co-item-ico.alta { background: var(--opt-accent-soft); border-color: var(--opt-accent-border); color: var(--opt-accent-text); }
.co-item-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.co-item-txt b { font-weight: 600; color: var(--opt-heading); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.co-item-txt small { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-item-txt small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-ir { color: var(--opt-text-secondary); }

/* dónde concentrar la atención */
.co-head > .chip { min-height: 28px; font-size: 12px; flex: none; }
.co-mapa-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: -2px 0 12px; }
.co-mapa-ctl .seg button { min-height: 28px; font-size: 12.5px; }
.co-mapa-sel { display: flex; min-width: 0; }
.co-mapa-cam select { max-width: 170px; text-overflow: ellipsis; }
.co-mapa-cam { height: 34px; font-size: var(--opt-text-sm); }
.co-mapa-fijo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-plano-caja { border: 1px solid var(--opt-border); border-radius: var(--opt-radius-card); overflow: hidden; background: var(--opt-surface-raised); }
.co-plano { display: block; width: 100%; height: auto; }
.co-plano a { outline: none; cursor: pointer; }
.co-fondo { fill: var(--opt-surface-raised); }
.co-reja { stroke: var(--opt-border); stroke-width: 1; }
.co-tile-r { fill: var(--opt-surface); stroke: var(--opt-border-strong); stroke-width: 2; }
.co-tile.off { opacity: 0.55; }
.co-tile-t { font-family: var(--opt-font); font-weight: 600; fill: var(--opt-text-secondary); letter-spacing: 0.06em; }
.co-z { fill: var(--opt-info-soft); fill-opacity: 0.9; stroke: var(--opt-heading); stroke-width: 2.5; stroke-opacity: 0.5; transition: stroke-opacity var(--opt-duration-fast); }
.co-z.amarilla { fill: var(--opt-warning-soft); stroke: var(--opt-warning); }
.co-z.deteccion { fill: var(--opt-success-soft); stroke: var(--opt-success); }
.co-z.exclusion { fill: none; stroke-dasharray: 8 8; }
.co-z.linea { fill: none; stroke-dasharray: 12 8; stroke-width: 4; }
.co-z.sel { stroke: var(--opt-accent); stroke-opacity: 1; stroke-width: 4; }
.co-plano a:hover .co-z { stroke-opacity: 1; }
.co-plano a:focus-visible .co-z { stroke: var(--opt-focus); stroke-opacity: 1; stroke-width: 7; }
.co-z-t { font-family: var(--opt-font); font-weight: 600; fill: var(--opt-heading); letter-spacing: 0.04em; pointer-events: none; }
.co-plano.foto .co-z { fill: #fff; fill-opacity: 0.1; stroke: #fff; stroke-opacity: 0.85; }
.co-plano.foto .co-z-t { fill: #fff; paint-order: stroke; stroke: rgba(20, 33, 47, 0.75); stroke-width: 5px; }
.co-grad-s { stop-color: var(--opt-accent); }
.co-calor { fill: url(#co-grad); pointer-events: none; }
.co-punto { fill: var(--opt-accent); stroke: var(--opt-surface-raised); }
.co-punto-t { font-family: var(--opt-font); font-weight: 700; fill: var(--opt-brand-ink); pointer-events: none; }
.co-marca-agua { font-family: var(--opt-font); font-weight: 600; fill: var(--opt-text-muted); letter-spacing: 0.12em; }
.co-mapa-pie { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-mapa-pie span { display: inline-flex; align-items: center; gap: 6px; }
.lg-zona { width: 12px; height: 12px; border-radius: 3px; background: var(--opt-info-soft); border: 1.5px solid var(--opt-heading); }
.lg-calor { width: 12px; height: 12px; border-radius: 50%; background: var(--opt-accent); }
.co-nota { margin-top: 6px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-visor { aspect-ratio: 16 / 9; }

/* el pulso */
.co-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); white-space: nowrap; }
.co-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--opt-accent); display: inline-block; }
.co-chart .chart { max-height: 240px; }
.co-chart .chart rect.b { fill: var(--opt-brand-peach); stroke: var(--opt-chart-1); stroke-width: 1; }
.co-chart .chart rect.b.hoy { fill: var(--opt-accent); stroke: var(--opt-accent); }
.co-pulso .datos-tabla { margin-bottom: 14px; }

/* del hallazgo a la acción */
.co-accs { list-style: none; padding: 0; margin-bottom: 14px; }
.co-accs li + li { border-top: 1px solid var(--opt-border); }
.co-acc { display: flex; align-items: center; gap: 12px; padding: 12px 6px; color: inherit; border-radius: var(--opt-radius-control); }
.co-acc:hover { background: var(--opt-surface-raised); }
.co-acc-est { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--opt-border-strong); display: grid; place-items: center; flex: none; color: var(--opt-text-secondary); }
.co-acc-est.vencida, .co-acc-est.error { border-color: var(--opt-error); color: var(--opt-error); background: var(--opt-error-soft); }
.co-acc-est.aviso { border-color: var(--opt-warning); color: var(--opt-warning); }
.co-acc-est.acento { border-color: var(--opt-accent); color: var(--opt-accent-text); }
.co-acc-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.co-acc-txt b { font-weight: 600; color: var(--opt-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-acc-txt small { font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--opt-surface-inset); border: 1px solid var(--opt-border); color: var(--opt-text-secondary); font-size: 11px; font-weight: 700; }
.co-pie { display: flex; align-items: flex-start; gap: 8px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); }
.co-pie .ic { margin-top: 2px; }

@media (max-width: 1399px) { .co-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .co-fila, .co-fila-b { grid-template-columns: minmax(0, 1fr); } }