/* ═══════════════════════════════════════════════════════════════════════
   CRISIX — hoja de estilo única. Sin build, sin framework, sin CDN.
   Marca Secure Information Technologies: azul marino de base, verde de acento, gris carbón para
   el texto. Sobrio, denso en información, tipo herramienta de seguridad.

   Tipografía: pila del sistema. No se carga ninguna fuente externa porque
   la CSP no permite orígenes de terceros y no hacemos llamadas salientes.
   Si Inter está instalada en el equipo del usuario, se usa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Tokens ───────────────────────────── */
:root {
    --navy-900: #0d1b2a;
    --navy-800: #13253a;
    --navy-700: #1b3a5c;
    --navy-600: #24507c;

    --green-700: #24634a;
    --green-600: #2e7d5b;
    --green-500: #3d9a72;
    --green-100: #e4f2eb;

    --amber-600: #a86a12;
    --amber-100: #fbf1de;
    --red-700: #9b2c2c;
    --red-600: #c0392b;
    --red-100: #fbe9e7;
    --blue-100: #e6eef6;

    --ink-900: #1c2229;
    --ink-700: #39424d;
    --ink-500: #5d6875;
    --ink-400: #7d8794;

    --surface: #ffffff;
    --surface-2: #f5f7fa;
    --surface-3: #eaeef3;
    --border: #d7dee7;
    --border-strong: #b9c4d1;

    --bg: #f2f5f8;
    --text: var(--ink-900);
    --text-muted: var(--ink-500);
    --accent: var(--green-600);
    --accent-text: #ffffff;
    --header-bg: var(--navy-900);
    --header-text: #e8eef5;

    --radius: 8px;
    --radius-sm: 5px;
    --shadow-sm: 0 1px 2px rgba(13, 27, 42, .08);
    --shadow: 0 2px 10px rgba(13, 27, 42, .09);

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-head: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Modo oscuro por preferencia del sistema… */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #16202c;
        --surface-2: #101923;
        --surface-3: #1d2a38;
        --border: #2a3949;
        --border-strong: #3b4d61;

        --bg: #0b131c;
        --text: #e4eaf1;
        --text-muted: #97a5b5;
        --accent: var(--green-500);
        --header-bg: #0a121b;
        --header-text: #dce6f1;

        --green-100: #122b21;
        --blue-100: #14283a;
        --amber-100: #33260f;
        --red-100: #3a1a18;
        --shadow: 0 2px 12px rgba(0, 0, 0, .45);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    }
}

