/* =====================================================================
   ampliacion.css · Estilos de la ampliación de las aplicaciones
   Se aplican sobre la interfaz existente sin alterar clases previas.
   ===================================================================== */

:root {
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-12: 12px;
  --esp-16: 16px;
  --esp-20: 20px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-48: 48px;
  --sombra-corta: 0 1px 3px rgba(0,0,0,0.05);
}

/* === FASE J-005: Jerarquía de espaciado y respiración visual === */
.grid {
  gap: var(--esp-24, 24px) !important;
}

.card {
  padding: var(--esp-24, 24px) !important;
  margin-bottom: var(--esp-24, 24px);
}

.seccion {
  margin-top: var(--esp-32, 32px);
  margin-bottom: var(--esp-16, 16px);
}

@media (max-width: 768px) {
  .card {
    padding: var(--esp-16, 16px) !important;
    margin-bottom: var(--esp-16, 16px);
  }
}

/* === FASE B: Fichas ricas === */
.ficha-descripcion {
  font-size: 13px;
  color: var(--suave, #5B6475);
  margin-top: var(--esp-4, 4px);
  line-height: 1.4;
}

/* === FASE C: Tesis dirigidas === */

/* === FASE D: La red === */
.ampliacion-red-wrapper {
  margin-top: var(--esp-24, 24px);
  border: 1px solid var(--azul-pal, #CBDAF0);
  border-radius: var(--r-m, 12px);
  background: var(--superficie, #ffffff);
  padding: var(--esp-20, 20px);
  box-shadow: var(--sombra-corta, 0 1px 3px rgba(0,0,0,0.05));
}

.ampliacion-red-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-12, 12px);
}

.ampliacion-red-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-osc, #041B3B);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ampliacion-red-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--azul-lav, #EEF3FC);
  color: var(--azul, #0B4BAF);
  padding: 2px 8px;
  border-radius: 999px;
}

.ampliacion-red-controles {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ampliacion-red-btn {
  background: var(--superficie, #ffffff);
  border: 1px solid var(--borde-campo, #868FA3);
  border-radius: var(--r-s, 8px);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--tinta, #1B2333);
  transition: all 0.15s ease;
}

.ampliacion-red-btn:hover {
  background: var(--azul-lav, #EEF3FC);
  border-color: var(--azul, #0B4BAF);
  color: var(--azul, #0B4BAF);
}

.ampliacion-red-btn.activo {
  background: var(--azul, #0B4BAF);
  border-color: var(--azul, #0B4BAF);
  color: #ffffff;
}

#ampliacion-red-cy {
  width: 100%;
  height: 380px;
  background: #fcfdfe;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-s, 8px);
  position: relative;
}

.ampliacion-red-leyenda-focal {
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--azul-lav, #EEF3FC);
  border-radius: 4px;
  font-size: 11px;
  color: var(--azul-osc, #001452);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ampliacion-red-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--suave, #5B6475);
}

.ampliacion-red-leyenda-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ampliacion-red-leyenda-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.tabla-accesible-red {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}

.tabla-accesible-red th,
.tabla-accesible-red td {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.tabla-accesible-red th {
  background: var(--azul-lav, #EEF3FC);
  color: var(--azul-osc, #041B3B);
  font-weight: 600;
}

.tabla-accesible-red tr:nth-child(even) {
  background: #f8fafc;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === FASE E / J: Drill-down === */
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly .cursor-pointer,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly .point,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly .bar,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly .pie,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly path.point,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly path.bar,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly path.slice,
.chart:not(.grafico-no-clicable):not(#g-cobertura) .plotly g.traces path {
  cursor: pointer !important;
}

.chart.grafico-no-clicable,
.chart.grafico-no-clicable *,
#g-cobertura,
#g-cobertura * {
  cursor: default !important;
}

.ampliacion-migas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--azul-lav, #EEF3FC);
  border: 1px solid var(--azul-pal, #CBDAF0);
  border-radius: var(--r-s, 8px);
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--tinta, #1B2333);
}

.ampliacion-migas[hidden] {
  display: none !important;
}

.ampliacion-migas-label {
  font-weight: 600;
  color: var(--suave, #5B6475);
}

.ampliacion-migas-tag {
  background: var(--azul, #0B4BAF);
  color: #ffffff;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.ampliacion-migas-limpiar {
  background: var(--superficie, #ffffff);
  border: 1px solid var(--borde-campo, #868FA3);
  border-radius: var(--r-s, 8px);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--texto, #2E2E2E);
  margin-left: auto;
  transition: all 0.15s ease;
}

.ampliacion-migas-limpiar:hover {
  border-color: var(--error, #B4332A);
  color: var(--error, #B4332A);
  background: #fff5f5;
}

/* === FASE G: Persona como página propia y Red completa === */
.ampliacion-persona-toolbar, .ampliacion-red-full-toolbar {
  display: flex;
  align-items: center;
  gap: var(--esp-12, 12px);
  margin-bottom: var(--esp-24, 24px);
}

.ampliacion-persona-toolbar-acciones {
  margin-left: auto;
  display: flex;
  gap: var(--esp-12, 12px);
}

.ampliacion-persona-encabezado {
  margin-bottom: var(--esp-24, 24px);
}

.ampliacion-persona-header-main h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--azul-osc, #001452);
  margin-bottom: var(--esp-4, 4px);
}

.ampliacion-persona-unidad {
  font-size: 14px;
  color: var(--suave, #5B6475);
  font-weight: 500;
}

.ampliacion-persona-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-8, 8px);
  margin-top: var(--esp-12, 12px);
}

.ampliacion-persona-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--esp-16, 16px);
  margin-bottom: var(--esp-24, 24px);
}

.ampliacion-kpi-item {
  background: var(--superficie, #ffffff);
  border: 1px solid var(--azul-pal, #CBDAF0);
  border-radius: var(--r-s, 8px);
  padding: var(--esp-16, 16px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,20,82,0.05);
}

.ampliacion-kpi-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--azul, #0B4BAF);
  line-height: 1.1;
}

.ampliacion-kpi-lbl {
  font-size: 12px;
  color: var(--suave, #5B6475);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--esp-4, 4px);
}

.ampliacion-persona-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-24, 24px);
  margin-bottom: var(--esp-24, 24px);
}

@media (max-width: 900px) {
  .ampliacion-persona-columnas {
    grid-template-columns: 1fr;
  }
}

.ampliacion-persona-col-izq, .ampliacion-persona-col-der {
  display: flex;
  flex-direction: column;
}

.ampliacion-persona-trayectoria-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-12, 12px);
  max-height: 480px;
  overflow-y: auto;
  padding-right: var(--esp-8, 8px);
}

.ampliacion-trayectoria-item {
  padding: var(--esp-12, 12px);
  background: var(--azul-lav, #EEF3FC);
  border-left: 3px solid var(--azul, #0B4BAF);
  border-radius: 4px;
  font-size: 13px;
}

.ampliacion-trayectoria-anio {
  font-weight: 700;
  color: var(--azul-osc, #001452);
  display: block;
  margin-bottom: 2px;
}

.ampliacion-trayectoria-info strong {
  color: var(--tinta, #1B2333);
}

.ampliacion-trayectoria-pais {
  display: block;
  font-size: 12px;
  color: var(--suave, #5B6475);
  margin-top: 2px;
}

.ampliacion-trayectoria-desc {
  font-size: 12px;
  color: var(--tinta, #1B2333);
  margin-top: var(--esp-4, 4px);
}

.ampliacion-persona-tabs-nav {
  display: flex;
  gap: var(--esp-8, 8px);
  margin-bottom: var(--esp-16, 16px);
  border-bottom: 1px solid var(--azul-pal, #CBDAF0);
  padding-bottom: var(--esp-8, 8px);
}

.ampliacion-tab-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--suave, #5B6475);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ampliacion-tab-btn:hover {
  color: var(--azul, #0B4BAF);
  background: var(--azul-lav, #EEF3FC);
}

.ampliacion-tab-btn.activo {
  color: #ffffff;
  background: var(--azul, #0B4BAF);
}

.ampliacion-red-toolbar-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--azul-lav, #EEF3FC);
  border-radius: var(--r-s, 8px);
}

.ampliacion-control-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.ampliacion-control-grupo select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--borde-campo, #868FA3);
  font-size: 12px;
  background: #ffffff;
}

.ampliacion-red-full-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 16px;
}

@media (max-width: 960px) {
  .ampliacion-red-full-layout {
    grid-template-columns: 1fr;
  }
}

.ampliacion-red-full-panel-detalle {
  background: var(--superficie, #ffffff);
  border: 1px solid var(--azul-pal, #CBDAF0);
  border-radius: var(--r-s, 8px);
  padding: 16px;
  height: 580px;
  overflow-y: auto;
}

.ampliacion-detalle-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-osc, #001452);
  margin-bottom: 8px;
}

.ampliacion-detalle-card p {
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--tinta, #1B2333);
}

/* =====================================================================
   FASE I: Grafo de relaciones unificado (I-004)
   ===================================================================== */
.grafo-marco { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--esp-24, 24px); align-items:start; }
.grafo-marco > .card { grid-column:auto; }
.grafo-caja { position:relative; padding:0; overflow:hidden; border:1px solid var(--borde, #E5E8EF); border-radius:var(--r-m, 12px); background:var(--superficie, #ffffff); }
.grafo-lienzo { width:100%; height:648px; background:radial-gradient(circle at 1px 1px, #E1E7F1 1px, transparent 0) 0 0/22px 22px, var(--superficie, #ffffff); }
.grafo-lienzo:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:-2px; }

.grafo-barra { position:absolute; top:11px; right:11px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.grafo-barra button { width:33px; height:33px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--suave, #5B6475); background:rgba(255,255,255,.94); border:1px solid var(--borde-campo, #868FA3); border-radius:var(--r-s, 8px); box-shadow:var(--sombra-1, 0 1px 2px rgba(16,24,40,.05)); font-family:inherit; font-size:15px; line-height:1; transition:background .15s, color .15s, border-color .15s; }
.grafo-barra button:hover { background:var(--azul-lav, #EEF3FC); border-color:var(--azul-pal, #CBDAF0); color:var(--azul, #0B4BAF); }
.grafo-barra button:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px; }
.grafo-barra svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.grafo-cuenta { position:absolute; left:11px; bottom:11px; z-index:3; padding:5px 11px; border-radius:999px; font-size:11.5px; color:var(--suave, #5B6475); background:rgba(255,255,255,.92); border:1px solid var(--borde, #E5E8EF); font-variant-numeric:tabular-nums; }
.grafo-aviso { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--esp-12, 12px); padding:var(--esp-32, 32px); text-align:center; color:var(--tenue, #666E82); font-size:13px; background:rgba(255,255,255,.86); }
.grafo-aviso[hidden] { display:none; }
.grafo-aviso strong { display:block; font-size:15px; color:var(--tinta, #1B2333); font-weight:600; }
.grafo-aviso p { margin:0; max-width:38ch; line-height:1.55; }

.grafo-globo { position:absolute; z-index:4; max-width:270px; padding:9px 12px; pointer-events:none; border-radius:var(--r-s, 8px); background:var(--superficie, #ffffff); border:1px solid var(--borde-fuerte, #D5DAE4); box-shadow:var(--sombra-2, 0 4px 12px rgba(0,0,0,0.08)); font-size:12px; line-height:1.45; color:var(--texto, #2E2E2E); }
.grafo-globo[hidden] { display:none; }
.grafo-globo .tipo { font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue, #666E82); }
.grafo-globo .nom { display:block; margin:2px 0 3px; font-weight:600; color:var(--tinta, #1B2333); overflow-wrap:anywhere; }
.grafo-globo .dato { color:var(--tenue, #666E82); }

.grafo-tipos { display:flex; flex-wrap:wrap; gap:var(--esp-8, 8px); margin-bottom:var(--esp-12, 12px); }
.grafo-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border:1px solid var(--borde-campo, #868FA3); border-radius:999px; cursor:pointer; background:var(--superficie, #ffffff); font-family:inherit; font-size:12px; color:var(--texto, #2E2E2E); transition:background .15s, opacity .15s; }
.grafo-chip:hover { background:var(--azul-lav, #EEF3FC); }
.grafo-chip:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px; }
.grafo-chip[aria-pressed="false"] { opacity:.42; background:var(--sutil, #F7F9FC); }
.grafo-chip .marca { width:11px; height:11px; flex:0 0 11px; background:currentColor; }
.grafo-chip .marca.redonda   { border-radius:50%; }
.grafo-chip .marca.cuadrada  { border-radius:3px; }
.grafo-chip .marca.rombo     { border-radius:2px; transform:rotate(45deg) scale(.86); }
.grafo-chip .marca.triangulo { clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.grafo-chip .marca.hexagono  { clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.grafo-chip .marca.pentagono { clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.grafo-chip .marca.etiqueta  { clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%); }
.grafo-chip .marca.barril    { border-radius:40% / 22%; }
.grafo-chip .rotulo { color:var(--texto, #2E2E2E); }
.grafo-chip .cuenta { font-weight:700; font-variant-numeric:tabular-nums; color:var(--tinta, #1B2333); }
.grafo-chip[aria-pressed="false"] .cuenta { color:var(--tenue, #666E82); }

.grafo-detalle { position:sticky; top:78px; max-height:calc(100vh - 96px); overflow-y:auto; padding:var(--esp-20, 20px) var(--esp-24, 24px) !important; background:var(--superficie, #ffffff); border:1px solid var(--borde, #E5E8EF); border-radius:var(--r-m, 12px); }
.grafo-detalle .marcador { display:inline-flex; align-items:center; gap:7px; font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue, #666E82); }
.grafo-detalle .marcador .marca { width:10px; height:10px; flex:0 0 10px; background:currentColor; border-radius:3px; }
.grafo-detalle h3 { margin:var(--esp-8, 8px) 0 0; font-size:15px; line-height:1.35; overflow-wrap:anywhere; color:var(--tinta, #1B2333); }
.grafo-detalle .sub { margin:var(--esp-4, 4px) 0 0; font-size:12px; color:var(--tenue, #666E82); line-height:1.45; overflow-wrap:anywhere; }
.grafo-acciones { display:flex; flex-wrap:wrap; gap:var(--esp-8, 8px); margin-top:var(--esp-16, 16px); }
.grafo-acciones button { padding:6px 12px; border-radius:var(--r-s, 8px); cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--texto, #2E2E2E); background:var(--sutil, #F7F9FC); border:1px solid var(--borde-campo, #868FA3); transition:background .15s, border-color .15s, color .15s; }
.grafo-acciones button:hover { background:var(--azul-lav, #EEF3FC); border-color:var(--azul-pal, #CBDAF0); color:var(--azul, #0B4BAF); }
.grafo-acciones button:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px; }
.grafo-acciones button.principal { background:var(--azul, #0B4BAF); border-color:var(--azul, #0B4BAF); color:#fff; font-weight:600; }
.grafo-acciones button.principal:hover { background:#0A3F92; border-color:#0A3F92; color:#fff; }
.grafo-acciones button:disabled { opacity:.45; cursor:default; background:var(--sutil, #F7F9FC); border-color:var(--borde, #E5E8EF); color:var(--tenue, #666E82); }

.grafo-rel { margin:var(--esp-16, 16px) 0 0; padding:var(--esp-16, 16px) 0 0; border-top:1px solid var(--borde, #E5E8EF); }
.grafo-rel h4 { margin:0 0 var(--esp-8, 8px); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue, #666E82); }
.grafo-rel ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--esp-8, 8px); }
.grafo-rel li { display:flex; align-items:center; gap:var(--esp-12, 12px); }
.grafo-rel .via { flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--texto, #2E2E2E); }
.grafo-rel .via small { display:block; font-size:11px; color:var(--tenue, #666E82); font-variant-numeric:tabular-nums; }
.grafo-rel .mas { flex:0 0 auto; min-width:30px; height:28px; padding:0 9px; cursor:pointer; background:var(--superficie, #ffffff); border:1px solid var(--borde-campo, #868FA3); border-radius:var(--r-s, 8px); font-family:inherit; font-size:12.5px; font-weight:600; color:var(--azul, #0B4BAF); }
.grafo-rel .mas:hover:not(:disabled) { background:var(--azul-lav, #EEF3FC); border-color:var(--azul-pal, #CBDAF0); }
.grafo-rel .mas:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px; }
.grafo-rel .mas:disabled { color:var(--tenue, #666E82); opacity:.5; cursor:default; }
.grafo-nada { margin:0; font-size:12.5px; color:var(--tenue, #666E82); line-height:1.55; }

.tabla-accesible-grafo { width:100%; border-collapse:collapse; margin-top:16px; font-size:12px; }
.tabla-accesible-grafo th, .tabla-accesible-grafo td { padding:8px 12px; border:1px solid var(--borde, #E5E8EF); text-align:left; }
.tabla-accesible-grafo th { background:var(--sutil, #F7F9FC); font-weight:700; color:var(--tinta, #1B2333); }

@media (max-width:1080px) {
  .grafo-marco { grid-template-columns:minmax(0,1fr); }
  .grafo-detalle { position:static; max-height:none; }
}

/* === Botón de información (i) de cada gráfico y su guía de lectura === */
.card-cab { position:relative; }
.card-cab-con-info { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-cab-titulos { flex:1; min-width:0; }

/* Discreto en la tarjeta: un icono de línea como los de la barra del grafo,
   que toma el azul de marca con el cursor o el foco. 28 px de lado (2.5.8). */
.btn-info-grafico {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 28px; padding:0;
  border:1px solid transparent; border-radius:var(--r-s, 8px);
  background:transparent; color:var(--tenue, #666E82);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.card-cab-con-info .btn-info-grafico { margin:-5px -6px 0 0; }
.btn-info-grafico svg { width:18px; height:18px; fill:none; stroke:currentColor;
                        stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-info-grafico:hover { background:var(--azul-lav, #EEF3FC); border-color:var(--azul-pal, #CBDAF0);
                          color:var(--azul, #0B4BAF); }
.btn-info-grafico:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px;
                                  color:var(--azul, #0B4BAF); }

/* La guía se superpone con el mismo velo que la ficha de entidad. */
body.con-modal-info { overflow:hidden; }

.ampliacion-modal-fondo {
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  background:rgba(20, 24, 33, .44);
  backdrop-filter:saturate(140%) blur(3px);
  animation:ampliacionVeloEntrar .16s ease-out;
}
.ampliacion-modal-fondo[hidden] { display:none !important; }

.ampliacion-modal-card {
  display:flex; flex-direction:column;
  width:100%; max-width:640px; max-height:88vh;
  background:var(--superficie, #FFFFFF); color:var(--texto, #2E2E2E);
  border:1px solid var(--borde-fuerte, #D5DAE4); border-radius:var(--r-g, 14px);
  box-shadow:0 24px 60px rgba(20, 24, 33, .22);
  overflow:hidden;
  animation:ampliacionModalEntrar .2s cubic-bezier(.22, .8, .3, 1);
}
.ampliacion-modal-card:focus { outline:none; }

@keyframes ampliacionVeloEntrar { from { opacity:0; } }
@keyframes ampliacionModalEntrar { from { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes ampliacionHojaEntrar { from { opacity:.5; transform:translateY(28px); } }

/* Cabecera fija: rótulo, título del gráfico y cierre. */
.ampliacion-modal-header {
  flex:0 0 auto; display:flex; align-items:flex-start; gap:16px;
  padding:18px 20px 16px 24px;
  border-bottom:1px solid var(--borde, #E5E8EF);
}
.ampliacion-modal-encabezado { flex:1; min-width:0; }
.ampliacion-modal-rotulo { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.08em;
                           text-transform:uppercase; color:var(--azul, #0B4BAF); }
.ampliacion-modal-header h2 { margin:0; font-size:19px; line-height:1.3; font-weight:600;
                              color:var(--tinta, #1B2333); overflow-wrap:anywhere; text-wrap:balance; }

.ampliacion-btn-cerrar {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin:-6px -8px 0 0; padding:0;
  border:1px solid transparent; border-radius:var(--r-s, 8px);
  background:transparent; color:var(--suave, #5B6475); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.ampliacion-btn-cerrar svg { width:18px; height:18px; fill:none; stroke:currentColor;
                             stroke-width:2; stroke-linecap:round; }
.ampliacion-btn-cerrar:hover { background:var(--sutil, #F7F9FC); border-color:var(--borde, #E5E8EF);
                               color:var(--tinta, #1B2333); }
.ampliacion-btn-cerrar:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:2px; }

.ampliacion-modal-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 24px 22px;
  font-size:14.5px; line-height:1.55; color:var(--texto, #2E2E2E);
}
.ampliacion-modal-body:focus { outline:none; }
.ampliacion-modal-body:focus-visible { outline:2px solid var(--foco, #0B4BAF); outline-offset:-2px; }

/* Cada apartado: icono, título breve y texto alineado bajo el título. */
.ampliacion-info-seccion { padding:16px 0; border-top:1px solid var(--borde, #E5E8EF); }
.ampliacion-info-seccion:first-child { border-top:0; }
.ampliacion-info-seccion h3 { display:flex; align-items:center; gap:10px; margin:0 0 6px;
                              font-size:14px; font-weight:700; line-height:1.35; color:var(--tinta, #1B2333); }
.ampliacion-info-icono { flex:0 0 28px; width:28px; height:28px; display:inline-flex;
                         align-items:center; justify-content:center; border-radius:var(--r-s, 8px);
                         background:var(--azul-lav, #EEF3FC); color:var(--azul, #0B4BAF); }
.ampliacion-info-icono svg { width:16px; height:16px; fill:none; stroke:currentColor;
                             stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ampliacion-info-texto { padding-left:38px; }
.ampliacion-info-texto p { margin:0; }

.ampliacion-info-lista { margin:0; padding:0; list-style:none; }
.ampliacion-info-lista li { position:relative; padding-left:16px; }
.ampliacion-info-lista li + li { margin-top:6px; }
.ampliacion-info-lista li::before { content:''; position:absolute; left:3px; top:.62em;
                                    width:6px; height:6px; border-radius:50%;
                                    background:var(--azul-claro, #94B2E2); }

/* Qué se puede concluir y qué no: lo único con color propio. */
.ampliacion-info-balance { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ampliacion-info-veredicto { padding:10px 13px 12px; border:1px solid; border-radius:var(--r-s, 8px); }
.ampliacion-info-veredicto.si { background:#F2F8F4; border-color:#CDE3D5; }
.ampliacion-info-veredicto.no { background:#FBF6EC; border-color:#EBD8B0; }
.ampliacion-info-veredicto p { font-size:14px; }
.ampliacion-info-veredicto .ampliacion-info-veredicto-rotulo {
  display:flex; align-items:center; gap:6px; margin:0 0 4px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.ampliacion-info-veredicto.si .ampliacion-info-veredicto-rotulo { color:var(--exito, #2E7D4F); }
.ampliacion-info-veredicto.no .ampliacion-info-veredicto-rotulo { color:var(--ambar-osc, #8C6212); }
.ampliacion-info-veredicto-rotulo svg { width:14px; height:14px; fill:none; stroke:currentColor;
                                        stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* Qué pasa al hacer clic: recuadro azul si hay acción, gris si no la hay. */
.ampliacion-info-al-hacer-clic .ampliacion-info-texto {
  margin-left:38px; padding:10px 14px;
  background:var(--azul-lav, #EEF3FC); border:1px solid var(--azul-pal, #CBDAF0);
  border-radius:var(--r-s, 8px); color:var(--azul-osc, #001452);
}
.ampliacion-info-al-hacer-clic.sin-clic .ampliacion-info-texto {
  background:var(--sutil, #F7F9FC); border-color:var(--borde, #E5E8EF); color:var(--suave, #5B6475);
}

.ampliacion-info-alcance { margin:4px 0 0; padding:12px 14px; border-radius:var(--r-s, 8px);
                           background:var(--sutil, #F7F9FC); border:1px solid var(--borde, #E5E8EF);
                           font-size:13px; line-height:1.5; color:var(--suave, #5B6475); }

/* En un móvil la guía sube desde abajo y ocupa el ancho. */
@media (max-width:600px) {
  .ampliacion-modal-fondo { align-items:flex-end; padding:0; }
  .ampliacion-modal-card { max-width:none; max-height:92vh; max-height:92dvh;
                           border-bottom:0; border-radius:var(--r-g, 14px) var(--r-g, 14px) 0 0;
                           animation-name:ampliacionHojaEntrar; }
  .ampliacion-modal-header { padding:16px 16px 14px 18px; }
  .ampliacion-modal-header h2 { font-size:17px; }
  .ampliacion-modal-body { padding:0 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-size:14px; }
  .ampliacion-info-texto { padding-left:0; }
  .ampliacion-info-al-hacer-clic .ampliacion-info-texto { margin-left:0; }
  .ampliacion-info-balance { grid-template-columns:minmax(0, 1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .ampliacion-modal-fondo, .ampliacion-modal-card { animation:none; }
}

/* Insignias ejecutivas de diferenciacion para los diagramas Sankey */
.badge-sankey-submetrica {
  font-size: 11px;
  font-weight: 500;
  color: #556075;
  background: #F1F3F8;
  border: 1px solid #D5DAE5;
  padding: 3px 8px;
  border-radius: 999px;
}