/* Diagnóstico DS 44 de Gestión SST · tudela.io/diagnostico
   ---------------------------------------------------------------------------
   E2 · fiel al original. Este archivo es la transcripción del legacy
   `tgestion/public_html/diagnostico`: los tokens y el reset salen de
   `assets/css/gestion.css`, y las reglas, de los `<style>` inline de
   `inicio.php`, `responder.php`, `seccion-completa.php` y `resultado.php`,
   verbatim. Es la misma regla de E1b y por la misma razón: las pantallas ya
   estaban diseñadas y validadas; en Tudela cambia el dónde, no el diseño.

   Las adaptaciones, y sus razones:

     1. Los íconos son SVG inline de Tabler 3.46, no la webfont: donde el
        legacy dice `i`, aquí dice `.ti`, con el mismo `font-size` (el svg mide
        1em, así el valor del original sigue siendo el tamaño del ícono). Son
        18 selectores, uno por uno los mismos glifos.

     2. **Cada bloque va prefijado con la clase de su pantalla**
        (`body.diag--inicio`, `diag--responder`, `diag--seccion`,
        `diag--resultado`). En el legacy cada archivo traía su `<style>` y las
        cuatro pantallas eran cuatro documentos: `.q-card`, `.diag-body`,
        `.diag-top__logo img` y `.q-label` están definidos en más de uno **con
        valores distintos** (la tarjeta de inicio tiene 46px de padding y la de
        responder 44px; el logo mide 65px arriba y 48px después). En una sola
        hoja, el último bloque le ganaría a los anteriores en las cuatro
        páginas. El prefijo es uniforme dentro de cada bloque —se le antepone a
        todos los selectores por igual—, así que la cascada interna de cada
        pantalla es exactamente la del original, y ninguna página lleva más de
        una de esas clases.

     3. El logo baja a 30px bajo 440px. El de Tudela es 658×106 y el del legacy
        695×151: a la misma altura el nuestro es mucho más ancho, y a 390px los
        65px del encabezado de inicio se salían de la pantalla. Es el mismo y
        único ajuste propio que quedó en `landing.css`.

   Lo que NO se corrige, a propósito: `--sa-text-2` (en `.q-legal` y en
   `.na-btn:hover`) no existe en `gestion.css` y en el legacy se resolvía al
   valor heredado. Definirlo aquí cambiaría el color de dos textos respecto del
   original. Queda como está. Los comentarios de `seccion-completa.php` y
   `resultado.php` ya dejan constancia de las otras cuatro variables
   inexistentes que sí se corrigieron en el legacy en julio de 2026.

   El bloque `.diag-aviso` de `inicio.php` se transcribe aunque E2 no lo use:
   es el aviso de la cuenta derivada al diagnóstico, y si E3 decide que existe
   un equivalente con `ModuleActivator`, el estilo ya está donde estaba. */
/* ── Tokens · verbatim de assets/css/gestion.css, líneas 11-53 ── */
:root {
    /* ── Tokens matriz (verbatim) ── */
    --td-black: #050505;
    --td-text: #111111;
    --td-muted: #6f6f6f;
    --td-line: #e9e9e9;
    --td-soft: #f7f8fa;
    --td-white: #ffffff;
    --td-ease: cubic-bezier(.22, 1, .36, 1);

    --sa-bg: #f6f7f9;
    --sa-surface: #ffffff;
    --sa-line: #e7e8eb;
    --sa-line-2: #dcdee2;
    --sa-text-3: #9aa0a6;
    --sa-radius: 18px;
    --sa-radius-sm: 12px;
    --sa-maxw: 1120px;

    /* ── Extensiones Gestión ── */
    --g-accent: #73C15D;
    --g-accent-ink: #2f6b22;          /* texto sobre superficies verdes claras */
    --g-accent-soft: rgba(115, 193, 93, .14);
    --g-accent-ring: rgba(115, 193, 93, .30);

    --g-ink-2: #374151;               /* texto secundario más fuerte que muted */
    --g-mute-bg: #f1f5f9;

    --ok: #16a34a;      --ok-bg: #f0fdf4;   --ok-line: #bbf7d0;
    --danger: #dc2626;  --danger-bg: #fef2f2; --danger-line: #fecaca;
    --warn: #d97706;    --warn-bg: #fffbeb; --warn-line: #fde68a;
    --info: #2563eb;    --info-bg: #eff6ff; --info-line: #bfdbfe;

    --radius-lg: 18px;
    --radius: 12px;
    --radius-sm: 9px;
    --radius-pill: 100px;

    --shadow-card: 0 1px 2px rgba(17, 17, 17, .04);
    --shadow-soft: 0 8px 22px rgba(17, 17, 17, .06);
    --shadow-pop: 0 18px 46px rgba(17, 17, 17, .10);
    --nav-h: 64px;
}

