:root {
    --mpv-primary: #0547a3;
    --mpv-primary-dark: #033872;
    --mpv-primary-light: #eaf1fb;
    --mpv-accent: #17c9d0;
    --mpv-success: #17c666;
    --mpv-warning: #ffb22b;
    --mpv-danger: #fc4b6c;
    --mpv-text: #2a3547;
    --mpv-muted: #7c8fac;
    --mpv-bg: #f6f8fc;
    --mpv-radius: 18px;
    --mpv-radius-sm: 12px;
    --mpv-shadow: 0 6px 24px rgba(5, 71, 163, 0.06);
    --mpv-shadow-hover: 0 12px 32px rgba(5, 71, 163, 0.12);
    --mpv-borde-control: #6b7280;
    --mpv-foco: #0547a3;
    --mpv-error: #b42318;
    --mpv-ok: #146c43;
}

body {
    font-family: "Plus Jakarta Sans", "Public Sans", -apple-system, sans-serif !important;
    color: var(--mpv-text);
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(23, 201, 208, .08), transparent 60%),
        radial-gradient(1000px 500px at -10% 10%, rgba(5, 71, 163, .06), transparent 55%),
        var(--mpv-bg) !important;
}

main.page-wrapper {
    background: transparent !important;
}

/* ---------- CABECERA ---------- */
/* La cabecera está fuera de main */
body > header > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100%;
}
.container-fluid>.card[style*="background"] {
    background: linear-gradient(120deg,
            var(--mpv-primary) 0%,
            #0a63cf 55%,
            #0a86b8 100%) !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 14px 40px rgba(5, 71, 163, .22);
    width: 100%;
}

/* Elemento decorativo, sin interferir con el contenido */
.container-fluid>.card[style*="background"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 90% 20%,
            rgba(255, 255, 255, .12) 0,
            transparent 45%),
        radial-gradient(circle at 15% 90%,
            rgba(255, 255, 255, .08) 0,
            transparent 40%);
    pointer-events: none;
}

/* Logo */
.container-fluid>.card[style*="background"] img {
    background: #fff;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* Título */
.container-fluid>.card[style*="background"] h1 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    opacity: 1 !important;
    background-image: none !important;
}

/* Nombre institucional */
.container-fluid>.card[style*="background"] p {
    font-size: .9rem !important;
    line-height: 1.15 !important;
    color: #fff !important;
    opacity: 1 !important;
    background-image: none !important;
}

/* ---------- TARJETAS GENERALES ---------- */
.card {
    border: none !important;
    border-radius: var(--mpv-radius) !important;
    box-shadow: var(--mpv-shadow);
    transition: box-shadow .25s ease, transform .25s ease;
}

.card:hover {
    box-shadow: var(--mpv-shadow-hover);
}

.card-body {
    padding: 1.4rem 1.6rem !important;
}

/* Icono circular de cabecera de sección */
.round-40 {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 1.1rem;
}

h2.fs-5 {
    font-weight: 700 !important;
    color: var(--mpv-text);
}

h3.fs-4 {
    font-weight: 700 !important;
    color: var(--mpv-text);
}

/* ---------- STEPPER ---------- */
.rounded-circle[style*="42px"] {
    box-shadow: 0 6px 16px rgba(5, 71, 163, .18);
}

.bg-success.rounded-circle {
    background: linear-gradient(135deg, #17c666, #12a854) !important;
}

.bg-primary.rounded-circle {
    background: linear-gradient(135deg, var(--mpv-primary), #0a86b8) !important;
}

/* ---------- FORMULARIOS ---------- */
.form-label {
    color: var(--mpv-text);
    margin-bottom: .45rem;
}

.form-control,
.form-select,
textarea.form-control {
    border-radius: var(--mpv-radius-sm) !important;
    border: 1.5px solid var(--mpv-borde-control) !important;
    padding: .72rem 1rem !important;
    background: #fbfcfe !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mpv-primary) !important;
    box-shadow: 0 0 0 4px rgba(5, 71, 163, .10) !important;
    background: #fff !important;
}

.form-control:disabled {
    background: #f1f4f9 !important;
    color: var(--mpv-muted) !important;
}

.form-text {
    color: var(--mpv-muted);
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--mpv-primary) !important;
    border-color: var(--mpv-primary) !important;
}

/* Tarjetas seleccionables (persona natural / jurídica) - compactas */
fieldset .card.border {
    border: 1.5px solid #e6ebf5 !important;
    border-radius: var(--mpv-radius-sm) !important;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    box-shadow: none;
}

fieldset .card.border .card-body {
    padding: .85rem 1rem !important;
}

fieldset .card.border .round-40 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: .95rem;
}

