/* ============================================================================
   AdmCloud — Manual de Usuario · Tema compartido
   Paleta de marca 2026 (docs/DesignSystem): Enterprise Blue #26A4DD, Adm Grey #2B2C2C,
   Cloud Grey #A2ACBD, Soft Grey #E6E7E8, Start Yellow #FFCB06 y Scale Red #D91C5C.
   Los valores son copia de AdmWeb/Content/DesignSystemBase.css: si cambian allá, cámbialos aquí.
   Todas las páginas del manual reutilizan ESTE archivo; no crear CSS por página.
   ========================================================================== */

:root {
    /* Neutrales */
    --neutral-100: #FFFFFF;
    --neutral-200: #F7F9FC;
    --neutral-300: #E6E7E8;         /* Soft Grey */
    --neutral-400: #CACBD7;
    --neutral-500: #989AAD;
    --neutral-600: #6F7182;
    --neutral-700: #3D3E3E;
    --neutral-800: #2B2C2C;         /* Adm Grey */

    /* Marca. Los nombres son los históricos (los usan todas las páginas); los valores son la
       paleta nueva. --brand-blue y --brand-blue-bright son Enterprise Blue oscurecido
       (--resolution-blue-500 y -300): el texto blanco sobre #26A4DD no pasa WCAG AA. */
    --brand-indigo: #2B2C2C;        /* Adm Grey */
    --brand-indigo-soft: #5A5C5C;   /* Adm Grey aclarado (--paris-m-100) */
    --brand-blue: #156690;          /* --resolution-blue-500 */
    --brand-blue-bright: #1A7AA8;   /* --resolution-blue-300 */
    --brand-sky: #26A4DD;           /* Enterprise Blue */
    --brand-sky-soft: #8DD0EE;      /* --summer-sky-100 */
    --brand-yellow: #FFCB06;        /* Start Yellow */
    --brand-green: #3FB206;
    --brand-red: #D91C5C;           /* Scale Red */
    --brand-orange: #F97D35;

    /* Semánticos */
    --bg-page: var(--neutral-100);
    --bg-surface: var(--neutral-100);
    --text-main: var(--neutral-800);
    --text-soft: var(--neutral-600);
    --border-soft: var(--neutral-300);

    --font-sans: "Avenir Next", "AvenirNext", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --shadow-card: 0 1px 2px rgba(43, 44, 44, .04);
    --shadow-card-hover: 0 12px 28px -16px rgba(43, 44, 44, .35);
    --shadow-header: none;

    --header-height: 64px;
    --sidebar-width: 292px;
    --content-max: 860px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-main);
    background: var(--bg-page);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--brand-blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand-indigo);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- Encabezado */
.manual-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-header);
}

.manual-header__inner {
    height: var(--header-height);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.manual-header__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--text-main);
}
.manual-header__brand:hover { text-decoration: none; }

/* El logo se fija por ancho: el horizontal nuevo es mucho más ancho en proporción (6.1:1) y,
   con el alto fijo de antes, empujaría la búsqueda y los controles del encabezado. */
.manual-header__logo { width: 150px; height: auto; display: block; }

.manual-header__divider {
    width: 1px;
    height: 26px;
    background: var(--border-soft);
}

.manual-header__doc-label {
    font-weight: 500;
    font-size: .95rem;
    color: var(--text-main);
    letter-spacing: .01em;
    white-space: nowrap;
}

.manual-header__actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* ------------------------------------------------- Filtro por plan ------- */
/*
   Selector del encabezado: deja el manual con solo las páginas del plan escogido.
   El ocultado lo hacen las reglas html[data-plan="X"] que genera el layout a partir
   del enum ManualPlan; aquí solo va la apariencia del control.
*/
.plan-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
}

.plan-switch__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-main);
    white-space: nowrap;
}

