/* Bootstrap general del sitio */

/* Botón flotante de accesibilidad */
.accessibility-toggle {
    position: fixed;
    right: 22px;
    bottom: 20px;
    z-index: 1040;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(140deg, #159e80, #087d45);
    color: #fff;
    box-shadow: 0 5px 20px #152e3938;
    cursor: pointer;
}

    .accessibility-toggle:hover {
        background: #087447;
    }

    .accessibility-toggle svg, .accessibility-panel svg {
        display: block;
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .accessibility-toggle svg {
        width: 28px;
        height: 28px;
    }

/* Panel principal de accesibilidad */
.accessibility-panel {
    --a11y-surface: #fff;
    --a11y-ink: #252f3e;
    --a11y-muted: #606c80;
    --a11y-border: #e4e7e9;
    --a11y-tint: #effaf5;
    --a11y-accent: #087c48;
    position: fixed;
    z-index: 1045;
    right: 22px;
    bottom: 96px;
    width: 18rem;
    max-width: calc(100% - 28px);
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    background: var(--a11y-surface);
    color: var(--a11y-ink);
    border: 1px solid #d8eee2;
    border-radius: 22px;
    box-shadow: 0 15px 50px #172d3d26;
    overflow: auto;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
    font-size: .875rem;
    line-height: 1.4;
}

    .accessibility-panel.showing, .accessibility-panel.hiding, .accessibility-panel.show {
        visibility: visible;
    }

        .accessibility-panel.showing, .accessibility-panel.show:not(.hiding) {
            transform: none;
            opacity: 1;
        }

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: #10232b;
}

    .offcanvas-backdrop.fade {
        opacity: 0;
        transition: opacity .2s;
    }

    .offcanvas-backdrop.show {
        opacity: .12;
    }

.accessibility-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--a11y-border);
}

    .accessibility-heading h2 {
        color: inherit;
        font-size: 1rem;
        font-weight: 800;
        margin: 0 0 2px;
    }

    .accessibility-heading p {
        color: var(--a11y-muted);
        font-size: .75rem;
        margin: 0;
    }

.accessibility-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    padding: 5px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #515e6d;
    cursor: pointer;
}

    .accessibility-close svg {
        width: 18px;
        height: 18px;
    }

.accessibility-body {
    padding: 10px 14px 15px;
    display: grid;
    gap: 9px;
}

