/* ============================================================
   Tabla comparativa de posturas — hoja de estilo única.
   Tema oscuro por defecto; el claro redefine los mismos tokens.
   ============================================================ */

:root {
  --fuente: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Capas de superficie, de más honda a más elevada */
  --fondo: #070a10;
  --superficie-1: #0b0f17;
  --superficie-2: #111724;
  --superficie-3: #161d2c;
  --superficie-4: #1e2737;

  --borde: #232d3f;
  --borde-suave: #1a2231;
  --borde-fuerte: #32405a;

  --texto: #eaf0fa;
  --texto-medio: #a4b3c8;
  --texto-tenue: #6f8098;

  --acento: #6ea8fe;
  --acento-2: #8b7cf8;
  --acento-texto: #9cc2ff;
  --acento-tenue: rgba(110, 168, 254, 0.14);
  --acento-borde: rgba(110, 168, 254, 0.42);
  --acento-gradiente: linear-gradient(135deg, #6ea8fe, #8b7cf8);

  --verde: #34d399;
  --verde-tenue: rgba(52, 211, 153, 0.14);
  --rojo: #fb7185;
  --rojo-tenue: rgba(251, 113, 133, 0.14);
  --ambar: #fbbf24;
  --ambar-tenue: rgba(251, 191, 36, 0.14);
  --violeta: #a78bfa;
  --violeta-tenue: rgba(167, 139, 250, 0.16);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, 0.35);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.55);

  --scroll-pulgar: #2b364a;
  --scroll-pulgar-hover: #3d4c68;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-full: 999px;

  --transicion: 160ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --col-min-compacta: 220px;
  --col-min-comoda: 320px;
  --col-identidad: 250px;
}

:root[data-tema="claro"] {
  --fondo: #eef1f6;
  --superficie-1: #f6f8fb;
  --superficie-2: #ffffff;
  --superficie-3: #f3f6fa;
  --superficie-4: #e8edf5;

  --borde: #dde3ec;
  --borde-suave: #e9eef5;
  --borde-fuerte: #c3cddd;

  --texto: #101725;
  --texto-medio: #4a5a70;
  --texto-tenue: #7b8ba1;

  --acento: #2563eb;
  --acento-2: #7c3aed;
  --acento-texto: #1d4ed8;
  --acento-tenue: rgba(37, 99, 235, 0.09);
  --acento-borde: rgba(37, 99, 235, 0.32);
  --acento-gradiente: linear-gradient(135deg, #2563eb, #7c3aed);

  --verde: #059669;
  --verde-tenue: rgba(5, 150, 105, 0.11);
  --rojo: #e11d48;
  --rojo-tenue: rgba(225, 29, 72, 0.09);
  --ambar: #b45309;
  --ambar-tenue: rgba(180, 83, 9, 0.11);
  --violeta: #6d28d9;
  --violeta-tenue: rgba(109, 40, 217, 0.1);

  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra-2: 0 6px 16px rgba(16, 24, 40, 0.08);
  --sombra-3: 0 18px 44px rgba(16, 24, 40, 0.16);

  --scroll-pulgar: #c7d0de;
  --scroll-pulgar-hover: #a9b5c8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--acento-tenue); color: var(--texto); }

/* Gana sobre cualquier `display` propio: si algo lleva [hidden], está oculto. */
[hidden] { display: none !important; }

/* ---------- barras de desplazamiento ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-pulgar);
  border: 3.5px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-pulgar-hover); background-clip: content-box; }

/* ---------- estructura ---------- */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---------- botonera base ---------- */

button { font-family: inherit; cursor: pointer; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--texto-medio);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
  white-space: nowrap;
}
.boton:hover { color: var(--texto); border-color: var(--borde-fuerte); background: var(--superficie-3); }
.boton:active { transform: translateY(1px); }
.boton.fantasma { background: transparent; box-shadow: none; }
.boton.fantasma:hover { background: var(--superficie-2); }
.boton.compacto { padding: 8px 10px; }
.boton.icono-solo { padding: 8px; }
.boton.primario {
  color: #fff;
  background: var(--acento-gradiente);
  border-color: transparent;
  box-shadow: var(--sombra-2);
}
.boton.primario:hover { filter: brightness(1.08); color: #fff; }
.boton.alternable[aria-pressed="true"] {
  color: var(--acento-texto);
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
}
.boton .icono { width: 15px; height: 15px; flex: 0 0 auto; }
.boton .flecha { width: 13px; height: 13px; opacity: 0.6; margin-left: -2px; }
.boton[aria-expanded="true"] .flecha { transform: rotate(180deg); }

.mini-boton {
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--texto-tenue);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  transition: var(--transicion);
  white-space: nowrap;
}
.mini-boton:hover { color: var(--texto); border-color: var(--borde-fuerte); background: var(--superficie-3); }

.boton:disabled, .mini-boton:disabled, .segmentado button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.boton:disabled:hover { background: var(--superficie-2); border-color: var(--borde); color: var(--texto-medio); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- encabezado ---------- */

#barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--superficie-1);
  border-bottom: 1px solid var(--borde-suave);
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca-glifo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  color: #fff;
  background: var(--acento-gradiente);
  box-shadow: var(--sombra-2);
}
.marca-textos { min-width: 0; }
.marca-textos h1 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marca-textos p {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--texto-tenue);
  letter-spacing: 0.02em;
}
.barra-acciones { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ---------- zona de controles ---------- */

#controles {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px;
  background: var(--superficie-1);
  border-bottom: 1px solid var(--borde-suave);
}