.plan-switch__select {
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-main);
    background-color: var(--bg-surface);
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-sm);
    height: 40px;
    padding: 0 2rem 0 .85rem;
    cursor: pointer;
    /* Sin tope, el control crece hasta el nombre de plan mas largo y ahoga la busqueda. */
    max-width: 10.5rem;
    text-overflow: ellipsis;
    /* Flecha propia para que el control se vea igual en todos los navegadores. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7182' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 13px 13px;
}
.plan-switch__select:hover { border-color: var(--brand-sky); }
.plan-switch__select:focus-visible { outline: 2px solid var(--brand-blue-bright); outline-offset: 1px; }

/* Cuando hay un plan escogido, el control se resalta para que no se olvide que está filtrando. */
html[data-plan] .plan-switch__select {
    background-color: rgba(38, 164, 221, .1);
    border-color: var(--brand-sky);
    color: var(--brand-blue);
}

/* Aviso de la página que el plan escogido no incluye. */
.plan-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 1080px;
    margin: 0 0 1rem 0;
    padding: .75rem 1rem;
    border: 1px solid rgba(255, 203, 6, .55);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: rgba(255, 203, 6, .1);
}
/* El aviso nace con el atributo hidden y solo lo destapa manual-plan-filter.js cuando el
   plan escogido no incluye la pagina. Sin esta regla el display:flex de arriba le gana al
   hidden del navegador y la franja amarilla sale vacia en todas las paginas. */
.plan-notice[hidden] { display: none; }
.plan-notice p { margin: 0; font-size: .88rem; color: var(--neutral-700); }
.plan-notice__icon { line-height: 1.4; }

.plan-notice__clear {
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: var(--brand-blue-bright);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.plan-notice__clear:hover { color: var(--brand-indigo); }

/* Selector de idioma (pastillas ES / EN) */
.lang-switch {
    display: inline-flex;
    background: var(--neutral-300);
    border-radius: 999px;
    padding: 4px;
}

.lang-switch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 34px;
    padding: 0 .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--neutral-700);
}
.lang-switch__option:hover { text-decoration: none; color: var(--brand-indigo); }
.lang-switch__option.is-active {
    background: var(--brand-indigo);
    color: #fff;
}

/* Cuadro de búsqueda del encabezado */
.manual-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 372px;
    margin: 0 auto;
}

.manual-search__box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bg-surface);
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-sm);
    padding: 0 .55rem 0 .85rem;
    height: 46px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.manual-search__box:focus-within {
    background: var(--bg-surface);
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgba(38, 164, 221, .2);
}

.manual-search__icon { color: var(--neutral-700); flex-shrink: 0; }

.manual-search__input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: .9rem;
    color: var(--text-main);
    min-width: 0;
}
.manual-search__input::placeholder { color: var(--neutral-500); }
/* Oculta la "x" nativa del input type=search para no chocar con nuestro diseño */
.manual-search__input::-webkit-search-decoration,
.manual-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.manual-search__hint {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    color: var(--neutral-700);
    background: var(--neutral-300);
    border: 0;
    border-radius: var(--radius-sm);
    padding: .15rem .55rem;
    line-height: 1.4;
}
.manual-search__box:focus-within .manual-search__hint { display: none; }

/* Lista desplegable de resultados */
.manual-search__results {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    z-index: 60;
    list-style: none;
    margin: 0;
    padding: .35rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    max-height: min(70vh, 460px);
    overflow-y: auto;
}

.manual-search__result {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.manual-search__result.is-active,
.manual-search__result:hover {
    background: var(--neutral-200);
}

.manual-search__result-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}
.manual-search__result-title mark {
    background: rgba(255, 203, 6, .45);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.manual-search__result-module {
    font-size: .75rem;
    color: var(--text-soft);
}

.manual-search__empty {
    padding: .7rem .8rem;
    font-size: .85rem;
    color: var(--text-soft);
    text-align: center;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--radius-sm);
    padding: 0 1.25rem;
    height: 44px;
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background .15s ease;
}
.btn:hover { text-decoration: none; }

/* Azul de marca oscurecido: con el blanco sobre #26A4DD el texto no pasa WCAG AA. */
.btn--primary {
    background: var(--brand-blue-bright);
    color: #fff;
}
.btn--primary:hover { background: var(--brand-blue); color: #fff; }

/* ---------------------------------------------------------------- Marco -- */
.manual-shell {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    min-height: calc(100vh - var(--header-height));
}

/* Barra lateral */
.manual-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 1.6rem 1rem 2rem 1.5rem;
    border-right: 1px solid var(--border-soft);
    position: sticky;
    top: var(--header-height);
    align-self: flex-start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.manual-sidebar__home {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 500;
    font-size: .9rem;
    color: var(--text-main);
    padding: 0 .8rem;
    min-height: 44px;
    border-radius: var(--radius-sm);
}
.manual-sidebar__home:hover { background: var(--neutral-300); text-decoration: none; }
.manual-sidebar__home.is-active { background: var(--neutral-300); }
/* Cuadro azul de marca: marca la página abierta, igual que los títulos de sección. */
.manual-sidebar__home.is-active::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    background: var(--brand-sky);
}

