/* Trayectorias · demo conceptual de un sistema MEAL
   Papel cálido, verde de confianza y tipografía editorial: una herramienta para una
   fundación tiene que parecer seria y cercana a la vez, no un panel de startup. */

:root {
  --papel: #f8f5ee;
  --blanco: #fffdf8;
  --tinta: #1c2025;
  --texto: #434951;
  --tenue: #7b8088;
  --linea: #e5dfd2;
  --linea-fuerte: #d4ccbb;
  --verde: #1f6f5c;
  --verde-oscuro: #15503f;
  --verde-claro: #e3efe8;
  --ambar: #9c6512;
  --ambar-claro: #f6ead3;
  --rojo: #a8473b;
  --rojo-claro: #f5e2dd;
  --azul: #4f739c;
  --azul-claro: #e6edf5;
  --arcane: #6f5cf0;
  --sombra: 0 1px 2px rgba(28, 32, 37, .04), 0 10px 30px -18px rgba(28, 32, 37, .18);
  --radio: 14px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 15px/1.55 var(--sans);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

h1, h2, h3 { font-family: var(--serif); color: var(--tinta); font-weight: 500; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height: 1.1; }
h2 { font-size: 1.28rem; line-height: 1.25; margin-bottom: .35rem; }
h3 { font-size: 1rem; line-height: 1.3; margin-bottom: .5rem; }
p { margin: .4rem 0; }
a { color: var(--verde-oscuro); }
code { font: .86em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1ede3; padding: 2px 6px; border-radius: 6px; color: var(--tinta); }
q { quotes: '«' '»'; font-style: italic; }

.eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); font-weight: 600; margin: 0 0 .5rem; }
.tenue { color: var(--tenue); }
small.bloque { display: block; }
.fuerte { font-weight: 600; color: var(--tinta); }
.num { text-align: right; white-space: nowrap; }
.enlace { color: var(--verde-oscuro); font-weight: 500; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .9rem/1 var(--sans); color: #fff; background: var(--verde);
  border: 1px solid var(--verde); border-radius: 999px; padding: .62rem 1.1rem;
  text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
}
.boton:hover { background: var(--verde-oscuro); box-shadow: 0 6px 16px -8px rgba(21, 80, 63, .6); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(31, 111, 92, .35); outline-offset: 2px;
}
.boton--claro { background: transparent; color: var(--verde-oscuro); border-color: var(--linea-fuerte); }
.boton--claro:hover { background: var(--verde-claro); color: var(--verde-oscuro); box-shadow: none; }
.boton--grande { width: 100%; justify-content: center; padding: 1rem; font-size: 1rem; }

/* ── Avisos ── */
.aviso-demo {
  background: var(--tinta); color: #d9dbde; font-size: .78rem; text-align: center; padding: .45rem 1rem;
}
.aviso-demo b { color: #fff; }
.aviso-demo a { color: #fff; }
.aviso-rol { background: var(--azul-claro); color: #2f4d70; font-size: .85rem; text-align: center; padding: .5rem 1rem; border-bottom: 1px solid #d3deea; }

/* ── Barra superior ── */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .75rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(248, 245, 238, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; }
.marca__ic { width: 30px; height: 30px; color: var(--verde); flex: none; }
.marca b { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; display: block; line-height: 1.1; }
.marca small { color: var(--tenue); font-size: .74rem; }
.menu { display: flex; gap: .2rem; flex-wrap: wrap; }
.menu a { color: var(--texto); text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-weight: 500; font-size: .92rem; }
.menu a:hover { background: #efe9dd; color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--tinta); color: #fff; }
.rol { margin-left: auto; display: flex; align-items: center; gap: .7rem; font-size: .82rem; color: var(--tenue); }
.rol b { color: var(--tinta); }
.rol a { color: var(--verde-oscuro); font-weight: 500; }

/* ── Contenido ── */
.contenido { max-width: 1180px; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 4rem; }
.pie { max-width: 1180px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2.5rem; font-size: .8rem; color: var(--tenue); border-top: 1px solid var(--linea); }
.migas { margin: 0 0 1rem; font-size: .88rem; }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--tinta); }

.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.cab__sub { color: var(--tenue); margin-top: .5rem; max-width: 70ch; }
.cab__acciones { display: flex; gap: .6rem; flex-wrap: wrap; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1rem, 2.2vw, 1.5rem); box-shadow: var(--sombra); margin-bottom: 1.25rem;
}
.tarjeta > h2 + .tenue { margin-top: 0; margin-bottom: 1rem; }
section.bloque { margin: 1.8rem 0 1.25rem; }
.bloque__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }

