/* monitor.css — seccion Plataforma (Fase 2 del monitor).
   Cero HEX/px/sombras hardcodeados: solo tokens --ec-* (AGENTS.md, prohibicion 1).
   El tema NO se define aqui: la seccion arranca con el tema del portal y el
   boton de tema pone data-theme="dark" en su contenedor, con lo que
   tokens.css re-declara las variables solo para ese subarbol.
   CONTRASTE: el texto tenue usa --ec-text-2, no --ec-text-3. Medido sobre
   --ec-surface, text-3 da 3.85:1 en claro y 4.22:1 en oscuro: reprueba el
   4.5:1 de WCAG AA en AMBOS temas. text-2 da 5.69:1 y 6.33:1. */

/* La seccion pinta su propio fondo y color de texto con los tokens: en claro
   coincide con el del portal (sin cambio visible) y en oscuro evita que las
   tarjetas oscuras floten sobre el fondo claro del portal. */
.plat-seccion { background: var(--ec-bg); color: var(--ec-text); }
.plat-seccion h1, .plat-seccion h3 { color: var(--ec-text); }
.plat-seccion .adm-top p { color: var(--ec-text-2); }

/* ── Franja del estado global ───────────────────────────── */
.plat-franja {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--ec-space-3);
  padding: var(--ec-space-5) var(--ec-space-6);
  border: 1px solid var(--ec-border);
  border-left-width: var(--ec-space-2);
  border-radius: var(--ec-radius-lg);
  background: var(--ec-surface);
  box-shadow: var(--ec-shadow-sm);
  margin-bottom: var(--ec-space-5);
}
.plat-franja .titulo { font-size: 1.25rem; font-weight: 700; color: var(--ec-text); margin: 0; }
.plat-franja .sub { font-size: .875rem; color: var(--ec-text-2); margin: var(--ec-space-1) 0 0; }
.plat-franja.est-verde    { border-left-color: var(--ec-success); }
.plat-franja.est-amarillo { border-left-color: var(--ec-warning); }
.plat-franja.est-rojo     { border-left-color: var(--ec-danger); }
.plat-franja.est-gris     { border-left-color: var(--ec-border-strong); }

/* ── Insignia de estado: color + texto (nunca solo color) ── */
.plat-badge {
  display: inline-flex; align-items: center; gap: var(--ec-space-2);
  padding: var(--ec-space-1) var(--ec-space-3);
  border-radius: var(--ec-radius-full);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.plat-badge .glifo { font-family: var(--ec-font-mono); font-weight: 700; }
.plat-badge.est-verde    { background: var(--ec-success-100); color: var(--ec-success-700); border-color: var(--ec-success-300); }
.plat-badge.est-amarillo { background: var(--ec-warning-100); color: var(--ec-warning-700); border-color: var(--ec-warning-300); }
.plat-badge.est-rojo     { background: var(--ec-danger-100);  color: var(--ec-danger-700);  border-color: var(--ec-danger-300); }
.plat-badge.est-gris     { background: var(--ec-bg-subtle);   color: var(--ec-text-2);      border-color: var(--ec-border); }

/* ── Aviso de dato viejo / monitor caido ────────────────── */
.plat-aviso {
  display: flex; align-items: center; gap: var(--ec-space-3);
  padding: var(--ec-space-4) var(--ec-space-5);
  margin-bottom: var(--ec-space-5);
  border: 1px solid var(--ec-warning-300);
  border-radius: var(--ec-radius-md);
  background: var(--ec-warning-100);
  color: var(--ec-warning-700);
  font-size: .875rem;
}

/* ── Rejilla de tarjetas ────────────────────────────────── */
.plat-grid {
  display: grid; gap: var(--ec-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--ec-space-6);
}
.plat-card {
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  background: var(--ec-surface);
  padding: var(--ec-space-5);
  box-shadow: var(--ec-shadow-sm);
  min-width: 0;
}
.plat-card.ancho-total { grid-column: 1 / -1; }
.plat-card .cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-space-3); margin-bottom: var(--ec-space-3); }
.plat-card h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ec-text-2); margin: 0; font-weight: 600; }
.plat-card .dato { font-size: 1.125rem; font-weight: 600; color: var(--ec-text); margin: 0 0 var(--ec-space-1); }
.plat-card .nota { font-size: .8125rem; color: var(--ec-text-2); margin: 0; }
.plat-card .metricas { display: flex; flex-wrap: wrap; gap: var(--ec-space-4); margin-top: var(--ec-space-2); }
.plat-card .metricas div { min-width: 0; }
.plat-card .metricas .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-text-2); }
.plat-card .metricas .v { font-size: 1rem; font-weight: 600; color: var(--ec-text); font-variant-numeric: tabular-nums; }