/* Rótulo "Módulos" que separa el inicio de la lista de módulos. */
.manual-sidebar__section {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1.6rem 0 .5rem 0;
    padding: 0 .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-main);
}
.manual-sidebar__section::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--brand-sky);
}

.manual-sidebar__group { margin-top: .15rem; }

.manual-sidebar__group-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 44px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    color: var(--text-main);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    padding: .3rem .8rem;
    cursor: pointer;
}
.manual-sidebar__group-title:hover { background: var(--neutral-300); }
.manual-sidebar__group-title:focus-visible { outline: 2px solid var(--brand-blue-bright); outline-offset: 1px; }

.manual-sidebar__group-name { flex: 1; }

.manual-sidebar__group-chevron {
    flex-shrink: 0;
    transition: transform .15s ease;
}

/* Grupo plegado: solo queda el título, con la flecha hacia la derecha. */
.manual-sidebar__group.is-collapsed .manual-sidebar__list { display: none; }
.manual-sidebar__group.is-collapsed .manual-sidebar__group-chevron { transform: rotate(-90deg); }

.manual-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--border-soft);
    margin: .2rem 0 .6rem 1.25rem;
}

.manual-sidebar__link {
    display: block;
    padding: .38rem .8rem;
    margin: 2px 0 2px -2px;
    font-size: .88rem;
    color: var(--text-soft);
    border-left: 2px solid transparent;
}
.manual-sidebar__link:hover {
    color: var(--brand-blue-bright);
    border-left-color: var(--neutral-400);
    text-decoration: none;
}
.manual-sidebar__link.is-active {
    color: var(--brand-blue);
    font-weight: 600;
    border-left-color: var(--brand-sky);
    background: rgba(38, 164, 221, .08);
}

/* Contenido principal */
.manual-main {
    flex: 1;
    min-width: 0;
    padding: 2.5rem 3.5rem 4rem 3.5rem;
    background: var(--bg-page);
}

/* La franja de planes y las secciones del inicio se alinean con el ancho del héroe, no con la columna de texto. */
.manual-main > *:not(.doc-hero):not(.home-hero):not(.plan-availability):not(.plan-notice):not(.home-module):not(.home-note) {
    max-width: var(--content-max);
}

/* ------------------------------------------------------------ Tipografía */
h1, h2, h3, h4 {
    color: var(--text-main);
    line-height: 1.25;
    font-weight: 700;
}

h1 { font-size: 2.1rem; margin: 0 0 .6rem 0; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; margin: 2.6rem 0 .8rem 0; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem 0; }

p { margin: .6rem 0 1rem 0; }

/* Separador azul de marca bajo los H2 */
h2.doc-section-title {
    padding-bottom: .45rem;
    position: relative;
}
h2.doc-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--brand-sky);
}

/* --------------------------------------------------------------- Héroes -- */
/* Héroe plano en Adm Grey, sin degradados: la marca usa bloques de color sólido. */
.doc-hero,
.home-hero {
    background: var(--brand-indigo);
    color: #fff;
    padding: 3.5rem;
    margin-bottom: 3.5rem;
    max-width: 1080px;
}

.doc-hero h1, .home-hero h1 { color: #fff; }
.home-hero h1 { font-size: 2.6rem; }

/* Parte del título resaltada en Enterprise Blue (pasa AA sobre Adm Grey). */
.hero-highlight { color: var(--brand-sky); }

.doc-hero p, .home-hero p {
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 0;
}

.doc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-sky);
    margin-bottom: .9rem;
}
.doc-hero__eyebrow::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--brand-sky);
}

/* ---------------------------------------------------------------- Inicio */
.home-title { font-size: 1.85rem; margin: 0 0 .5rem 0; }
.home-intro { color: var(--neutral-700); margin: 0 0 2rem 0; }