fieldset .card.border strong.d-block {
    font-size: .92rem;
}

fieldset .card.border small.text-muted {
    font-size: .78rem;
}

fieldset .card.border:hover {
    border-color: var(--mpv-primary) !important;
    transform: translateY(-2px);
}

fieldset .card.border:has(.form-check-input:checked) {
    border-color: var(--mpv-primary) !important;
    background: var(--mpv-primary-light);
    box-shadow: 0 8px 20px rgba(5, 71, 163, .10);
}

/* ---------- ALERTAS ---------- */
.alert {
    border: none !important;
    border-radius: var(--mpv-radius-sm) !important;
    box-shadow: var(--mpv-shadow);
}

.alert-primary {
    background: var(--mpv-primary-light) !important;
    color: var(--mpv-primary-dark) !important;
}

.alert-success {
    background: #e9fbf1 !important;
    color: #0c7a44 !important;
}

.alert-danger {
    background: #fdeaee !important;
    color: #b0263f !important;
}

/* ---------- BOTONES ---------- */
.btn {
    border-radius: 12px !important;
    font-weight: 600;
    padding: .65rem 1.3rem;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary {
    /* background: linear-gradient(120deg, var(--mpv-primary), #0a86b8) !important; */
    background: linear-gradient(120deg, var(--mpv-primary), #07649c) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(5, 71, 163, .25);
}

.btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(5, 71, 163, .32);
}

.btn-outline-primary {
    border: 1.5px solid var(--mpv-primary) !important;
    color: var(--mpv-primary) !important;
    background: #fff !important;
}

.btn-outline-primary:hover {
    background: var(--mpv-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-light {
    background: #f1f4f9 !important;
    border: 1.5px solid var(--mpv-borde-control) !important;
}

.btn-light:hover {
    background: #e6ebf5 !important;
}

/* Mantener el diseño original del botón */
.btn-primary {
    color: #ffffff !important;
}

/* Mantener el diseño al pasar el cursor */
.btn-primary:hover {
    color: #ffffff !important;
}

/* Foco visible al navegar con teclado */
/* .btn-primary:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 3px;
} */

/* ---------- LISTAS DE INFORMACIÓN ---------- */
ul.ps-3 li {
    margin-bottom: .6rem;
    line-height: 1.55;
}

ul.ps-3 li a {
    text-decoration: none;
}

ul.ps-3 li a:hover {
    text-decoration: underline;
}

hr {
    opacity: .08;
}

/* ---------- ARCHIVO ---------- */
input[type="file"].form-control {
    padding: .6rem 1rem !important;
}

/* Scrollbar suave */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cfd9ea;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 576px) {
    .card-body {
        padding: 1.25rem !important;
    }
}

.persona-option {
    width: 100%;
    height: 52px;
    padding: .55rem .85rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid var(--mpv-borde-control);
    border-radius: var(--mpv-radius-sm);
    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.persona-option:hover {
    border-color: var(--mpv-primary);
}

.persona-option .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.persona-text {
    line-height: 1.15;
}

.persona-subtext {
    font-size: 11px;
    margin-top: 2px;
}

.persona-option:has(.form-check-input:checked) {
    border-color: var(--mpv-primary);
    background: var(--mpv-primary-light);
    box-shadow: 0 3px 10px rgba(5, 71, 163, .08);
}

#tipo_documento {
    width: 100%;
    height: 52px !important;
    min-height: 52px !important;
    padding: .72rem 1rem !important;
}

#tipo_documento:disabled {
    background: #f1f4f9 !important;
    color: var(--mpv-muted) !important;
    cursor: not-allowed;
}

#tipo_documento.is-invalid {
    border-color: var(--mpv-error) !important;   /* antes: #fc4b6c */
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(252, 75, 108, .08);
}

#tipo_documento.is-valid {
    border-color: var(--mpv-ok) !important;      /* antes: #17c666 */
    background-image: none !important;
}

