/* Superficies operativas compartidas. La app agrega datos y dominio, no geometría base.
   Todo Centro operativo de la suite se arma con estas piezas: cada producto cambia qué mide,
   no cómo se ve. Las primitivas de dibujo viven en phos-operations.js. */

/* ── Encabezado y línea de ruta ─────────────────────────────────────── */
.ops-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ops-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-route { position: relative; height: 18px; margin: 0 4px 2px; border-top: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ops-route::before { content: ""; position: absolute; top: -1px; left: 8%; right: 8%; border-top: 2px solid var(--accent); opacity: .52; }
.ops-route span, .ops-route i { position: absolute; top: -5px; width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.ops-route span { left: 8%; }
.ops-route i:nth-of-type(1) { left: 34%; }
.ops-route i:nth-of-type(2) { left: 57%; }
.ops-route i:nth-of-type(3) { left: 78%; }
.ops-route i:nth-of-type(4) { right: 8%; }

/* ── Grillas del Centro operativo ───────────────────────────────────── */
.ops-fila { display: grid; gap: 12px; margin-bottom: 12px; }
.ops-fila--salud { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ops-fila--detalle { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ops-panel { display: flex; flex-direction: column; min-width: 0; padding: 13px 15px 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--shadow-xs); }
.ops-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
/* h2 y h3 comparten estilo: algunos paneles de producto ya venían con h3 y no tiene sentido
   pedirles que cambien el nivel semántico para verse igual. */
.ops-panel h2, .ops-panel h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.ops-panel--wide { grid-column: 1 / -1; }
.ops-panel > header > span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ops-panel h2 small, .ops-panel h3 small { color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; font-weight: 400; }
.ops-panel h2 [data-lucide], .ops-panel h3 [data-lucide] { width: 15px; height: 15px; color: var(--ink-faint); }
.ops-panel-link { align-self: flex-start; margin-top: 9px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.ops-panel-link:hover { text-decoration: underline; }
.ops-leyenda { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12.5px; }
.ops-leyenda span { display: flex; align-items: center; gap: 6px; }
.ops-leyenda i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ops-leyenda .ok { color: var(--success); }
.ops-leyenda .falla { color: var(--danger); }

/* ── Salud: dona + hallazgos ────────────────────────────────────────── */
.ops-salud { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
/* Mientras no hay dona (cargando o sin datos) el mensaje ocupa el panel entero y queda centrado,
   en vez de correrse a la derecha dejando una columna vacía. */
.ops-salud:has(.ops-donut:empty) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ops-salud:has(.ops-donut:empty) .ops-donut { display: none; }
.ops-salud:has(.ops-donut:empty) .ops-salud-texto { margin: 22px 0; color: var(--muted); }
.ops-donut { position: relative; flex: none; width: 158px; height: 158px; }
.ops-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ops-donut .pista { fill: none; stroke: var(--surface2); }
/* El arco lleno es siempre la parte sana (verde). Cuando algo falla, el resto de la pista se
   tiñe de rojo: la dona se lee "esto responde / esto no", no "alarma sobre fondo neutro". */
.ops-donut .valor { fill: none; stroke: var(--success); stroke-linecap: round; transition: stroke-dasharray .5s cubic-bezier(.2,.7,.3,1); }
.ops-donut.aviso .pista { stroke: var(--warning-dim); }
.ops-donut.alerta .pista { stroke: var(--danger-dim); }
.ops-donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ops-donut-centro strong { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ops-donut-centro strong span { font-size: 22px; }
.ops-donut-centro small { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.ops-salud-texto { margin: 0 0 9px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.ops-hallazgos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ops-hallazgo { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--panel); font-size: 13.5px; }
.ops-hallazgo [data-lucide] { flex: none; width: 17px; height: 17px; }
.ops-hallazgo span { flex: 1 1 auto; min-width: 0; }
.ops-hallazgo strong { font-weight: 700; }
.ops-hallazgo--error [data-lucide] { color: var(--danger); }
.ops-hallazgo--aviso [data-lucide] { color: var(--warning); }
.ops-hallazgo--info [data-lucide] { color: var(--accent); }

/* ── Series y sparklines ────────────────────────────────────────────── */
.ops-serie { width: 100%; }
.ops-serie svg { display: block; width: 100%; height: auto; overflow: visible; }
.ops-serie .grilla { stroke: var(--line); stroke-width: 1; }
.ops-serie .eje { fill: var(--muted); font-family: var(--font-ui); font-size: 11px; }
.ops-serie .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ops-serie .linea-ok { stroke: var(--success); }
.ops-serie .linea-falla { stroke: var(--danger); }
.ops-serie .area-ok { fill: var(--success-dim); stroke: none; }
.ops-serie .punto-ok { fill: var(--success); }
.ops-serie .punto-falla { fill: var(--danger); }
.ops-serie .dato { fill: var(--muted); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; }

/* ── Tiles de métrica ───────────────────────────────────────────────── */
.ops-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ops-tile { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-top: 2px solid var(--ink-faint); border-radius: var(--radius-control); background: var(--panel); }
.ops-tile--ok { border-top-color: var(--success); }
.ops-tile--espera { border-top-color: var(--ink-faint); }
.ops-tile--falla { border-top-color: var(--danger); }
.ops-tile small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.ops-tile-valor { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ops-tile-valor strong { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.ops-tile-valor [data-lucide] { width: 17px; height: 17px; color: var(--ink-faint); }
.ops-tile--falla .ops-tile-valor [data-lucide] { color: var(--danger); }

/* Métricas en lista (total, tasa de éxito, promedio…). */
.ops-datos { display: grid; gap: 1px; margin: 10px 0 0; padding: 0; list-style: none; }
.ops-datos li { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ops-datos li:first-child { border-top: none; }
.ops-datos [data-lucide] { width: 16px; height: 16px; color: var(--ink-faint); }
.ops-datos span { flex: 1 1 auto; color: var(--muted); }
.ops-datos strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Tabla de productos y servicios ─────────────────────────────────── */
.ops-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-tabla th { padding: 0 8px 8px 0; color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; }
.ops-tabla td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.ops-tabla tbody tr:first-child td { border-top: none; }
.ops-tabla .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ops-producto { display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: var(--radius-control); white-space: nowrap; }
.ops-producto .sigla { flex: none; width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; }
.ops-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ops-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ops-estado--ok { color: var(--success); }
.ops-estado--aviso { color: var(--warning); }
.ops-estado--error { color: var(--danger); }
.ops-estado--neutro { color: var(--ink-faint); }

/* ── Timeline de eventos ────────────────────────────────────────────── */
.ops-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ops-timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.ops-timeline li:first-child { border-top: none; padding-top: 0; }
.ops-timeline .marca { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.ops-timeline .marca [data-lucide] { width: 18px; height: 18px; }
.ops-timeline .evt-error .marca [data-lucide] { color: var(--danger); }
.ops-timeline .evt-aviso .marca [data-lucide] { color: var(--warning); }
.ops-timeline .evt-ok .marca [data-lucide] { color: var(--success); }
.ops-timeline .evt-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.ops-timeline .evt-origen { color: var(--ink); font-weight: 600; }
.ops-timeline p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ops-badge { padding: 1px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ops-badge--error { background: var(--danger-dim); color: var(--danger); }
.ops-badge--aviso { background: var(--warning-dim); color: var(--warning); }
.ops-badge--ok { background: var(--success-dim); color: var(--success); }

/* ── Banner de próximo paso ─────────────────────────────────────────── */
.ops-banner { display: flex; align-items: center; gap: 15px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); }
.ops-banner-icono { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.ops-banner-icono [data-lucide] { width: 22px; height: 22px; color: var(--muted); }
.ops-banner-texto { flex: 1 1 auto; min-width: 0; }
.ops-banner-texto strong { display: block; margin-bottom: 3px; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.ops-banner-texto span { color: var(--muted); font-size: 13px; }
.ops-banner-acciones { display: flex; align-items: center; gap: 12px; }

/* ── Métricas sueltas (compatibilidad con pantallas previas) ────────── */
.ops-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ops-metric { min-width: 0; padding: 10px 14px 9px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--shadow-xs); }
.ops-metric-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ops-metric-head svg { width: 15px; height: 15px; }
.ops-metric-head span, .ops-metric small { display: block; color: var(--muted); font-size: 11px; }
.ops-metric-head span { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ops-metric strong { display: block; margin: 0 0 2px; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.ops-chart-panel { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); }
.ops-chart-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-family: var(--font-display); font-size: 14px; }

@media (max-width: 1180px) {
  .ops-fila--detalle { grid-template-columns: 1fr 1fr; }
  .ops-fila--detalle > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ops-fila--salud, .ops-fila--detalle { grid-template-columns: 1fr; }
  .ops-fila--detalle > :last-child { grid-column: auto; }
  .ops-salud { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ops-header { align-items: flex-start; flex-direction: column; }
  .ops-metrics { grid-template-columns: 1fr 1fr; }
  .ops-banner { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .ops-metrics, .ops-tiles { grid-template-columns: 1fr; }
}