/* 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) {
  /* Con sidebar visible, la tarjeta de salud ya no admite dona y hallazgos lado a lado. */
  .ops-salud { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ops-salud > :not(.ops-donut) { min-width: 0; width: 100%; }
  .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-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; }
}

/* ── Cards de entidad rica (Fase 122, portadas de PHOS_FLOW site.css:1693+) ─── */
/* Identidad + 2 columnas de datos para listados de entidades ricas (ej. Automatizaciones):
   una card por fila, no un grid de tiles angosto. El contenedor de grilla del producto debe
   forzar una sola columna (`grid-template-columns: 1fr`) para que .op-card use el ancho completo. */
.op-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--panel) 96%, var(--surface));
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

:root[data-theme="dark"] .op-card {
  background: color-mix(in srgb, var(--panel) 94%, var(--surface));
  box-shadow: none;
}

/* Proporciones fijas (fr), no px: las 3 columnas ocupan siempre el 100% del ancho de la card. */
.op-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: start;
  gap: 16px;
}

.op-card-identity {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.op-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
}

.op-card-identity-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.op-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-card-title-row strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.op-card-desc {
  font-size: 11.5px;
  line-height: 1.35;
}

.op-stat-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.op-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.op-stat-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
}
.op-stat-icon.op-stat-ok      { background: color-mix(in srgb, var(--success) 16%, var(--panel)); color: color-mix(in srgb, var(--success) 60%, var(--ink)); }
.op-stat-icon.op-stat-danger  { background: var(--danger-dim); color: var(--danger); }
.op-stat-icon.op-stat-running { background: var(--accent-dim); color: var(--accent); }

.op-stat-text { min-width: 0; display: grid; gap: 2px; }
.op-stat-text small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.op-stat-text b {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-stat-text b code { font-size: 11px; font-weight: 600; color: var(--muted); }

.op-stat-ok      { color: color-mix(in srgb, var(--success) 65%, var(--ink)); }
.op-stat-danger  { color: var(--danger); }
.op-stat-running { color: var(--accent); }

@media (max-width: 860px) {
  .op-card-main { grid-template-columns: 1fr; }
  .op-stat-col {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px;
  }
  .op-stat { width: calc(50% - 5px); }
}

.op-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 18px; }
.op-alert-text { color: var(--danger) !important; }

.op-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.op-card-tags-secondary {
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}

.op-card-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.op-detail { font-size: 11px; line-height: 1.4; }

/* Logos de apps usadas por la entidad (ej. Fase 115 de PhosCore, .logo-app), tamaño chico dentro
   de la card. */
.op-card-apps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.op-card-apps .logo-app { width: 18px; height: 18px; }

.op-muted { color: var(--muted); font-size: 12px; }