.control-bloque { display: flex; flex-direction: column; gap: 9px; }
.control-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-relleno { flex: 1 1 auto; }
.control-etiqueta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.control-nota { margin: 0; font-size: 0.75rem; color: var(--texto-tenue); line-height: 1.5; }

.pastilla {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--acento-texto);
  background: var(--acento-tenue);
  border-radius: var(--r-full);
}

/* chips de postura */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--texto-tenue);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  transition: var(--transicion);
}
.chip:hover { color: var(--texto); border-color: var(--borde-fuerte); transform: translateY(-1px); }
.chip .chip-punto {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--texto-tenue);
  opacity: 0.4;
  transition: var(--transicion);
}
.chip[aria-pressed="true"] {
  color: var(--texto);
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
}
.chip[aria-pressed="true"] .chip-punto { background: var(--acento); opacity: 1; }
.chip.fuera[aria-pressed="true"] { background: var(--ambar-tenue); border-color: rgba(251, 191, 36, 0.4); }
.chip.fuera[aria-pressed="true"] .chip-punto { background: var(--ambar); }

/* filtro por ejes */
.ejes-rejilla { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.eje-grupo { display: flex; align-items: center; gap: 9px; }
.eje-nombre { font-size: 0.76rem; color: var(--texto-tenue); }
.segmentado {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.segmentado button {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--texto-tenue);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  transition: var(--transicion);
  white-space: nowrap;
}
.segmentado button:hover { color: var(--texto); background: var(--superficie-3); }
.segmentado button[aria-pressed="true"] {
  color: var(--texto);
  background: var(--superficie-4);
  box-shadow: var(--sombra-1);
}
.segmentado button[aria-pressed="true"].marcado-acento {
  color: #fff;
  background: var(--acento-gradiente);
}

/* barra de vista */
.barra-vista {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 15px;
  border-top: 1px solid var(--borde-suave);
  flex-wrap: wrap;
}
.leyenda { display: flex; align-items: center; gap: 14px; font-size: 0.74rem; color: var(--texto-tenue); }
.leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punto-coincide { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-tenue); }
.punto-difiere { background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-tenue); }

/* ---------- popover de criterios ---------- */

.envoltura-popover { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 40;
  width: min(430px, calc(100vw - 36px));
  max-height: min(66vh, 560px);
  overflow-y: auto;
  padding: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
}
.popover-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--borde-suave);
}
.popover-cabecera strong { font-size: 0.85rem; }
.popover-acciones { display: flex; gap: 5px; }
.popover-cuerpo { display: flex; flex-direction: column; gap: 14px; }

.pop-grupo { display: flex; flex-direction: column; gap: 4px; }
.pop-grupo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.pop-grupo-nombre {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.pop-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--transicion);
}
.pop-fila:hover { background: var(--superficie-3); }
.pop-fila-texto { flex: 1 1 auto; font-size: 0.82rem; color: var(--texto-medio); line-height: 1.35; }
.pop-fila.encendida .pop-fila-texto { color: var(--texto); }

/* interruptor moderno */
.switch { position: relative; width: 36px; height: 21px; flex: 0 0 auto; }
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-pista {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--superficie-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  transition: var(--transicion);
}
.switch-bolita {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border-radius: 50%;
  background: var(--texto-tenue);
  transition: var(--transicion);
}
.switch input:checked ~ .switch-pista { background: var(--acento-gradiente); border-color: transparent; }
.switch input:checked ~ .switch-bolita { left: 19px; background: #fff; }
.switch input:focus-visible ~ .switch-pista { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- zona de la tabla ---------- */

#zona-principal {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 22px;
}

#contenedor-tabla {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
}

table#tabla {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}

table#tabla th, table#tabla td {
  text-align: left;
  vertical-align: top;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde-suave);
  overflow-wrap: break-word;
}