/* ── Chips ── */
.chip {
  display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
  padding: .32rem .55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
  background: #eeeae0; color: var(--texto);
}
.chip--respondido, .chip--persona-egresado, .chip--meta-cumple { background: var(--verde-claro); color: var(--verde-oscuro); }
.chip--pendiente, .chip--meta-cerca { background: var(--ambar-claro); color: var(--ambar); }
.chip--vencido, .chip--persona-abandono, .chip--meta-lejos { background: var(--rojo-claro); color: var(--rojo); }
.chip--futuro { background: #eeeae0; color: var(--tenue); }
.chip--persona-activo { background: var(--azul-claro); color: #2f4d70; }
.chip--meta-sin-datos { background: #eeeae0; color: var(--tenue); }

.sit { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.sit i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* ── KPIs ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.15rem; box-shadow: var(--sombra); }
.kpi__etq { display: block; font-size: .78rem; color: var(--tenue); font-weight: 500; }
.kpi__valor { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--tinta); line-height: 1.15; margin: .15rem 0; }
.kpi__nota { display: block; font-size: .78rem; color: var(--tenue); }

.rejilla-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.25rem; }
.rejilla-panel .tarjeta { margin-bottom: 0; }
.rejilla-ficha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

/* ── Barras apiladas ── */
.apiladas { display: grid; gap: .7rem; margin: .8rem 0 1rem; }
.apilada { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: .9rem; }
.apilada__etq { font-weight: 600; color: var(--tinta); font-size: .9rem; }
.apilada__etq small { display: block; font-weight: 400; color: var(--tenue); font-size: .74rem; }
.apilada svg { width: 100%; height: 22px; border-radius: 6px; overflow: hidden; background: #efebe2; }
.leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--texto); }