/* Hallazgo de seguridad: los rangos, no solo el color */
.plat-hallazgo { margin-top: var(--ec-space-3); }
.plat-hallazgo summary { cursor: pointer; font-size: .8125rem; color: var(--ec-text-2); padding: var(--ec-space-2) 0; }
.plat-hallazgo summary:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; border-radius: var(--ec-radius-sm); }
.plat-rangos {
  display: flex; flex-wrap: wrap; gap: var(--ec-space-2);
  margin-top: var(--ec-space-2); max-height: 9rem; overflow-y: auto;
}
.plat-rangos code {
  font-family: var(--ec-font-mono); font-size: .75rem;
  background: var(--ec-bg-subtle); color: var(--ec-text-2);
  border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-1) var(--ec-space-2);
}

/* ── Graficas (SVG generado en el servidor) ─────────────── */
.plat-cab-graficas {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--ec-space-3); margin-bottom: var(--ec-space-3);
}
.plat-ventanas { display: flex; gap: var(--ec-space-1); }
.plat-vent {
  font: inherit; font-size: .8125rem;
  padding: var(--ec-space-2) var(--ec-space-4);
  border: 1px solid var(--ec-border); background: var(--ec-surface);
  color: var(--ec-text-2); cursor: pointer;
  border-radius: var(--ec-radius-sm);
  transition: background var(--ec-dur-fast) var(--ec-ease-standard);
}
.plat-vent:hover { background: var(--ec-hover); color: var(--ec-text); }
.plat-vent:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.plat-vent.act {
  background: var(--ec-accent); color: var(--ec-on-accent);
  border-color: var(--ec-accent); font-weight: 600;
}
.plat-graficas {
  display: grid; gap: var(--ec-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--ec-space-6);
}
.plat-graf-card {
  border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg);
  background: var(--ec-surface); padding: var(--ec-space-5);
  box-shadow: var(--ec-shadow-sm); min-width: 0;
}
.plat-graf-card .cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ec-space-3); margin-bottom: var(--ec-space-2); }
.plat-graf-card h4 { margin: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ec-text-2); font-weight: 600; }
.plat-graf-card .actual { font-size: 1.125rem; font-weight: 600; color: var(--ec-text); font-variant-numeric: tabular-nums; }
.plat-graf-card .pie { font-size: .75rem; color: var(--ec-text-2); margin: var(--ec-space-2) 0 0; }
.plat-graf-card .aviso-cobertura { color: var(--ec-warning); }
.plat-grafica { width: 100%; height: 10rem; display: block; }

/* ── Tabla de aplicaciones ──────────────────────────────── */
.plat-tabla-wrap { overflow-x: auto; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); background: var(--ec-surface); }
.plat-tabla { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.plat-tabla th, .plat-tabla td { padding: var(--ec-space-3) var(--ec-space-4); text-align: left; white-space: nowrap; }
.plat-tabla th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-text-2); font-weight: 600; border-bottom: 1px solid var(--ec-border); }
.plat-tabla td { border-bottom: 1px solid var(--ec-border); color: var(--ec-text); font-variant-numeric: tabular-nums; }
.plat-tabla tbody tr:last-child td { border-bottom: 0; }
.plat-tabla .app-nombre { font-weight: 600; }
.plat-tabla .dominio { color: var(--ec-text-2); font-size: .75rem; }
.plat-tabla .vacio { color: var(--ec-text-2); }
.plat-tabla .alerta { color: var(--ec-warning); font-weight: 600; }

/* Acciones maquetadas (llegan en una fase posterior) */
.plat-acciones { display: flex; gap: var(--ec-space-2); }
.plat-acciones button[disabled] {
  font: inherit; font-size: .75rem;
  padding: var(--ec-space-1) var(--ec-space-3);
  border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm);
  background: var(--ec-bg-subtle); color: var(--ec-disabled);
  cursor: not-allowed;
}
.plat-pie { font-size: .75rem; color: var(--ec-text-2); margin-top: var(--ec-space-3); }

/* ── Esqueleto de carga ─────────────────────────────────── */
.plat-skel { border-radius: var(--ec-radius-sm); background: var(--ec-bg-subtle); height: var(--ec-space-4); animation: platPulso var(--ec-dur-slower) var(--ec-ease-standard) infinite alternate; }
@keyframes platPulso { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plat-skel { animation: none; } }