/* …y por elección explícita del usuario. */
:root[data-theme="dark"] {
    --surface: #16202c;
    --surface-2: #101923;
    --surface-3: #1d2a38;
    --border: #2a3949;
    --border-strong: #3b4d61;

    --bg: #0b131c;
    --text: #e4eaf1;
    --text-muted: #97a5b5;
    --accent: var(--green-500);
    --header-bg: #0a121b;
    --header-text: #dce6f1;

    --green-100: #122b21;
    --blue-100: #14283a;
    --amber-100: #33260f;
    --red-100: #3a1a18;
    --shadow: 0 2px 12px rgba(0, 0, 0, .45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ───────────────────────────── Base ───────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--navy-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a:hover { border-bottom-color: currentColor; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) a { color: #7fb3e8; }
}

:root[data-theme="dark"] a { color: #7fb3e8; }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: .9em;
}

:focus-visible {
    outline: 2px solid var(--green-600);
    outline-offset: 2px;
    border-radius: 3px;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* Sólo para lectores de pantalla. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: var(--accent-text);
    padding: .6rem 1rem;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

/* ───────────────────────────── Estructura ───────────────────────────── */
.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.container--narrow { max-width: 720px; }

main { flex: 1 0 auto; padding: 2rem 0 3rem; }

/* ───────────────────────────── Cabecera ───────────────────────────── */
.masthead {
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 3px solid var(--green-600);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 60px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--header-text);
    border: 0;
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.brand__mark {
    display: inline-block;
    height: 26px;
    width: auto;
    object-fit: contain;
}

/*
 * El logotipo real de CRISIX (escudo con nodos), no un marcador provisional.
 * En la cabecera siempre se usa la versión blanca: .masthead es oscura en
 * ambos temas (ver --header-bg), así que no hace falta alternarla.
 *
 * En la tarjeta de acceso el fondo SÍ cambia con el tema (usa --surface), así
 * que ahí se alternan dos imágenes en vez de una. Mismo patrón que el resto de
 * la hoja: el estado por omisión (claro) se fija aquí, y los dos bloques de
 * abajo lo invierten para "oscuro por el sistema" y "oscuro elegido a mano" —
 * en ese orden, para que la elección explícita gane siempre.
 */
.logo-mark--on-light { display: inline-block; }
.logo-mark--on-dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-mark--on-light { display: none; }
    :root:not([data-theme="light"]) .logo-mark--on-dark { display: inline-block; }
}

:root[data-theme="dark"] .logo-mark--on-light { display: none; }
:root[data-theme="dark"] .logo-mark--on-dark { display: inline-block; }

/* La razón social completa es larga, así que se trata como un pie de marca:
   tracking más contenido y fuera de la vista en pantallas estrechas, donde
   compite con la navegación y no aporta nada que el logotipo no diga ya. */
.brand__suffix {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8fa6bd;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .brand__suffix { display: none; }
}

.nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.nav a,
.nav .nav__text {
    color: #cbd8e6;
    font-size: .9rem;
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    border: 0;
}

.nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.nav a[aria-current="page"] {
    background: rgba(46, 125, 91, .25);
    color: #fff;
}

.nav__text { color: #8fa6bd; }

/*
 * Logotipo propio de la organización (Starter y Professional), junto al
 * nombre de quien tiene la sesión. La marca CRISIX de la izquierda (.brand)
 * no lleva ninguna regla de este bloque: son cosas distintas a propósito.
 */
.org-logo {
    height: 26px;
    max-width: 100px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    background: var(--surface);
    padding: 2px;
    vertical-align: middle;
}

.nav form { display: inline; }

.icon-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #cbd8e6;
    border-radius: var(--radius-sm);
    padding: .35rem .6rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.icon-button:hover { background: rgba(255, 255, 255, .08); }

/* Variante para fondos claros (fuera de la cabecera azul marino). */
.icon-button--quiet {
    color: var(--text-muted);
    border-color: var(--border);
}

.icon-button--quiet:hover { background: var(--surface-3); }

/* ───────────────────────────── Pie ───────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .82rem;
    padding: 1.2rem 0;
}

.footer__inner {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* ───────────────────────────── Tarjetas ───────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem;
    margin-bottom: 1.25rem;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card__header h2,
.card__header h3 { margin: 0; }

.card--accent { border-left: 4px solid var(--green-600); }
.card--warning { border-left: 4px solid var(--amber-600); }

.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ───────────────────────────── Métricas ───────────────────────────── */
.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.metric__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
    margin: 0 0 .3rem;
}

.metric__value {
    font-family: var(--font-head);
    font-size: 1.9rem;
    line-height: 1.1;
    margin: 0;
}

.metric__hint {
    font-size: .8rem;
    color: var(--text-muted);
    margin: .35rem 0 0;
}

/* ───────────────────────────── Formularios ───────────────────────────── */
.field { margin-bottom: 1.05rem; }

.field--narrow { max-width: 280px; }

.field > label,
.label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
}

.field__hint {
    display: block;
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}

textarea { min-height: 120px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(46, 125, 91, .18);
    outline: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--red-600);
}

.field__error {
    display: block;
    color: var(--red-600);
    font-size: .82rem;
    margin-top: .3rem;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
}

.checkbox input { margin-top: .25rem; }

.input--code {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .3em;
    text-align: center;
}