/* ── Alertas ── */
.alertas { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.alerta { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: 10px; border-left: 3px solid; background: #fbf7ef; }
.alerta a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.alerta a:hover { text-decoration: underline; }
.alerta span { font-size: .84rem; color: var(--texto); }
.alerta--riesgo { border-color: var(--ambar); }
.alerta--vencido { border-color: var(--rojo); }

/* ── Indicadores mini ── */
.inds-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ind-mini {
  display: grid; gap: .45rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ind-mini:hover { border-color: var(--verde); transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(21, 80, 63, .45); }
.ind-mini__nombre { font-size: .86rem; font-weight: 500; color: var(--texto); }
.ind-mini__valor { font-family: var(--serif); font-size: 1.9rem; color: var(--tinta); line-height: 1.1; }
.ind-mini__pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .78rem; color: var(--tenue); }

.barra-meta { width: 100%; height: 20px; display: block; overflow: visible; }
.bm-fondo { fill: #ece7dc; }
.bm-valor { fill: var(--verde); }
.bm-meta { stroke: var(--tinta); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.bm-base { stroke: var(--tenue); stroke-width: 1.6; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }

/* ── Tablas ── */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--tenue); padding: .55rem .7rem; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
td { padding: .7rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:hover td { background: #faf6ee; }
tr.cuenta td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.marca-si { color: var(--verde); font-weight: 700; }

/* ── Filtros ── */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-bottom: 1.1rem; }
.filtros label { display: grid; gap: .25rem; font-size: .76rem; font-weight: 600; color: var(--tenue); }
.filtros input, .filtros select {
  font: .9rem var(--sans); color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: .55rem .7rem; min-width: 150px;
}
.filtros input[type="search"] { min-width: 230px; }

/* ── Ficha ── */
.datos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.datos-grid dt { font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tenue); }
.datos-grid dd { margin: .2rem 0 0; color: var(--tinta); font-weight: 500; }

.linea-tiempo { list-style: none; margin: 1.2rem 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.paso { position: relative; padding: 1.6rem .4rem 0 0; display: grid; gap: .2rem; align-content: start; }
.paso::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--linea-fuerte); }
.paso:last-child::before { right: 50%; }
.paso__punto { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--linea-fuerte); }
.paso b { color: var(--tinta); font-size: .92rem; }
.paso small { color: var(--tenue); font-size: .78rem; }
.paso .chip { justify-self: start; }
.paso--respondido .paso__punto { background: var(--verde); border-color: var(--verde); }
.paso--respondido::before { background: var(--verde); }
.paso--pendiente .paso__punto { background: var(--ambar-claro); border-color: var(--ambar); }
.paso--vencido .paso__punto { background: var(--rojo-claro); border-color: var(--rojo); }
.paso--no-aplica { opacity: .5; }

.grafico-linea { width: 100%; height: auto; display: block; }
.grafico-linea .guia { stroke: var(--linea); stroke-width: 1; }
.grafico-linea .eje { fill: var(--tenue); font: 11px var(--sans); }
.grafico-linea .trazo { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linea .nodo { fill: var(--blanco); stroke: var(--verde); stroke-width: 2.5; }
.grafico-linea .valor { fill: var(--tinta); font: 600 11px var(--sans); }

.enlace-caja { background: #f3efe6; border: 1px dashed var(--linea-fuerte); border-radius: 10px; padding: .6rem .8rem; overflow-wrap: anywhere; margin: .6rem 0; }
.enlace-caja code { background: none; padding: 0; font-size: .8rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.hitos-detalle { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.hito-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.hito-card header { display: grid; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linea); }
.hito-card header b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--tinta); }
.hito-card header small { color: var(--tenue); font-size: .78rem; }
.hito-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; font-size: .86rem; }
.hito-card dt { color: var(--tenue); }
.hito-card dd { margin: 0; color: var(--tinta); text-align: right; }

.auditoria { list-style: none; margin: .5rem 0 0; padding: 0; }
.auditoria li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linea); font-size: .88rem; }
.auditoria li:last-child { border-bottom: 0; }
.auditoria time { color: var(--tenue); font-size: .8rem; padding-top: .1rem; }
.auditoria b { color: var(--tinta); font-weight: 600; }

/* ── Indicadores ── */
.indice { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.indice a { font-size: .84rem; text-decoration: none; color: var(--texto); background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: .35rem .75rem; }
.indice a:hover { border-color: var(--verde); color: var(--verde-oscuro); }

.indicador { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(1.1rem, 2.5vw, 1.8rem); box-shadow: var(--sombra); margin-bottom: 1.5rem; scroll-margin-top: 90px; }
.indicador__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.indicador__cab h2 { font-size: 1.55rem; }
.indicador__cifras { display: grid; grid-template-columns: 1.3fr 1fr 1.6fr; gap: 1rem; margin-bottom: .8rem; }
.cifra { display: grid; align-content: start; }
.cifra span { font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tenue); }
.cifra b { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; color: var(--tinta); }
.cifra small { color: var(--tenue); font-size: .8rem; line-height: 1.35; }
.cifra--grande b { font-size: 2.5rem; line-height: 1.1; color: var(--verde-oscuro); }
.leyenda-barra { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .76rem; color: var(--tenue); margin: .4rem 0 1rem; }
.lb { display: inline-block; width: 16px; height: 0; margin-left: .6rem; }
.lb:first-child { margin-left: 0; }
.lb--valor { height: 8px; border-radius: 4px; background: var(--verde); }
.lb--meta { width: 0; height: 14px; border-left: 2.4px solid var(--tinta); }
.lb--base { width: 0; height: 14px; border-left: 2px dashed var(--tenue); }