/* Cada módulo del inicio: título con el cuadro de marca y, a la derecha, el enlace para ver
   todas sus guías (lo muestra manual-home.js solo cuando hay más de las que caben). */
.home-module { max-width: 1080px; margin-bottom: 2.5rem; }
.home-note { max-width: 1080px; }

.home-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border-soft);
}

.home-module__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: 1.35rem;
}
.home-module__title::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: var(--brand-sky);
}

.home-module__toggle {
    flex-shrink: 0;
    font-family: inherit;
    font-size: .88rem;
    color: var(--text-main);
    background: none;
    border: 0;
    padding: .2rem 0;
    cursor: pointer;
}
.home-module__toggle:hover { color: var(--brand-blue-bright); text-decoration: underline; }
.home-module__toggle:focus-visible { outline: 2px solid var(--brand-sky); outline-offset: 2px; }
.home-module__toggle[hidden] { display: none; }

/* Guías que no caben en el resumen del módulo hasta que el visitante pide verlas todas. */
.home-module .doc-card.is-overflow { display: none; }

/* Dos columnas en escritorio: las cuatro guías del resumen quedan en una cuadrícula de 2 x 2. */
.home-module .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    margin-bottom: 0;
}

/* --------------------------------------------------------------- Cards -- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0 2rem 0;
    max-width: 1080px;
}

.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    color: var(--text-main);
    box-shadow: var(--shadow-card);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.doc-card:hover {
    text-decoration: none;
    border-color: var(--brand-sky);
    box-shadow: var(--shadow-card-hover);
}
.doc-card:focus-visible { outline: 2px solid var(--brand-sky); outline-offset: 2px; }

.doc-card__module {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--neutral-700);
    margin-bottom: .75rem;
}
.doc-card__module::before {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    background: var(--brand-sky);
}

.doc-card__title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--text-main);
    margin-bottom: .75rem;
}

.doc-card__summary {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--neutral-700);
    margin: 0 0 1.25rem 0;
}

.doc-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.doc-card__tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--neutral-700);
    background: var(--neutral-300);
}

/* Empuja "Leer guía" al pie de la tarjeta para que queden alineados en cada fila. */
.doc-card__more {
    margin-top: auto;
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-main);
}
.doc-card:hover .doc-card__more { color: var(--brand-blue-bright); }

/* ------------------------------------------------------------- Secciones */
.doc-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.9rem;
    margin-bottom: 1.4rem;
    box-shadow: var(--shadow-card);
}
.doc-section > h2:first-child { margin-top: 0; }

/* Pasos numerados */
.doc-steps {
    list-style: none;
    counter-reset: doc-step;
    margin: 1rem 0;
    padding: 0;
}
.doc-steps > li {
    counter-increment: doc-step;
    position: relative;
    padding: 0 0 1.15rem 3rem;
}
.doc-steps > li::before {
    content: counter(doc-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-blue-bright);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2.2rem;
    bottom: .1rem;
    width: 2px;
    background: var(--border-soft);
}
.doc-steps > li > strong:first-child { color: var(--brand-indigo); }

/* Tablas */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.4rem 0;
    font-size: .9rem;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border-soft);
}
.doc-table th {
    background: var(--brand-indigo);
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: .6rem .9rem;
    font-size: .82rem;
    letter-spacing: .03em;
}
.doc-table td {
    padding: .6rem .9rem;
    border-top: 1px solid var(--border-soft);
    vertical-align: top;
}
.doc-table tbody tr:nth-child(even) { background: var(--neutral-200); }

/* Tablas anchas: envoltorio con desplazamiento horizontal propio, para que la
   pagina nunca se desplace en horizontal completa. Se usa envolviendo un
   .doc-table (normalmente junto con .doc-table--matrix). */
