/* ══════════════════════════════════════════════════════════════════════════════
   TEMIS (PDL15) — product extension stylesheet
   Revisor de menús. Consumes the EcoMT Product Discovery Lab base
   (css/ds/styles.css) + the KELVIN extension (advisory / confidence)
   and layers on Temis-specific patterns: the deployment landing,
   the section-nav shell, the interactive standard/facility/analysis
   tables, verification badges, the verifier and the global progress.

   Load order (see index.html):
     css/ds/styles.css          ← tokens + lab.css vocabulary
     css/ds/styles/kelvin.css   ← .advisory / .confidence
     css/temis.css              ← this file
   ────────────────────────────────────────────────────────────────────────────── */

/* ── App shell scaffold ───────────────────────────────────────────────────── */
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[hidden] { display: none !important; }

/* ══ FLAGBAR ════════════════════════════════════════════════════════════════ */
@keyframes temis-blink { 50% { opacity: 0.25; } }

.flagbar {
  flex-shrink: 0;
  background: #f8fafc;
  border-bottom: 1px solid #e4e4e7;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #52525b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.flagbar-inner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.flagbar-inner strong { color: #18181b; font-weight: 700; letter-spacing: 0.1em; }
.flagbar-sub { color: #71717a; }
.flagbar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-600);
  animation: temis-blink 1.8s infinite;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
  flex-shrink: 0;
}
.flagbar-right { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.flagbar-env { color: #71717a; }
.flagbar-sep { color: #d4d4d8; }

.estado-api {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: #a1a1aa;
  white-space: nowrap;
}
.estado-api.online  { color: var(--green-600); }
.estado-api.offline { color: var(--red-600); }

/* ══ VISTA INICIO — landing de despliegues ══════════════════════════════════ */
.vista-inicio {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-app);
}
.landing-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px 56px;
}
.landing-head { margin-bottom: 28px; }
.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-600);
  animation: temis-blink 1.6s infinite;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
}
.landing-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.landing-sub {
  font-size: 14px;
  color: var(--slate-500);
  max-width: 64ch;
  margin-top: 8px;
  line-height: 1.6;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  margin-bottom: 12px;
  padding: 0;
}

.grid-dep-inicio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.card-dep {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.card-dep:hover {
  border-color: #bfdbfe;
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(37,99,235,0.06);
  transform: translateY(-1px);
}
.card-dep.sin-token { opacity: 0.6; cursor: not-allowed; }
.card-dep.sin-token:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-card);
  transform: none;
}
.card-dep-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -0.005em;
}
.card-dep-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-dep-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.card-dep-badge.ok  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.card-dep-badge.nok { background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200); }

/* ══ SECTION NAV (sustituye al sidebar oscuro) ══════════════════════════════ */
.layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.section-nav {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  overflow-x: auto;
}
.section-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: auto;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 12px 11px;
  border: none;
  background: none;
  color: var(--slate-500);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-item:hover { color: var(--slate-900); background: var(--slate-50); }
.nav-item.activo {
  color: var(--navy-800);
  border-bottom-color: var(--blue-600);
  font-weight: 600;
}
.nav-icono { width: 16px; height: 16px; flex-shrink: 0; }

/* Bloque de despliegue activo (izquierda de la barra de secciones) */
.nav-dep-info {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.nav-dep-nombre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--navy-50);
  border: 1px solid #d7dfef;
  padding: 4px 9px;
  border-radius: 3px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-volver {
  font-size: 12px;
  color: var(--blue-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.btn-volver:hover { color: var(--accent-hover); text-decoration: underline; }

/* ══ CONTENIDO — page-header + page-body ════════════════════════════════════ */
.contenido-principal {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-app);
  padding: 0;
}
.contenido-principal > .aviso,
.contenido-principal > .cargando,
.contenido-principal > .error { padding: 28px 24px; }

.page-header {
  display: block;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 15px;
}
.page-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title .dep-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--navy-50);
  border: 1px solid #d7dfef;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0;
}
.page-subtitle {
  font-size: 13px;
  color: var(--slate-500);
  max-width: 76ch;
  line-height: 1.55;
}
.page-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.page-body {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: 20px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Compat: cabeceras antiguas inline */
.seccion-header { display: flex; flex-direction: column; gap: 4px; }
.subtitulo { font-size: 13px; color: var(--slate-500); line-height: 1.55; }

/* ══ ESTADOS GENERALES ══════════════════════════════════════════════════════ */
.aviso    { color: var(--slate-500); font-size: 13px; }
.cargando { color: var(--slate-500); font-style: italic; font-size: 13px; }
.error    { color: var(--red-600); font-size: 13px; }

/* Empty / pending state (instalaciones no cargadas) */
.aviso-facilities-pendiente {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--slate-500);
  font-size: 13px;
}
.aviso-facilities-pendiente .pfl-info-meta { color: var(--slate-500); }