#documento-ayuda {
    margin-top: .35rem;
    font-size: .75rem;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .persona-option {
        height: 52px;
    }
}

/* Accesibilidad WCAG AA: contraste de textos secundarios */
:root {
    --bs-secondary-color: #595959;
}

/* Garantizar el color de los textos secundarios */
.text-muted {
    color: #595959 !important;
}

/* Accesibilidad WCAG AA: contraste de textos de error */
.text-danger {
    color: #b02a37 !important;
}

.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    min-height: 1.5rem;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.form-check .form-check-label {
    padding: .25rem .25rem;
}

.persona-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 1.5rem;
}

.persona-option .form-check-input {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.persona-text {
    min-width: 0;
}

/* =====================================================
   ACCESIBILIDAD WCAG 2.2 (1.4.11 y 2.4.7)
===================================================== */

/* ----- 1.4.11: casillas y radios ----- */
.form-check-input {
    border: 1.5px solid var(--mpv-borde-control);
}
.form-check-input:focus {
    border-color: var(--mpv-borde-control);
}
.form-check-input:checked {
    border-color: var(--mpv-foco) !important;
    background-color: var(--mpv-foco) !important;
}

/* ----- 1.4.11: error en campos (debe ganar al !important del borde base) ----- */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid {
    border-color: var(--mpv-error) !important;
}
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--mpv-ok) !important;
}

/* ----- 1.4.11: grupos de radios (los define el JS, faltaba la regla) ----- */
#personaContainer.is-invalid-group {
    border: 1.5px solid var(--mpv-error);
    border-radius: var(--mpv-radius-sm);
}
#estudianteContainer.is-invalid-group,
#discapacidadContainer.is-invalid-group {
    border-color: var(--mpv-error) !important;
}

/* ----- 1.4.11: tarjetas de persona (hover y seleccionada) ----- */
#estudianteContainer,
#discapacidadContainer,
.persona-option {
    border-color: var(--mpv-borde-control) !important;
}
.persona-option:hover,
.persona-option:has(.form-check-input:checked) {
    border-color: var(--mpv-foco) !important;
}

/* ----- 1.4.11: marco del editor Summernote ----- */
.note-editor.note-frame {
    border: 1px solid var(--mpv-borde-control);
}

/* ----- 2.4.7: foco visible ----- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-check-input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.persona-option:focus-within {
    outline: 3px solid var(--mpv-foco) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* sin doble anillo dentro de la tarjeta de persona */
.persona-option .form-check-input:focus-visible {
    outline: none !important;
}

/* pie azul: foco blanco */
.mpv-footer a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

/* Summernote: el foco va en el marco (el área interna queda recortada) */
.note-editor.note-frame:focus-within {
    outline: 3px solid var(--mpv-foco);
    outline-offset: 2px;
}
.note-editor .note-editable:focus-visible {
    outline: none !important;
}
.note-editor .note-btn:focus-visible {
    outline: 3px solid var(--mpv-foco) !important;
    outline-offset: -2px !important;
}


.alert a { color: #0547a3; text-decoration: underline; }

.text-primary { color: #0547a3 !important; }

/* ===== Botones de accesibilidad en la cabecera ===== */
.mpv-a11y-header {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    position: relative;
    z-index: 1;
}

.mpv-a11y-header button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 8px;
    cursor: pointer;
}

.mpv-a11y-header button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .2);
}

.mpv-a11y-header button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Activado (alto contraste): invierte colores */
.mpv-a11y-header button[aria-pressed="true"] {
    background: #fff;
    color: #0547a3;
}

/* IMPORTANTE: el foco global es azul y aquí no se vería sobre fondo azul */
.mpv-a11y-header button:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 3px !important;
}


/* =====================================================
   WCAG 1.4.11: ESTADOS DE CHECKBOX Y RADIO
   Unificar colores de error, válido y seleccionado
===================================================== */

