/* ==========================================================
   Psymetria — hoja de estilos de la aplicación
   Dirección visual (nov. 2026):
   · Una sola familia, DM Sans, servida desde public/assets/fonts (sin CDN; licencia OFL).
   · Colores del logo del usuario (nov. 2026): la «escalera» del azul de su firma (#002a64;
     --primary #11458c en botones y enlaces), pleno solo en marcas pequeñas y sus tintes pálidos
     en las áreas (fila activa del menú, insignias, pistas de progreso). El rojo del logo marca
     lo nuevo, el turquesa de su línea marca la sección activa del menú y el amarillo es solo
     del logo. Los informes conservan el azul con que se aprobaron (#1d5b85, bloque del final).
   · Superficies planas: un borde de 1 px o un escalón de tono, sin sombra en reposo; la
     sombra solo en lo que flota (menú móvil, barra fija de guardar, diálogos).
   · Movimiento solo como respuesta (pulsar, abrir el menú) y con «reducir movimiento».
   La página del informe también carga esta hoja: el bloque «Informes» del final fija los
   valores con que se aprobaron, para que los informes se vean e impriman igual.
   ========================================================== */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2-variations"), url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2-variations"), url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colores del logo (docs/marca/logo-original.webp), tomados de la imagen */
  --brand-navy: #002a64;       /* la firma «Psymetria» */
  --brand-red: #e8181c;        /* bloques «S» y «Y» (4,6:1 sobre blanco) */
  --brand-yellow: #d8d404;     /* bloque «P»: solo decorativo, 1,6:1 sobre blanco */
  --brand-teal: #50a0a8;       /* la línea que separa «PSY» de la firma */
  --teal-strong: #2e7d86;      /* teal del logo oscurecido: fondo de la píldora activa (texto blanco 4,8:1) */

  /* Azul de la interfaz: el tono del azul del logo (OKLCH h 258), pleno, su tinta y sus tintes */
  --primary: #11458c;          /* botones y enlaces, 9,3:1 sobre blanco */
  --primary-strong: var(--brand-navy);   /* hover del botón principal */
  --primary-ink: var(--brand-navy);      /* texto sobre los tintes */
  --primary-track: #d2e1f7;    /* tinte 200: pistas de progreso, avatar */
  --primary-soft: #e8f0fc;     /* tinte 100: fila activa, insignias, opción elegida */
  --primary-faint: #f4f8fe;    /* tinte 50: hover de filas */
  --ring: rgba(17, 69, 140, .28);

  /* Neutros (fondo levemente teñido hacia el azul) */
  --ink: #15212c;
  --ink-2: #364452;            /* menú y texto secundario fuerte */
  --muted: #586675;            /* 5,6:1 sobre blanco */
  --faint: #6a7683;            /* marcadores de posición, 4,6:1 */
  --bg: #f5f7f9;
  --surface: #ffffff;
  --raised: #eff2f5;
  --border: #e1e6eb;           /* borde de tarjetas */
  --rule: #ecf0f3;             /* líneas entre filas */
  --border-strong: #c9d2db;    /* borde de controles */
  --hover: rgba(21, 33, 44, .05);

  /* Estados (pares pálidos con tinta del mismo tono) */
  --accent: var(--primary);
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --danger-ink: #8c1d17;
  --warning: #8a4a0b;
  --warning-soft: #fdf1dc;
  --success: #23774d;
  --success-soft: #e3f3e9;
  --success-ink: #1b5c3b;
  --info: var(--primary);
  --info-soft: var(--primary-soft);
  --sidebar: var(--bg);

  /* Forma: radios ajustados y un solo alto de control */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-control: 6px;
  --control-h: 40px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 28px rgba(16, 24, 40, .12);
  --shadow-float: var(--shadow-lg);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a:not([class]):hover { text-decoration: underline; text-underline-offset: .18em; }
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; margin-top: 1.2em; }
p { margin: 0 0 .8em; }
code { background: var(--primary-soft); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
small, .small { font-size: .86rem; }
.muted { color: var(--muted); }
.block { display: block; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.center-text { text-align: center; }
.text-danger { color: var(--danger); }
.pre { white-space: pre-line; }
.grow { flex: 1; min-width: 0; }

/* Tipografía de la aplicación y de las páginas del evaluado (los informes llevan la suya) */
:where(.app-body, .public-body) {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.app-body, .public-body) h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
:where(.app-body, .public-body) h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
:where(.app-body, .public-body) h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }
:where(.app-body, .public-body) strong { font-weight: 600; }
:where(.app-body, .public-body) small, :where(.app-body, .public-body) .small { font-size: .875rem; }
:where(.app-body, .public-body) ::selection { background: var(--primary-track); color: var(--ink); }

/* ---------- Disposición del panel ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  background: var(--sidebar);
  color: var(--ink-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 12px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.015em; text-decoration: none; }
.brand-dark { color: var(--ink); }
.sidebar .brand { padding: 4px 8px; }
/* Logo del usuario (public/assets/img/logo.webp, fondo transparente; original en docs/marca) */
.brand-logo { line-height: 0; }
.brand-logo img { display: block; max-width: 100%; height: auto; }
.sidebar .brand-logo { padding: 2px 8px 0; }
.sidebar .brand-logo img { width: 196px; }
.topbar .brand-logo img { width: auto; height: 34px; }
.public-header .brand-logo img { width: auto; height: 44px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.nav a svg { flex: none; color: var(--muted); }
.nav a.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; position: relative; }
.nav a.active svg { color: var(--primary); }
/* Sección activa: una línea turquesa, como la que separa «PSY» de la firma en el logo */
.nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-teal); }
.sidebar-cta { margin-top: 2px; }
.sidebar-cta svg { color: var(--primary); }
.sidebar-user { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.user-chip { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 7px 8px; border-radius: var(--radius-sm); transition: background-color .15s ease; }
.user-chip.active { background: var(--primary-soft); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-track); color: var(--primary-ink); display: grid; place-items: center; font-weight: 600; font-size: .8125rem; letter-spacing: .02em; flex: none; }
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.user-meta strong { font-size: .9063rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--muted); font-size: .8125rem; }
.sidebar .link-btn { color: var(--muted); padding: 6px 8px; font-size: .875rem; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: var(--hover); color: var(--ink); }
  .nav a.active:hover { background: var(--primary-soft); color: var(--primary-ink); }
  .user-chip:hover { background: var(--hover); }
  .sidebar .link-btn:hover { color: var(--ink); }
}

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { padding: 32px 40px 64px; max-width: 1280px; width: 100%; }
.backdrop { display: none; }

/* ---------- Encabezados de página ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header > div:first-child { min-width: 0; max-width: 76ch; }
.page-header h1 { margin-bottom: 6px; }
.page-header p { margin: 0; }
.page-header .muted { font-size: .9688rem; }
.page-title { display: flex; align-items: center; gap: 16px; }
.page-title .thumb { width: 44px; height: 62px; }
.crumbs { font-size: .875rem; color: var(--muted); margin-bottom: 6px !important; }
.crumbs a { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--primary); } }
.actions, .inline { display: flex; gap: 8px; align-items: center; }
.inline.wrap, .actions { flex-wrap: wrap; }

/* ---------- Tarjetas y rejillas ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.card > h2:first-child { margin-bottom: 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card.narrow { max-width: 520px; margin: 40px auto; }
.card.flush > h2.pad:first-child { margin: 0; padding: 20px 24px 14px; }
.pad { padding: 18px 24px; margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-side { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Contenido principal con columna de detalle a la derecha (detalle de una aplicación) */
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; }
.gap-lg { gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-main > .stack { gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }

/* Cifras del inicio: un solo bloque dividido por líneas finas (etiqueta arriba, cifra abajo) */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
.stat { background: var(--surface); padding: 16px 20px 18px; color: var(--ink); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; transition: background-color .15s ease; }
.stat-value { font-size: 1.625rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .875rem; font-weight: 500; line-height: 1.3; }
/* Resultados que el profesional aún no abrió: la cifra en el azul y un punto junto a la etiqueta */
.stat-highlight .stat-value { color: var(--primary); }
.stat-highlight .stat-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--brand-red); vertical-align: 1px; }
@media (hover: hover) and (pointer: fine) { .stat:hover { background: var(--primary-faint); } }
/* Cada cifra se puede pulsar: una flecha (lleva a otra página) o un chevrón hacia abajo («Por responder»,
   que abre su lista debajo, aquí mismo) */
.stat { position: relative; }
.stat-label { padding-right: 20px; }
.stat-icon { position: absolute; top: 17px; right: 14px; color: var(--faint); transition: transform .2s var(--ease-out), color .15s ease; }
.stat:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.stat-toggle[aria-expanded="true"] { background: var(--primary-soft); }
.stat-toggle[aria-expanded="true"] .stat-icon { transform: rotate(180deg); color: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .stat:hover .stat-icon { color: var(--primary); }
  .stat-toggle[aria-expanded="true"]:hover { background: var(--primary-soft); }
}