/* asa para cambiar el ancho de la columna */
.asa-ancho {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
}
.asa-ancho::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 3px;
  width: 2px;
  border-radius: 2px;
  background: var(--borde-fuerte);
  opacity: 0;
  transition: opacity var(--transicion), background var(--transicion);
}
th:hover .asa-ancho::after { opacity: 0.9; }
.asa-ancho:hover::after { opacity: 1; background: var(--acento); }
body.redimensionando { cursor: col-resize; user-select: none; }

.rotulo-esquina {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* encabezado */
table#tabla thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 0;
  background: var(--superficie-3);
  border-bottom: 1px solid var(--borde);
}
.th-interno {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  min-height: 42px;
}
.th-titulo {
  flex: 1 1 auto;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--texto-medio);
}
thead th.estado-coincide { box-shadow: inset 0 3px 0 var(--verde); }
thead th.estado-difiere { box-shadow: inset 0 3px 0 var(--rojo); }
.th-punto { margin-top: 4px; }

.th-acciones { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--transicion); }
th:hover .th-acciones, th:focus-within .th-acciones, th.col-fija .th-acciones { opacity: 1; }
.th-btn {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  color: var(--texto-tenue);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  transition: var(--transicion);
}
.th-btn svg { width: 14px; height: 14px; }
.th-btn:hover { color: var(--texto); background: var(--superficie-4); }
.th-btn.activo { color: var(--acento-texto); background: var(--acento-tenue); }

/* fila de grupos */
table#tabla thead tr.fila-grupos th { background: var(--superficie-1); border-bottom: 1px solid var(--borde-suave); }
.grupo-rotulo {
  display: block;
  padding: 8px 13px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* celdas de cuerpo */
table#tabla tbody td { padding: 11px 13px; font-size: 0.85rem; line-height: 1.55; color: var(--texto-medio); }
table#tabla tbody tr:hover td { background: var(--superficie-3); }
/* Sin este corte, la última línea desborda un píxel y aparece un scroll vertical inútil. */
table#tabla tbody tr:last-child td { border-bottom: 0; }

/* columna de identidad y columnas fijas */
table#tabla .col-identidad {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: var(--col-identidad);
  max-width: 290px;
  font-weight: 600;
  color: var(--texto);
}
table#tabla thead .col-identidad { z-index: 6; background: var(--superficie-3); }
table#tabla thead tr.fila-grupos .col-identidad { background: var(--superficie-1); }
table#tabla .col-fija { position: sticky; z-index: 2; }
table#tabla thead .col-fija { z-index: 5; }
table#tabla .col-identidad::after, table#tabla .col-fija.ultima-fija::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: var(--borde-fuerte);
}
table#tabla .col-identidad.sin-separador::after { display: none; }
table#tabla tbody tr:hover .col-identidad,
table#tabla tbody tr:hover .col-fija { background: var(--superficie-3); }

/* anchos por densidad */
table#tabla.densidad-compacta th:not(.col-identidad), table#tabla.densidad-compacta td:not(.col-identidad) { min-width: var(--col-min-compacta); }
table#tabla.densidad-comoda th:not(.col-identidad), table#tabla.densidad-comoda td:not(.col-identidad) { min-width: var(--col-min-comoda); }

/* texto recortado */
.celda-texto { display: block; }
.densidad-compacta .celda-texto.recortable {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
  transition: color var(--transicion);
}
.densidad-compacta .celda-texto.recortable:hover { color: var(--acento-texto); }

/* etiquetas de valor corto */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: var(--r-full);
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* El tono lo declara el dato en etiquetas[].tono, no el id de la etiqueta. */
.etiqueta-tono-positivo { color: var(--verde); background: var(--verde-tenue); }
.etiqueta-tono-negativo { color: var(--rojo); background: var(--rojo-tenue); }
.etiqueta-tono-medio { color: var(--ambar); background: var(--ambar-tenue); }
.etiqueta-tono-neutro { color: var(--texto-tenue); background: var(--superficie-4); }
.etiqueta-tono-especial { color: var(--violeta); background: var(--violeta-tenue); }

/* filas especiales */
.fila-corte td {
  padding: 7px 13px !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
  background: var(--ambar-tenue) !important;
  border-top: 1px solid rgba(251, 191, 36, 0.35);
}
.fila-grupo-volteada td {
  padding: 8px 13px !important;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  background: var(--superficie-1) !important;
}
.col-corte { box-shadow: inset 2px 0 0 var(--ambar); }
thead th.col-corte.estado-coincide { box-shadow: inset 0 3px 0 var(--verde), inset 2px 0 0 var(--ambar); }
thead th.col-corte.estado-difiere { box-shadow: inset 0 3px 0 var(--rojo), inset 2px 0 0 var(--ambar); }