/* ── Responsive: una columna en movil, tabla a tarjetas ─── */
@media (max-width: 900px) {
  .plat-grid, .plat-graficas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .plat-tabla-wrap { border: 0; background: transparent; overflow-x: visible; }
  .plat-tabla, .plat-tabla tbody, .plat-tabla tr, .plat-tabla td { display: block; width: 100%; }
  .plat-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plat-tabla tr {
    border: 1px solid var(--ec-border); border-radius: var(--ec-radius-md);
    background: var(--ec-surface); margin-bottom: var(--ec-space-3); padding: var(--ec-space-3);
  }
  .plat-tabla td { border-bottom: 0; display: flex; justify-content: space-between; gap: var(--ec-space-4); white-space: normal; padding: var(--ec-space-2) 0; }
  .plat-tabla td::before { content: attr(data-col); font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-text-2); font-weight: 600; }
}

/* ── Fase 3 y 3b: acciones sobre el servidor ────────────────────
   Todo sale de tokens --ec-*. Los botones copian el patron de .plat-vent,
   que es el que ya usa el panel.

   PASO DE RAMPA POR TEMA, y no es capricho: medido sobre las superficies
   reales, --ec-danger da 4.42 en claro (no llega a AA para texto normal) y
   5.51 en oscuro; --ec-danger-700 da 7.85 en claro y 2.07 en oscuro. Ningun
   paso unico cumple AA en los dos temas, asi que cada tema toma el suyo.
   No son colores nuevos: son escalones de la misma rampa del sistema.
   Igual para aviso (2.51 / 5.37) y exito (3.41 / 6.78).

   El color NUNCA va solo: cada boton peligroso lleva su texto ("Bloquear",
   "Dar excepcion permanente"), los deshabilitados llevan title y
   aria-disabled, y los estados del modal se leen escritos. */
:root {
  --plat-peligro: var(--ec-danger-700);
  --plat-aviso: var(--ec-warning-700);
  --plat-exito: var(--ec-success-700);
}
[data-theme="dark"] {
  --plat-peligro: var(--ec-danger);
  --plat-aviso: var(--ec-warning);
  --plat-exito: var(--ec-success);
}

/* Botones de la tabla de apps. Hasta Fase 3 SOLO existia la regla de
   [disabled] porque los tres botones estaban apagados; ahora hay habilitados
   y necesitan su estilo base. */
.plat-acciones button {
  font: inherit; font-size: .75rem;
  padding: var(--ec-space-1) var(--ec-space-3);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text-2);
  cursor: pointer;
  transition: background var(--ec-dur-fast) var(--ec-ease-standard),
              color var(--ec-dur-fast) var(--ec-ease-standard);
}
.plat-acciones button:hover:not([disabled]) { background: var(--ec-hover); color: var(--ec-text); }
.plat-acciones button:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.plat-acciones button[disabled] {
  background: var(--ec-bg-subtle); color: var(--ec-text-3);
  border-color: var(--ec-border); cursor: not-allowed;
}

/* Peligroso = contorno, no relleno: el sistema no tiene token de "texto sobre
   peligro", y un relleno obligaria a inventarlo. Con contorno el texto es
   --plat-peligro sobre --ec-surface, que ya cumple AA en los dos temas. */
.plat-boton-peligro,
.plat-acciones button.plat-boton-peligro {
  border-color: var(--plat-peligro); color: var(--plat-peligro);
  background: var(--ec-surface);
}
.plat-boton-peligro:hover:not([disabled]) { background: var(--ec-danger-50); color: var(--plat-peligro); }
[data-theme="dark"] .plat-boton-peligro:hover:not([disabled]) { background: var(--ec-hover); }
.plat-boton-peligro[disabled] { border-color: var(--ec-border); color: var(--ec-text-3); }

/* ── Cortafuegos ─────────────────────────────────────────────── */
.plat-fw { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); align-items: center; margin: var(--ec-space-2) 0; }
.plat-fw button {
  font: inherit; font-size: .8125rem;
  padding: var(--ec-space-2) var(--ec-space-4);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text-2);
  cursor: pointer;
  transition: background var(--ec-dur-fast) var(--ec-ease-standard),
              color var(--ec-dur-fast) var(--ec-ease-standard);
}
.plat-fw button:hover:not([disabled]) { background: var(--ec-hover); color: var(--ec-text); }
.plat-fw button:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.plat-fw button[disabled] { background: var(--ec-bg-subtle); color: var(--ec-text-3); cursor: not-allowed; }
.plat-fw input {
  font: inherit; font-family: var(--ec-font-mono); font-size: .8125rem;
  min-width: 18rem; flex: 1 1 18rem;
  padding: var(--ec-space-2) var(--ec-space-3);
  border: 1px solid var(--ec-border-strong);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text);
}
.plat-fw input:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 1px; }
.plat-fw input[disabled] { background: var(--ec-bg-subtle); color: var(--ec-text-3); cursor: not-allowed; }
.plat-fw-estado { flex-basis: 100%; margin: var(--ec-space-1) 0 0; font-size: .8125rem; color: var(--ec-text-2); }
.plat-fw-estado.error { color: var(--plat-peligro); }

