/* Marca de Senda. Mismos valores que el MCP y el portal, para que el Lab no parezca
   una herramienta de otro sitio. */
:root{
  --azul:#334DCF; --azul-claro:#EEF1FE; --tinta:#2A2822; --fondo:#F4F3F0;
  --linea:#E2DED4; --gris:#635E54; --blanco:#fff;
  --aviso:#B45309; --aviso-fondo:#FEF6E7; --mal:#B91C1C; --bien:#3E7D53;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     background:var(--fondo);color:var(--tinta);line-height:1.55;font-size:15px}
a{color:var(--azul)}
button{font:inherit;cursor:pointer}

/* ── Login ─────────────────────────────────────────────── */
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
         padding:38px 34px;max-width:430px;width:100%;text-align:center}
.marca{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.marca span{font-size:20px;font-weight:600}
.marca em{font-style:normal;color:var(--azul)}
.sub{color:var(--gris);font-size:14px;margin:0 0 26px}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--azul);color:#fff;border:0;border-radius:9px;padding:13px 18px;
  font-size:15px;font-weight:600;text-decoration:none}
.btn-google:hover{background:#2a41b0}
.pie{margin-top:22px;font-size:12.5px;color:var(--gris);border-top:1px solid var(--linea);padding-top:16px}

/* ── Estructura de la aplicación ───────────────────────── */
.cab{background:var(--blanco);border-bottom:1px solid var(--linea);padding:12px 22px;
     display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10}
.cab .marca{margin:0}
.cab .marca span{font-size:17px}
.pestanas{display:flex;gap:2px;margin-left:12px;flex-wrap:wrap}
.pestanas button{background:none;border:0;padding:8px 11px;border-radius:8px;color:var(--gris);
  font-weight:600;font-size:14px;white-space:nowrap}
.pestanas button.activa{background:var(--azul-claro);color:var(--azul)}
.yo{margin-left:auto;font-size:13px;color:var(--gris);text-align:right}
.yo b{color:var(--tinta);display:block}

.banda{background:var(--aviso-fondo);border-bottom:1px solid #F5E3C3;color:var(--aviso);
       padding:9px 22px;font-size:13px;font-weight:600;text-align:center}
.wrap{max-width:1080px;margin:0 auto;padding:24px 22px 80px}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:16px;color:var(--azul);margin:0 0 12px}
.tenue{color:var(--gris);font-size:14px;margin:0 0 22px}