.definicion { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .5rem 1rem; margin: 0 0 1.2rem; padding: 1rem 1.1rem; background: #f6f2e9; border-radius: 10px; font-size: .9rem; }
.definicion dt { font-weight: 600; color: var(--tinta); }
.definicion dd { margin: 0; }

.desgloses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1rem; }
.desglose { font-size: .84rem; }
.desglose th { text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--tinta); font-weight: 500; border-bottom: 1px solid var(--linea); padding: .45rem .3rem; white-space: normal; }
.desglose td { padding: .45rem .3rem; }
.desglose__barra { width: 38%; min-width: 60px; }
.desglose tbody tr:hover td { background: none; }

/* ── Informe ── */
.resumen-ejecutivo { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; font-size: 1rem; color: var(--tinta); }
.resumen-ejecutivo b { color: var(--verde-oscuro); }
.metodologia ul { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }

/* ── Portada ── */
body.landing { background: radial-gradient(900px 500px at 90% -10%, rgba(31, 111, 92, .09), transparent 70%), var(--papel); }
.landing__barra { max-width: 1180px; margin: 0 auto; padding: 1.2rem clamp(1rem, 3vw, 2.5rem); }
.portada { max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem) 2rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; }
.portada h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); line-height: 1.04; }
.portada h1 em { font-style: italic; color: var(--verde); }
.portada__entrada { font-size: 1.12rem; color: var(--texto); max-width: 56ch; margin-top: 1.1rem; }
.portada__trazo { margin: 0; }
.portada__trazo svg { width: 100%; height: auto; overflow: visible; }
.pt-linea { fill: none; stroke: var(--verde); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: dibujar 2.2s .2s ease-out forwards; }
.pt-hitos circle { fill: var(--blanco); stroke: var(--verde); stroke-width: 3; opacity: 0; animation: aparecer .4s ease-out forwards; }
.pt-hitos circle:nth-child(1) { animation-delay: .3s; }
.pt-hitos circle:nth-child(2) { animation-delay: .8s; }
.pt-hitos circle:nth-child(3) { animation-delay: 1.2s; }
.pt-hitos circle:nth-child(4) { animation-delay: 1.7s; }
.pt-hitos .pt-final { fill: var(--verde); animation-delay: 2.1s; }
.pt-etq text { fill: var(--tenue); font: 12px var(--sans); text-anchor: middle; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt-linea { animation: none; stroke-dashoffset: 0; }
  .pt-hitos circle { animation: none; opacity: 1; }
}