/* estado del criterio en la vista volteada (etiqueta de fila) */
td.col-identidad.estado-coincide { box-shadow: inset 3px 0 0 var(--verde); }
td.col-identidad.estado-difiere { box-shadow: inset 3px 0 0 var(--rojo); }
.identidad-interno { display: flex; align-items: flex-start; gap: 8px; }
.identidad-interno .th-acciones { opacity: 0; }
td.col-identidad:hover .th-acciones, td.col-identidad:focus-within .th-acciones, td.col-fija .th-acciones { opacity: 1; }

/* ---------- aviso de vacío ---------- */

#aviso-vacio { flex: 1 1 auto; display: grid; place-items: center; }
.aviso-vacio-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  padding: 38px 32px;
  text-align: center;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
}
.aviso-vacio-caja p { margin: 0; color: var(--texto-medio); line-height: 1.6; }

/* ---------- fichas (teléfono) ---------- */

#contenedor-fichas { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; flex-direction: column; gap: 12px; }
.ficha {
  padding: 15px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}
.ficha.ficha-corte { border-top: 2px solid var(--ambar); }
.ficha h3 { margin: 0 0 13px; font-size: 0.95rem; line-height: 1.4; }
.ficha-grupo + .ficha-grupo { margin-top: 13px; }
.ficha-grupo h4 {
  margin: 0 0 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.ficha-fila { padding: 7px 0; border-bottom: 1px solid var(--borde-suave); }
.ficha-fila:last-child { border-bottom: 0; }
.etiqueta-criterio { font-size: 0.72rem; color: var(--texto-tenue); margin-bottom: 3px; }
.valor-criterio { font-size: 0.86rem; line-height: 1.55; color: var(--texto-medio); cursor: pointer; }

/* ---------- modales ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 12, 0.66);
  backdrop-filter: blur(3px);
}
.modal.oculto { display: none; }
.modal-caja {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px 26px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
}
.modal-caja.ancha { max-width: 720px; }
.modal-caja .cerrar { position: absolute; top: 14px; right: 14px; }
.modal-supra {
  margin: 0 0 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.modal-caja h2 { margin: 0 0 18px; font-size: 1.1rem; padding-right: 40px; }
.modal-caja h3 { margin: 0 0 12px; font-size: 1rem; line-height: 1.4; padding-right: 40px; }

/* ficha completa de la postura dentro del panel */
#modal-ficha { margin-top: 16px; }
#modal-ficha .ficha-grupo + .ficha-grupo { margin-top: 16px; }
#modal-ficha .ficha-grupo h4 {
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
#modal-ficha .ficha-fila {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde-suave);
  border-radius: var(--r-sm);
}
#modal-ficha .ficha-fila:last-child { border-bottom: 0; }
#modal-ficha .valor-criterio { cursor: default; }
#modal-ficha .ficha-fila.resaltada {
  background: var(--acento-tenue);
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--acento);
}
#modal-ficha .ficha-fila.resaltada .etiqueta-criterio { color: var(--acento-texto); }
#modal-ficha .ficha-fila.resaltada .valor-criterio { color: var(--texto); }
.guia-seccion + .guia-seccion { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--borde-suave); }
.guia-seccion h3 { margin: 0 0 10px; font-size: 0.88rem; padding-right: 0; }
.guia-seccion ul { margin: 0 0 10px; padding-left: 20px; color: var(--texto-medio); }
.guia-seccion li { margin-bottom: 7px; line-height: 1.6; font-size: 0.88rem; }
.guia-seccion blockquote {
  margin: 0 0 10px;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--acento-tenue);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ---------- aviso flotante ---------- */

#aviso {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 70;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 18px;
  font-size: 0.83rem;
  color: var(--texto);
  background: var(--superficie-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  box-shadow: var(--sombra-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
#aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- responsivo ---------- */

@media (max-width: 860px) {
  #barra { padding: 12px 14px; }
  #controles { padding: 14px; gap: 13px; }
  #zona-principal { padding: 14px; }
  .marca-textos h1 { font-size: 0.92rem; }
  .boton .rotulo { display: none; }
  .boton.alternable .rotulo, #btn-criterios .rotulo { display: inline; }

  /* Carruseles horizontales: evitan que los controles coman la pantalla. */
  .chips, .ejes-rejilla {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    gap: 7px;
  }
  .ejes-rejilla { gap: 16px; }
  .chip, .eje-grupo { flex: 0 0 auto; }
  .barra-vista { padding-top: 12px; gap: 7px; }
}

@media (max-width: 760px) {
  #contenedor-tabla { display: none; }
  #contenedor-fichas { display: flex; }
  .barra-vista .leyenda { width: 100%; }
}