.table-scroll {
    overflow-x: auto;
    margin: 1rem 0 1.4rem 0;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--border-soft);
}
.table-scroll .doc-table {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Matriz de comparacion: muchas columnas estrechas y centradas. La primera
   columna queda fija al desplazarse para no perder de vista la funcionalidad. */
.doc-table--matrix {
    font-size: .82rem;
    min-width: 820px;
}
.doc-table--matrix th,
.doc-table--matrix td {
    padding: .45rem .5rem;
    text-align: center;
    vertical-align: middle;
}
.doc-table--matrix thead th { font-size: .74rem; letter-spacing: .01em; }
.doc-table--matrix thead th:first-child,
.doc-table--matrix td.row-label {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    min-width: 250px;
    box-shadow: 1px 0 0 var(--border-soft);
}
.doc-table--matrix thead th:first-child {
    background: var(--brand-indigo);
    z-index: 2;
}
.doc-table--matrix td.row-label {
    background: var(--bg-surface);
    padding-left: .9rem;
}
.doc-table--matrix tbody tr:nth-child(even) td.row-label { background: var(--neutral-200); }

/* Fila que separa un bloque tematico dentro de la matriz. */
.doc-table--matrix .matrix-group td,
.doc-table--matrix tbody tr:nth-child(even).matrix-group td {
    background: var(--neutral-300);
    color: var(--neutral-700);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .72rem;
    text-align: left;
    padding-left: .9rem;
}

/* Marcas de disponibilidad dentro de la matriz. */
.mark-yes { color: var(--brand-green); font-weight: 700; }
.mark-no { color: var(--neutral-500); }
.mark-opt { color: #B85A1E; font-weight: 600; font-size: .92em; }
.mark-num { font-weight: 600; }

/* Avisos (tip / info / warning) */
.callout {
    display: flex;
    gap: .8rem;
    border-radius: var(--radius-sm);
    padding: .95rem 1.1rem;
    margin: 1.1rem 0;
    font-size: .92rem;
    border: 1px solid;
}
.callout__icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.5; }
.callout p { margin: 0; }
.callout p + p { margin-top: .4rem; }

.callout--tip {
    background: #F2FBEC;
    border-color: rgba(63, 178, 6, .35);
}
.callout--tip .callout__icon { color: var(--brand-green); }

.callout--info {
    background: #EEF7FC;
    border-color: rgba(38, 164, 221, .4);
}
.callout--info .callout__icon { color: var(--brand-blue-bright); }

.callout--warning {
    background: #FFF8E1;
    border-color: rgba(255, 203, 6, .55);
}
.callout--warning .callout__icon { color: #B78900; }

/* Insignias (disponibilidad, permisos, solo lectura...) */
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.4rem 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .28rem .85rem;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid;
}
.badge--module { background: rgba(38, 164, 221, .1); border-color: rgba(38, 164, 221, .4); color: var(--brand-blue); }
.badge--permission { background: var(--neutral-300); border-color: var(--neutral-400); color: var(--neutral-700); }
.badge--readonly { background: var(--neutral-200); border-color: var(--neutral-400); color: var(--neutral-600); }

/* --------------------------------------------- Disponibilidad por plan --- */
/*
   Franja de planes. La dibuja el layout ARRIBA del héroe en TODAS las páginas,
   a partir de ManualPage.Plans, para que la disponibilidad esté siempre en el
   mismo sitio. Nunca repetir el plan como .badge dentro de la página.
*/
.plan-availability {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    max-width: 1080px;
    margin: 0 0 1rem 0;
}

.plan-availability__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-right: .15rem;
}

.plan-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .24rem .8rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Planes empaquetados: azul de marca oscurecido, para que la letra blanca pase WCAG AA. */
.plan-tag--pack {
    background: var(--brand-blue-bright);
    border-color: var(--brand-blue-bright);
    color: #fff;
}

/* Enterprise: Adm Grey con letra amarilla de marca. */
.plan-tag--enterprise {
    background: var(--brand-indigo);
    border-color: var(--brand-indigo);
    color: var(--brand-yellow);
}

/* Etiqueta de interfaz (nombre de botón/campo tal como se ve en pantalla) */
.ui-label {
    display: inline-block;
    background: var(--neutral-200);
    border: 1px solid var(--neutral-400);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 0 .45rem;
    font-size: .85em;
    font-weight: 600;
    color: var(--neutral-700);
    white-space: nowrap;
}

/* Check verde para listas de capacidades */
.check-list { list-style: none; padding: 0; margin: .8rem 0; }
.check-list > li {
    position: relative;
    padding: .28rem 0 .28rem 1.9rem;
}
.check-list > li::before {
    content: "✓";
    position: absolute;
    left: .25rem;
    color: var(--brand-green);
    font-weight: 700;
}