.facilities-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--slate-500);
}
.pfl-info-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-500); }

/* ══ BOTONES ════════════════════════════════════════════════════════════════ */
.btn-actualizar,
.btn-pfl,
.btn-verificar,
.btn-descarga,
.btn-filtro-aceptar,
.btn-filtro-limpiar {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

/* secondary (default) */
.btn-actualizar,
.btn-pfl {
  background: #fff;
  color: var(--slate-700);
  border-color: var(--border-strong);
}
.btn-actualizar:hover:not(:disabled),
.btn-pfl:hover:not(:disabled) { background: var(--slate-50); color: var(--slate-900); }

/* primary */
.btn-verificar,
.btn-descarga,
.btn-pfl.primario,
.btn-filtro-aceptar {
  background: var(--blue-600);
  color: #fff;
  border-color: var(--blue-600);
  text-decoration: none;
}
.btn-verificar:hover:not(:disabled),
.btn-descarga:hover,
.btn-pfl.primario:hover:not(:disabled),
.btn-filtro-aceptar:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-pfl:disabled,
.btn-verificar:disabled,
.btn-actualizar:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-pfl-inline { padding: 6px 11px; font-size: 12px; }
/* Variante "ghost" para acciones preliminares/secundarias (p.ej. informe Lite). */
.btn-pfl-ghost {
  background: transparent;
  color: var(--slate-500);
  border-style: dashed;
}
.btn-pfl-ghost:hover:not(:disabled) { background: var(--slate-50); color: var(--slate-700); }
.btn-descarga.no-disponible,
.btn-pfl.no-disponible {
  background: var(--slate-100);
  color: var(--slate-400);
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-filtro-limpiar {
  background: #fff;
  color: var(--slate-600);
  border-color: var(--border-strong);
  padding: 6px 11px;
}
.btn-filtro-limpiar:hover { border-color: var(--red-600); color: var(--red-600); }

.btn-limpiar-filtros {
  font-size: 11px;
  color: var(--red-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
}
.btn-limpiar-filtros:hover { text-decoration: underline; }

/* ══ TABLAS (estándar · instalaciones · análisis · global) ══════════════════ */
.tabla-estandar-contenedor,
#tabla-estandar-contenedor,
#tabla-instalaciones-contenedor,
#tabla-analisis-contenedor,
#tabla-global-contenedor { display: block; }

.tabla-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate-500);
  margin-bottom: 8px;
}
.filtro-activo-info { color: var(--blue-600); font-weight: 600; }

.tabla-estandar-scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tabla-estandar {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla-estandar thead th {
  text-align: left;
  background: var(--slate-50);
  border-bottom: 1px solid var(--border);
  color: var(--slate-500);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.tabla-estandar th:not(.th-interactivo) { padding: 10px 16px; }
.tabla-estandar td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--slate-700);
}
.tabla-estandar tbody tr { transition: background 0.12s; }
.tabla-estandar tbody tr:hover { background: var(--slate-50); }
.tabla-estandar tbody tr:last-child td { border-bottom: 0; }

/* nivel_1 destacado al cambiar de grupo */
.tabla-estandar td.n1-label { font-weight: 600; color: var(--slate-900); }

/* celdas de ejemplo: mono, atenuadas */
.celda-ejemplo {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate-500);
  font-style: normal;
  white-space: pre-line;
}