/* Estado de error */
.form-check-input.is-invalid,
.form-check-input.is-invalid:checked {
    border-color: var(--mpv-error) !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Estado válido */
.form-check-input.is-valid,
.form-check-input.is-valid:checked {
    border-color: var(--mpv-ok) !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Estado normal seleccionado */
.form-check-input:checked:not(.is-invalid):not(.is-valid) {
    border-color: var(--mpv-foco) !important;
    background-color: var(--mpv-foco) !important;
}

/* Grupo de persona con error: borde del mismo color */
#personaContainer.is-invalid-group .persona-option {
    border-color: var(--mpv-error) !important;
}

/* Opción seleccionada sin error */
.persona-option:has(.form-check-input:checked):not(.is-invalid-group .persona-option) {
    border-color: var(--mpv-foco) !important;
}
/* body.mpv-alto-contraste .mpv-a11y-header button {
    border-color: #ffff00;
    color: #ffff00;
}
body.mpv-alto-contraste .mpv-a11y-header button[aria-pressed="true"] {
    background: #ffff00;
    color: #000;
} */


/* =====================================================
   MODO ALTO CONTRASTE
===================================================== */
body.mpv-alto-contraste {
    background: #000 !important;
    color: #fff !important;
}

/* Fondos y textos generales */
body.mpv-alto-contraste main,
body.mpv-alto-contraste .page-wrapper,
body.mpv-alto-contraste .card,
body.mpv-alto-contraste .card-body,
body.mpv-alto-contraste .alert,
body.mpv-alto-contraste .border,
body.mpv-alto-contraste .persona-option,
body.mpv-alto-contraste #estudianteContainer,
body.mpv-alto-contraste #discapacidadContainer {
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.mpv-alto-contraste .card,
body.mpv-alto-contraste .alert,
body.mpv-alto-contraste .border,
body.mpv-alto-contraste .persona-option,
body.mpv-alto-contraste #estudianteContainer,
body.mpv-alto-contraste #discapacidadContainer {
    border: 2px solid #fff !important;
}

body.mpv-alto-contraste h1,
body.mpv-alto-contraste h2,
body.mpv-alto-contraste h3,
body.mpv-alto-contraste p,
body.mpv-alto-contraste span,
body.mpv-alto-contraste small,
body.mpv-alto-contraste label,
body.mpv-alto-contraste li,
body.mpv-alto-contraste strong,
body.mpv-alto-contraste .text-muted,
body.mpv-alto-contraste .text-dark,
body.mpv-alto-contraste .form-text {
    color: #fff !important;
}