/* ── Reglas permanentes ──────────────────────────────────────── */
.plat-perm-grid {
  display: grid; gap: var(--ec-space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--ec-space-2) 0 var(--ec-space-4);
}
.plat-perm-titulo { margin: 0 0 var(--ec-space-1); font-size: .875rem; color: var(--ec-text-2); }
.plat-lista-reglas { list-style: none; margin: 0; padding: 0; }
.plat-lista-reglas li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ec-space-2); padding: var(--ec-space-2) 0;
  border-bottom: 1px solid var(--ec-border);
}
.plat-lista-reglas code { font-family: var(--ec-font-mono); font-size: .8125rem; color: var(--ec-text); }
.plat-lista-reglas button {
  font: inherit; font-size: .75rem;
  padding: var(--ec-space-1) var(--ec-space-3);
  border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text-2); cursor: pointer;
  transition: background var(--ec-dur-fast) var(--ec-ease-standard);
}
.plat-lista-reglas button:hover:not([disabled]) { background: var(--ec-hover); color: var(--ec-text); }
.plat-lista-reglas button:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.plat-lista-reglas button[disabled] { background: var(--ec-bg-subtle); color: var(--ec-text-3); cursor: not-allowed; }

/* ── Modal de confirmacion ───────────────────────────────────── */
/* El velo se compone DESDE un token con color-mix: sin rgba() literal. */
.plat-modal-fondo {
  position: fixed; inset: 0;
  /* Respaldo primero para navegadores sin color-mix: velo opaco, feo pero
     usable. El de verdad va debajo y gana donde se entienda. */
  background: var(--ec-neutral-900);
  background: color-mix(in srgb, var(--ec-neutral-900) 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--ec-z-modal);
  padding: var(--ec-space-4);
}
.plat-modal-caja {
  background: var(--ec-card); color: var(--ec-text);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-lg);
  padding: var(--ec-space-5);
  max-width: 34rem; width: 100%;
}
.plat-modal-caja h3 { margin: 0 0 var(--ec-space-3); color: var(--ec-text); }
.plat-modal-caja p { color: var(--ec-text-2); margin: 0 0 var(--ec-space-3); }
.plat-modal-caja label { display: block; font-size: .8125rem; color: var(--ec-text-2); margin-top: var(--ec-space-3); }
.plat-modal-caja input,
.plat-modal-caja textarea {
  width: 100%; font: inherit; font-size: .875rem;
  padding: var(--ec-space-2) var(--ec-space-3);
  margin: var(--ec-space-1) 0 0;
  border: 1px solid var(--ec-border-strong);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text);
}
.plat-modal-caja input { font-family: var(--ec-font-mono); }
.plat-modal-caja input:focus-visible,
.plat-modal-caja textarea:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 1px; }
.plat-modal-aviso {
  border-left: 3px solid var(--plat-aviso);
  padding-left: var(--ec-space-3);
}
.plat-modal-estado { min-height: var(--ec-space-4); margin: var(--ec-space-3) 0 0; font-size: .875rem; color: var(--ec-text-2); }
.plat-modal-estado.error { color: var(--plat-peligro); }
.plat-modal-estado.ok { color: var(--plat-exito); }
.plat-modal-pie { display: flex; gap: var(--ec-space-2); justify-content: flex-end; margin-top: var(--ec-space-4); }
.plat-modal-pie button {
  font: inherit; font-size: .875rem;
  padding: var(--ec-space-2) var(--ec-space-4);
  border: 1px solid var(--ec-border-strong);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text);
  cursor: pointer;
  transition: background var(--ec-dur-fast) var(--ec-ease-standard);
}
.plat-modal-pie button:hover:not([disabled]) { background: var(--ec-hover); }
.plat-modal-pie button:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }
.plat-modal-pie button[disabled] { background: var(--ec-bg-subtle); color: var(--ec-text-3); border-color: var(--ec-border); cursor: not-allowed; }

/* -- Fase 4.1: historial ------------------------------------------ */
.plat-estado-texto { display: inline-flex; align-items: center; gap: var(--ec-space-1); white-space: nowrap; }
.plat-fw select {
  font: inherit; font-size: .8125rem;
  padding: var(--ec-space-2) var(--ec-space-3);
  border: 1px solid var(--ec-border-strong); border-radius: var(--ec-radius-sm);
  background: var(--ec-surface); color: var(--ec-text);
}
.plat-fw select:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 1px; }
#plat-hist td[data-col="Motivo"] { max-width: 28rem; color: var(--ec-text-2); font-size: .8125rem; }