/* ───────────────────────────── Botones ───────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .58rem 1.1rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--accent);
    color: var(--accent-text);
    text-decoration: none;
}

.button:hover { background: var(--green-700); border-bottom-color: transparent; }

.button:disabled,
.button.is-busy {
    opacity: .6;
    cursor: progress;
}

.button--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.button--secondary:hover { background: var(--surface-3); }

.button--danger {
    background: var(--red-600);
    color: #fff;
}

.button--danger:hover { background: var(--red-700); }

.button--block { width: 100%; }

.button--small { padding: .35rem .7rem; font-size: .82rem; }

.button-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ───────────────────────────── Avisos ───────────────────────────── */
.alert {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}

.alert--success { background: var(--green-100); border-left-color: var(--green-600); }
.alert--error   { background: var(--red-100);   border-left-color: var(--red-600); }
.alert--warning { background: var(--amber-100); border-left-color: var(--amber-600); }
.alert--info    { background: var(--blue-100);  border-left-color: var(--navy-600); }

/* ───────────────────────────── Distintivos ───────────────────────────── */
.badge {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--surface-3);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge--active { background: var(--green-100); color: var(--green-700); border-color: var(--green-600); }
.badge--warning { background: var(--amber-100); color: var(--amber-600); border-color: var(--amber-600); }
.badge--danger { background: var(--red-100); color: var(--red-700); border-color: var(--red-600); }

/* ───────────────────────────── Tablas ───────────────────────────── */
.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

table.data th,
table.data td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

table.data th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    background: var(--surface-2);
}

/* ───────────────────────────── Autenticación ───────────────────────────── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1.25rem;
    background:
        radial-gradient(circle at 15% 0%, rgba(46, 125, 91, .10), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(27, 58, 92, .12), transparent 50%),
        var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-card--wide { max-width: 620px; }

.auth-card__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.4rem;
    font-family: var(--font-head);
    font-size: 1.4rem;
    letter-spacing: .04em;
}

.auth-card__brand .brand__suffix { color: var(--text-muted); }

.auth-card__brand .brand__mark { height: 32px; }

.auth-foot {
    margin-top: 1.4rem;
    font-size: .88rem;
    color: var(--text-muted);
    text-align: center;
}

.captcha {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.captcha__image {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #f4f6f9;
    display: block;
    max-width: 100%;
    height: auto;
}

.captcha__controls { flex: 1 1 180px; min-width: 160px; }

/* ───────────────────────────── 2FA ───────────────────────────── */
.qr-block {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.qr-block img {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: .5rem;
}

.secret-value {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .05em;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    word-break: break-all;
}

.backup-codes {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}

.backup-codes li {
    font-family: var(--font-mono);
    font-size: .95rem;
    letter-spacing: .05em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .45rem .6rem;
    text-align: center;
}

/* ───────────────────────────── Portada ───────────────────────────── */
.hero {
    padding: 3.5rem 0 2.5rem;
}

.hero h1 {
    font-size: 2.5rem;
    max-width: 20ch;
}

.hero__lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 62ch;
}

.hero__actions { margin-top: 1.5rem; }

.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--text-muted); font-size: .93rem; margin: 0; }

.eyebrow {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 700;
    color: var(--green-600);
    margin-bottom: .5rem;
}

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.8rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

/* ───────────────────────── Biblioteca de escenarios ───────────────────────── */
.scenario-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.scenario-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.scenario-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.scenario-card--master { border-left: 4px solid var(--green-600); }

/*
 * Imagen ilustrativa, a sangre en la parte superior de la tarjeta. Los
 * márgenes negativos igualan el padding de .scenario-card para que llegue
 * hasta el borde; el borde izquierdo verde de los maestros no se pisa porque
 * el margen negativo sólo entra en el relleno, no en el borde.
 */
.scenario-card__cover {
    display: block;
    width: calc(100% + 2.7rem);
    height: 132px;
    object-fit: cover;
    margin: -1.25rem -1.35rem .15rem;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background: var(--surface-3);
}