/* Cabecera y pie: fondo negro con línea blanca */
body.mpv-alto-contraste .container-fluid > .card[style*="background"],
body.mpv-alto-contraste .mpv-footer {
    background: #000 !important;
    background-image: none !important;
    border-bottom: 2px solid #fff !important;
}
body.mpv-alto-contraste .mpv-footer { border-top: 2px solid #fff !important; border-bottom: 0 !important; }
body.mpv-alto-contraste .container-fluid > .card[style*="background"]::before { display: none; }

/* Enlaces */
body.mpv-alto-contraste a,
body.mpv-alto-contraste .text-primary,
body.mpv-alto-contraste .mpv-footer a {
    color: #ffff00 !important;
    text-decoration: underline;
}

/* Campos */
body.mpv-alto-contraste .form-control,
body.mpv-alto-contraste .form-select,
body.mpv-alto-contraste textarea.form-control {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
body.mpv-alto-contraste .form-control::placeholder { color: #ccc !important; }
body.mpv-alto-contraste .form-control:disabled,
body.mpv-alto-contraste .form-control[readonly] {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.mpv-alto-contraste .form-check-input {
    background-color: #000 !important;
    border: 2px solid #fff !important;
}
/* Radios y checkbox seleccionados en alto contraste */
body.mpv-alto-contraste .form-check-input[type="radio"]:checked {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    background-image: radial-gradient(
        circle,
        #000 0 35%,
        transparent 40%
    ) !important;
}

body.mpv-alto-contraste .form-check-input[type="checkbox"]:checked {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3e%3c/svg%3e") !important;
}
/* Botones de la página */
body.mpv-alto-contraste .btn,
body.mpv-alto-contraste .btn-primary,
body.mpv-alto-contraste .btn-outline-primary,
body.mpv-alto-contraste .btn-light {
    background: #000 !important;
    background-image: none !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
    box-shadow: none !important;
}
body.mpv-alto-contraste .btn:hover {
    background: #ffff00 !important;
    color: #000 !important;
}

/* Estados de error y acierto */
body.mpv-alto-contraste .text-danger,
body.mpv-alto-contraste .invalid-feedback { color: #ff8a80 !important; }
body.mpv-alto-contraste .form-control.is-invalid,
body.mpv-alto-contraste .is-invalid-group { border-color: #ff8a80 !important; }
body.mpv-alto-contraste .form-control.is-valid { border-color: #7dff9b !important; }

/* Stepper (círculos de los pasos) */
body.mpv-alto-contraste .rounded-circle {
    background: #000 !important;
    background-image: none !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}

/* Editor Summernote */
body.mpv-alto-contraste .note-editor,
body.mpv-alto-contraste .note-editor .note-toolbar,
body.mpv-alto-contraste .note-editor .note-editing-area,
body.mpv-alto-contraste .note-editor .note-editable {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.mpv-alto-contraste .note-editor .note-btn {
    background: #000 !important;
    color: #ffff00 !important;
    border: 1px solid #ffff00 !important;
}

/* Foco */
body.mpv-alto-contraste a:focus-visible,
body.mpv-alto-contraste button:focus-visible,
body.mpv-alto-contraste .btn:focus-visible,
body.mpv-alto-contraste .form-control:focus-visible,
body.mpv-alto-contraste .form-select:focus-visible,
body.mpv-alto-contraste .form-check-input:focus-visible,
body.mpv-alto-contraste .persona-option:focus-within {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* Botones de accesibilidad de la cabecera */
body.mpv-alto-contraste .mpv-a11y-header button {
    background: #000;
    border-color: #ffff00;
    color: #ffff00;
}
body.mpv-alto-contraste .mpv-a11y-header button[aria-pressed="true"] {
    background: #ffff00;
    color: #000;
}
body.mpv-alto-contraste .mpv-a11y-header button:focus-visible {
    outline: 3px solid #fff !important;
}

/* ===== Consulta: contraste del resultado (1.4.3) ===== */
.badge.bg-success { background-color: #146c43 !important; color: #fff !important; }
.badge.bg-danger  { background-color: #b42318 !important; color: #fff !important; }
.badge.bg-warning { color: #000 !important; }

#consulta-publica-resultado a,
#consulta-publica-resultado .btn-link {
    color: #0547a3 !important;
    text-decoration: underline;
}

/* ===== Alto contraste: tablas y resultado ===== */
body.mpv-alto-contraste .table,
body.mpv-alto-contraste .table > :not(caption) > * > *,
body.mpv-alto-contraste #consulta-publica-resultado [style*="background"],
body.mpv-alto-contraste .bg-primary-subtle {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}
body.mpv-alto-contraste .badge {
    background: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00;
}
body.mpv-alto-contraste #consulta-publica-resultado a,
body.mpv-alto-contraste #consulta-publica-resultado .btn-link {
    color: #ffff00 !important;
}


.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .9rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.5rem !important;
}

/* El mensaje solo se muestra cuando el select está marcado como inválido */
#tipo_documento_tramite:not(.is-invalid) ~ #tipo-documento-error {
    display: none !important;
}
#tipo_documento_tramite.is-invalid ~ #tipo-documento-error {
    display: block !important;
}


/* =====================================================
   ALTO CONTRASTE: MARCA VISIBLE EN CHECKBOX Y RADIO
===================================================== */

/* Checkbox y radio sin seleccionar */
body.mpv-alto-contraste .form-check-input[type="checkbox"],
body.mpv-alto-contraste .form-check-input[type="radio"] {
    background-color: #000 !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
}

/* Checkbox seleccionado: fondo amarillo y marca negra */
body.mpv-alto-contraste .form-check-input[type="checkbox"]:checked {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3e%3c/svg%3e") !important;
}

/* Radio seleccionado: círculo amarillo con punto negro */
body.mpv-alto-contraste .form-check-input[type="radio"]:checked {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    background-image: radial-gradient(circle, #000 0 35%, transparent 40%) !important;
}

/* Mantener foco visible con teclado */
body.mpv-alto-contraste .form-check-input:focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
}


/* Panel de transcripción */
.mpv-panel-transcripcion {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--mpv-borde-control);
    border-radius: var(--mpv-radius-sm);
    background: #fff;
    color: var(--mpv-text);
    line-height: 1.6;
}

.mpv-panel-transcripcion[hidden] {
    display: none !important;
}

#a11y-texto-transcripcion {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Alto contraste */
body.mpv-alto-contraste .mpv-panel-transcripcion {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
}

body.mpv-alto-contraste .mpv-panel-transcripcion h2 {
    color: #fff;
}

.mpv-manual-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 6px 8px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 4px;
    font-size: 0.780rem;
}

.mpv-manual-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

.mpv-manual-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* =====================================================
   BLOQUE DE DISCAPACIDAD
   Parte 1: modo normal (contraste AA)
   Parte 2: modo alto contraste (body.mpv-alto-contraste)
   Colócalo AL FINAL de tu hoja de estilos.
===================================================== */


/* =====================================================
   PARTE 1: MODO NORMAL
===================================================== */

/* Panel "¿Qué significa cada tipo?" */
.mpv-ayuda-panel {
    background-color: #eaf2fd;
    border: 2px solid #0547a3;
    border-radius: .5rem;
    color: #212529;
}

.mpv-ayuda-panel p,
.mpv-ayuda-panel dd {
    color: #212529;
}

.mpv-ayuda-panel dt {
    color: #052c65;
    font-weight: 700;
    margin-top: .5rem;
}

.mpv-ayuda-panel dt:first-child {
    margin-top: 0;
}

.mpv-ayuda-panel dd {
    margin-bottom: .25rem;
}

/* Botón "Cerrar ayuda" */
.mpv-btn-cerrar {
    background-color: #fff;
    border: 2px solid #0547a3;
    color: #0547a3;
    font-weight: 600;
}

.mpv-btn-cerrar:hover,
.mpv-btn-cerrar:focus-visible {
    background-color: #0547a3;
    color: #fff;
}

/* Descripción de la opción elegida */
.mpv-tipo-descripcion {
    background-color: #eaf2fd;
    border-left: 4px solid #0547a3;
    border-radius: .25rem;
    color: #212529;
    font-weight: 500;
    padding: .5rem .75rem;
}

/* Sin texto: la caja desaparece visualmente, pero sigue en el DOM
   para que el lector de pantalla anuncie los cambios (aria-live) */
.mpv-tipo-descripcion:empty {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 !important;
}

/* Enlace "¿Qué significa cada tipo?" (sin !important para no pisar el alto contraste) */
#btnAyudaTipo {
    color: #0547a3;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#btnAyudaTipo:hover {
    color: #052c65;
}

/* Textos del bloque */
#discapacidadContainer legend,
#discapacidadContainer .form-label,
#discapacidadContainer .form-check-label,
#discapacidadContainer #discapacidad-ayuda {
    color: #212529;
}

/* Mensajes de error con algo más de peso */
#discapacidadContainer [role="alert"] {
    font-weight: 600;
}

/* Recuadro con error en el grupo Sí/No: fondo suave como refuerzo */
#discapacidadContainer.is-invalid-group {
    background-color: #fff5f5;
}

/* Texto de ayuda de formularios (el gris anterior no llegaba a 4.5:1) */
.form-text {
    color: #595959;
}


/* =====================================================
   PARTE 2: MODO ALTO CONTRASTE
===================================================== */

/* Panel de ayuda */
body.mpv-alto-contraste .mpv-ayuda-panel {
    background: #000 !important;
    border: 2px solid #ffff00 !important;
    color: #fff !important;
}

body.mpv-alto-contraste .mpv-ayuda-panel :is(p, dd) {
    color: #fff !important;
}

body.mpv-alto-contraste .mpv-ayuda-panel dt {
    color: #ffff00 !important;
}

/* Descripción de la opción elegida */
body.mpv-alto-contraste .mpv-tipo-descripcion {
    background: #000 !important;
    border-left: 4px solid #ffff00 !important;
    color: #fff !important;
}

/* Sin texto: que no quede una barra amarilla vacía */
body.mpv-alto-contraste .mpv-tipo-descripcion:empty {
    border: 0 !important;
    padding: 0 !important;
}

/* Botón "Cerrar ayuda": ya lo cubre la regla .btn del alto contraste
   (negro, borde y texto amarillos). Solo se refuerza el hover. */
body.mpv-alto-contraste .mpv-btn-cerrar:hover {
    background: #ffff00 !important;
    color: #000 !important;
}

/* Enlace de ayuda */
body.mpv-alto-contraste #btnAyudaTipo {
    color: #ffff00 !important;
}