/* ── Reset / base · verbatim de assets/css/gestion.css ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    color: var(--td-text);
    background: var(--sa-bg);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; color: var(--td-black); }

/* ── Botones · verbatim de assets/css/gestion.css, líneas 142-169 ── */
.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
    padding: 11px 16px; border-radius: var(--radius);
    background: var(--td-white); color: var(--td-text);
    border: 1px solid var(--sa-line-2); cursor: pointer;
    transition: background .15s var(--td-ease), border-color .15s var(--td-ease), opacity .15s var(--td-ease), transform .15s var(--td-ease);
    text-decoration: none;
}
.g-btn:hover { background: var(--td-soft); }
.g-btn:active { transform: scale(.98); }
.g-btn svg, .g-btn .ti { font-size: 17px; }

.g-btn--primary { background: var(--td-black); color: #fff; border-color: var(--td-black); font-weight: 600; }
.g-btn--primary:hover { background: #000; opacity: .92; }

.g-btn--accent { background: var(--g-accent); color: #fff; border-color: var(--g-accent); font-weight: 600; }
.g-btn--accent:hover { opacity: .9; background: var(--g-accent); }

.g-btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.g-btn--ghost { background: transparent; border-color: transparent; color: var(--td-muted); }
.g-btn--ghost:hover { background: var(--td-soft); color: var(--td-text); }

.g-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.g-btn--block { width: 100%; }
.g-btn svg { transition: transform .15s var(--td-ease); }
.g-btn--primary:hover svg, .g-btn--accent:hover svg { transform: translateX(2px); }
.g-btn:disabled, .g-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* El ícono, en vez de la webfont de Tabler: 1em de lado, para que los `font-size` de los
   <style> originales sigan siendo el tamaño del glifo. Misma regla que landing.css, más
   `line-height: 1`, que es lo que trae la clase `.ti` de `tabler-icons-lite.css` y lo que
   hace que la caja del ícono mida exactamente su alto. Sin eso, un ícono suelto dentro de
   un bloque —el trofeo de «¡Sin brechas!»— arrastra el descendente de la línea y empuja 4 px
   hacia abajo todo lo que viene después. */
.ti { width: 1em; height: 1em; line-height: 1; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ diagnostico/inicio.php · <style> inline, verbatim ═══ */
  /* Restyle s15 · frente §9: card flotante + badge + pill + track con dot (refs Eduardo 23-07). */
  body.diag--inicio .diag-page { min-height: 100dvh; display: flex; flex-direction: column; background: #F3F5F1; background-image: radial-gradient(560px 320px at 50% -6%, rgba(115, 193, 93, .10), transparent 60%); }
  body.diag--inicio .diag-top { padding: 28px 16px 4px; display: flex; justify-content: center; }
  body.diag--inicio .diag-top__logo img { height: 65px; display: block; }
  body.diag--inicio .diag-under { text-align: center; font-size: 12px; color: var(--td-muted); margin-top: 18px; }
  body.diag--inicio .diag-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 52px 16px 48px; width: 100%; max-width: 500px; margin: 0 auto; }
  body.diag--inicio .q-card { position: relative; width: 100%; background: #fff; border: none; border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .28), 0 4px 14px rgba(20, 30, 25, .05); padding: 46px 26px 28px; display: flex; flex-direction: column; gap: 20px; }
  body.diag--inicio .q-badge { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--g-accent); border: 4px solid #F3F5F1; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(115, 193, 93, .75); }
  body.diag--inicio .q-badge .ti { font-size: 26px; color: #fff; }
  body.diag--inicio .q-label { font-size: 12px; font-weight: 600; color: var(--g-accent-ink); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
  body.diag--inicio .q-text { font-size: 21px; font-weight: 500; color: var(--td-text); line-height: 1.4; text-align: center; }
  body.diag--inicio .nombre-fields { display: flex; flex-direction: column; gap: 14px; }
  body.diag--inicio .nombre-wrap { display: flex; flex-direction: column; gap: 6px; }
  body.diag--inicio .nombre-sub { font-size: 12px; color: var(--td-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  body.diag--inicio .nombre-input { font-size: 17px; font-weight: 500; border: 1.5px solid #E4E8E1; border-radius: 12px; padding: 12px 14px; background: #FBFCFA; color: var(--td-text); transition: .15s var(--td-ease); }
  body.diag--inicio .nombre-input:focus { outline: none; border-color: var(--g-accent); box-shadow: 0 0 0 3px var(--g-accent-ring); background: #fff; }
  body.diag--inicio .trab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.diag--inicio .trab-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 1.5px solid #E4E8E1; border-radius: 12px; background: #FBFCFA; cursor: pointer; transition: .15s var(--td-ease); -webkit-tap-highlight-color: transparent; }
  body.diag--inicio .trab-opt:hover { border-color: #C8D2C2; }
  body.diag--inicio .trab-opt--selected { border-color: var(--g-accent); background: var(--g-accent-soft); }
  body.diag--inicio .trab-opt__num { font-size: 18px; font-weight: 600; color: var(--td-text); }
  body.diag--inicio .trab-opt__label { font-size: 12px; color: var(--td-muted); }
  body.diag--inicio .trab-opt__check { position: absolute; top: 8px; right: 8px; }
  body.diag--inicio .trab-opt__check { font-size: 20px; color: var(--g-accent); opacity: 0; transition: opacity .15s; }
  body.diag--inicio .trab-opt--selected .trab-opt__check { opacity: 1; }
  body.diag--inicio .diag-cta { border-radius: 999px; background: var(--g-accent); border: 1.5px solid var(--g-accent); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 18px; }
  body.diag--inicio .diag-cta:hover { filter: brightness(1.04); background: var(--g-accent); }
  body.diag--inicio .diag-hint { font-size: 12px; color: var(--td-muted); text-align: center; line-height: 1.6; }
  body.diag--inicio .diag-err { font-size: 13px; color: var(--danger); text-align: center; min-height: 18px; }
  body.diag--inicio .diag-aviso { width: 100%; display: flex; align-items: flex-start; gap: 11px; background: var(--g-accent-soft); border: 1px solid var(--g-accent-ring); border-radius: 14px; padding: 13px 16px; margin-bottom: 34px; }
  body.diag--inicio .diag-aviso .ti { font-size: 20px; color: var(--g-accent-ink); flex-shrink: 0; margin-top: 1px; }
  body.diag--inicio .diag-aviso__t { font-size: 13.5px; font-weight: 600; color: var(--td-text); line-height: 1.4; }
  body.diag--inicio .diag-aviso__s { font-size: 12.5px; color: var(--td-muted); line-height: 1.5; margin-top: 2px; }

/* ═══ diagnostico/responder.php · <style> inline, verbatim ═══ */
  /* Restyle s15 · frente §9: card flotante + badge + track con dot (refs Eduardo 23-07). */
  body.diag--responder .diag-page { min-height: 100dvh; display: flex; flex-direction: column; background: #F3F5F1; background-image: radial-gradient(560px 320px at 50% -6%, rgba(115, 193, 93, .10), transparent 60%); }
  body.diag--responder .diag-top { padding: 28px 16px 4px; display: flex; justify-content: center; }
  body.diag--responder .diag-top__logo img { height: 48px; display: block; }
  body.diag--responder .diag-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 26px 16px 48px; width: 100%; max-width: 500px; margin: 0 auto; }
  body.diag--responder .sec-header { width: 100%; margin-bottom: 42px; }
  body.diag--responder .sec-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--td-text); line-height: 1.3; text-align: center; }
  body.diag--responder .sec-kicker { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
  body.diag--responder .sec-kicker__num { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--g-accent-ink); }
  body.diag--responder .sec-kicker__num::before { content: ''; width: 18px; height: 2px; background: var(--g-accent); border-radius: 2px; margin-right: 9px; }
  body.diag--responder .sec-kicker__num span { color: var(--td-muted); font-weight: 500; margin-left: .35em; }
  body.diag--responder .sec-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--td-muted); font-variant-numeric: tabular-nums; }
  body.diag--responder .sec-dots { display: flex; gap: 5px; margin-top: 10px; }
  body.diag--responder .sec-dot { flex: 1; height: 4px; border-radius: 999px; background: #E1E6DE; }
  body.diag--responder .sec-dot--done { background: var(--g-accent); }
  body.diag--responder .sec-dot--now { box-shadow: 0 0 0 .5px var(--g-accent); }
  body.diag--responder .q-card { position: relative; width: 100%; background: #fff; border: none; border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .28), 0 4px 14px rgba(20, 30, 25, .05); padding: 44px 24px 26px; display: flex; flex-direction: column; gap: 20px; transition: transform .2s var(--td-ease), opacity .2s var(--td-ease); }
  body.diag--responder .q-card--exit { transform: translateX(-40px) scale(.97); opacity: 0; }
  body.diag--responder .q-badge { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--g-accent); border: 4px solid #F3F5F1; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(115, 193, 93, .75); }
  body.diag--responder .q-badge .ti { font-size: 26px; color: #fff; }
  body.diag--responder .q-label { font-size: 12px; font-weight: 600; color: var(--g-accent-ink); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
  body.diag--responder .q-text { font-size: 18px; font-weight: 500; color: var(--td-text); line-height: 1.55; margin-top: 8px; text-align: justify; text-justify: inter-word; }
  body.diag--responder .q-legal { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--sa-text-2); background: #FBFCFA; border: 1.5px solid #E4E8E1; padding: 10px 12px; border-radius: 12px; line-height: 1.5; }
  body.diag--responder .q-legal .ti { font-size: 15px; color: var(--td-muted); flex-shrink: 0; margin-top: 1px; }
  body.diag--responder .ans-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.diag--responder .ans-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; border: 1.5px solid #E4E8E1; border-radius: 14px; background: #FBFCFA; cursor: pointer; transition: .15s var(--td-ease); -webkit-tap-highlight-color: transparent; }
  body.diag--responder .ans-btn .ti { font-size: 26px; }
  body.diag--responder .ans-btn__label { font-size: 14px; font-weight: 600; }
  body.diag--responder .ans-btn--si:hover, body.diag--responder .ans-btn--si.pressed { border-color: var(--ok); background: var(--ok-bg); }
  body.diag--responder .ans-btn--si .ti, body.diag--responder .ans-btn--si .ans-btn__label { color: var(--ok); }
  body.diag--responder .ans-btn--no:hover, body.diag--responder .ans-btn--no.pressed { border-color: var(--danger); background: var(--danger-bg); }
  body.diag--responder .ans-btn--no .ti, body.diag--responder .ans-btn--no .ans-btn__label { color: var(--danger); }
  body.diag--responder .ans-btn:active { transform: scale(.95); }
  body.diag--responder .na-row { display: flex; justify-content: center; }
  body.diag--responder .na-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--td-muted); background: transparent; border: 1.5px solid #E4E8E1; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: .15s var(--td-ease); }
  body.diag--responder .na-btn:hover { background: #FBFCFA; color: var(--sa-text-2); }
  body.diag--responder .na-btn .ti { font-size: 15px; }
  body.diag--responder .diag-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--td-black); color: #fff; font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 999px; opacity: 0; transition: .3s var(--td-ease); z-index: 60; display: flex; align-items: center; gap: 7px; }
  body.diag--responder .diag-toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }
  body.diag--responder .diag-toast .ti { font-size: 16px; }

/* ═══ diagnostico/seccion-completa.php · <style> inline, verbatim ═══ */
  /* Restyle s15 · frente §9: familia card flotante + badge de estado + track con dot. */
  body.diag--seccion .diag-page { min-height: 100dvh; display: flex; flex-direction: column; background: #F3F5F1; background-image: radial-gradient(560px 320px at 50% -6%, rgba(115, 193, 93, .10), transparent 60%); }
  body.diag--seccion .diag-top { position: sticky; top: 0; z-index: 20; background: rgba(243, 245, 241, .88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); padding: 14px 16px 12px; }
  body.diag--seccion .diag-top__inner { max-width: 520px; margin: 0 auto; }
  body.diag--seccion .diag-top__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  body.diag--seccion .diag-top__logo img { height: 48px; display: block; }
  body.diag--seccion .diag-counter { font-size: 14px; font-weight: 600; color: var(--td-muted); font-variant-numeric: tabular-nums; }
  body.diag--seccion .diag-counter b { color: var(--td-text); font-weight: 600; }
  body.diag--seccion .diag-track { position: relative; height: 4px; background: #E1E6DE; border-radius: 999px; }
  body.diag--seccion .diag-track::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #D6DCD2; }
  body.diag--seccion .diag-track__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--g-accent); border-radius: 999px; transition: width .5s var(--td-ease); }
  body.diag--seccion .diag-track__fill::after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--g-accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
  body.diag--seccion .diag-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 52px 16px 48px; width: 100%; max-width: 500px; margin: 0 auto; gap: 14px; }
  body.diag--seccion .sd-card { position: relative; width: 100%; background: #fff; border: none; border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .28), 0 4px 14px rgba(20, 30, 25, .05); padding: 46px 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

  /* Badge flotante de estado: el color acompaña al resultado, no al momento del flujo. */
  body.diag--seccion .sd-icon { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid #F3F5F1; box-shadow: 0 12px 26px -12px rgba(20, 30, 25, .45); }
  body.diag--seccion .sd-icon .ti { font-size: 28px; }
  body.diag--seccion .sd-icon.is-ok { background: var(--ok); }
  body.diag--seccion .sd-icon.is-ok .ti { color: #fff; }
  body.diag--seccion .sd-icon.is-warn { background: var(--warn); }
  body.diag--seccion .sd-icon.is-warn .ti { color: #fff; }
  body.diag--seccion .sd-icon.is-bad { background: var(--danger); }
  body.diag--seccion .sd-icon.is-bad .ti { color: #fff; }

  body.diag--seccion .sd-title { font-size: 20px; font-weight: 600; color: var(--td-text); }
  body.diag--seccion .sd-name { font-size: 13px; color: var(--td-muted); }
  body.diag--seccion .sd-lead { font-size: 13.5px; line-height: 1.55; color: var(--g-ink-2); max-width: 40ch; }
  body.diag--seccion .sd-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: 100%; margin-top: 6px; }
  body.diag--seccion .sd-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border: 1.5px solid #E4E8E1; border-radius: 12px; background: #FBFCFA; }
  body.diag--seccion .sd-stat__val { font-size: 20px; font-weight: 600; color: var(--td-text); }
  body.diag--seccion .sd-stat__label { font-size: 11px; color: var(--td-muted); }
  body.diag--seccion .sd-bar { width: 100%; height: 8px; background: #E1E6DE; border-radius: 999px; overflow: hidden; }
  body.diag--seccion .sd-bar__fill { height: 100%; border-radius: 999px; transition: width .6s var(--td-ease); }
  body.diag--seccion .sd-note { width: 100%; font-size: 13px; color: var(--g-ink-2); background: #FBFCFA; border: 1.5px solid #E4E8E1; border-radius: 12px; padding: 14px; line-height: 1.5; text-align: justify; text-justify: inter-word; }
  body.diag--seccion .sd-acum { width: 100%; background: #fff; border: none; border-radius: 16px; box-shadow: 0 12px 34px -20px rgba(20, 30, 25, .30); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
  body.diag--seccion .sd-acum__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--td-text); }
  body.diag--seccion .sd-acum__title .ti { font-size: 16px; color: var(--g-accent-ink); }
  body.diag--seccion .sd-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
  body.diag--seccion .sd-row__name { color: var(--g-ink-2); }
  body.diag--seccion .sd-row__pct { font-weight: 600; }
  body.diag--seccion .sd-divider { border: none; border-top: 1px solid #ECEFEA; margin: 6px 0; }
  body.diag--seccion .sd-global { font-size: 15px; font-weight: 600; color: var(--td-text); margin-top: 4px; }
  body.diag--seccion .sd-acum__sub { font-size: 12px; color: var(--td-muted); }
  body.diag--seccion .sd-alert { width: 100%; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
  body.diag--seccion .sd-alert .ti { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  body.diag--seccion .sd-next { width: 100%; border: 1.5px solid #E4E8E1; border-radius: 12px; padding: 14px; background: #FBFCFA; }
  body.diag--seccion .sd-next__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--td-muted); font-weight: 600; }
  body.diag--seccion .sd-next__name { font-size: 15px; font-weight: 600; color: var(--td-text); margin-top: 2px; }
  body.diag--seccion .sd-next__meta { font-size: 12px; color: var(--td-muted); margin-top: 2px; }
  body.diag--seccion .diag-cta { border-radius: 999px; background: var(--g-accent); border: 1.5px solid var(--g-accent); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 18px; }
  body.diag--seccion .diag-cta:hover { filter: brightness(1.04); background: var(--g-accent); }

/* ═══ diagnostico/resultado.php · <style> inline, verbatim ═══ */
  /* Restyle s15 · frente §9: hero flotante + cards familia diagnóstico. */
  body.diag--resultado .res-page { min-height: 100dvh; display: flex; flex-direction: column; background: #F3F5F1; background-image: radial-gradient(560px 320px at 50% -6%, rgba(115, 193, 93, .10), transparent 60%); }
  body.diag--resultado .res-wrap { width: 100%; max-width: 500px; margin: 0 auto; padding: 24px 16px 0; }
  body.diag--resultado .res-hero { background: #fff; border: none; border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .28), 0 4px 14px rgba(20, 30, 25, .05); padding: 30px 20px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  body.diag--resultado .res-ring { position: relative; width: 140px; height: 140px; }
  body.diag--resultado .res-ring svg { transform: rotate(-90deg); }
  body.diag--resultado .res-ring__val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  body.diag--resultado .res-ring__num { font-size: 28px; font-weight: 600; line-height: 1; color: var(--td-black); }
  body.diag--resultado .res-ring__pct { font-size: 9px; color: var(--td-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
  body.diag--resultado .res-greet { font-size: 15px; font-weight: 500; color: var(--td-muted); }
  body.diag--resultado .res-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; color: var(--td-text); }
  body.diag--resultado .res-title .ti { font-size: 24px; color: var(--g-accent-ink); }
  body.diag--resultado .res-sub { font-size: 12px; color: var(--td-muted); }
  body.diag--resultado .res-body { flex: 1; width: 100%; max-width: 500px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
  body.diag--resultado .res-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  body.diag--resultado .res-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 6px; border: none; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px -20px rgba(20, 30, 25, .30); text-align: center; }
  body.diag--resultado .res-stat__val { font-size: 24px; font-weight: 600; }
  body.diag--resultado .res-stat__label { font-size: 11px; color: var(--td-muted); }
  body.diag--resultado .res-block { background: #fff; border-radius: 16px; box-shadow: 0 12px 34px -20px rgba(20, 30, 25, .30); padding: 16px; }
  body.diag--resultado .res-block-title { font-size: 15px; font-weight: 600; color: var(--td-text); margin-bottom: 12px; }
  body.diag--resultado .res-sec-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  body.diag--resultado .res-sec-row__name { flex: 0 0 42%; font-size: 12px; color: var(--g-ink-2); line-height: 1.3; }
  body.diag--resultado .res-sec-row__bar { flex: 1; height: 8px; background: #E1E6DE; border-radius: 999px; overflow: hidden; }
  body.diag--resultado .res-sec-row__fill { height: 100%; border-radius: 999px; }
  body.diag--resultado .res-sec-row__pct { flex: 0 0 38px; text-align: right; font-size: 12px; font-weight: 600; }

  /* Tarjeta de cierre de módulo: única llamada a la acción de la pantalla. */
  body.diag--resultado .res-cta { background: #fff; border: none; border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .28), 0 4px 14px rgba(20, 30, 25, .05); padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  body.diag--resultado .res-cta__icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--g-accent); box-shadow: 0 10px 22px -10px rgba(115, 193, 93, .75); }
  body.diag--resultado .res-cta__icon .ti { font-size: 24px; color: #fff; }
  body.diag--resultado .res-cta__name { font-size: 16px; font-weight: 600; color: var(--td-text); text-align: center; }
  body.diag--resultado .res-cta .g-btn { width: 100%; }
  body.diag--resultado .diag-cta { border-radius: 999px; background: var(--g-accent); border: 1.5px solid var(--g-accent); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 18px; }
  body.diag--resultado .diag-cta:hover { filter: brightness(1.04); background: var(--g-accent); }

  body.diag--resultado .res-empty { text-align: center; padding: 6px 0 0; }
  body.diag--resultado .res-empty .ti { font-size: 42px; color: var(--ok); }
  body.diag--resultado .res-empty__t { font-size: 17px; font-weight: 600; color: var(--td-text); margin-top: 8px; }
  body.diag--resultado .res-reset { display: block; text-align: center; font-size: 12px; color: var(--td-muted); }

/* ═══ Lo que no viene del legacy ═════════════════════════════════════════ */

/* 1 · El logo de Tudela dentro de la caja del logo del legacy.
   El del legacy es 695×151 (relación 4,6) y el de Tudela 658×106 (6,2): a la misma altura,
   el nuestro ocupa un tercio más de ancho —403 px contra 299 px a 65 px de alto—, y a 390 px
   de pantalla se sale del encabezado.

   La solución **no** es bajarle la altura, que es lo que hace `landing.css`: aquí eso movería
   hacia arriba todo lo que viene después y las capturas dejarían de compararse. Lo que se
   hace es fijar la caja —el `<a>` conserva los 65 px de inicio y los 48 px de responder y
   sección, así el encabezado mide exactamente lo mismo que el original— y dejar que la
   imagen se acomode dentro sin deformarse: `max-height` la limita en pantallas anchas y
   `max-width` en las angostas, con las dos dimensiones en `auto` para que la relación se
   respete siempre.

   Es el único ajuste de tamaño de toda la hoja, y no mueve un solo píxel del contenido. */
body.diag--inicio .diag-top__logo { display: flex; align-items: center; justify-content: center; height: 65px; }
body.diag--responder .diag-top__logo,
body.diag--seccion .diag-top__logo { display: flex; align-items: center; height: 48px; }
body.diag--inicio .diag-top__logo img { height: auto; width: auto; max-height: 65px; max-width: 100%; }
body.diag--responder .diag-top__logo img,
body.diag--seccion .diag-top__logo img { height: auto; width: auto; max-height: 48px; max-width: 100%; }

/* 2 · El trofeo de «¡Sin brechas!».
   Es el único ícono de las cinco pantallas que vive suelto en un bloque, sin un flex que lo
   contenga. Un glifo de webfont y un `<svg>` en línea no ocupan la misma caja ahí: el svg es
   un elemento reemplazado que se apoya en la línea base y le suma el descendente del strut
   del párrafo, cuatro píxeles que empujan hacia abajo la tarjeta de cierre y el enlace de
   repetir. Como bloque mide exactamente sus 42 px, que es lo que mide el glifo del original.
   Medido con el navegador contra el legacy servido en local, no a ojo. */
body.diag--resultado .res-empty .ti { display: block; margin: 0 auto; }

/* 3 · El diálogo de «Repetir diagnóstico».
   El original usaba `confirm()` nativo, que CONVENCIONES prohíbe. Este es el equivalente
   Blade de `ConfirmModal.vue`, con la misma familia visual de las tarjetas: blanco, 20 px
   de radio y la sombra flotante. No compite con ninguna regla transcrita —esas clases no
   existen en el legacy— y por eso no lleva prefijo de pantalla. */
.diag-confirm { border: none; border-radius: 20px; padding: 26px 22px 20px; width: calc(100% - 32px); max-width: 380px; background: #fff; color: var(--td-text); box-shadow: 0 24px 60px -28px rgba(20, 30, 25, .40), 0 4px 14px rgba(20, 30, 25, .05); }
.diag-confirm::backdrop { background: rgba(20, 30, 25, .38); }
.diag-confirm__t { font-size: 17px; font-weight: 600; color: var(--td-text); text-align: center; }
.diag-confirm__p { font-size: 13.5px; line-height: 1.55; color: var(--g-ink-2); text-align: center; }
.diag-confirm__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.diag-confirm__ok { border-radius: 999px; background: var(--danger-bg); border: 1.5px solid var(--danger-line); color: var(--danger); font-weight: 600; }
.diag-confirm__ok:hover { background: var(--danger-bg); border-color: var(--danger); }
.diag-confirm .g-btn { border-radius: 999px; }