.scenario-cover {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 1.25rem;
}

.scenario-cover--preview {
    max-width: 280px;
    max-height: 150px;
    margin-bottom: 0;
    border: 1px solid var(--border);
}

/* Miniatura del listado de la biblioteca maestra: dice de un vistazo qué
   escenarios del catálogo todavía no tienen ilustración. */
.scenario-thumb {
    display: block;
    width: 84px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--surface-3);
}

.scenario-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: .75rem;
    text-decoration: none;
}

.scenario-thumb--empty:hover {
    border-color: var(--green-600);
    color: var(--green-600);
}

.scenario-card h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.scenario-card h3 a {
    color: inherit;
    text-decoration: none;
}

.scenario-card h3 a:hover { text-decoration: underline; }

.scenario-card__summary {
    margin: 0;
    font-size: .9rem;
    color: var(--text-muted);
    flex: 1 1 auto;
}

.scenario-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.scenario-card__actions {
    display: flex;
    gap: .6rem .9rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

.scenario-card__clone {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--text);
}

.scenario-card__clone:hover .badge { border-color: var(--green-700); }

.chip--icon svg { flex: none; }

.chip--basic        { background: var(--green-100); color: var(--green-700); border-color: var(--green-600); }
.chip--intermediate { background: var(--amber-100); color: var(--amber-600); border-color: var(--amber-600); }
.chip--advanced      { background: var(--red-100);   color: var(--red-700);   border-color: var(--red-600); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.chip--role { background: var(--blue-100); color: var(--navy-700); border-color: var(--navy-600); }
.chip--all { background: var(--green-100); color: var(--green-700); border-color: var(--green-600); }
.chip--escalation { background: var(--amber-100); color: var(--amber-600); border-color: var(--amber-600); }
.chip--warning { background: var(--amber-100); color: var(--amber-600); border-color: var(--amber-600); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chip--role { color: #9fc4ea; }
}

:root[data-theme="dark"] .chip--role { color: #9fc4ea; }

.section-title {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 2rem 0 1rem;
}

.section-title h2 { margin: 0; }
.section-title span { font-size: .85rem; color: var(--text-muted); }

.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.6rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .92rem;
}

/* ───────────────────────── Tarjetas de plan ───────────────────────── */
.plan-cards {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 1.5rem 0;
    /* Espacio para que la cinta "Recomendado" flote sin recortarse. */
    padding-top: 1rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 1.6rem 1.6rem;
}

.plan-card--recommended {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow);
}

.plan-card--current { border-color: var(--border-strong); }

.plan-card__ribbon {
    position: absolute;
    top: -14px;
    left: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 100px;
    padding: .3rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.plan-card__head h3 {
    margin: 0 0 .3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.plan-card__tagline {
    margin: 0;
    font-size: .88rem;
    color: var(--text-muted);
}

.plan-card__price {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    flex-wrap: wrap;
}

.plan-card__price .amount {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.plan-card__price .unit {
    font-size: .88rem;
    color: var(--text-muted);
}

.plan-card__cta { display: flex; flex-direction: column; gap: .6rem; }

.plan-card__cta .button { border-radius: 100px; }

.plan-card__details {
    border-top: 1px solid var(--border);
    padding-top: .9rem;
    margin-top: -.2rem;
}

.plan-card__details > summary {
    cursor: pointer;
    list-style: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.plan-card__details > summary::-webkit-details-marker { display: none; }

.plan-card__details > summary::after {
    content: "▾";
    font-size: .7em;
    transition: transform .15s ease;
}

.plan-card__details[open] > summary::after { transform: rotate(180deg); }

.plan-card__details ul {
    margin: .8rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* ───────────────────────── Logotipo de la organización ───────────────────────── */
.logo-manager {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.logo-manager__preview {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem;
    background: var(--surface);
}

.logo-manager__form { flex: 1 1 260px; }

/* ───────────────────────── Cronología de inyectores ───────────────────────── */
.timeline {
    position: relative;
    margin: 1.5rem 0 0;
    padding-left: 4.6rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 3.4rem;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: var(--border);
}

.inject {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.inject--escalation { border-left: 4px solid var(--amber-600); }

.inject__minute {
    position: absolute;
    left: -4.6rem;
    top: 1rem;
    width: 3.05rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy-600);
}

.inject__minute small {
    display: block;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.inject::before {
    content: "";
    position: absolute;
    left: -1.28rem;
    top: 1.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg);
}

.inject__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
}

.inject__header h3 {
    margin: 0;
    font-size: 1.02rem;
    flex: 1 1 auto;
}

.inject__sender {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0 0 .5rem;
}

.inject__body {
    font-size: .93rem;
    white-space: pre-line;
    margin: 0;
}

.inject__questions {
    margin: .9rem 0 0;
    padding: .75rem .9rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.inject__questions h4 {
    margin: 0 0 .4rem;
    font-family: var(--font-body);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
}

.inject__questions ol {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .9rem;
}

.inject__questions li { margin-bottom: .3rem; }

.facilitator-note {
    margin: .8rem 0 0;
    padding: .7rem .9rem;
    border-left: 3px solid var(--green-600);
    background: var(--green-100);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .88rem;
}

.facilitator-note h4 {
    margin: 0 0 .3rem;
    font-family: var(--font-body);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--green-700);
}

.standards {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .7rem;
}

.definition-list {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: .4rem 1rem;
    margin: 0;
    font-size: .92rem;
}

.definition-list dt {
    font-weight: 600;
    color: var(--text-muted);
}

.definition-list dd { margin: 0; }

@media (max-width: 640px) {
    .timeline { padding-left: 0; }
    .timeline::before { display: none; }
    .inject::before { display: none; }
    .inject__minute { position: static; width: auto; text-align: left; margin-bottom: .4rem; }
    .inject__minute small { display: inline; margin-left: .3rem; }
    .definition-list { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .definition-list dd { margin-bottom: .5rem; }
}

/* ───────────────────────── Diseñador de ejercicios ───────────────────────── */
.col-email { width: 34%; }
.col-name  { width: 26%; }
.col-role  { width: 24%; }
.col-seat  { width: 16%; }

table.data td input,
table.data td select {
    font-size: .88rem;
    padding: .35rem .5rem;
}

/* Una fecha completa no cabe con el cuerpo de una métrica numérica. */
.metric__value[data-clock-size] {
    font-size: 1.25rem;
    padding-top: .35rem;
}

/* Aviso permanente de que se trata de un simulacro. Va arriba del todo y no se
   puede cerrar: confundir un ejercicio con un incidente real es el peor fallo
   posible de esta herramienta. */
.exercise-banner {
    background: var(--amber-600);
    color: #fff;
    text-align: center;
    padding: .5rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ───────────────────── Sala en vivo y consola ───────────────────── */
.room-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--navy-900);
    color: #e8eef5;
    border-radius: var(--radius);
    padding: .9rem 1.4rem;
    min-width: 148px;
}

.room-clock__value {
    font-family: var(--font-mono);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.room-clock__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8fa6bd;
    margin-top: .35rem;
    text-align: center;
}

.room-clock--console .room-clock__value { font-size: 2.1rem; }

.room-head,
.console-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Progreso del guion: cuántos inyectores ya llegaron (a cualquier rol) de
   los que trae el ejercicio completo. No es "cuántos me tocan a mí" —eso
   dependería del rol y confundiría más de lo que ayuda—, es una referencia
   de cuánto avanzó la simulación, igual para toda la mesa. */
.room-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
}

.room-progress__bar {
    flex: 1 1 auto;
    max-width: 240px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.room-progress__fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
}

.room-progress__label {
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.room-head__meta,
.console-head__meta { flex: 1 1 260px; }

.room-head__meta h1,
.console-head__meta h1 { margin: 0 0 .35rem; font-size: 1.5rem; }

.console-controls {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Marca de tiempo del inyector: es el dato que después ordena el informe. */
.room-stamp {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy-600);
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    padding: .1rem .45rem;
}

.inject--room { margin-bottom: 1.1rem; }
.inject--room .inject__header h2 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.inject--room::before { display: none; }

.inject__form {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}

.inject__form textarea { min-height: 84px; }

.room { padding-bottom: 2rem; }

.console-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.script-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: .6rem;
}

.script-row--delivered { border-left: 4px solid var(--green-600); }

.script-row__minute {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-600);
    min-width: 3rem;
    text-align: right;
}

.script-row__minute small {
    display: block;
    font-family: var(--font-body);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.script-row__body { flex: 1 1 auto; min-width: 0; }
.script-row__body h3 { margin: 0 0 .3rem; font-size: .98rem; }
.script-row__action { flex: 0 0 auto; }

.roster {
    list-style: none;
    margin: 0;
    padding: 0;
}

.roster li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}

.roster li:last-child { border-bottom: 0; }

.roster__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
    flex: 0 0 auto;
}

.roster__dot--online { background: var(--green-500); }

.roster__name { flex: 1 1 auto; min-width: 0; }
.roster__name small { display: block; color: var(--text-muted); font-size: .76rem; }

@media (max-width: 860px) {
    .console-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .room-clock__value { font-size: 2.1rem; }
    .script-row { flex-wrap: wrap; }
    .script-row__minute { min-width: auto; text-align: left; }
    .script-row__minute small { display: inline; margin-left: .3rem; }
}

/* ─────────────────────── After-Action Report ─────────────────────── */
.answer-block {
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}

.answer-block:last-child { border-bottom: 0; padding-bottom: 0; }

.inject__minute small { white-space: nowrap; }

/* ───────────────────────────── Errores ───────────────────────────── */
.error-page {
    text-align: center;
    padding: 4rem 0;
}

.error-page__code {
    font-family: var(--font-head);
    font-size: 4rem;
    line-height: 1;
    color: var(--navy-700);
    margin: 0 0 .5rem;
}

.error-page__detail {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 1rem;
    word-break: break-all;
}

/* ───────────────────────────── Utilidades ───────────────────────────── */
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.stack > * + * { margin-top: 1rem; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-header h1 { margin: 0; }

/* Banner del panel principal: la primera imagen que ve cualquiera con sesión
   abierta, antes que ningún dato de su organización. A altura fija con
   object-fit: cover se recortaba por los costados en un monitor ancho —el
   contenedor llega a 1100px y queda mucho más panorámico que la foto
   (~3:1)—, justo donde está la palabra CRISIX del panel derecho. Se deja a
   su alto natural: nunca recorta nada, a costa de que la altura varíe con
   el ancho de pantalla (hasta ~360px en un contenedor a su máximo). */
.dashboard-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 1.5rem;
}

/* ──────────────── Terminación no planificada (ISO 22398 5.3.5.2) ──────────────── */
/* Tiene que leerse desde el otro lado de la sala y no parecerse en nada a la
   pantalla de un cierre normal: son dos hechos distintos. */
.abort-notice {
    background: var(--red-700);
    color: #fff;
    border-radius: 3px;
    padding: 2rem 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.abort-notice__kicker {
    margin: 0 0 .5rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .85;
}

.abort-notice__headline {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
}

.abort-notice__lede {
    margin: 0;
    font-size: 1.05rem;
    opacity: .92;
}

/* El briefing conserva los saltos de línea con los que se redactó. */
.briefing-text {
    white-space: pre-wrap;
    line-height: 1.7;
}

/* Cabecera de tramo dentro de una cronología agrupada por evento. */
.timeline__band {
    margin: 1.5rem 0 .5rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: .35rem;
}

.timeline__band:first-child { margin-top: 0; }

/* Árbol del guion: eventos principales con sus incidentes (figura 2). */
.script-tree { margin: 0 0 1rem; padding-left: 1.1rem; }
.script-tree > li { margin-bottom: .8rem; }
.script-tree ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.script-tree ul li { color: var(--text-muted); font-size: .93rem; margin-bottom: .25rem; }
.script-tree form { display: inline; }

/* ─────────── Objetivos de desempeño (ISO 22398 5.2.3) ─────────── */
.objective-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    margin-top: .85rem;
}

/* Aprobado se ve de un vistazo: es lo que habilita convocar a la mesa. */
.objective-card--approved { border-left-color: var(--green-600); }

.objective-card__head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.objective-card__number {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.objective-card__statement {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 500;
}

.objective-card__criterion {
    margin: .7rem 0 0;
    font-size: .92rem;
    color: var(--text-muted);
}

.objective-card__links {
    margin-top: .8rem;
    border-top: 1px solid var(--border);
    padding-top: .7rem;
}

.objective-card__links > summary {
    cursor: pointer;
    font-size: .88rem;
    color: var(--text-muted);
}

.objective-card__links[open] > summary { margin-bottom: .6rem; }

/* Veredicto del objetivo en el informe. */
.outcome-achieved     { color: var(--green-700); font-weight: 600; }
.outcome-partial      { color: var(--amber-600); font-weight: 600; }
.outcome-not_achieved { color: var(--red-700);   font-weight: 600; }
.outcome-pending      { color: var(--text-muted); }

/* ─────────────── Acciones correctivas (ISO 22398 6.3) ─────────────── */
.action-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    margin-top: 1rem;
}

/* Lo vencido se ve antes de leerlo. */
.action-card--overdue { border-left-color: var(--red-600); }

.action-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .6rem;
}

.action-card__text {
    font-size: 1.02rem;
    white-space: pre-line;
    margin: 0 0 .8rem;
}

.action-card__evidence { white-space: pre-line; }

.action-card__form {
    margin-top: .9rem;
    border-top: 1px solid var(--border);
    padding-top: .75rem;
}

.action-card__form > summary {
    cursor: pointer;
    font-size: .88rem;
    color: var(--text-muted);
}

.action-card__form[open] > summary { margin-bottom: .75rem; }

/* El control de detención va plegado y separado del resto: no es una variante
   de "cerrar" y no debe poder pulsarse de forma distraída. */
.abort-control {
    border: 1px solid var(--red-600);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-top: 1rem;
    background: var(--surface-2);
}

.abort-control > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--red-700);
    font-size: .92rem;
}

