/* Complementos del portal sobre la hoja de estilos compartida (main.css): gráficos de resultados, editor de
   cuestionarios y detalles de respuestas. Misma regla: líneas y espacio, no recuadros. */

/* ---- resultados: dona, barras y detalle de una respuesta ---- */
.grafico-dona{display:flex;gap:14px;align-items:center}
.grafico-dona svg{width:120px;height:120px;flex-shrink:0}
.grafico-dona svg text{fill:var(--titulo)}
.leyenda-dona{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.4}
.leyenda-dona li{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.leyenda-punto{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0}
.barras-h{display:flex;flex-direction:column;gap:8px}
.barra-h{display:grid;grid-template-columns:minmax(120px,42%) 1fr 84px;gap:10px;align-items:center;font-size:13.5px}
.barra-h-etiqueta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-h-pista{background:var(--linea-suave);border-radius:4px;height:10px;overflow:hidden}
.barra-h-relleno{height:100%;border-radius:4px}
.barra-h-valor{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 40px}
.grafico-bloque > h3{font-size:14.5px;font-weight:600;color:var(--titulo);margin:0 0 10px}

.detalle-respuesta{padding:8px 0 4px}
.detalle-respuesta .detalle-paso{margin-bottom:14px}
.detalle-respuesta h6{font-size:12.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  border-bottom:1px solid var(--linea);padding-bottom:4px;margin-bottom:8px}
.detalle-respuesta dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin:0;font-size:14px}
.detalle-respuesta dt{font-weight:600;color:var(--texto)}
.detalle-respuesta dd{margin:0 0 4px;color:var(--titulo);overflow-wrap:anywhere}
@media (max-width:800px){.detalle-respuesta dl{grid-template-columns:1fr}}

.previa-correo{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--cebra)}
.previa-correo table{max-width:100% !important}

/* ---- editor de cuestionarios ---- */
.editor .editor-barra{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--linea);
  padding:0 0 14px;margin-bottom:18px;position:sticky;top:0;z-index:5;background:#fff}
.editor .bloques{display:flex;flex-direction:column;gap:4px}
.editor .bloque{border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
.editor .bloque.bloque-estructural{background:var(--cebra)}
.editor .bloque.abierto{border-color:var(--azul)}
.editor .bloque-cab{display:flex;align-items:center;gap:8px;padding:7px 10px}
.editor .bloque-resumen{cursor:pointer;font-size:14.5px}
.editor .bloque-cuerpo{padding:10px 12px 12px;border-top:1px dashed var(--linea)}
.editor .agregar-bloque{padding:8px 0}
.editor .paso .card-header{padding:6px 0}
.editor .btn-group .btn{padding:4px 8px;font-size:13px}

/* ---- encuestas habilitadas en la portada pública ---- */
.encuestas{list-style:none;margin:0;padding:0}
.encuestas > li{display:flex;gap:22px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--linea-suave)}
.encuestas > li:last-child{border-bottom:0}
.encuestas .qr-mini{width:84px;height:84px}
.encuestas h3{font-size:16px;margin:0 0 4px}
.encuestas h3 a{color:var(--titulo)}
.encuestas p{margin:0 0 6px;color:var(--texto);max-width:70ch}
.encuestas .meta-fila{margin:0 0 8px}
@media (max-width:760px){.encuestas > li{flex-direction:column;gap:10px}}

/* ---- aplicativos (con sesión) ---- */
.aplicativos{list-style:none;margin:0;padding:0}
.aplicativos > li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--linea-suave)}
.aplicativos > li:last-child{border-bottom:0}
.aplicativos h3{font-size:16px;margin:0}
.aplicativos .meta-fila{margin-top:2px}
.aplicativos .acciones{justify-content:flex-end}
@media (max-width:760px){.aplicativos > li{grid-template-columns:1fr}.aplicativos .acciones{justify-content:flex-start}}

/* Fila desplegada con el detalle de una respuesta. */
.tabla td.detalle-celda{background:var(--cebra);padding:8px 18px 14px}