/* Panel que se abre bajo las cifras (lista de quienes aún no completan su test) */
.panel { margin-bottom: 24px; }
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 20px 24px 8px; }
.panel-head h2 { margin: 0 0 4px; }
.panel-head p { margin: 0; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-body { padding: 0 24px 8px; }
.row-progress { flex: none; width: 128px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row-progress-text { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-progress .progress { width: 100%; height: 6px; background: var(--primary-soft); }

/* Estadísticas del Inicio: figuras por sexo, escalera de edades, torta de uso de tests y medio anillo de escolaridad.
   Cada cifra se ve escrita (cantidad y %); el color solo distingue. Paleta sacada de los colores del logo
   (azul, rojo, turquesa y amarillo, en tonos aptos para gráficos) más violeta y naranja; en este orden
   pasa el validador de dataviz también con el cierre de la torta. Las marcas crecen al entrar en pantalla. */
.insights {
  margin-bottom: 24px;
  --viz-blue: #2460b7;        /* azul del logo en tono medio: masculino, test 1 */
  --viz-blue-tint: #d8e8fe;
  --viz-red: #e8181c;         /* rojo del logo: femenino, test 2 */
  --viz-red-tint: #ffded9;
  --viz-teal: #00939e;        /* turquesa de la línea del logo, más saturado */
  --viz-yellow: #b5b100;      /* amarillo del logo oscurecido (el original no se ve sobre blanco) */
  --viz-violet: #8254c4;
  --viz-orange: #e1791b;
  --viz-gray: #8d99a6;        /* «Otros» */
  --viz-missing: #7f8b98;     /* «Sin dato» */
  --viz-track: var(--raised);
}
.insights-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding: 20px 24px 16px; }
.insights-head h2 { margin: 0; }
.insights-head p { margin: 0; }
.insights-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1px solid var(--rule); }
.insights-row.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.insights-row > .insight + .insight { border-left: 1px solid var(--rule); }
.insight { padding: 18px 24px 24px; min-width: 0; }
.insight h3 { font-size: .9375rem; font-weight: 650; margin: 0 0 2px; }
.insight-note { color: var(--muted); font-size: .8438rem; line-height: 1.45; margin: 0 0 16px; }
.insight-note strong { color: var(--ink); font-weight: 600; }

/* Sexo: la figura se llena hasta su porcentaje */
.sex-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.sex-fig { margin: 0; display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.sex-fig svg { flex: none; display: block; overflow: visible; }
.sex-fig .fig-track { fill: var(--fig-tint); }
.sex-fig .fig-fill { fill: var(--fig-color); }
.sex-fig.is-f { --fig-color: var(--viz-red); --fig-tint: var(--viz-red-tint); }
.sex-fig.is-m { --fig-color: var(--viz-blue); --fig-tint: var(--viz-blue-tint); }
.sex-fig figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 2px; }
.sex-pct { font-size: 2.125rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.sex-name { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.sex-name i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--fig-color); }
.sex-n { font-size: .8125rem; color: var(--muted); }
.split { display: flex; gap: 2px; height: 8px; margin-top: 20px; }
.split-part { display: block; min-width: 4px; border-radius: 999px; }
.sex-f { background: var(--viz-red); }
.sex-m { background: var(--viz-blue); }
.sex-o { background: var(--viz-violet); }
.sex-x { background: var(--viz-missing); }
.sex-extra { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: .8125rem; color: var(--muted); }
.sex-extra span { display: inline-flex; align-items: center; gap: 6px; }
.sex-extra i { width: 8px; height: 8px; border-radius: 50%; }
.sex-extra strong { color: var(--ink); font-weight: 600; }
/* Panel angosto (tablet, celular): la cifra va debajo de su figura */
.insight-sex { container-type: inline-size; }
@container (max-width: 359px) {
  .sex-fig { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .sex-fig figcaption { align-items: center; }
  .sex-fig svg { width: 52px; height: 116px; }
  .sex-pct { font-size: 1.875rem; }
  .sex-name { justify-content: center; margin-top: 6px; }
}

/* La fila de Sexo y Edad: Edad necesita más ancho; Sexo se centra en su alto */
.insights-row.is-age { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.insight-sex { display: flex; flex-direction: column; }
.sex-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Edad: escalera que sube con la edad. Cada grupo se apoya en un escalón de su color (borde de color y
   relleno claro) y muestra su % grande (tono oscuro del color), la pareja de figuras, el grupo y la cantidad por sexo. */
.insight-age { container-type: inline-size; }
.ages { position: relative; height: var(--h); margin-top: 2px; }
.ages-hero { position: absolute; top: 0; left: 0; z-index: 12; width: calc(var(--w) * 2); max-width: 300px; margin: 0; display: flex; align-items: center; gap: 10px; }
.hero-num { font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hero-cap { font-size: .875rem; color: var(--ink-2); font-weight: 500; line-height: 1.35; }
.hero-cap .block { display: block; color: var(--muted); font-weight: 400; font-size: .8125rem; }
.hero-cap strong { color: var(--ink); font-weight: 600; }
.age-steps { list-style: none; margin: 0; padding: 0; }
.age-step { position: absolute; left: var(--x); bottom: var(--lift); z-index: 10; width: var(--w); padding: 0 4px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .2s ease; }
.age-pct { font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--ci); white-space: nowrap; }
.age-pair { display: flex; gap: 3px; margin: 6px 0 5px; }
.age-fig { display: block; fill: var(--c); }
.age-fig.is-off { fill: var(--rule); }
.age-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.age-name { font-size: .6875rem; font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--ci); }
.age-desc { margin-top: 3px; font-size: .75rem; line-height: 1.3; color: var(--muted); }
.age-desc .block { display: block; }
.age-blocks { position: absolute; inset: 0; }
.age-block { position: absolute; bottom: 0; width: calc(var(--w) - 4px); margin-left: 2px; border-top: 6px solid var(--c); border-radius: 8px 8px 0 0;
  background: var(--raised); background: color-mix(in srgb, var(--c) 15%, var(--surface)); transition: opacity .2s ease, background-color .2s ease; }
.age-block.is-active { background: color-mix(in srgb, var(--c) 28%, var(--surface)); }
.ages.has-active .age-step:not(.is-active), .ages.has-active .age-block:not(.is-active) { opacity: .35; }
.age-note { margin: 12px 0 0; }
/* Panel angosto: lista de grupos, cada uno con su pareja de figuras */
@container (max-width: 559px) {
  .ages { height: auto; }
  .ages-hero { position: static; width: auto; max-width: none; margin-bottom: 12px; }
  .age-blocks { display: none; }
  .age-step { position: static; width: auto; padding: 8px 0; display: grid; grid-template-columns: 34px 4.5rem minmax(0, 1fr); align-items: center; gap: 0 12px; text-align: left; border-top: 1px solid var(--rule); }
  .age-step:first-child { border-top: 0; }
  .age-pair { margin: 0; }
  .age-pct { grid-column: 2; grid-row: 1; font-size: 1.5rem; }
  .age-pair { grid-column: 1; grid-row: 1; }
  .age-text { grid-column: 3; grid-row: 1; align-items: flex-start; }
}


/* Uso de tests: torta en la que cada parte sobresale según su uso, con el % dentro;
   alrededor, el nombre, el % grande (en un tono oscuro del color, 4,9:1 o más) y la cantidad */
.insight-tests { container-type: inline-size; }
.c-s1 { --c: var(--viz-blue); --c-ink: #2460b7; --c-on: #fff; }
.c-s2 { --c: var(--viz-red); --c-ink: #c21919; --c-on: #fff; }
.c-s3 { --c: var(--viz-teal); --c-ink: #00727b; --c-on: #fff; }
.c-s4 { --c: var(--viz-yellow); --c-ink: #6a6700; --c-on: var(--ink); }
.c-s5 { --c: var(--viz-violet); --c-ink: #8254c4; --c-on: #fff; }
.c-s6 { --c: var(--viz-orange); --c-ink: #a94e00; --c-on: var(--ink); }
.c-otros { --c: var(--viz-gray); --c-ink: #5f6b78; --c-on: var(--ink); }
.pie-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 0 20px; align-items: center; height: var(--h); margin-top: 6px; }
.pie { grid-column: 2; grid-row: 1; width: 280px; height: 280px; }
.pie svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pie-slice { transition: transform .25s var(--ease-out), opacity .2s ease; }
.pie-slice path { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
/* El % de adentro mide 18 px o más (texto grande): el blanco cumple 3:1 en todas las partes donde va */
.pie-slice text { fill: var(--c-on); font-weight: 650; text-anchor: middle; dominant-baseline: central; letter-spacing: -.02em; pointer-events: none; }
.pie-slice text.is-off { display: none; }
.pie-slice.is-active { transform: translate(var(--dx), var(--dy)); }
.pie-wrap.has-active .pie-slice:not(.is-active) { opacity: .35; }
.pie-side { grid-row: 1; position: relative; height: 100%; list-style: none; margin: 0; padding: 0; min-width: 0; }
.pie-side.is-left { grid-column: 1; }
.pie-side.is-right { grid-column: 3; }
.callout { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; margin: 0 -10px; border-radius: var(--radius-sm); transition: background-color .15s ease, opacity .2s ease; }
.pie-side.is-left .callout { align-items: flex-end; text-align: right; }
.callout-name { font-size: .8125rem; font-weight: 650; color: var(--ink); line-height: 1.3; }
.callout-pct { font-size: 1.75rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; color: var(--c-ink); white-space: nowrap; }
.callout-pill { margin-top: 4px; padding: 2px 8px; border-radius: 4px; background: var(--raised); font-size: .75rem; line-height: 1.4; color: var(--muted); max-width: 100%; }
.callout-pill .nw { white-space: nowrap; }
.callout.is-active { background: var(--primary-faint); }
.pie-wrap.has-active .callout:not(.is-active) { opacity: .45; }
.pie-note { margin: 14px 0 0; }
/* Panel angosto: la torta arriba y las etiquetas debajo, en dos columnas y de mayor a menor */
@container (max-width: 539px) {
  .pie-wrap { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .pie { grid-column: 1 / -1; justify-self: center; width: min(280px, 100%); height: auto; aspect-ratio: 1; margin-bottom: 12px; }
  .pie-side { display: contents; }
  .callout { position: static; transform: none; margin: 0; order: var(--o); }
  .pie-side.is-left .callout { align-items: flex-start; text-align: left; }
}

/* Escolaridad: medio anillo (cada grado ocupa su parte del total) con una letra sobre cada parte
   y una línea hasta su fila: % grande, grado y cantidad. Dentro, el grado más frecuente. */
.insight-edu { container-type: inline-size; }
.edu { position: relative; height: var(--h); max-width: 520px; margin-top: 6px; }
.edu-fig { position: absolute; top: 0; bottom: 0; left: 0; }
.edu-ring, .edu-links { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
.edu-links { pointer-events: none; }
.edu-seg { fill: none; stroke-dasharray: 100 100; transition: opacity .2s ease; }
.edu-badge, .edu-links g { transition: opacity .2s ease; }
.edu-badge circle { fill: var(--surface); stroke-width: 2.5; }
.edu-badge text { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.edu-links path { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-opacity: .6; stroke-linejoin: round; }
.edu-links circle { fill: var(--surface); stroke-width: 2; }
.edu-center { position: absolute; left: 0; top: var(--cy); transform: translateY(-50%); width: var(--inner); margin: 0; display: flex; flex-direction: column; gap: 2px; }
.edu-center-k { font-size: .75rem; font-weight: 500; color: var(--muted); }
.edu-center strong { font-size: 1.0625rem; font-weight: 650; line-height: 1.25; color: var(--ink); }
.edu-center-n { font-size: .75rem; line-height: 1.35; color: var(--muted); }
.edu-rows { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; left: calc(var(--ax) + 8px); right: 0; }
.edu-row { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-50%); display: flex; align-items: center; gap: 10px; padding: 1px 8px; margin-left: -8px; border-radius: var(--radius-sm); transition: background-color .15s ease, opacity .2s ease; }
.edu-key { display: none; }
.edu-text { display: flex; flex-direction: column; min-width: 0; }
.edu-pct { font-size: 1.375rem; font-weight: 650; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.edu-name { font-size: .8125rem; font-weight: 650; line-height: 1.25; color: var(--ink-2); }
.edu-n { font-size: .75rem; line-height: 1.25; color: var(--muted); }
.edu-row.is-missing .edu-pct, .edu-row.is-missing .edu-name { color: var(--muted); }
.edu-row.is-active { background: var(--primary-faint); }
.edu.has-active .edu-seg:not(.is-active), .edu.has-active .edu-badge:not(.is-active), .edu.has-active .edu-links g:not(.is-active) { opacity: .3; }
.edu.has-active .edu-row:not(.is-active) { opacity: .45; }
.edu-note { margin: 14px 0 0; }
/* Panel angosto: el medio anillo más chico con el más frecuente al lado; las filas debajo, con su letra */
@container (max-width: 359px) {
  .edu { height: auto; }
  .edu-fig { position: relative; display: flex; align-items: center; gap: 16px; }
  .edu-ring { position: static; flex: none; width: 140px; height: auto; }
  .edu-links { display: none; }
  .edu-center { position: static; transform: none; width: auto; flex: 1; min-width: 0; }
  .edu-rows { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 16px; }
  .edu-row { position: static; transform: none; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 4px 4px 0; }
  .edu-key { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2.5px solid var(--c); border-radius: 50%; font-size: .75rem; font-weight: 700; color: var(--ink); }
  .edu-pct { font-size: 1.125rem; }
}

/* Movimiento: las marcas crecen desde su base y las partes de la torta, desde el centro.
   Sin JavaScript se animan al cargar; con JavaScript, cuando el gráfico entra en pantalla. */
@keyframes viz-grow-x { from { transform: scaleX(0); } }
@keyframes viz-grow-y { from { transform: scaleY(0); } }
@keyframes viz-pop { from { transform: scale(0); } }
@keyframes viz-fade { from { opacity: 0; transform: translateY(4px); } }
@keyframes viz-appear { from { opacity: 0; } }
@keyframes viz-draw { from { stroke-dasharray: 0 100; } }
.anim-x { transform-origin: left center; }
.anim-y { transform-origin: 50% 100%; transform-box: fill-box; }
.viz-play .anim-x { animation: viz-grow-x .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.viz-play .anim-y { animation: viz-grow-y .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.viz-play .age-step { animation: viz-fade .45s ease-out backwards; animation-delay: calc(var(--i, 0) * 90ms + 480ms); }
.viz-play .ages-hero { animation: viz-appear .4s ease-out .2s backwards; }
.viz-play .pie-slice { animation: viz-pop .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.viz-play .pie-slice text { animation: viz-appear .3s ease-out backwards; animation-delay: calc(var(--i, 0) * 90ms + 620ms); }
.viz-play .callout { animation: viz-appear .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 90ms + 320ms); }
/* El medio anillo se dibuja de arriba hacia abajo, parte por parte; después aparecen letras y filas */
.viz-play .edu-seg { animation-name: viz-draw; animation-timing-function: linear; animation-fill-mode: backwards; }
.viz-play .edu-badge, .viz-play .edu-links g { animation: viz-appear .3s ease-out backwards; animation-delay: calc(var(--i, 0) * 70ms + 700ms); }
.viz-play .edu-row { animation: viz-appear .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 70ms + 760ms); }
.viz-play .edu-center { animation: viz-appear .4s ease-out .4s backwards; }
.viz-wait .anim-x { transform: scaleX(0); }
.viz-wait .anim-y { transform: scaleY(0); }
.viz-wait .pie-slice { transform: scale(0); }
.viz-wait .edu-seg { stroke-dasharray: 0 100; }
.viz-wait .callout, .viz-wait .pie-slice text, .viz-wait .age-step, .viz-wait .ages-hero,
.viz-wait .edu-badge, .viz-wait .edu-links g, .viz-wait .edu-row, .viz-wait .edu-center { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .viz, .viz * { animation: none !important; transition: none !important; }
}

/* Hasta 1100 px, Sexo y Edad van uno debajo del otro para que la escalera tenga todo el ancho */
@media (max-width: 1100px) {
  .insights-row.is-age { grid-template-columns: 1fr; }
  .insights-row.is-age > .insight + .insight { border-left: 0; border-top: 1px solid var(--rule); }
  .insights-row.is-age .sex-figs { max-width: 560px; }
}
@media (max-width: 860px) {
  .insights-row, .insights-row.is-flip { grid-template-columns: 1fr; }
  .insights-row > .insight + .insight { border-left: 0; border-top: 1px solid var(--rule); }
  .sex-figs { max-width: 560px; }
}

.list { list-style: none; margin: 0 -12px; padding: 0; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); transition: background-color .15s ease; }
.list-row > .grow { line-height: 1.35; }
.list-row small.block { margin-top: 3px; font-size: .8438rem; }
.list li + li { border-top: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) { .list-row:hover { background: var(--primary-faint); } }
.chev { color: var(--faint); flex: none; display: grid; }
.empty { color: var(--muted); text-align: center; padding: 28px 16px; margin: 0; }

/* Miniatura de la portada del manual (o su sigla si no hay portada) */
.thumb { flex: none; display: block; width: 30px; height: 42px; border-radius: 3px; border: 1px solid var(--border); background: var(--raised); object-fit: cover; }
.thumb-ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; overflow: hidden; }

.dl { display: grid; grid-template-columns: 128px 1fr; gap: 9px 16px; margin: 0 0 16px; }
.dl dt { color: var(--muted); font-size: .875rem; padding-top: 1px; }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.meta { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.meta li { background: var(--raised); border-radius: 999px; padding: 2px 10px; font-size: .8125rem; color: var(--ink-2); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.2;
  min-height: var(--control-h); padding: 8px 16px; border-radius: var(--radius-control); border: 1px solid transparent;
  cursor: pointer; text-decoration: none !important; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.btn svg { flex: none; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Deshabilitado: legible, en neutro (no un azul desteñido) */
.btn:disabled { cursor: not-allowed; background: var(--raised); color: var(--muted); border-color: var(--border); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:disabled { background: var(--primary-soft); color: #4d6d86; border-color: transparent; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-tint { background: var(--primary-soft); color: var(--primary-ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-whatsapp { background: #17834a; color: #fff; }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: .875rem; gap: 6px; }
.btn-lg { min-height: 52px; padding: 12px 22px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-align: left; font-size: .9375rem; touch-action: manipulation; }
.link-btn.danger { color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: var(--primary-strong); }
  .btn-secondary:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-strong); }
  .btn-tint:hover:not(:disabled) { background: var(--primary-track); }
  .btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
  .btn-whatsapp:hover { background: #126b3c; }
  .link-btn:hover { text-decoration: underline; text-underline-offset: .18em; }
}

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.field > span, .field-label { font-weight: 500; font-size: .875rem; color: var(--ink); }
.field small { font-weight: 400; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  font: inherit; font-size: .9375rem; color: var(--ink); background: #fff;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  padding: 9px 12px; width: 100%; min-height: var(--control-h);
  transition: border-color .15s ease, box-shadow .15s ease;
}
::placeholder { color: var(--faint); opacity: 1; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
/* Flecha propia en las listas desplegables de la aplicación */
:where(.app-body, .public-body) select:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.form-card { max-width: 860px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="search"] {
  flex: 1 1 260px; width: auto; padding-left: 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586675' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.toolbar select { width: auto; flex: 0 1 220px; }

/* Buscador con sugerencias (elegir al evaluado al aplicar un test; app.js [data-combo]) */
.combo { position: relative; min-width: 0; }
.combo input.combo-input[type="text"][role="combobox"] {
  padding-left: 38px; padding-right: 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586675' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.combo-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.combo-clear:hover { background: var(--hover); color: var(--ink); }
.combo-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
/* Al menos tan ancha como el campo y, si el campo es angosto (celular), más ancha para que los nombres no se partan */
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 15; box-sizing: border-box; min-width: 100%; width: max-content; max-width: min(560px, calc(100vw - 48px));
  max-height: min(340px, 50vh); overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.combo-opt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.combo-opt.is-active { background: var(--primary-soft); color: var(--primary-ink); }
.combo-name { min-width: 0; overflow-wrap: break-word; }
.combo-doc { margin-left: auto; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.combo-opt mark { background: none; color: inherit; font-weight: 700; }
.combo-head, .combo-more, .combo-empty { padding: 6px 10px; font-size: .8125rem; color: var(--muted); }
.combo-head { padding-top: 4px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 4px; }
.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; -webkit-user-select: none; user-select: none; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); height: 100%; background: #fff; line-height: 1.35; transition: border-color .15s ease, background-color .15s ease; }
.choice > span.has-thumb { flex-direction: row; align-items: flex-start; gap: 14px; }
.choice .thumb { width: 40px; height: 56px; }
.choice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice small { color: var(--ink-2); font-size: .875rem; }
.choice small.muted { color: var(--muted); }
.choice input:checked + span { border-color: var(--primary); background: var(--primary-faint); box-shadow: inset 0 0 0 1px var(--primary); }
.choice input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; }
.choice input:disabled + span { opacity: .5; background: var(--raised); }
@media (hover: hover) and (pointer: fine) { .choice:hover input:not(:checked):not(:disabled) + span { border-color: #a9b6c3; } }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9063rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table thead th { font-size: .8125rem; font-weight: 500; color: var(--muted); background: transparent; white-space: nowrap; padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--border); }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td strong { font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.right, .table td.right { text-align: right; }
.table td[data-label] { white-space: nowrap; }
.table td.cell-main { min-width: 12rem; }
.table td.right .btn + .btn { margin-left: 6px; }
@media (hover: hover) and (pointer: fine) { .table tbody tr:hover { background: var(--primary-faint); } }

/* ---------- Paginación de listados (pie de la tabla) ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); }
.pager-info { margin: 0; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.pager-info strong { color: var(--ink); font-weight: 600; }
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-2); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.pager-btn svg { flex: none; }
.pager-btn[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.pager-step { border-color: var(--border-strong); background: var(--surface); color: var(--ink); padding: 0 11px 0 8px; }
.pager-step[rel="next"], .pager-step:last-child { padding: 0 8px 0 11px; }
.pager-step[aria-disabled="true"] { border-color: var(--border); color: var(--faint); background: transparent; }
.pager-gap { min-width: 18px; text-align: center; color: var(--muted); }
.pager-now { display: none; color: var(--muted); font-size: .875rem; padding: 0 6px; font-variant-numeric: tabular-nums; }
a.pager-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  a.pager-num:hover { background: var(--hover); color: var(--ink); }
  a.pager-step:hover { border-color: #a9b6c3; background: var(--primary-faint); }
}
@media (max-width: 640px) {
  .pager { padding: 10px 18px 12px; }
  .pager-nav { width: 100%; justify-content: space-between; }
  .pager-num, .pager-gap { display: none; }
  .pager-now { display: inline; }
  .pager-btn { height: 36px; }
}

/* ---------- Insignias y avisos ---------- */
.badge { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; line-height: 1; padding: 4px 8px 5px; border-radius: 999px; background: var(--raised); color: var(--ink-2); vertical-align: middle; white-space: nowrap; flex: none; margin-left: 4px; }
.badge-pending { background: var(--warning-soft); color: var(--warning); }
.badge-progress { background: var(--primary-soft); color: var(--primary-ink); }
.badge-done { background: var(--success-soft); color: var(--success-ink); }
.badge-cancel { background: var(--raised); color: var(--muted); }
/* Enlace o acceso vencido (va después de .badge para que su color no quede tapado) */
.badge-expired { background: var(--danger-soft); color: var(--danger-ink); }
/* Resultado aún no abierto: la única insignia llena, porque pide una acción */
.badge-new { background: var(--brand-red); color: #fff; }   /* rojo del logo: 4,6:1 con el texto blanco */
td > .badge:first-child, p > .badge:first-child { margin-left: 0; }
.as-button { border: 0; cursor: pointer; font-family: inherit; margin-left: 0; touch-action: manipulation; }
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid transparent; font-size: .9375rem; }
.alert-success { background: var(--success-soft); color: var(--success-ink); border-color: #c3e4cf; }
.alert-error { background: var(--danger-soft); color: var(--danger-ink); border-color: #f2c7c3; }
.alert-warning { background: var(--warning-soft); color: #74400b; border-color: #efd8ae; }
.alert-info { background: var(--primary-faint); color: var(--primary-ink); border-color: var(--primary-track); }
.alert summary { cursor: pointer; font-weight: 600; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }
.error-code { font-size: 3rem; font-weight: 700; color: var(--primary-track); margin: 0; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Tarjetas de tests (Biblioteca) ---------- */
.test-card { display: flex; flex-direction: column; }
.test-card h2 { font-size: 1.05rem; }
.test-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.test-code { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--primary-strong); background: var(--primary-soft); padding: 3px 9px; border-radius: 6px; }
.test-card-actions { margin-top: auto; display: flex; gap: 8px; }
.items-preview { font-size: .9rem; padding-left: 26px; max-height: 420px; overflow: auto; }
.items-preview li { margin-bottom: 4px; }

/* ---------- Detalle de aplicación ---------- */
/* Enlace y botón «Copiar» unidos: comparten el borde y cuadran las esquinas interiores */
/* Contraseña con botón para verla (lo agrega app.js a cada campo de contraseña) */
.pw-wrap { position: relative; display: block; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer;
  touch-action: manipulation;
}
.pw-toggle:hover { color: var(--ink); background: var(--raised); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pw-toggle svg { pointer-events: none; }
/* Inicio de sesión: «¿Olvidaste tu contraseña?» */
.login-forgot { margin-top: 14px; }
.login-forgot summary { cursor: pointer; color: var(--primary); font-size: .875rem; font-weight: 500; width: fit-content; }
.login-forgot summary:hover { text-decoration: underline; }
.login-forgot p { margin: 8px 0 0; }
/* Usuarios: enlace recién generado y acciones de cada fila */
.reset-card { margin-bottom: 20px; border-color: var(--primary-track); }
.card.new-user { padding: 0; margin-bottom: 20px; }
.new-user > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; width: fit-content;
  padding: 14px 20px; cursor: pointer; font-weight: 600; color: var(--primary); border-radius: var(--radius);
}
.new-user > summary::-webkit-details-marker { display: none; }
.new-user > summary:hover { text-decoration: underline; }
.new-user > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.new-user[open] > summary { width: auto; border-bottom: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; }
.new-user > form { padding: 20px 24px 24px; }
@media (max-width: 640px) {
  .new-user > form { padding: 16px 18px 18px; }
  .new-user .grid-2 { grid-template-columns: 1fr; }
}
.row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.row-actions form { margin: 0; }
.row-actions .btn { width: 100%; }
.users-table td { vertical-align: middle; }
.users-table .user-sub { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.users-table td.cell-access .user-sub { margin-top: 3px; }
.users-table td.cell-actions, .users-table td:nth-child(3) { white-space: nowrap; }
@media (max-width: 640px) {
  .users-table td.cell-actions { flex: 1 1 100%; white-space: normal; }
  .users-table .row-actions { flex-direction: row; flex-wrap: wrap; }
  .users-table .row-actions .btn { width: auto; }
  .users-table td.cell-access .user-sub { display: inline; margin: 0 0 0 4px; }
}
.link-box { display: flex; }
.link-box input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .875rem; background: var(--bg); border-radius: var(--radius-control) 0 0 var(--radius-control); min-width: 0; }
.link-box .btn { border-radius: 0 var(--radius-control) var(--radius-control) 0; flex: none; }
.progress { height: 8px; background: var(--primary-track); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------- Ingreso manual ---------- */
/* Forma de llenado: marcar opciones o escribir el número de cada ítem */
.fill-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.fill-mode h2 { margin-bottom: 2px; }
.fill-mode p { margin: 0; max-width: 560px; }
/* Control segmentado: pista gris y la opción activa en blanco */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--raised); border-radius: var(--radius); flex: none; }
.seg-btn { border: 0; background: transparent; color: var(--ink-2); min-height: 34px; padding: 6px 14px; border-radius: var(--radius-sm); font: inherit; font-size: .9063rem; font-weight: 500; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color .15s ease, color .15s ease; }
.seg-btn[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px rgba(16, 24, 40, .04); }
.seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .seg-btn[aria-pressed="false"]:hover { color: var(--ink); } }
.answers-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; border-bottom: 1px solid var(--border); color: var(--muted); }
.answers-legend strong { color: var(--ink); }
.answers-table th.num { width: 52px; color: var(--muted); font-weight: 500; text-align: right; }
.answers-table .item-text { font-size: .875rem; color: var(--ink-2); }
.answers-table .opts { white-space: nowrap; text-align: right; }
.opt-pill { display: inline-block; position: relative; margin-left: 4px; }
.opt-pill input { position: absolute; opacity: 0; }
.opt-pill span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; background: #fff; color: var(--ink); transition: background-color .12s ease, border-color .12s ease, color .12s ease; -webkit-user-select: none; user-select: none; }
.opt-pill input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.opt-pill.opt-clear span { color: var(--muted); }
.opt-pill.opt-clear input:checked + span { background: var(--raised); border-color: var(--border-strong); color: var(--muted); }
.opt-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opt-pill:hover input:not(:checked) + span { border-color: var(--primary); } }
/* Casilla pequeña como en la entrada de Q-global (más específica que la regla general de los campos) */
.answers-table input.num-entry { display: none; box-sizing: border-box; width: 56px !important; max-width: 56px !important; min-width: 0 !important; height: 34px !important; min-height: 0 !important; flex: 0 0 56px; padding: 0 !important; text-align: center; font-family: inherit !important; font-size: .95rem !important; font-weight: 400 !important; color: var(--ink); border: 1px solid #d5dbe2 !important; border-radius: 5px !important; background: #fff; box-shadow: none; }
.answers-table input.num-entry:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(17, 69, 140, .18); outline: none; }
/* Como en Q-global: en los tests de dos opciones, 1 en rojo oscuro y 2 en azul oscuro */
.answers-table.two-opts input.num-entry[data-opt="0"] { color: #8B1A1A; }
.answers-table.two-opts input.num-entry[data-opt="1"] { color: #1E2A6E; }
.answers-table input.num-entry.bad { border-color: var(--danger) !important; background: var(--danger-soft); color: var(--danger); }
.answers-typing .answers-table input.num-entry { display: inline-block; }
.answers-typing .pills { display: none; }
.fill-type-only { display: none; }
.answers-typing .fill-type-only { display: block; }
.answers-table tr.is-current { background: var(--primary-soft); }
/* Modo «Escribir números»: lista compacta (número, casilla y, si se pide, las teclas y el texto) */
.answers-settings { border-bottom: 1px solid var(--border); }
.answers-settings h3 { font-size: 1rem; margin: 0 0 10px; }
.switch { display: flex; align-items: center; gap: 10px; margin: 6px 0; cursor: pointer; font-size: .9375rem; -webkit-user-select: none; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #b3bdc7; flex: none; transition: background-color .15s ease; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s var(--ease-out); }
.switch input:checked + .switch-ui { background: var(--primary); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--primary); outline-offset: 2px; }
.entry-hint { display: none; }
.answers-typing .answers-table tr { display: flex; align-items: center; gap: 0 28px; padding: 17px 24px; border-bottom: 1px solid var(--rule); }
.answers-typing .answers-table th, .answers-typing .answers-table td { border: 0; padding: 0; }
.answers-typing .answers-table th.num { order: 0; width: 46px; flex: none; text-align: right; color: var(--ink); font-size: 1rem; font-weight: 400; }
.answers-typing .answers-table th.num::after { content: "."; }
.answers-typing .answers-table .opts { order: 1; display: flex; align-items: center; gap: 14px; text-align: left; flex: none; }
.answers-typing .answers-table .item-text { order: 2; display: none; flex: 1; }
.answers-typing.show-text .answers-table .item-text { display: block; }
.answers-typing.show-keys .entry-hint { display: inline; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.answers-typing .answers-legend { display: none; }
/* Barra fija de guardar: flota sobre la lista, por eso lleva sombra (opaca, sin desenfoque) */
.sticky-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 10px 12px 10px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.sticky-actions .small { margin-right: auto; font-variant-numeric: tabular-nums; }

/* ---------- Páginas públicas (evaluado) ---------- */
.public-body { background: var(--bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.public-header { padding: calc(20px + env(safe-area-inset-top)) 20px 18px; display: flex; justify-content: center; }
.public-main { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px 32px; flex: 1; }
.public-footer { text-align: center; font-size: .8125rem; color: var(--muted); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
/* Inicio de sesión (opción A elegida por el usuario): a un lado, sobre fondo claro, la firma en el azul
   del logo; al otro, el logo «PSY» arriba de las credenciales. En celular, la firma arriba. */
.login-page .public-header, .login-page .public-footer { display: none; }
.login-page .public-main { max-width: none; padding: 0; display: flex; }
.login { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-brand { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: #f3f4f2; }
.login-script { display: block; width: min(360px, 66%); height: auto; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--surface); }
.login-box { width: 100%; max-width: 380px; }
.login-psy { display: block; width: 150px; height: auto; margin: 0 auto 32px; }
.login-box h1 { margin-bottom: 6px; }
.login-box > .muted { margin-bottom: 22px; }
.login-box .alert { margin-bottom: 16px; }
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand { padding: calc(26px + env(safe-area-inset-top)) 24px 24px; }
  .login-script { width: 190px; }
  .login-panel { align-items: flex-start; padding: 26px 20px calc(32px + env(safe-area-inset-bottom)); }
  .login-psy { width: 110px; margin-bottom: 22px; }
}
.auth-card { max-width: 440px; margin: 24px auto; padding: 32px; }
.auth-card h1 { margin-bottom: 6px; }
.auth-card > .muted { margin-bottom: 22px; }
.take-card { padding: 32px; }
.eyebrow { font-size: .9063rem; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.take-card h1 { margin-bottom: 14px; }
.take-test { display: flex; flex-direction: column; gap: 3px; background: var(--primary-soft); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0 20px; }
.take-test strong { font-size: 1.125rem; color: var(--primary-ink); letter-spacing: -.01em; line-height: 1.3; }
.take-test span { color: var(--ink-2); font-size: .9375rem; }
.tips { padding-left: 20px; margin: 0 0 22px; color: var(--ink-2); }
.tips li { margin-bottom: 8px; padding-left: 2px; }
.tips li::marker { color: var(--primary); }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: .9375rem; cursor: pointer; background: #fff; color: var(--ink-2); transition: border-color .15s ease, background-color .15s ease; }
.consent:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); }
.consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--primary); }
.msg-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 6px auto 18px; }
.msg-icon-check { background: var(--success-soft); color: var(--success); }
.msg-icon-alert { background: var(--warning-soft); color: var(--warning); }

.take-form { display: flex; flex-direction: column; gap: 14px; }
.take-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 2px; background: var(--bg); }
.take-progress-bar { flex: 1; height: 6px; background: var(--primary-track); border-radius: 999px; overflow: hidden; }
.take-progress-bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s var(--ease-out); }
.take-progress-text { font-size: .8438rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.instructions summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; -webkit-user-select: none; user-select: none; }
.instructions summary::-webkit-details-marker { display: none; }
.instructions summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease-out); }
.instructions[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.instructions-body { margin-top: 12px; color: var(--ink-2); }
.instructions-body p { margin: 0 0 10px; }
.instructions-body > :last-child { margin-bottom: 0; }
.instr-options { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; }
.instr-options li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; font-weight: 600; color: var(--ink); }
.instr-options kbd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--raised); font: 600 .8rem var(--font); color: var(--ink-2); }
.context-ask { border: 0; padding: 16px 18px; margin: 0; border-radius: var(--radius); background: var(--primary-soft); }
.context-ask legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-weight: 700; color: var(--primary-ink); }
.context-ask p { clear: both; margin: 0 0 6px; font-size: .9375rem; color: var(--ink-2); }
.context-ask .field > span { display: flex; gap: 8px; align-items: baseline; }
.context-fields .field-wide { grid-column: 1 / -1; }
.field-checks legend { padding: 0; margin-bottom: 2px; font-weight: 500; font-size: .875rem; color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; font-size: .9375rem; cursor: pointer; }
.check:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); }
.check input { width: 18px; height: 18px; margin: 0; }
.context-ask .field-checks legend { float: none; width: auto; margin-bottom: 6px; font-weight: 500; color: var(--ink); }
.context-ask .field + .field, .context-ask .field + .field-checks, .context-ask .field-checks + .field { margin-top: 4px; }
.context-end { margin-bottom: 16px; }
.context-ask .rank { font-style: normal; flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-size: .78rem; font-weight: 700; }
.q-card { margin: 0; min-width: 0; padding: 26px 24px; }
.q-num { font-size: .875rem; font-weight: 500; color: var(--muted); padding: 0; float: left; width: 100%; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.q-text { clear: both; font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 20px; outline: none; }
.q-options { clear: both; display: flex; flex-direction: column; gap: 9px; }
.q-option { position: relative; display: block; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.q-option input { position: absolute; opacity: 0; pointer-events: none; }
.q-option span {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 12px 14px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: #fff;
  font-size: 1.02rem; font-weight: 500;
  transition: border-color .12s ease, background-color .12s ease, transform .12s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.q-option kbd { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--raised); font: 600 .85rem var(--font); color: var(--ink-2); transition: background-color .12s ease, color .12s ease; }
@media (hover: hover) and (pointer: fine) { .q-option span:hover { border-color: var(--primary); background: var(--primary-faint); } }
.q-option span:active { transform: scale(.985); }
.q-option input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.q-option input:checked + span kbd { background: var(--primary); color: #fff; }
.q-option input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.q-option b { font-weight: inherit; }
/* Opciones cortas en columnas, una al lado de otra como en la hoja de respuestas (número arriba) */
.q-options.q-cols { flex-direction: row; gap: 8px; }
/* Columnas iguales; si una palabra no cabe entera («Moderadamente»), esa columna se ensancha lo justo (min-width: auto) en vez de partirla */
.q-cols .q-option { flex: 1 1 0; }
.q-cols .q-option span { flex-direction: column; justify-content: flex-start; gap: 10px; height: 100%; min-height: 96px; padding: 14px 2px 12px; text-align: center; }
.q-cols .q-option b { line-height: 1.25; hyphens: none; overflow-wrap: normal; }
/* Cuatro o más opciones (Nada…Mucho): letra que deja «Moderadamente» entera en cinco columnas iguales */
.q-cols.q-many .q-option span { font-size: .85rem; }
/* Resumen final para revisar las respuestas antes de enviarlas */
.take-review h2 { font-size: 1.25rem; margin: 0 0 6px; outline: none; }
.review-summary { margin: 0 0 16px; color: var(--ink-2); font-size: .9688rem; }
.review-summary.warn { color: var(--danger); font-weight: 600; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review-item {
  width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 48px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .review-item:hover { border-color: var(--primary); background: var(--primary-faint); } }
.review-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ri-num { font-weight: 600; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ri-text { font-size: .9375rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ri-ans { font-weight: 600; font-size: .875rem; color: var(--primary-ink); background: var(--primary-soft); border-radius: var(--radius-sm); padding: 4px 9px; white-space: nowrap; }
.review-item.missing { border-color: #e7b1ab; background: var(--danger-soft); }
.review-item.missing .ri-ans { color: var(--danger); background: #fff; box-shadow: inset 0 0 0 1px #e7b1ab; }
/* Ítems sin enunciado (CDI): la frase elegida es el contenido de la fila */
.review-item.no-text { grid-template-columns: 30px minmax(0, 1fr); }
.review-item.no-text .ri-ans { white-space: normal; background: none; padding: 0; font-weight: 500; font-size: .9375rem; color: var(--ink); }
.review-item.no-text.missing .ri-ans { color: var(--danger); font-weight: 600; box-shadow: none; background: none; }
.review-item.flash { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.take-nav { display: flex; gap: 10px; justify-content: space-between; }
.take-nav .btn { flex: 1; min-height: 52px; padding: 12px 16px; font-size: 1rem; }
.take-form:not(.stepper) [data-prev], .take-form:not(.stepper) [data-next] { display: none; }
.save-status { text-align: center; min-height: 1.4em; margin: 0; }

/* ---------- Informe ---------- */
.report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; max-width: 920px; margin-inline: auto; }
.report-toolbar select { width: auto; }
.report { background: #fff; max-width: 920px; margin: 0 auto; padding: 40px 48px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.report-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--primary); padding-bottom: 12px; margin-bottom: 22px; }
.report-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.report-kind { font-weight: 700; color: var(--primary-strong); font-size: .95rem; }
.report-conf { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--danger); font-weight: 700; }
.report-title { font-size: 1.55rem; margin-bottom: 2px; }
.report-sub { color: var(--muted); font-size: .9rem; }
.report-section { margin-top: 26px; }
.report-section h2 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-strong); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 12px; }
.data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.data-grid > div { background: #fff; padding: 9px 12px; display: flex; flex-direction: column; min-width: 0; }
.data-grid span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.data-grid strong { font-size: .93rem; font-weight: 600; overflow-wrap: anywhere; }
.data-grid .span-2 { grid-column: span 2; }
.report-table th, .report-table td { padding: 8px 10px; }
.scores-table td.num { font-weight: 600; }
.group-row td { background: #eef3f8; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-strong); }
.level-chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; color: var(--lv); background: color-mix(in srgb, var(--lv) 13%, white); border: 1px solid color-mix(in srgb, var(--lv) 35%, white); white-space: nowrap; vertical-align: middle; }
.vstatus { font-weight: 700; font-size: .82rem; }
.vstatus-ok { color: var(--success); }
.vstatus-warning { color: var(--warning); }
.vstatus-invalid { color: var(--danger); }
.chart-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.chart-wrap svg { display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--muted); }
.chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-legend i.band { background: #dfe9f3; border: 1px solid #b9cde0; }
.interp { padding: 12px 0; border-bottom: 1px dashed var(--border); }
.interp:last-child { border-bottom: 0; }
.interp h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.interp p { text-align: justify; hyphens: auto; }
.answers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.answers-grid span { border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; display: flex; justify-content: space-between; gap: 4px; }
.answers-grid b { color: var(--muted); font-weight: 600; }
.answers-grid .omit { background: var(--danger-soft); }
.report-foot { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.print-only { display: none; }

/* ---------- Biblioteca ---------- */
.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; }
/* Colores del logo: la barra de pestañas en el azul de la interfaz y la pestaña activa con la línea turquesa */
:root { --lib-blue: var(--primary); --lib-shelf: #e4e7eb; }

/* Estantería (como la biblioteca de TEA Corrige): pestañas por letra y tarjetas con la portada */
.lib-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--lib-blue); border-radius: 6px 6px 0 0; overflow: hidden; vertical-align: bottom; }
.lib-tab { padding: 9px 22px; color: #fff; font-weight: 600; letter-spacing: .06em; white-space: nowrap; word-spacing: .1em; }
a.lib-tab:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
a.lib-tab:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.lib-tab.is-active { background: var(--lib-shelf); color: var(--ink); box-shadow: inset 0 3px 0 var(--brand-teal); }
.lib-tab.is-empty { color: rgba(255, 255, 255, .45); cursor: default; }
.lib-shelf { background: var(--lib-shelf); padding: 18px; border-radius: 0 var(--radius) var(--radius) var(--radius); }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; padding: 6px 6px 12px; border-radius: 3px; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); text-align: center; font-size: .84rem; }
.lib-card-cover { display: block; width: 100%; aspect-ratio: 5 / 7; background: #fff; overflow: hidden; }
.lib-card-cover img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .15s ease; }
@media (hover: hover) { .lib-card-cover:hover img { transform: scale(1.03); } }
.lib-card-cover:focus-visible { outline: 3px solid rgba(17, 69, 140, .45); outline-offset: 2px; }
.lib-cover-ph { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; font-size: .95rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.lib-card-more { color: var(--lib-blue); margin-top: 4px; }
.lib-card-use { color: var(--ink); }
.lib-card-use.is-unused { color: var(--muted); }

/* Página del test (+Información) */
/* Ficha al estilo de la página de un test de TEA: datos arriba y pestañas en píldora («Descripción»,
   «Corrección e informes»); la portada va dentro de la descripción, junto al texto */
.lib-head { display: flex; gap: 16px 28px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 22px; }
.lib-head-main { min-width: 0; flex: 1 1 520px; }
.lib-head h1 { font-size: 1.5rem; margin: 8px 0 14px; }
.lib-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.lib-facts div { min-width: 0; }
.lib-facts dt { font-size: .78rem; color: var(--muted); margin: 0 0 1px; }
.lib-facts dd { margin: 0; font-weight: 500; color: var(--ink); }
.lib-head-apply { flex: none; }
.lib-pills { display: none; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lib-info.is-ready .lib-pills { display: flex; }
.lib-info:not(.is-ready) .lib-panel + .lib-panel { margin-top: 16px; }
.lib-pill { appearance: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem; padding: 11px 26px; border-radius: 999px; background: #eceff2; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.lib-pill:hover { background: #e2e6ea; color: var(--ink); }
.lib-pill.is-active, .lib-pill.is-active:hover { background: var(--teal-strong); color: #fff; }
.lib-pill:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.lib-panel { margin-bottom: 22px; scroll-margin-top: 128px; }   /* al abrir con #correccion se ven las pestañas (y la barra de arriba en móvil) */
.lib-panel[hidden] { display: none; }
.lib-desc { display: flex; gap: 32px; align-items: flex-start; }
.lib-desc-cover { flex: none; width: 170px; aspect-ratio: 5 / 7; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(16, 24, 40, .14); overflow: hidden; }
.lib-desc-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lib-prose { min-width: 0; max-width: 80ch; }
.lib-prose p { margin: 0 0 14px; line-height: 1.7; }
.lib-prose strong { font-weight: 700; color: var(--ink); }
.lib-prose h3 { font-size: 1rem; margin: 0 0 8px; }
.lib-prose h3:not(:first-child) { margin-top: 20px; }
/* Documentos del test (pedido 2026-11-08): un botón por material como el del manual de TEA, círculo oscuro con
   su ícono y dos líneas de texto. Para subir (administrador), el texto en gris; sin documento (resto), el círculo
   también en gris y sin enlace. Debajo, solo para el administrador, «Reemplazar · Quitar» */
.lib-tiles { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 12px 0 4px; }
.lib-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lib-tile form { margin: 0; }
.lib-tile-main { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); line-height: 1.25; font-weight: 500; cursor: pointer; }
.lib-tile-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; flex: none; transition: background-color .15s; }
a.lib-tile-main:hover, label.lib-tile-main:hover { text-decoration: none; color: var(--ink); }
.lib-tile-main:hover .lib-tile-icon { background: var(--primary); }
a.lib-tile-main:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: 999px; }
.lib-tile.is-upload .lib-tile-text { color: var(--muted); }
.lib-tile.is-missing .lib-tile-main { color: var(--muted); cursor: default; }
.lib-tile.is-missing .lib-tile-icon, .lib-tile.is-missing .lib-tile-main:hover .lib-tile-icon { background: var(--raised); color: var(--faint); }
.lib-tile-admin { display: flex; gap: 4px; margin-left: 58px; }
.lib-tile-link { display: inline-flex; align-items: center; padding: 2px 6px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: .8125rem; font-weight: 500; color: var(--primary); cursor: pointer; }
.lib-tile-link:hover { background: var(--primary-soft); }
.lib-tile-link.lib-del { color: var(--danger); }
.lib-tile-link.lib-del:hover { background: var(--danger-soft); }
/* «Ejemplo de informe» (como «Ejemplo de perfil de resultados» de TEA): desplegable con una vista
   previa del informe de una persona ficticia y un botón por formato */
.lib-sample { margin: -6px -8px; }   /* único contenido del panel: sin recuadro propio, como en TEA */
.lib-sample > summary { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.lib-sample > summary::-webkit-details-marker { display: none; }
.lib-sample > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.lib-sample[open] > summary::before { transform: rotate(45deg); }
.lib-sample > summary:hover { background: var(--hover); }
.lib-sample > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: var(--radius-sm); }
.lib-sample-body { padding: 6px 8px 8px; }
.lib-sample-body > p { margin: 0 0 12px; }
.lib-sample-formats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lib-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: #eceff2; color: var(--ink-2); font-size: .88rem; font-weight: 600; }
a.lib-chip:hover { background: #e2e6ea; color: var(--ink); text-decoration: none; }
.lib-chip.is-active, a.lib-chip.is-active:hover { background: var(--teal-strong); color: #fff; }
.lib-chip:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.lib-sample-frame { display: block; width: 100%; height: min(78vh, 820px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #e6e9ed; }
.lib-sample-full { display: inline-block; margin-top: 10px; font-size: .9rem; font-weight: 500; }
.lib-notice { margin: 18px 0 0 !important; font-size: .84rem; line-height: 1.5 !important; color: var(--muted); }
.lib-perm { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: .76rem; font-weight: 650; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.lib-perm-read { color: var(--warning); background: var(--warning-soft); }
.lib-file-btn { position: relative; overflow: hidden; }
.lib-file-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.lib-file-btn:focus-within { outline: 3px solid rgba(17, 69, 140, .35); outline-offset: 2px; border-radius: var(--radius-sm); }
.lib-file-btn.is-busy { opacity: .7; pointer-events: none; }

/* Visor */
.lib-view .content { max-width: none; padding-bottom: 16px; }
.lib-viewer { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lib-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.lib-back { margin-left: -10px; }
.lib-bar-title { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.lib-bar-title h1 { font-size: 1.2rem; margin: 0; }
.lib-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-pages { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 104px; text-align: right; }
.lib-zoom { display: inline-flex; gap: 4px; }
.lib-zoom .btn { min-width: 36px; justify-content: center; }
.lib-note { font-size: .86rem; color: var(--muted); margin: 0 0 10px; }
.lib-stage { position: relative; overflow: auto; scrollbar-gutter: stable; height: 70vh; min-height: 320px; background: #d9dfe6; border: 1px solid var(--border-strong); border-radius: var(--radius); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lib-stage:focus-visible { outline: 3px solid rgba(17, 69, 140, .35); outline-offset: 2px; }
.lib-pages-inner { width: max-content; min-width: 100%; padding: 16px; }
.lib-page { margin: 0 auto 16px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .18), 0 6px 18px rgba(16, 24, 40, .10); }
.lib-page:last-child { margin-bottom: 0; }
.lib-page canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.lib-page:not(.is-ready) { background: #fff linear-gradient(90deg, #fff 0, #f1f4f7 50%, #fff 100%) no-repeat; }
.lib-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-weight: 600; }
.lib-status.is-error { color: var(--danger); }
.lib-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 9px; background: #172b3a; color: #fff; font-size: .92rem; box-shadow: var(--shadow-lg); }
.lib-print { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-main { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  /* Menú como hoja lateral: entra y sale por la izquierda con la curva de cajón de iOS */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%; z-index: 40;
    background: var(--surface);
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s var(--ease-drawer), visibility 0s linear .3s;
  }
  .nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-float); transition: transform .3s var(--ease-drawer); }
  .nav a { min-height: 44px; }
  .backdrop { display: block; position: fixed; inset: 0; background: rgba(12, 22, 32, .36); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .nav-open .backdrop { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: env(safe-area-inset-top, 0px) 12px 0 6px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--ink); position: sticky; top: 0; z-index: 20; }
  .menu-toggle { background: none; border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; transition: background-color .15s ease; }
  .menu-toggle:active { background: var(--raised); }
  .topbar-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; }
  .content { padding: 24px 20px 48px; }
  .grid-side, .grid-main { grid-template-columns: 1fr; }
  .report { padding: 24px 18px; }
  .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .choice-grid.two { grid-template-columns: 1fr; }
  :where(.app-body, .public-body) h1 { font-size: 1.5rem; }
  .content { padding: 20px 16px 40px; }
  .page-header { align-items: flex-start; margin-bottom: 20px; }
  .page-header .actions { width: 100%; }
  .page-header .actions .btn { flex: 1; }
  .card { padding: 20px 18px; }
  .card.flush > h2.pad:first-child { padding: 18px 18px 12px; }
  .pad { padding: 16px 18px; }
  .list { margin: 0 -10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 14px 16px 16px; }
  .stat-icon { top: 15px; right: 12px; }
  .panel-head { padding: 18px 18px 8px; }
  .panel-body { padding: 0 18px 6px; }
  .panel-actions { width: 100%; }
  .panel-actions .btn { flex: 1 1 auto; white-space: nowrap; }
  .row-progress { width: 76px; }
  .panel .list-row .thumb { display: none; }
  .insights-head { padding: 18px 18px 14px; }
  .insight { padding: 16px 18px 22px; }
  .cols { gap: 4px; }
  .col-label { font-size: .6875rem; }
  .link-box { flex-direction: column; gap: 8px; }
  .link-box input, .link-box .btn { border-radius: var(--radius-control); }
  /* Filtros en dos filas como máximo: la búsqueda arriba; las listas y el botón, juntos debajo */
  .toolbar input[type="search"] { flex: 1 1 160px; }
  .toolbar:has(select) input[type="search"] { flex-basis: 100%; }
  .toolbar select { flex: 1 1 0; min-width: 0; }
  .toolbar .btn { flex: none; }
  .auth-card { padding: 24px 20px; }
  .take-card { padding: 24px 20px; }
  .q-card { padding: 20px 16px; }
  .q-text { font-size: 1.125rem; }
  .q-option kbd { display: none; }
  .q-options.q-cols { gap: 5px; }
  .q-cols .q-option kbd { display: inline-grid; width: 26px; height: 26px; }
  .q-cols .q-option span { min-height: 80px; padding: 12px 2px 10px; gap: 8px; }
  .q-cols.q-many .q-option span { min-height: 88px; font-size: .84rem; }
  .answers-table .item-text { display: none; }
  .data-grid .span-2 { grid-column: span 2; }
  .sticky-actions { flex-wrap: wrap; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .lib-tabs { display: flex; border-radius: 6px 6px 0 0; }
  .lib-tab { flex: 1 1 auto; text-align: center; padding: 9px 10px; letter-spacing: .02em; }
  .lib-shelf { padding: 12px; border-radius: 0 0 var(--radius) var(--radius); }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .lib-head { margin-bottom: 16px; }
  .lib-head h1 { font-size: 1.2rem; }
  .lib-facts { gap: 8px 20px; }
  .lib-head-apply { width: 100%; justify-content: center; }
  .lib-pills { gap: 8px; }
  .lib-pill { flex: 1 1 auto; padding: 10px 14px; font-size: .9rem; }
  .lib-desc { flex-direction: column; gap: 18px; }
  .lib-desc-cover { width: 120px; }
  .lib-view .content { padding: 12px 10px 10px; }
  .lib-tools { width: 100%; justify-content: space-between; }
  .lib-pages { min-width: 0; text-align: left; }
  .lib-pages-inner { padding: 10px; }
  .lib-page { margin-bottom: 10px; }

  /* Tablas como listas de dos líneas: la persona (o el test) arriba; los demás datos debajo, en
     gris, y la acción al final de la fila. Ningún dato se quita; la página no se desplaza de lado */
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody { display: block; }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { display: block; padding: 0; border: 0; font-size: .8438rem; color: var(--muted); }
  .table-stack td.cell-main { flex: 1 1 100%; min-width: 0; font-size: .9688rem; color: var(--ink); }
  .table-stack td[data-label]::before { content: attr(data-label) " "; }
  .table-stack td.cell-act { margin-left: auto; padding-left: 4px; }
  .table-stack td.cell-act form { margin: 0; }
  .table-stack td:empty { display: none; }
}
@media (max-width: 420px) {
  /* Cinco columnas en un celular: más ancho útil y letra algo menor para que ninguna palabra se parta */
  .q-card:has(.q-many) { padding-inline: 12px; }
  .q-options.q-many { gap: 4px; }
  .q-cols.q-many .q-option span { padding-inline: 3px; font-size: .76rem; }
}
@media (max-width: 350px) {
  .public-main:has(.q-many) { padding-inline: 10px; }
  .q-card:has(.q-many) { padding-inline: 8px; }
  .q-cols.q-many .q-option span { font-size: .7rem; }
}
@media (max-width: 640px) {
  /* Opciones con palabras largas que no caben lado a lado en un celular (SCL-90-R: «Moderadamente»,
     «Mucho o extremadamente»): una debajo de otra, como las frases del CDI; en computadora, en columnas */
  .q-card:has(.q-wide) { padding-inline: 16px; }
  .q-options.q-cols.q-wide { flex-direction: column; gap: 9px; }
  .q-cols.q-wide .q-option { flex: none; }
  .q-cols.q-wide .q-option span { flex-direction: row; justify-content: flex-start; height: auto; min-height: 54px; padding: 12px 14px; gap: 12px; text-align: left; font-size: 1.02rem; }
  .q-cols.q-wide .q-option kbd { display: none; }
}
/* En pantallas táctiles los campos van a 16 px: así el celular no acerca la página al escribir */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; }
}
/* Reducir movimiento: sin desplazamientos ni escalas; solo los cambios de color y opacidad */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .q-option span:active { transform: none; }
  .sidebar, .nav-open .sidebar { transition: none; }
  .backdrop { transition-duration: .15s; }
  .take-progress-bar span, .switch-ui::after, .instructions summary::after { transition: none; }
}

/* ---------- Informes: conservan el aspecto aprobado ----------
   layouts/report.php también carga esta hoja. Los documentos fijan su propia tipografía, pero el
   informe web básico, la barra de herramientas y la ventana «Descargar PDF» toman de aquí los
   tokens, los botones, los avisos, los campos y el interruptor: se fijan los valores anteriores
   al rediseño (nov. 2026) para que los informes se vean e impriman exactamente igual. */
.report-body {
  --ink: #172b3a; --muted: #5f6f80; --bg: #f3f5f8; --surface: #ffffff;
  --border: #e2e7ee; --border-strong: #c9d3de;
  --primary: #1d5b85; --primary-strong: #164a6d; --primary-soft: #e7f0f7;
  --accent: #2f9e8f;
  --danger: #b83a2e; --danger-soft: #fbeceb; --warning: #9a6211; --warning-soft: #fdf3e1;
  --success: #2e7d4f; --success-soft: #e6f4ec; --info: #2b6cb0; --info-soft: #e8f1fb;
  --sidebar: #12324a;
  --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:where(.report-body) .btn {
  gap: 6px; font-size: .93rem; min-height: 0; padding: 9px 16px; border-radius: 8px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
  -webkit-user-select: auto; user-select: auto;
}
:where(.report-body) .btn:focus-visible { outline: 3px solid rgba(29, 91, 133, .35); outline-offset: 2px; }
:where(.report-body) .btn:disabled { opacity: .5; }
:where(.report-body) .btn-primary:disabled { background: var(--primary); color: #fff; border-color: transparent; }
:where(.report-body) .btn-secondary:disabled { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
:where(.report-body) .btn-ghost, :where(.report-body) .btn-ghost:disabled { background: transparent; color: var(--muted); border-color: transparent; }
:where(.report-body) .btn-sm { min-height: 0; padding: 6px 11px; font-size: .84rem; }
:where(.report-body) .btn-lg { min-height: 0; padding: 13px 20px; font-size: 1.02rem; }
:where(.report-body) .link-btn { font-size: .9rem; }
:where(.report-body) .field { gap: 6px; }
:where(.report-body) .field > span, :where(.report-body) .field-label { font-weight: 600; font-size: .9rem; }
:where(.report-body) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:where(.report-body) select, :where(.report-body) textarea { font-size: inherit; border-radius: 8px; padding: 9px 11px; min-height: 40px; transition: none; }
:where(.report-body) input:focus, :where(.report-body) select:focus, :where(.report-body) textarea:focus { box-shadow: 0 0 0 3px rgba(29, 91, 133, .15); }
:where(.report-body) ::placeholder { color: revert; opacity: revert; }
:where(.report-body) input[type="checkbox"], :where(.report-body) input[type="radio"] { accent-color: auto; }
:where(.report-body) .alert { padding: 12px 15px; border-radius: 9px; margin-bottom: 14px; font-size: .93rem; }
:where(.report-body) .alert-success { color: #20583a; border-color: #c4e5d1; }
:where(.report-body) .alert-error { color: #8c2b22; border-color: #f2c9c4; }
:where(.report-body) .alert-warning { color: #7a4d0b; border-color: #f2dcb2; }
:where(.report-body) .alert-info { background: var(--info-soft); color: #22558c; border-color: #c9ddf4; }
:where(.report-body) .switch { font-size: .95rem; -webkit-user-select: auto; user-select: auto; }
:where(.report-body) .switch-ui { width: 44px; height: 24px; border-radius: 12px; background: #b8c1cb; transition: background .15s; }
:where(.report-body) .switch-ui::after { width: 18px; height: 18px; transition: transform .15s; }
:where(.report-body) .switch input:checked + .switch-ui::after { transform: translateX(20px); }
:where(.report-body) .switch input:focus-visible + .switch-ui { outline: 3px solid rgba(29, 91, 133, .3); outline-offset: 0; }
:where(.report-body) :focus-visible { outline: revert; }

/* ---------- Impresión (informe a PDF) ---------- */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  body { background: #fff; font-size: 11pt; }
  .app { display: block; }
  .sidebar, .topbar, .no-print, .alert-success, .backdrop { display: none !important; }
  .content { padding: 0; max-width: none; }
  .report { border: 0; box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
  .print-only { display: block; }
  .avoid-break, .interp, tr { break-inside: avoid; }
  .page-break-before { break-before: page; }
  .report-section h2 { break-after: avoid; }
  a { color: inherit; }
  .table-wrap { overflow: visible; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Biblioteca: nunca se imprime la pantalla del visor */
  body.lib-view .app, body.lib-view .backdrop, body.lib-view .lib-toast { display: none !important; }
  /* Manual (o impresión desde el menú del navegador sin pasar por «Imprimir»): solo un aviso */
  body.lib-noprint::before,
  body.lib-print-ok:not(.lib-print-ready)::before {
    display: block; margin: 60mm 20mm 0; padding: 10mm; border: 1px solid #999; text-align: center;
    font: 600 13pt/1.5 system-ui, sans-serif; color: #333;
  }
  body.lib-noprint::before { content: "Este manual es solo de lectura en pantalla: la impresión no está permitida."; }
  body.lib-print-ok:not(.lib-print-ready)::before { content: "Para imprimir este documento usa el botón «Imprimir» del visor de Psymetria."; }
  /* Hoja de respuestas y cuadernillo: una imagen por hoja, ajustada al área imprimible */
  body.lib-print-ok.lib-print-ready .lib-print { display: block !important; }
  .lib-print-page { page: libportrait; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; break-after: page; break-inside: avoid; }
  .lib-print-page.is-landscape { page: liblandscape; }
  .lib-print-page:last-child { break-after: auto; }
  .lib-print-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
}
@page libportrait { size: portrait; margin: 6mm; }
@page liblandscape { size: landscape; margin: 6mm; }