/* ------------------------------------------------------------- Pie ------ */
.manual-footer {
    background: var(--brand-indigo);
    color: #fff;
}

.manual-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2.4rem 3.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 3rem;
}

.manual-footer__logo { width: 172px; height: auto; display: block; margin-right: auto; }

.manual-footer__tagline,
.manual-footer__link {
    font-size: .95rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--neutral-400);
}
.manual-footer__link:hover { color: #fff; text-decoration: none; }

/* --------------------------------------------------------- Responsivo --- */
@media (max-width: 960px) {
    .manual-sidebar {
        display: none;
    }
    .manual-main { padding: 1.6rem 1.2rem 2.4rem 1.2rem; }
    .doc-hero, .home-hero { padding: 2rem 1.5rem; margin-bottom: 2.2rem; }
    .home-hero h1 { font-size: 2rem; }
    .manual-footer__inner { padding: 1.8rem 1.2rem; gap: .6rem 1.5rem; }
    .manual-footer__logo { width: 140px; margin-right: 0; }
    .manual-footer__tagline, .manual-footer__link { font-size: .78rem; letter-spacing: .16em; }
    .manual-header__doc-label { display: none; }
    .manual-header__divider { display: none; }
    /* El selector de plan se queda, pero sin su rotulo, para ganar ancho. */
    .plan-switch__label { display: none; }
    /* Con la barra lateral oculta, la búsqueda es la navegación principal: dale prioridad. */
    .manual-search { max-width: none; }
    .manual-search__hint { display: none; }
}

@media (max-width: 560px) {
    /* En pantallas muy estrechas ocultamos el botón de la app para que quepa la búsqueda. */
    .manual-header__app-link { display: none; }

    /*
       Con el filtro de plan sumado al idioma ya no cabe todo en una fila, así que el
       encabezado se parte en dos: arriba el logo y el idioma, abajo el filtro de plan y la
       búsqueda. display:contents saca a los controles de su envoltorio para poder
       repartirlos entre las dos filas sin cambiar el HTML.
    */
    .manual-header__inner {
        height: auto;
        flex-wrap: wrap;
        padding: .55rem 1rem;
        gap: .5rem .7rem;
    }
    .manual-header__actions { display: contents; }
    .manual-header__brand { order: 1; }
    .lang-switch { order: 2; margin-left: auto; }
    .plan-switch { order: 3; }
    /* min-width:0 para que el cuadro de búsqueda pueda encogerse y compartir la fila con
       el filtro; con el "auto" que trae por defecto su ancho mínimo lo empuja a otra fila. */
    .manual-search { order: 4; flex: 1 1 8rem; min-width: 0; }
    .plan-switch__select { max-width: 8rem; height: 36px; }
    .manual-search__box { height: 40px; }
    .lang-switch__option { height: 30px; min-width: 2.4rem; }
    /* El enlace "ver todas" baja bajo el título del módulo para no partir el nombre. */
    .home-module__header { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .doc-card { padding: 1.35rem; }
    /* El logo y los textos del pie, uno debajo del otro. */
    .manual-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------- Bloques de código --- */
/* Panel para mostrar ejemplos de plantillas HTML/Razor de varias líneas. */
.doc-code {
    margin: 1rem 0;
    padding: 1rem 1.2rem;
    background: var(--neutral-800);
    color: #E9EAF3;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.55;
    box-shadow: var(--shadow-card);
}
.doc-code code {
    display: block;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    white-space: pre;
    background: none;
    color: inherit;
    padding: 0;
}

/* ------------------------------------------------------------- Impresión */
@media print {
    .doc-code { color: #111; background: #f4f4f4; box-shadow: none; border: 1px solid #ccc; }
    .manual-header, .manual-sidebar, .manual-footer, .skip-link, .manual-search { display: none; }
    .manual-main { padding: 0; background: #fff; }
    .doc-hero, .home-hero { box-shadow: none; }
    .doc-section { box-shadow: none; border-color: #ccc; }
    /* Las etiquetas de plan se imprimen con borde para no depender del color de fondo. */
    .plan-tag { color: #111; background: transparent; border-color: #666; }
    .plan-switch, .plan-notice { display: none; }
}