/* ---- cuadro de mando: indicadores por dimensión con barras, y entidades evaluadas ---- */
.dimensiones{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px 44px}
.dimension > h3{font-size:16px;margin:0 0 2px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dimension-n{font-size:13px;font-weight:400;color:var(--tenue);white-space:nowrap}
.dimension-pregunta{font-size:13.5px;color:var(--tenue);margin:0 0 10px}
.indicadores-lista{list-style:none;margin:0;padding:0}
.indicador{padding:9px 0;border-top:1px solid var(--linea-suave)}
.indicador-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.indicador-nombre{font-size:14px;color:var(--titulo);min-width:0}
.indicador-nombre b{color:var(--tenue);font-weight:600;margin-right:4px}
.indicador-valor{font-family:var(--fuente-titulos);font-size:18px;font-weight:700;color:var(--titulo);white-space:nowrap;font-variant-numeric:tabular-nums}
.indicador-valor small{font-size:12px;font-weight:600;color:var(--tenue);margin-left:2px}
.indicador.pendiente .indicador-nombre,.indicador.pendiente .indicador-valor{color:#9aa3b2}
.indicador.pendiente .indicador-valor{font-size:13px;font-weight:600}
.barra{height:8px;border-radius:4px;background:var(--linea-suave);overflow:hidden;margin-top:6px}
.barra > span{display:block;height:100%;background:var(--azul);border-radius:4px}
.barra.ok > span{background:var(--verde)}
.segmentos{display:flex;height:12px;border-radius:4px;overflow:hidden;background:var(--linea-suave);margin-top:6px}
.segmentos > span{display:block;height:100%}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--texto)}
.leyenda span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--c,#888)}
.s1{--c:#1447c7;background:#1447c7}.s2{--c:#2e9e5b;background:#2e9e5b}.s3{--c:#e0a200;background:#e0a200}.s4{--c:#0f7c8c;background:#0f7c8c}.s5{--c:#7c4dff;background:#7c4dff}.s6{--c:#d93f45;background:#d93f45}.s7{--c:#6b7486;background:#6b7486}.s8{--c:#0f2b57;background:#0f2b57}
.indicador-meta{display:block;font-size:12.5px;color:var(--tenue);margin-top:4px}
.ficha-tecnica{margin-top:10px}
.ficha-tecnica summary{cursor:pointer;color:var(--azul);font-size:13.5px;font-weight:500;list-style:none}
.ficha-tecnica summary::before{content:"+";display:inline-block;width:14px;font-weight:700}
.ficha-tecnica[open] summary::before{content:"–"}
.ficha-tecnica summary::-webkit-details-marker{display:none}
.ficha-tecnica .tabla-simple{margin-top:8px;font-size:13px}
.evaluadas-anios{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 14px}
.evaluadas-anio{display:flex;flex-direction:column;align-items:center;min-width:64px}
.evaluadas-anio .columna{width:44px;background:var(--azul);border-radius:3px 3px 0 0}
.evaluadas-anio b{font-family:var(--fuente-titulos);font-size:20px;color:var(--titulo);line-height:1.1}
.evaluadas-anio span{font-size:12.5px;color:var(--tenue);margin-top:4px;white-space:nowrap}
.evaluadas-anio small{font-size:11.5px;color:#9aa3b2}

/* ---- pestañas de dimensiones y fichas de indicador ---- */
.tab-contenido{margin-top:18px}
.tab-contenido .indicadores-lista{max-width:900px}
.pendientes{font-size:13px;color:var(--texto);margin:12px 0 0;line-height:1.7}
.pendientes span:not(.tenue):not(.punto){color:#7c8596}
.indicador-acciones{gap:14px;margin-top:6px;font-size:13px;align-items:baseline}
.ficha-tecnica.en-linea{margin:0;display:inline-block}
.ficha-tecnica.en-linea summary{font-size:13px}
.ficha-tecnica.en-linea[open]{display:block;width:100%;margin-top:6px;padding:8px 12px;background:var(--cebra);border-radius:var(--radio)}
.ficha-tecnica .ficha{margin-top:6px}
.ficha-tecnica .lista-filas > li{align-items:flex-start}
.segmentos .nivel-1{background:#d93f45}.segmentos .nivel-2{background:#e0a200}.segmentos .nivel-3{background:#2763d7}.segmentos .nivel-4{background:#1447c7}.segmentos .nivel-5{background:#2e9e5b}
.leyenda .nivel-1{--c:#d93f45}.leyenda .nivel-2{--c:#e0a200}.leyenda .nivel-3{--c:#2763d7}.leyenda .nivel-4{--c:#1447c7}.leyenda .nivel-5{--c:#2e9e5b}
.tabla.madurez td,.tabla.madurez th{padding:9px 12px;font-size:14px}
.tabla.madurez .badge{font-size:13px}

/* ---- ajustes responsivos: nada debe empujar el ancho de la página ---- */
.indicador,.dimension,.tab-pane{min-width:0}
.indicador-acciones > *{min-width:0}
.indicador-acciones details.ficha-tecnica.en-linea[open]{flex:1 1 100%;width:100%;max-width:100%}
.ficha-tecnica[open]{overflow-x:auto}
.ficha-tecnica .ficha dd,.ficha-tecnica .ficha dt{min-width:0;overflow-wrap:anywhere}
.lista-filas > li > span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lista-filas > li > form,.lista-filas > li > .acciones{flex:0 0 auto}
.lista-filas code{overflow-wrap:anywhere;white-space:normal}
.editor .bloque-cab{flex-wrap:wrap}
.editor .bloque-resumen{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.editor .bloque-cab .btn-group{flex:0 0 auto;margin-left:auto}
.editor .editor-barra > *{min-width:0}

/* ---- diseño moderno del contenido: tarjetas ligeras, iconos y pastillas. La cabecera y el pie no cambian. ---- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:18px 20px;min-width:0}
.tarjeta.suave{background:#f4f8ff;border-color:#dbe6fb}
.tarjeta > strong{display:block;font-size:15px;color:var(--titulo);margin-bottom:8px}
.tarjetas{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tarjetas.tres{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.icono{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icono-caja{width:44px;height:44px;border-radius:10px;background:#eaf1ff;color:var(--azul);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.icono-caja .icono{width:24px;height:24px}
.pastilla{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:#eaf1ff;color:var(--azul);white-space:nowrap}
.pastilla.ok{background:#e4f5ea;color:#1f7a47}.pastilla.media{background:#fff4d6;color:#8a5a00}.pastilla.alta{background:#fde8e8;color:#b3261e}.pastilla.baja{background:#e4f5ea;color:#1f7a47}

/* portada */
.hero{position:relative;border-radius:14px;overflow:hidden;background:#0f2b57 url(../img/fondo-cuestionario.jpg) center/cover no-repeat;color:#fff;padding:52px 46px;min-height:320px;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,28,70,.94) 0%,rgba(9,28,70,.78) 55%,rgba(9,28,70,.4) 100%)}
.hero > div{position:relative;max-width:640px}
.hero h1{font-size:38px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 12px}
.hero p{font-size:16px;color:#d6e2f7;max-width:56ch;margin:0 0 22px}
.hero .boton.primario{background:var(--azul)}
.hero .boton.secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.hero .boton.secundario:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.hero .boton .icono{width:18px;height:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:-30px;position:relative;z-index:1;padding:0 22px}
.kpi{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:16px 18px;box-shadow:0 8px 22px rgba(13,27,51,.07);min-width:0}
.kpi .icono{color:var(--azul);width:26px;height:26px;margin-top:2px}
.kpi b{display:block;font-family:var(--fuente-titulos);font-size:24px;color:var(--titulo);line-height:1.1}
.kpi strong{display:block;font-size:14px;color:var(--titulo);margin-top:2px}
.kpi span{font-size:12.5px;color:var(--tenue)}
.dim-tarjeta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.dim-tarjeta strong{display:block;font-size:14.5px;color:var(--titulo)}
.dim-tarjeta span{font-size:13px;color:var(--tenue)}
.banda-info{display:flex;gap:16px;align-items:center;background:#f4f8ff;border:1px solid #dbe6fb;border-radius:10px;padding:16px 20px;flex-wrap:wrap}
.banda-info > div{flex:1 1 300px}
.banda-info p{margin:0;font-size:14px}
.banda-info strong{display:block;color:var(--titulo);font-size:15px;margin-bottom:2px}
.banda-info .enlace-texto{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.banda-info .enlace-texto .icono{width:16px;height:16px}

/* instrumentos */
.instrumento{display:flex;flex-direction:column;gap:10px}
.instrumento .cab{display:flex;gap:12px;align-items:flex-start}
.instrumento h3{font-size:15.5px;margin:0 0 4px;line-height:1.3}
.instrumento h3 a{color:var(--titulo)}
.instrumento p{font-size:13.5px;color:var(--texto);margin:0;flex:1 1 auto}
.instrumento .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tenue);align-items:center}
.instrumento .meta span{display:inline-flex;align-items:center;gap:5px}
.instrumento .meta .icono{width:15px;height:15px}
.instrumento .meta .qr-mini{width:48px;height:48px;margin-left:auto;padding:2px}
.instrumento .boton{width:100%;gap:8px}
.instrumento .boton .icono{width:16px;height:16px}
.instrumento .enlaces{display:flex;justify-content:center;gap:16px;font-size:13px}

/* cuadro de mando */
.resumen-mando{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:22px}
.indice-grande{font-family:var(--fuente-titulos);font-size:44px;font-weight:800;color:var(--azul);line-height:1;margin:6px 0 10px}
.indice-grande small{font-size:18px;color:var(--tenue);font-weight:600}
.nivel-grande{font-family:var(--fuente-titulos);font-size:28px;font-weight:800;color:var(--titulo);line-height:1.1;margin-top:6px}
.nivel-cifra{font-family:var(--fuente-titulos);font-size:22px;font-weight:700;color:var(--titulo)}
.nivel-cifra small{font-size:14px;color:var(--tenue);font-weight:600}
.minibarras{display:flex;gap:4px;align-items:flex-end;height:44px;flex:0 0 auto}
.minibarras span{width:10px;background:#dbe6fb;border-radius:3px 3px 0 0}
.minibarras span.activa{background:var(--azul)}
.dimensiones-mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.dim-mosaico{border:1px solid var(--linea);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;background:#fff;cursor:pointer;text-align:left;font:inherit;min-width:0}
.dim-mosaico:hover{border-color:var(--azul);text-decoration:none;color:inherit}
.dim-mosaico .icono{color:var(--azul);width:26px;height:26px}
.dim-mosaico strong{font-size:13.5px;color:var(--titulo);line-height:1.25}
.dim-mosaico b{font-family:var(--fuente-titulos);font-size:22px;color:var(--titulo);line-height:1.1}
.dim-mosaico b small{font-size:12px;color:var(--tenue);font-weight:600}
.dim-mosaico .barra{margin-top:2px}
.dim-mosaico .tenue{font-size:12px}
.brechas{list-style:none;margin:0;padding:0}
.brechas li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--linea-suave)}
.brechas li:first-child{border-top:0}
.brechas .num{width:26px;height:26px;border-radius:50%;background:#eaf1ff;color:var(--azul);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brechas .nombre{flex:1 1 auto;font-size:14px;min-width:0}
.brechas .nombre span{display:block;font-size:12.5px;color:var(--tenue)}

/* pestañas como pastillas compactas: caben las seis dimensiones en una fila de escritorio */
.nav-tabs.mintic-tabs{background:transparent;border:0;padding:0;gap:6px;flex-wrap:wrap;overflow:visible;margin:0;mask-image:none;-webkit-mask-image:none}
.nav-tabs.mintic-tabs .nav-link{border:1px solid var(--linea);border-radius:999px;padding:7px 14px;font-size:13.5px;background:#fff;font-weight:500}
.nav-tabs.mintic-tabs .nav-link:hover{border-color:var(--azul)}
.nav-tabs.mintic-tabs .nav-link.active{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:none;font-weight:600}
.nav-tabs.mintic-tabs .nav-link.active .badge{color:#dbe4fb !important}
@media (max-width:760px){
  .hero{padding:30px 22px;min-height:0;border-radius:10px}
  .hero h1{font-size:27px}
  .kpis{margin-top:14px;padding:0}
  .resumen-mando{grid-template-columns:1fr}
  .nav-tabs.mintic-tabs{margin:0;flex-wrap:nowrap;overflow-x:auto;padding:2px;border-radius:0;border:0}
}

/* ---- menos recuadros: los bloques del diseño moderno se separan con líneas y espacio, no con cajas ---- */
.tarjeta{border:0;border-radius:0;padding:0;background:transparent}
.tarjeta.suave{background:transparent;border:0;border-left:3px solid var(--azul);padding:4px 0 4px 18px}
.tarjetas{gap:22px 36px}
.dim-tarjeta{padding:0}
.kpis{margin-top:22px;padding:0;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.kpi{border:0;border-radius:0;box-shadow:none;padding:18px 20px 18px 0;border-left:1px solid var(--linea);padding-left:20px}
.kpi:first-child{border-left:0;padding-left:0}
.banda-info{background:transparent;border:0;border-left:3px solid var(--azul);border-radius:0;padding:4px 0 4px 18px}
.instrumento{border:0;border-radius:0;padding:18px 0 0;border-top:2px solid var(--azul)}
.instrumento .boton{width:auto;align-self:flex-start}
.instrumento .enlaces{justify-content:flex-start}
.resumen-mando{gap:0 40px;border-bottom:1px solid var(--linea);padding-bottom:18px}
.resumen-mando > .tarjeta + .tarjeta{border-left:1px solid var(--linea);padding-left:40px}
.resumen-mando > .tarjeta.suave{border-left:3px solid var(--azul);padding-left:18px}
.dimensiones-mosaico{gap:14px 24px}
.dim-mosaico{border:0;border-radius:0;padding:12px 0 0;border-top:1px solid var(--linea)}
.dim-mosaico:hover{border-color:var(--linea)}
.dim-mosaico:hover strong{color:var(--azul)}
@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:14px 12px 14px 12px;border-left:0;border-top:1px solid var(--linea-suave)}
  .kpi:nth-child(-n+2){border-top:0}
  .resumen-mando > .tarjeta + .tarjeta{border-left:0;padding-left:0;margin-top:18px;border-top:1px solid var(--linea);padding-top:18px}
  .resumen-mando > .tarjeta.suave{border-top:0;border-left:3px solid var(--azul);padding-left:18px}
}