/* Asterisco y errores: rosa claro sobre negro.
   Lleva #discapacidadContainer para ganar a la regla de la parte 1. */
body.mpv-alto-contraste #discapacidadContainer .text-danger,
body.mpv-alto-contraste #discapacidadContainer [role="alert"] {
    color: #ff8a80 !important;
}

/* Recuadro con error */
body.mpv-alto-contraste #discapacidadContainer.is-invalid-group {
    background: #000 !important;
    border-color: #ff8a80 !important;
}

/* Flecha del select en blanco (la oscura desaparece sobre fondo negro) */
body.mpv-alto-contraste .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .9rem center !important;
    background-size: 16px 12px !important;
}

/* Texto de ayuda de formularios */
body.mpv-alto-contraste .form-text {
    color: #fff !important;
}


/* =====================================================
   PARTE 3: MODOS DEL SISTEMA (opcional)
===================================================== */

/* Alto contraste de Windows */
@media (forced-colors: active) {
    .mpv-ayuda-panel,
    .mpv-tipo-descripcion {
        border-color: CanvasText;
    }
}

/* La persona pidió más contraste en su sistema */
@media (prefers-contrast: more) {
    .mpv-ayuda-panel,
    .mpv-tipo-descripcion {
        background-color: #fff;
        border-color: #000;
    }
}