.abort-control > summary:focus-visible {
    outline: 2px solid var(--red-600);
    outline-offset: 2px;
}

.abort-control[open] > summary { margin-bottom: .75rem; }

/* ─────────────────────── Panel de plataforma (/admin) ─────────────────────── */
/* Quien opera aquí tiene delante datos de organizaciones ajenas. El marcado
   visual no es decoración: separa "mi cuenta" de "la cuenta de un cliente". */
.platform-strip {
    margin: 0;
    padding: .5rem 1.5rem;
    background: var(--navy-700);
    color: #e7eef6;
    font-size: .82rem;
    letter-spacing: .01em;
    text-align: center;
}

body[data-area="platform"] .masthead {
    border-bottom: 2px solid var(--amber-600);
}

body[data-area="platform"] .brand__suffix {
    color: var(--amber-600);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.inline-actions form {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.inject-editor {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.inject-editor:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

@media (max-width: 640px) {
    h1 { font-size: 1.55rem; }
    .hero h1 { font-size: 1.9rem; }
    .masthead__inner { flex-wrap: wrap; padding-block: .6rem; }
    .nav { margin-left: 0; width: 100%; }
    .auth-card { padding: 1.4rem; }
}

@media print {
    .masthead, .footer, .button, .nav { display: none !important; }
    body { background: #fff; color: #000; }
}