/* valores múltiples → chips mono */
.valores-multiples { display: flex; flex-wrap: wrap; gap: 4px; }
.valor-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  color: var(--slate-700);
}

/* ── Encabezado interactivo (sort + filtro por columna) ─────────────────────── */
.th-interactivo { padding: 0 !important; }
.th-interior { display: flex; align-items: center; gap: 4px; padding: 9px 14px; }
.th-nombre {
  flex: 1;
  cursor: pointer;
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate-500);
  transition: color 0.12s;
}
.th-nombre:hover { color: var(--blue-600); }
.btn-filtro-col {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--slate-400);
  border: none;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.btn-filtro-col:hover { background: var(--slate-200); color: var(--slate-700); }
.btn-filtro-col.activo { background: var(--blue-600); color: #fff; }

/* ── Dropdown de filtro ─────────────────────────────────────────────────────── */
.filtro-dropdown {
  position: fixed;
  z-index: 9999;
  width: 248px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.filtro-buscar-input {
  margin: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
}
.filtro-buscar-input:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.filtro-item-todos {
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  color: var(--slate-700);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.filtro-lista { overflow-y: auto; flex: 1; padding: 4px 0; }
.filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
}
.filtro-item:hover { background: var(--slate-50); }
.filtro-item input[type=checkbox] { flex-shrink: 0; cursor: pointer; accent-color: var(--blue-600); }
.filtro-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-footer {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-filtro-aceptar { flex: 1; justify-content: center; }

/* ══ BADGES — estados de verificación (mono tags) ═══════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.estado-ok         { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.badge.estado-format-ok  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.badge.estado-format-nok { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge.estado-nok        { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.badge.estado-unknown    { background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200); }
.con-tooltip { cursor: help; }

/* ══ TOOLTIP del estándar (opciones válidas) ════════════════════════════════ */
.tooltip-estandar {
  position: absolute;
  z-index: 9999;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 12px 14px;
  pointer-events: none;
}
.tip-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  margin-bottom: 8px;
}
.tip-lista { display: flex; flex-direction: column; gap: 5px; }
.tip-valor {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-800);
}
.tip-formato { font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); }
.tip-grupo { display: flex; flex-direction: column; gap: 3px; }
.tip-formato-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  margin-left: 2px;
}

/* ══ RESUMEN POR NIVEL (análisis individual y global) ═══════════════════════ */
.resumen-niveles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.resumen-nivel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.resumen-nivel h3 {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  padding: 10px 14px;
  background: linear-gradient(180deg,#fafbfd 0%,#f4f6fb 100%);
  border-bottom: 1px solid var(--border);
}
.resumen-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
}
.resumen-fila:last-child { border-bottom: 0; }
.resumen-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--slate-900);
  margin-left: auto;
}
.resumen-count-total { font-family: var(--font-mono); font-size: 11px; color: var(--slate-400); margin-left: 2px; }
.resumen-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  width: 38px;
  text-align: right;
}

/* Leyenda de estados — "honestidad por diseño" */
.leyenda-estados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--slate-600);
}
.leyenda-estados .leyenda-item { display: inline-flex; align-items: center; gap: 6px; }

/* ══ FILTROS RÁPIDOS ════════════════════════════════════════════════════════ */
.filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.filtros-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  margin-right: 2px;
}
.btn-filtro {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--slate-100);
  color: var(--slate-600);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-filtro:hover { background: var(--slate-200); }
.btn-filtro.activo { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn-filtro.estado-ok.activo         { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.btn-filtro.estado-format-ok.activo  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.btn-filtro.estado-format-nok.activo { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.btn-filtro.estado-nok.activo        { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.btn-filtro.estado-unknown.activo    { background: var(--slate-200); color: var(--slate-700); border-color: var(--slate-300); }

/* ══ ANÁLISIS INDIVIDUAL — selector ═════════════════════════════════════════ */
.barra-selector-individual {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.selector-item-wrap { display: flex; flex-direction: column; gap: 6px; }
.selector-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
}
.selector-tipo {
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--slate-900);
  cursor: pointer;
  outline: none;
}
.selector-tipo:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.selector-facility-wrap { flex: 1; min-width: 320px; }

.facility-select-custom { position: relative; }
.facility-search-input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--slate-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.facility-search-input:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.facility-search-input:disabled { opacity: 0.6; cursor: wait; }
.facility-search-input::placeholder { color: var(--slate-400); }

.facility-select-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 500;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.facility-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--slate-700);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.facility-select-item:last-child { border-bottom: 0; }
.facility-select-item:hover { background: var(--slate-50); }
.facility-select-item.analizado { color: var(--slate-500); }
.facility-select-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facility-select-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--green-600);
  white-space: nowrap;
}
.facility-select-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--slate-500); }