.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* ── Gráficos, sin librerías ───────────────────────────── */
.barra-fila{display:grid;grid-template-columns:132px 1fr 78px;gap:10px;align-items:center;margin:7px 0;font-size:13.5px}
.barra-fila .et{color:var(--gris);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-pista{background:#EFEDE7;border-radius:5px;height:19px;overflow:hidden}
.barra-val{background:var(--azul);height:100%;border-radius:5px;min-width:2px;transition:width .25s}
.barra-fila .num{font-variant-numeric:tabular-nums;font-weight:600}
.suprimida .barra-val{background:repeating-linear-gradient(45deg,#D6D1C6,#D6D1C6 5px,#E8E4DA 5px,#E8E4DA 10px);width:100%!important}
.suprimida .num{color:var(--gris);font-weight:400;font-style:italic}

.linea-svg{width:100%;height:190px;display:block}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{border:1px solid var(--linea);padding:7px 10px;text-align:center}
th{background:#FAF9F6;font-weight:600;color:var(--gris)}
td.sup{color:var(--gris);font-style:italic;background:#FAF9F6}

.nota{margin-top:12px;padding:10px 12px;background:var(--aviso-fondo);border-left:3px solid var(--aviso);
      border-radius:6px;font-size:13px;color:var(--aviso)}
.metodo{margin-top:12px;font-size:12.5px;color:var(--gris);border-top:1px dashed var(--linea);padding-top:10px}

/* ── Constructor de análisis ───────────────────────────── */
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.campo .ayuda{font-weight:400;color:var(--gris);font-size:12.5px}
select,input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--linea);
  border-radius:8px;background:var(--blanco);color:var(--tinta);font:inherit}
.fila-filtro{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
.btn{background:var(--azul);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:600}
.btn.sec{background:var(--blanco);color:var(--azul);border:1px solid var(--azul)}
.btn.mini{padding:6px 11px;font-size:13px}
.btn.peligro{background:var(--blanco);color:var(--mal);border:1px solid #E9C9C9}
.acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}

.lista-analisis{display:flex;flex-direction:column;gap:9px}
.item{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:13px 15px;
      display:flex;justify-content:space-between;align-items:center;gap:12px}
.item b{display:block}
.item .meta{font-size:12.5px;color:var(--gris)}
.chip{display:inline-block;background:var(--azul-claro);color:var(--azul);font-size:11px;
      font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:5px}
.vacio{color:var(--gris);text-align:center;padding:34px}
.cargando{color:var(--gris);padding:20px;text-align:center}

/* ── Diccionario de variables ───────────────────────────────────────────────── */
.buscador{width:100%;padding:10px 12px;border:1px solid var(--linea);border-radius:9px;
  background:var(--blanco);margin-bottom:14px;font:inherit}
.dic-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.dic-cab h2{margin:0}
.dic-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--gris);
  background:#FAF9F6;border:1px solid var(--linea);border-radius:5px;padding:2px 6px}
.dic-desc{margin:0 0 14px;font-size:14.5px;line-height:1.5}
.dic-sub{font-size:12px;font-weight:600;color:var(--gris);text-transform:uppercase;
  letter-spacing:.04em;margin:16px 0 8px}
.dic-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
  margin-top:14px;border-top:1px dashed var(--linea);padding-top:14px}
.dic-dato b{display:block;font-size:12px;color:var(--gris);margin-bottom:3px}
.dic-dato span{font-size:13px;line-height:1.45}
.cobertura{display:grid;grid-template-columns:82px 1fr 150px;gap:10px;align-items:center;font-size:13px}
.cob-et{color:var(--gris);text-align:right}
.cob-pista{background:#EFEDE7;border-radius:5px;height:11px;overflow:hidden}
.cob-val{background:var(--bien);height:100%;border-radius:5px;min-width:2px}
.cob-val.floja{background:var(--aviso)}
.cob-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px}
.caja-svg{width:100%;height:64px;display:block}
.caja-txt{font-size:11px;fill:#7A7568}
/* En el diccionario la cifra lleva conteo y porcentaje: con los 78px del panel se parte
   en dos líneas y la lista de valores se lee a saltos. */
.dic .barra-fila{grid-template-columns:132px 1fr 116px}

/* ── Marco temporal, trayectorias y flujo del estudio ───────────────────────── */
.fila-marco{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fila-marco .campo{margin-bottom:0}
input[type=month]{width:100%;padding:9px 11px;border:1px solid var(--linea);
  border-radius:9px;background:var(--blanco);color:var(--tinta);font:inherit}
.ayuda-bloque{font-size:12.5px;color:var(--gris);margin:0 0 12px;line-height:1.5}
.opciones{display:flex;flex-direction:column;gap:8px}
/* Va con `.campo label.opcion` a propósito: `.campo label` es display:block y le gana en
   especificidad a un `.opcion` suelto, que dejaba el radio encima del texto. */
.campo label.opcion{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--linea);border-radius:9px;background:var(--blanco);cursor:pointer;
  font-weight:400;margin-bottom:0}
.campo label.opcion:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.campo label.opcion input{margin-top:3px;flex:0 0 auto;width:auto}
.campo label.opcion b{font-size:13.5px;display:block}
.campo label.opcion .ayuda{font-size:12.5px;color:var(--gris);line-height:1.45}

.tray-svg{width:100%;height:250px;display:block;margin-top:6px}
.eje-txt{font-size:11px;fill:#7A7568}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 14px;font-size:12.5px;color:var(--gris)}
.ley-it{display:inline-flex;align-items:center;gap:6px}
.ley-punto{width:10px;height:10px;border-radius:50%;display:inline-block}
td .tn{display:block;font-size:11px;color:var(--gris);font-weight:400}

.flujo{margin-top:14px;border-top:1px dashed var(--linea);padding-top:12px}
.flujo summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--azul)}
.flujo-paso{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid var(--linea);border-radius:9px;padding:9px 13px;background:#FAF9F6;font-size:13.5px}
.flujo-paso.final{border-color:var(--azul);background:var(--azul-claro)}
.flujo-paso b{font-variant-numeric:tabular-nums}
.flujo-linea{width:1px;height:12px;background:var(--linea);margin:0 0 0 22px}
.flujo-ex{margin:4px 0 4px 22px;padding-left:14px;border-left:2px solid var(--linea);
  font-size:12.5px;color:var(--gris)}
.nota.bien{background:#EEF6F0;border-left-color:var(--bien);color:#25563A}
.chip.hip{background:#EEF6F0;color:#25563A}
.chip.exp{background:var(--aviso-fondo);color:var(--aviso)}

/* ── Acceso: mismo patrón que product.sendahealth.es y aigateway.sendahealth.es ──
   Panel oscuro a la izquierda con la presentación del producto, acceso a la derecha.
   Los valores (degradado, azul de acento, tipografías) están tomados de esos dos para
   que las tres herramientas se reconozcan como la misma casa. */
.acceso{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#F3F4F6}

.acceso-izq{position:relative;overflow:hidden;padding:48px;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#020617 0%,#1E1B4B 100%)}
/* Halo difuminado: el mismo recurso que el resto del sistema para que el panel no sea
   un rectángulo plano. Decorativo, no transmite información. */
.acceso-izq::after{content:'';position:absolute;bottom:-80px;left:-80px;width:320px;height:320px;
  border-radius:50%;background:#38BDF8;opacity:.10;filter:blur(64px);pointer-events:none}
.acceso-marca{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;position:relative}
.acceso-h1{font-size:48px;line-height:1.05;font-weight:700;margin:0 0 20px}
.acceso-h1 em{font-style:normal;color:#38BDF8;display:block}
.acceso-lead{color:#DBE4F5;font-size:16px;line-height:1.6;margin:0 0 30px;max-width:34ch}
.acceso-centro{position:relative}
.acceso-rasgos{display:flex;flex-direction:column;gap:13px;list-style:none;padding:0;margin:0}
.acceso-rasgos li{display:flex;align-items:center;gap:12px;font-size:14px;color:#E7ECF7}
.acceso-rasgos i{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.22)}
.acceso-pie{position:relative;font-size:12.5px;color:#8C97B4}

.acceso-der{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.acceso-caja{width:100%;max-width:400px}
.acceso-der h1{font-size:24px;font-weight:700;margin:0 0 6px;color:var(--tinta)}
.acceso-der .sub{margin:0 0 24px}
.acceso-panel{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:20px}
.acceso-panel b{display:block;font-size:14.5px;margin-bottom:3px}
.acceso-panel .ayuda{display:block;font-size:12.5px;color:var(--gris);margin-bottom:16px}
.btn-acceso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 16px;border-radius:12px;border:1px solid var(--linea);background:var(--blanco);
  color:#4A5568;font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color .15s,background .15s}
.btn-acceso:hover{border-color:var(--azul);background:var(--azul-claro)}
.acceso-nota{margin-top:20px;font-size:12.5px;color:var(--gris);line-height:1.55}
/* La marca solo aparece en pantalla estrecha, donde el panel de la izquierda no cabe:
   sin ella la página de acceso quedaría sin identificar. */
.acceso-marca-movil{display:none;align-items:center;gap:9px;margin-bottom:26px;font-size:17px;font-weight:600}
.acceso-marca-movil em{font-style:normal;color:var(--azul)}

@media (max-width:1023px){
  .acceso{grid-template-columns:1fr}
  .acceso-izq{display:none}
  .acceso-marca-movil{display:flex}
}

/* ── Pie legal ──────────────────────────────────────────────────────────────── */
.pie-legal{border-top:1px solid var(--linea);background:var(--blanco);padding:22px;
  font-size:12px;color:var(--gris);line-height:1.6}
.pie-legal p{max-width:1080px;margin:0 auto 10px}
.pie-legal b{color:var(--tinta)}
.pl-seguro{display:flex;align-items:center;gap:7px;color:var(--bien)}
.pl-seguro b{color:var(--bien)}
.pl-fila{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;
  border-top:1px solid var(--linea);margin-bottom:0}

/* ── Documento exportado y sello ────────────────────────────────────────────── */
.sello{border:1px solid var(--linea);border-radius:12px;background:#FAF9F6;padding:16px 18px;margin-top:18px}
.sello h3{font-size:13px;margin:0 0 12px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.sello-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sello-dato b{display:block;font-size:11.5px;color:var(--gris);margin-bottom:2px}
.sello-dato span{font-size:13px}
.huella{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;word-break:break-all;line-height:1.45}
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
  letter-spacing:.06em;color:var(--azul)}

/* Al imprimir queda solo el documento: sin pestañas, sin botones, sin pie de la web.
   Lo que se guarda como PDF tiene que ser el documento, no una captura de la aplicación. */
@media print{
  .cab,.banda,.pie-legal,.acciones,.btn,details.flujo summary{display:none!important}
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .caja{border:0;padding:0;margin:0 0 14px;break-inside:avoid}
  details.flujo{display:block!important}
  details.flujo>*{display:block!important}
  .sello{break-inside:avoid}
  a[href]::after{content:''}
}

/* ── Biblioteca médica ──────────────────────────────────────────────────────── */
.ref{border:1px solid var(--linea);border-radius:10px;background:var(--blanco);
  padding:14px 16px;margin-bottom:10px}
.ref h3{font-size:14.5px;margin:0 0 5px;line-height:1.4}
.ref h3 a{color:var(--tinta);text-decoration:none}
.ref h3 a:hover{color:var(--azul);text-decoration:underline}
.ref-meta{font-size:12.5px;color:var(--gris);margin-bottom:8px}
.ref-conc{font-size:13.5px;line-height:1.5;margin:0}
.ref-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.filtros-bib{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.filtros-bib label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);
  border:1px solid var(--linea);border-radius:20px;padding:5px 12px;background:var(--blanco);cursor:pointer}
.filtros-bib label:has(input:checked){border-color:var(--azul);background:var(--azul-claro);color:var(--azul)}
.filtros-bib input{margin:0}
.buscar-bib{display:grid;grid-template-columns:1fr auto;gap:9px}

/* ── Galería de widgets ─────────────────────────────────────────────────────── */
.galeria{margin-bottom:18px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:18px}
.wcard{text-align:left;background:var(--blanco);border:1px solid var(--linea);border-radius:11px;
  padding:13px 15px;display:flex;flex-direction:column;gap:5px;font:inherit;transition:border-color .15s,background .15s}
.wcard:hover{border-color:var(--azul)}
.wcard.activa{border-color:var(--azul);background:var(--azul-claro);box-shadow:inset 0 0 0 1px var(--azul)}
.wcard b{font-size:14px;color:var(--tinta)}
.wcard-ayuda{font-size:12.5px;color:var(--gris);line-height:1.45}
.wcard-ej{font-size:12px;color:var(--gris);font-style:italic;line-height:1.4;
  border-top:1px dashed var(--linea);padding-top:6px;margin-top:2px}

/* ── Distribución comparada ─────────────────────────────────────────────────── */
.caja-fila{display:grid;grid-template-columns:132px 1fr 140px;gap:10px;align-items:center;
  margin:5px 0;font-size:13.5px}
.caja-fila .et{color:var(--gris);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caja-fila .num{font-variant-numeric:tabular-nums;font-weight:600}
.cajas-svg{width:100%;height:36px;display:block}
.caja-hueco{height:36px;border-radius:5px;
  background:repeating-linear-gradient(45deg,#D6D1C6,#D6D1C6 5px,#E8E4DA 5px,#E8E4DA 10px);
  display:grid;place-items:center;font-size:11.5px;color:#6B6558}

/* ── Análisis de cohortes ───────────────────────────────────────────────────── */
.tabla-scroll{overflow-x:auto}
table.cohortes{min-width:520px}
table.cohortes th:first-child{text-align:left;white-space:nowrap}
table.cohortes td{font-variant-numeric:tabular-nums;font-weight:600}
table.cohortes td.futuro{color:#A9A296;font-style:italic;font-weight:400;background:#FCFBF9}
table.cohortes td.coh-n{background:#FAF9F6;color:var(--gris);font-weight:400}
.coh-leyenda{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  font-size:12px;color:var(--gris)}
.coh-escala{width:110px;height:11px;border-radius:3px;
  background:linear-gradient(90deg,rgba(51,77,207,.06),rgba(51,77,207,.40))}
.coh-ley-it{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-style:italic}
.coh-ley-it::before{content:'';width:12px;height:12px;border-radius:3px;background:#FCFBF9;border:1px solid var(--linea)}
.coh-ley-it.sup::before{background:#FAF9F6;border-style:dashed}

/* ── Panel personal ─────────────────────────────────────────────────────────── */
.panel-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.panel-cab h2{flex:1}
.panel-acc{display:flex;gap:4px;flex:0 0 auto}
.iconito{background:none;border:1px solid var(--linea);border-radius:7px;width:26px;height:26px;
  color:var(--gris);line-height:1;padding:0;font-size:13px}
.iconito:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
.iconito:disabled{opacity:.35;cursor:default}
.iconito.peligro:hover{border-color:var(--mal);color:var(--mal)}
textarea{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:9px;
  background:var(--blanco);color:var(--tinta);font:inherit;resize:vertical}
.pl-tecnica{border-top:1px solid var(--linea);padding-top:10px;margin-bottom:4px;
  font-variant-numeric:tabular-nums;color:#7A7568}
.pl-tecnica span::first-letter{text-transform:uppercase}
.wcard.nodisp{opacity:.55;cursor:default;background:#FAF9F6}
.wcard.nodisp:hover{border-color:var(--linea)}
.wcard-no{font-size:12px;color:var(--aviso);line-height:1.4;border-top:1px dashed var(--linea);
  padding-top:6px;margin-top:2px}
.banda.grave{background:#FDF0F0;border-bottom-color:#E9C9C9;color:var(--mal)}

/* ── Chrome de widget ───────────────────────────────────────────────────────── */
.panel-titular{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.panel-titular h1{margin:0}
.widget-conf{background:#FAF9F6;border:1px solid var(--linea);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.widget-conf .campo:last-of-type{margin-bottom:10px}
.widget.ampliada{position:fixed;inset:14px;z-index:50;overflow:auto;box-shadow:0 12px 48px rgba(0,0,0,.22)}
body.sin-scroll{overflow:hidden}
.bloque-comp{margin-bottom:20px}
.bloque-comp+.bloque-comp{border-top:1px dashed var(--linea);padding-top:16px}
.bloque-tit{font-size:14px;margin:0 0 10px;color:var(--tinta)}
.correl{display:flex;align-items:center;gap:14px;background:var(--azul-claro);border-radius:10px;
  padding:12px 16px;margin-bottom:14px}
.correl-r{font-size:30px;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums;line-height:1}

/* ── Diccionario con barra lateral ──────────────────────────────────────────── */
.dic-cols{display:grid;grid-template-columns:236px 1fr;gap:20px;align-items:start}
.dic-lado{position:sticky;top:14px;max-height:calc(100vh - 30px);overflow-y:auto;
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:14px}
.dic-lado .buscador{margin-bottom:8px}
.dic-cuenta{font-size:11.5px;color:var(--gris);margin-bottom:12px}
.dic-grupo{margin-bottom:14px}
.dic-grupo-tit{font-size:11px;font-weight:700;color:var(--gris);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:5px}
.dic-enlace{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;
  text-align:left;background:none;border:0;padding:5px 8px;border-radius:7px;font-size:13px;
  color:var(--tinta);line-height:1.3}
.dic-enlace:hover{background:var(--azul-claro);color:var(--azul)}
.dic-punto{color:var(--aviso);font-size:16px;line-height:1}
.dic-fichas .caja.dic.resaltada{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
@media (max-width:900px){
  .dic-cols{grid-template-columns:1fr}
  .dic-lado{position:static;max-height:none}
}

/* ── Ficha de datos bajo cada gráfica ───────────────────────────────────────── */
.ficha-datos{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--linea);font-size:12px;color:var(--gris)}
.ficha-datos .fd{display:inline-flex;gap:5px;align-items:baseline}
.ficha-datos .fd b{color:var(--gris);font-weight:600}
.ficha-datos .fd span{color:var(--tinta);font-variant-numeric:tabular-nums}
.ficha-datos .fd-nota{flex-basis:100%;font-style:italic}

/* ── Selección múltiple de variables ────────────────────────────────────────── */
.multi-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;
  max-height:220px;overflow-y:auto;border:1px solid var(--linea);border-radius:9px;
  padding:8px;background:var(--blanco);margin-bottom:6px}
.multi-op{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;
  font-size:13px;font-weight:400;cursor:pointer}
.multi-op:hover{background:var(--azul-claro)}
.multi-op input{width:auto;margin:0;flex:0 0 auto}

/* ── Matriz de correlación ──────────────────────────────────────────────────── */
table.matriz{min-width:auto}
table.matriz th{font-size:12px;font-weight:600;max-width:150px}
table.matriz tbody th{text-align:left;white-space:nowrap}
table.matriz th.girado span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:120px;overflow:hidden;text-overflow:ellipsis}
table.matriz td{font-variant-numeric:tabular-nums;font-weight:600;min-width:56px}
table.matriz td.diagonal{background:#F4F3F0;color:#C9C3B6}
table.matriz td.clicable{cursor:pointer}
table.matriz td.clicable:hover{outline:2px solid var(--azul);outline-offset:-2px}
.matriz-escala{width:120px;height:11px;border-radius:3px;
  background:linear-gradient(90deg,rgba(180,83,9,.5),rgba(180,83,9,.05),rgba(51,77,207,.05),rgba(51,77,207,.5))}
.detalle-par{margin-top:16px;padding:14px 16px;border:1px solid var(--azul);border-radius:11px;
  background:var(--azul-claro)}

/* ── Barra de filtros generales ─────────────────────────────────────────────── */
.barra-filtros{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--blanco);border-bottom:1px solid var(--linea);padding:9px 22px;font-size:13px}
.bf-texto{color:var(--gris);flex:1;min-width:240px}
.bf-texto.activo{color:var(--azul);font-weight:600}
.modal-fondo{position:fixed;inset:0;background:rgba(42,40,34,.45);z-index:60;
  display:grid;place-items:center;padding:20px}
.modal{background:var(--blanco);border-radius:14px;padding:22px 24px;width:100%;max-width:720px;
  max-height:85vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,.25)}
.modal h2{margin-bottom:6px}

/* ── Rejilla en tercios ─────────────────────────────────────────────────────── */
.rejilla{grid-template-columns:repeat(3,1fr)}
.rejilla > .caja{grid-column:span 1;min-width:0}
.rejilla > .caja.t2{grid-column:span 2}
.rejilla > .caja.t3{grid-column:span 3}
@media (max-width:1100px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .rejilla > .caja.t3,.rejilla > .caja.t2{grid-column:span 2}
}
@media (max-width:720px){
  .rejilla{grid-template-columns:1fr}
  .rejilla > .caja,.rejilla > .caja.t2,.rejilla > .caja.t3{grid-column:span 1}
}
/* La serie destacada (la media general) va más gruesa: es la referencia contra la que
   se leen las demás, no una más. */
.serie-destacada{stroke-width:3.4}

/* Con seis iconos al lado, en una tarjeta de un tercio el título se parte palabra a
   palabra. En ese ancho la fila de controles baja debajo; en 2/3 y 3/3 caben al lado. */
.panel-cab{flex-wrap:wrap}
.caja.t1 .panel-cab h2{flex:1 1 100%}
.caja.t1 .panel-acc{margin-left:auto}
.panel-acc{flex-wrap:wrap}
.iconito{width:24px;height:24px;font-size:12px}

/* ── Cabecera de ejes en la relación entre dos variables ────────────────────── */
.ejes{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  background:#FAF9F6;border:1px solid var(--linea);border-radius:10px;
  padding:10px 14px;margin:14px 0 12px}
.eje b{display:block;font-size:13.5px;color:var(--tinta);line-height:1.3}
.eje span{font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.eje:last-child{text-align:right}
.eje-flecha{color:var(--azul);font-size:17px;font-weight:700}
.ficha-datos .fd-mal{color:var(--mal);font-style:normal}

/* ── Tabla de variables con estadístico por fila ────────────────────────────── */
.var-tabla{border:1px solid var(--linea);border-radius:9px;background:var(--blanco);
  max-height:280px;overflow-y:auto;margin-bottom:6px}
/* Va con `.campo label.var-fila` a propósito: `.campo label` es display:block y le gana
   en especificidad, lo que tiraba el desplegable debajo del nombre de la variable. */
.var-fila,.campo label.var-fila{display:grid;grid-template-columns:1fr 210px;gap:10px;
  align-items:center;padding:5px 10px;font-size:13px;font-weight:400;cursor:pointer;
  border-bottom:1px solid #F4F3F0;margin:0}
.var-fila:last-child{border-bottom:0}
.var-fila:hover{background:var(--azul-claro)}
.var-cab{position:sticky;top:0;background:#FAF9F6;font-size:11px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.04em;cursor:default}
.var-cab:hover{background:#FAF9F6}
.var-nombre{display:flex;align-items:center;gap:8px;min-width:0}
.var-nombre span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campo label.var-fila input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.campo label.var-fila select{padding:4px 8px;font-size:12.5px;border-radius:7px;width:100%}