/* La leyenda no estaba en la lista de textos del alto contraste */
body.mpv-alto-contraste legend {
    color: #fff !important;
}

/* Enlace de ayuda al pasar el mouse: texto negro sobre fondo amarillo */
body.mpv-alto-contraste #btnAyudaTipo:hover {
    background: #ffff00 !important;
    color: #000 !important;
}


/* Encuesta de satisfacción */
.mpv-encuesta {
    border: 2px solid #6b7280 !important;
}

.mpv-encuesta p {
    color: #212529;
}

.mpv-encuesta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: .5rem;
    background: #fff4d6;
    color: #7a4b00;
    font-size: 1.25rem;
}

/* Alto contraste */
body.mpv-alto-contraste .mpv-encuesta p {
    color: #fff !important;
}

body.mpv-alto-contraste .mpv-encuesta-icono {
    background: #000 !important;
    border: 2px solid #ffff00;
    color: #ffff00 !important;
}

/* =====================================================
   SUBTÍTULOS (barra inferior, como los de un video)
   Colócalo AL FINAL de tu hoja de estilos.
   Reemplaza al CSS anterior de la transcripción.
===================================================== */

/* ---------- Modo normal ---------- */

.mpv-subtitulos {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; /* sobre el contenido, bajo los modales y SweetAlert */
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: #000; /* sólido, sin transparencia: el contraste no depende de lo que haya detrás */
    color: #fff;
    border-top: 3px solid #ffd400;
}

.mpv-subtitulos[hidden] {
    display: none !important;
}

.mpv-subtitulos-interior {
    max-width: 60rem;
    margin: 0 auto;
}

.mpv-subtitulos-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.mpv-subtitulos-estado {
    font-size: .85rem;
    font-weight: 700;
    color: #ffd400;
}

.mpv-subtitulos-controles {
    display: flex;
    gap: .5rem;
}

.mpv-subtitulos-controles button {
    min-height: 32px;
    padding: .2rem .8rem;
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: .5rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.mpv-subtitulos-controles button:hover {
    background: #fff;
    color: #000;
}

/* El foco global es azul y sobre negro no se vería */
.mpv-subtitulos button:focus-visible {
    outline: 3px solid #ffd400 !important;
    outline-offset: 2px !important;
}

/* Texto del subtítulo: se reserva el alto de dos líneas para que no salte */
.mpv-subtitulo-texto {
    margin: 0;
    min-height: calc(2 * 1.4em);
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

@media print {
    .mpv-subtitulos {
        display: none !important;
    }
}

/* ---------- Modo alto contraste ---------- */

body.mpv-alto-contraste .mpv-subtitulos {
    background: #000 !important;
    border-top: 3px solid #ffff00 !important;
}

body.mpv-alto-contraste .mpv-subtitulos .mpv-subtitulos-estado {
    color: #ffff00 !important;
}

body.mpv-alto-contraste .mpv-subtitulo-texto {
    color: #ffff00 !important;
}

body.mpv-alto-contraste .mpv-subtitulos-controles button {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

body.mpv-alto-contraste .mpv-subtitulos-controles button:hover {
    background: #ffff00 !important;
    color: #000 !important;
}