/* ══ VERIFICADOR ════════════════════════════════════════════════════════════ */
.verificador-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.verificador-controles { display: flex; gap: 16px; flex-wrap: wrap; }
.verificador-campo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.verificador-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.verificador-hint { font-weight: 400; color: var(--slate-500); font-size: 11px; }
.verificador-select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--slate-900);
  outline: none;
}
.verificador-select:focus { border-color: var(--blue-600); box-shadow: var(--ring); }

.verificador-texto-wrap { display: flex; gap: 10px; align-items: center; }
.verificador-input {
  flex: 1;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--slate-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.verificador-input:focus { border-color: var(--blue-600); box-shadow: var(--ring); }
.verificador-input::placeholder { color: var(--slate-400); }
.btn-verificar { height: 40px; padding: 0 20px; font-weight: 600; }

.ver-resultado-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ver-resultado-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ver-nivel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-500);
}
.ver-texto-q {
  margin: 0;
  font-size: 15px;
  color: var(--slate-900);
  font-style: normal;
  font-weight: 500;
}
.ver-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--slate-100);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--slate-600);
}
.ver-badge { font-size: 11px; padding: 4px 9px; }
.ver-formato-id { font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); }
.ver-opciones { border-top: 1px solid var(--border); padding-top: 14px; }

.ver-opciones-previas {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}
.ver-lista-previa { display: flex; flex-flow: row wrap; gap: 6px; margin-top: 8px; }
.ver-lista-previa .tip-valor {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
}
.ver-lista-previa .tip-formato {
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: 3px;
  padding: 3px 8px;
}
.ver-lista-previa .tip-grupo { flex: 0 0 100%; }

/* ══ DESCARGAS ══════════════════════════════════════════════════════════════ */
.grid-descargas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card-descarga {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-descarga h3 { font-size: 14px; font-weight: 600; color: var(--slate-900); margin: 0; }
.card-descarga p { font-size: 12.5px; color: var(--slate-500); line-height: 1.5; flex: 1; }
.btn-descarga { align-self: flex-start; }
.selector-facility-descarga {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--slate-900);
  outline: none;
  width: 100%;
}
.selector-facility-descarga:focus { border-color: var(--blue-600); box-shadow: var(--ring); }

/* ══ ANÁLISIS GLOBAL — meta + progreso ══════════════════════════════════════ */
.cabecera-global {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.meta-ejecucion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 4px;
}
.fecha-ejecucion { font-weight: 600; color: var(--slate-700); }
.meta-sep { color: var(--slate-300); }
.guardado-en code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--slate-100);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--slate-600);
}
.tabla-titulo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}

/* Panel de progreso del análisis completo (estilo pipeline del lab) */
.panel-progreso {
  background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  border: 1px solid #c7d4ee;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(37,99,235,0.05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.prog-barra-wrap {
  height: 6px;
  background: #dbeafe;
  border-radius: 3px;
  overflow: hidden;
}
.prog-barra {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.prog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-500);
}
.prog-conteo { white-space: nowrap; }
.prog-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--slate-800);
  font-weight: 500;
}
.prog-tiempo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prog-kpis { display: flex; gap: 24px; }
.prog-kpi {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.prog-kpi b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--slate-900); }
.prog-kpi-err b { color: var(--red-600); }

/* ── Ajustes de composición ─────────────────────────────────── */
.page-body > .advisory { margin: 0; }
.analisis-result-head { margin-bottom: 6px; }
.analisis-result-head .subtitulo { margin-top: 2px; }