.puertas { max-width: 1180px; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2.5rem) 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.puerta {
  display: grid; gap: .55rem; align-content: start; padding: 1.5rem; text-decoration: none; color: var(--texto);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.puerta:hover { transform: translateY(-3px); border-color: var(--verde); box-shadow: 0 22px 40px -26px rgba(21, 80, 63, .5); }
.puerta__n { font-family: var(--serif); color: var(--verde); font-size: 1.1rem; }
.puerta h2 { font-size: 1.35rem; }
.puerta__ir { margin-top: .5rem; font-weight: 600; color: var(--verde-oscuro); font-size: .9rem; }
.puerta--becario { background: var(--tinta); border-color: var(--tinta); color: #cfd3d8; }
.puerta--becario h2 { color: #fff; }
.puerta--becario .puerta__n, .puerta--becario .puerta__ir { color: #9fd3c1; }

.nota-demo { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem) 2rem; }
.nota-demo p { margin: 0; padding: 1rem 1.2rem; border-radius: 12px; background: var(--ambar-claro); color: #5e4214; font-size: .92rem; }

/* ── Seguimiento (móvil) ── */
body.movil { background: var(--papel); }
.seg { max-width: 560px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.seg__marca { display: flex; align-items: center; gap: .6rem; color: var(--tinta); margin-bottom: 1.4rem; }
.seg__marca b { font-family: var(--serif); font-weight: 600; display: block; }
.seg__marca small { color: var(--tenue); font-size: .76rem; }
.seg__intro { margin-bottom: 1.2rem; }
.seg__intro h1 { font-size: 2rem; }
.seg__form { display: grid; gap: 1.1rem; }
.seg__form fieldset { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); margin: 0; padding: 1rem 1.1rem; }
.seg__form legend { float: left; width: 100%; font-weight: 600; color: var(--tinta); padding: 0; margin-bottom: .8rem; }
/* La leyenda flotante queda dentro del recuadro aunque ocupe dos líneas en móvil. */
.seg__form legend + * { clear: both; }
.opciones { display: grid; gap: .45rem; margin-top: .5rem; }
.opciones--fila { grid-template-columns: 1fr 1fr; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion span { display: block; padding: .8rem 1rem; border: 1.5px solid var(--linea-fuerte); border-radius: 12px; background: var(--papel); color: var(--tinta); transition: border-color .12s, background .12s; }
.opcion input:checked + span { border-color: var(--verde); background: var(--verde-claro); font-weight: 600; }
.opcion input:focus-visible + span { outline: 3px solid rgba(31, 111, 92, .35); outline-offset: 2px; }
.condicional { display: grid; gap: .8rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.campo { display: grid; gap: .4rem; font-weight: 600; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  font: 1rem var(--sans); color: var(--tinta); background: var(--papel); width: 100%;
  border: 1.5px solid var(--linea-fuerte); border-radius: 12px; padding: .75rem .9rem;
}
.campo textarea { resize: vertical; }
.campo__unidad { display: flex; align-items: center; gap: .5rem; }
.campo__unidad em { font-style: normal; color: var(--tenue); font-weight: 500; }
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; }
.escala__punto { position: relative; }
.escala__punto input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.escala__punto span { display: grid; place-items: center; height: 48px; border: 1.5px solid var(--linea-fuerte); border-radius: 12px; background: var(--papel); font-weight: 600; color: var(--tinta); }
.escala__punto input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }
.escala__punto input:focus-visible + span { outline: 3px solid rgba(31, 111, 92, .35); outline-offset: 2px; }
.escala__pie { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tenue); margin: .35rem 0 0; }
.privacidad { font-size: .84rem; color: var(--tenue); margin: 0; }
.error { color: var(--rojo); font-size: .86rem; font-weight: 500; margin: .4rem 0 0; }
.error--global { background: var(--rojo-claro); padding: .7rem .9rem; border-radius: 10px; margin-bottom: 1rem; }
.nota-demo-seg { margin-top: 1.5rem; padding: 1.1rem; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea); display: grid; gap: .8rem; justify-items: start; }

/* ── Adaptación ── */
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-panel, .rejilla-ficha { grid-template-columns: minmax(0, 1fr); }
  .inds-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desgloses { grid-template-columns: minmax(0, 1fr); }
  .portada { grid-template-columns: minmax(0, 1fr); }
  .puertas { grid-template-columns: minmax(0, 1fr); }
  .indicador__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rol { margin-left: 0; width: 100%; justify-content: space-between; }
  .kpis, .inds-mini { grid-template-columns: minmax(0, 1fr); }
  .linea-tiempo { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .paso { padding: 0 0 .9rem 1.8rem; }
  .paso::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .paso:last-child::before { bottom: 50%; right: auto; }
  .definicion { grid-template-columns: minmax(0, 1fr); }
  .auditoria li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .apilada { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .indicador__cifras { grid-template-columns: minmax(0, 1fr); }
}

/* ── Impresión del informe ── */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff; font-size: 11px; }
  .aviso-demo, .aviso-rol, .barra, .pie, .cab__acciones, .migas { display: none !important; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .salto { break-before: page; }
  a { color: inherit; text-decoration: none; }
  .cab { margin-bottom: 1rem; }
  .informe .cab h1::after { content: ' · Informe de resultados'; font-size: .6em; color: #777; }
}