.accessibility-size {
    text-align: center;
    border: 1px solid #c5ebd9;
    border-radius: 15px;
    padding: 9px 12px 12px;
    background: linear-gradient(130deg, #eafbfa, var(--a11y-tint));
}

.accessibility-sample {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.3;
}

.accessibility-size h3 {
    font-size: .875rem;
    margin: 3px 0 10px;
    font-weight: 800;
}

.accessibility-size-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

    .accessibility-size-actions button {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        padding: 5px;
        border: 0;
        border-radius: 11px;
        color: #fff;
        background: linear-gradient(130deg, #159e80, #087d45);
        cursor: pointer;
    }

        .accessibility-size-actions button[aria-disabled="true"] {
            background: #a3ddc8;
            color: #306450;
            cursor: default;
        }

    .accessibility-size-actions output {
        min-width: 3.2rem;
        padding: 6px 8px;
        border: 1px solid #d5eee0;
        border-radius: 30px;
        font-weight: 800;
        font-size: .7rem;
        background: var(--a11y-surface);
        color: var(--a11y-accent);
    }

.accessibility-option {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 11px;
    border: 1px solid var(--a11y-border);
    border-radius: 15px;
    background: var(--a11y-surface);
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
}

    .accessibility-option strong {
        display: block;
        font-size: .8125rem;
        font-weight: 750;
    }

.accessibility-hint {
    display: block;
    margin-top: 2px;
    font-size: .6875rem;
    color: var(--a11y-muted);
}

.accessibility-icon {
    flex: 0 0 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #dbf3ea;
    color: #087c48;
}

.accessibility-icon-fill {
    fill: currentColor;
    stroke: none;
}

.accessibility-option:hover, .accessibility-option[aria-pressed="true"] {
    border-color: var(--a11y-accent);
    background: var(--a11y-tint);
}

.accessibility-option[aria-pressed="true"] {
    box-shadow: inset 3px 0 var(--a11y-accent);
}

.accessibility-reset {
    border-color: #ffd3dc;
}

    .accessibility-reset .accessibility-icon {
        background: #fbe7ec;
        color: #ad3151;
    }

.accessibility-panel :focus-visible, .accessibility-toggle:focus-visible {
    outline: 3px solid #6030a8;
    outline-offset: 3px;
}

/* Escalas de tamaño de texto */
:root[data-text-size="125"] {
    font-size: 20px;
}

:root[data-text-size="150"] {
    font-size: 24px;
}

:root[data-text-size="175"] {
    font-size: 28px;
}

:root[data-text-size="200"] {
    font-size: 32px;
}

.footer-sena {
    font-size: .75rem;
    line-height: 1.3334;
}

    .footer-sena .footer-title, .footer-sena h3 {
        font-size: .875rem;
        line-height: 1.2858;
    }

.footer-social a, .footer-links a {
    font-size: .75rem;
    line-height: 1.5;
}

html:not([data-text-size="100"]) .brand {
    flex-wrap: wrap;
}

html:not([data-text-size="100"]) .brand-copy {
    overflow-wrap: anywhere;
}

html:not([data-text-size="100"]) .button {
    white-space: normal;
    overflow-wrap: anywhere;
}

html:not([data-text-size="100"]) .footer-links a {
    overflow-wrap: anywhere;
}

:is([data-text-size="175"], [data-text-size="200"]) .fields {
    grid-template-columns: minmax(0, 1fr);
}

:is([data-text-size="175"], [data-text-size="200"]) .field-mode {
    width: 100%;
}

/* Modo oscuro */
:root.accessibility-dark {
    --nomenclature-art-bg: linear-gradient(135deg, #173f40, #254039);
    --nomenclature-copy-bg: #352249;
    --results-row-hover: #303b4c;
    color-scheme: dark;
    --visual-bg: #121820;
    --visual-surface: #1c2733;
    --visual-ink: #f1f5fa;
    --visual-muted: #c0ccda;
    --visual-border: #8094a8;
    --visual-accent: #d7b8ff;
    --visual-link: #a6d6ff;
    --visual-error: #ffb4bc;
    --purple: #d7b8ff;
    --green: #96e9b7;
}

/* Modo de alto contraste */
:root.accessibility-contrast {
    --nomenclature-art-bg: #000;
    --nomenclature-copy-bg: #000;
    --nomenclature-ink: #fff;
    --results-row-hover: #303030;
    color-scheme: dark;
    --visual-bg: #000;
    --visual-surface: #000;
    --visual-ink: #fff;
    --visual-muted: #fff;
    --visual-border: #fff;
    --visual-accent: #ffed00;
    --visual-link: #ffed00;
    --visual-error: #ffbfc5;
    --purple: #ffed00;
    --green: #ffed00;
}

:root:is(.accessibility-dark, .accessibility-contrast) {
    background: var(--visual-bg);
    color: var(--visual-ink);
}

:is(.accessibility-dark, .accessibility-contrast) :is(.card, .input-shell, select option, .notice, th, .secondary, .skip-link:focus) {
    background: var(--visual-surface);
    color: var(--visual-ink);
    border-color: var(--visual-border);
}

:is(.accessibility-dark, .accessibility-contrast) :is(input, select, .card h2) {
    color: var(--visual-ink);
}

:is(.accessibility-dark, .accessibility-contrast) :is(small, .intro > p:last-child, input::placeholder) {
    color: var(--visual-muted);
}

:is(.accessibility-dark, .accessibility-contrast) :is(a, .footer-sena a) {
    color: var(--visual-link);
}

:is(.accessibility-dark, .accessibility-contrast) .primary {
    background: var(--visual-accent);
    color: #15101c;
}

:is(.accessibility-dark, .accessibility-contrast) .validation {
    color: var(--visual-error);
}

:is(.accessibility-dark, .accessibility-contrast) :is(th, td, .verification, .input-shell::before) {
    border-color: var(--visual-border);
}

:is(.accessibility-dark, .accessibility-contrast) .accessibility-panel {
    --a11y-surface: var(--visual-surface);
    --a11y-ink: var(--visual-ink);
    --a11y-muted: var(--visual-muted);
    --a11y-border: var(--visual-border);
    --a11y-tint: var(--visual-bg);
    --a11y-accent: var(--visual-accent);
    border-color: var(--visual-border);
}

:is(.accessibility-dark, .accessibility-contrast) .accessibility-size {
    background: var(--visual-bg);
    border-color: var(--visual-border);
}

:is(.accessibility-dark, .accessibility-contrast) :is(.accessibility-icon, .accessibility-close) {
    background: var(--visual-bg);
    color: var(--visual-accent);
}

:is(.accessibility-dark, .accessibility-contrast) :focus-visible {
    outline-color: var(--visual-accent);
}

.accessibility-dark .brandbar::before {
    background: #09151dba;
}

.accessibility-dark :is(.footer-sena, .topbar) {
    background: #211932;
}

.accessibility-contrast :is(.brandbar, .footer-sena, .topbar, .brand-logo) {
    background: #000;
    color: #fff;
}

.accessibility-contrast .brandbar::before {
    background: none;
}

.accessibility-contrast a {
    text-decoration: underline;
}

.accessibility-contrast .nomenclature-card {
    border-color: #fff;
}

.accessibility-contrast .nomenclature-label {
    color: #ffed00;
}

html:not([data-text-size="100"]) .nomenclature-cards.is-interactive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-items: start;
}

.accessibility-contrast :is(.accessibility-size-actions button, .accessibility-toggle) {
    background: #ffed00;
    color: #000;
    border: 2px solid #fff;
}

.accessibility-contrast .accessibility-size-actions button[aria-disabled="true"] {
    background: #000;
    color: #fff;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 420px) {
    .accessibility-toggle {
        right: 14px;
    }

    .accessibility-panel {
        right: 14px;
    }

    html:not([data-text-size="100"]) .input-icon, html:not([data-text-size="100"]) .input-shell::before {
        display: none;
    }

    html:not([data-text-size="100"]) :is(input, select) {
        padding-left: 14px;
    }
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .accessibility-panel, .offcanvas-backdrop.fade {
        transition: none;
    }
}

/* Ajustes de impresión */
@media print {
    .accessibility-toggle, .accessibility-panel, .offcanvas-backdrop {
        display: none !important;
    }
}