/* Corrección de enfoque para títulos */
h1:focus, h1:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Temas del Sistema y Legibilidad de Textos */
.light-theme {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.dark-theme {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

    .dark-theme .card,
    .dark-theme .big-action-btn {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme h1, .dark-theme h2, .dark-theme h3,
    .dark-theme h4, .dark-theme h5, .dark-theme h6,
    .dark-theme .action-title {
        color: #ffffff !important;
    }

    .dark-theme .text-muted,
    .dark-theme p.text-muted,
    .dark-theme .small {
        color: #b0b0b0 !important; /* Gris claro de alta legibilidad */
    }

    /* Barra superior, barra lateral y checklist de calificación: usan clases utilitarias de
       Bootstrap (bg-body, bg-body-tertiary, list-group-item) que no reaccionan a este sistema
       de temas por clase, así que se redefinen explícitamente. */
    .dark-theme .navbar,
    .dark-theme nav.border-end {
        background-color: #1a1a1a !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .navbar-brand {
        color: #6ea8fe !important;
    }

    .dark-theme .list-group-item {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .nav-link {
        color: #d0d0d0 !important;
    }

        .dark-theme .nav-link:hover,
        .dark-theme .nav-link.active {
            color: #ffffff !important;
        }

    /* Campos de formulario: Bootstrap los deja siempre claros por defecto. */
    .dark-theme .form-control,
    .dark-theme .form-select {
        background-color: #2a2a2a !important;
        color: #f0f0f0 !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

        .dark-theme .form-control::placeholder {
            color: #8a8a8a !important;
        }

        .dark-theme .form-control:disabled,
        .dark-theme .form-select:disabled {
            background-color: #232323 !important;
            color: #9a9a9a !important;
        }

        .dark-theme .form-control:focus,
        .dark-theme .form-select:focus {
            background-color: #2a2a2a !important;
            color: #f0f0f0 !important;
        }

    .dark-theme .form-check-input {
        background-color: #2a2a2a;
        border-color: rgba(255, 255, 255, 0.35);
    }

        .dark-theme .form-check-input:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

    .dark-theme .form-check-label {
        color: #d8d8d8;
    }

    .dark-theme .form-label {
        color: #d8d8d8;
    }

    /* Paneles de aviso (Bootstrap alert-*): sus colores pastel por defecto (fondo casi blanco,
       letra oscura) pierden todo contraste sobre el fondo oscuro de la interfaz. Se oscurece el
       fondo y se aclara la letra, conservando el matiz propio de cada severidad. */
    .dark-theme .alert-danger {
        background-color: #47161a !important;
        color: #ffb4ba !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .alert-warning {
        background-color: #4a3c0c !important;
        color: #ffe08a !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .alert-info {
        background-color: #0d3b4a !important;
        color: #9fe3ff !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .alert-success {
        background-color: #103a1d !important;
        color: #9ce8b3 !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* Bordes genéricos de Bootstrap (.border): no reaccionan al tema por clase de esta interfaz,
       así que se quedan grises y casi invisibles sobre fondo oscuro (p. ej. los subpaneles de
       cada compareciente o acto adicional). */
    .dark-theme .border {
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    /* Tablas (.table): Bootstrap las colorea con variables (--bs-table-bg/--bs-table-color/etc.)
       que este sistema de temas —por clase, no por el atributo nativo data-bs-theme— nunca
       redefine, así que sin esto se quedan con fondo y letra claros pase lo que pase con el
       tema (p. ej. el desglose de timbres, Mis Escrituras, Auditoría, Mis tomos, Reportes). */
    .dark-theme .table {
        --bs-table-bg: transparent;
        --bs-table-color: #e0e0e0;
        --bs-table-border-color: rgba(255, 255, 255, 0.15);
        --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
        --bs-table-striped-color: #e0e0e0;
        --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
        --bs-table-hover-color: #ffffff;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }

    .dark-theme .table-success {
        --bs-table-bg: #103a1d;
        --bs-table-color: #9ce8b3;
        --bs-table-border-color: rgba(255, 255, 255, 0.15);
    }

    .dark-theme .table-warning {
        --bs-table-bg: #4a3c0c;
        --bs-table-color: #ffe08a;
        --bs-table-border-color: rgba(255, 255, 255, 0.15);
    }

    .dark-theme .table-danger {
        --bs-table-bg: #47161a;
        --bs-table-color: #ffb4ba;
        --bs-table-border-color: rgba(255, 255, 255, 0.15);
    }

    /* Insignias (.badge): las de contexto (success/warning/danger/primary/secondary) ya traen
       su propio color sólido y se ven bien en cualquier tema; "text-bg-light" es la excepción
       (gris casi blanco con letra oscura, pensada para fondos claros) y queda fuera de lugar
       sobre la interfaz oscura. */
    .dark-theme .text-bg-light {
        background-color: #3a3a3a !important;
        color: #e0e0e0 !important;
    }

    .dark-theme .card-header {
        background-color: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .dark-theme .list-group-item-action:hover,
    .dark-theme .list-group-item-action:focus {
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }

    .dark-theme .list-group-item-action.active {
        background-color: rgba(var(--bs-primary-rgb), 0.25) !important;
        border-color: var(--bs-primary) !important;
        color: #ffffff !important;
    }

    /* Pestañas (.nav-tabs, usadas en Reportes): Bootstrap dibuja la pestaña activa con fondo
       blanco por defecto, que no reacciona a este tema por clase. */
    .dark-theme .nav-tabs {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .dark-theme .nav-tabs .nav-link.active {
        background-color: #1e1e1e !important;
        border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) #1e1e1e !important;
        color: #ffffff !important;
    }

    .dark-theme .input-group-text {
        background-color: #2a2a2a !important;
        color: #d8d8d8 !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

/* Contenedor y Estética Moderna */
.home-container {
    background: radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), 0.05), transparent 40%), radial-gradient(circle at bottom left, rgba(var(--bs-secondary-rgb), 0.03), transparent 40%);
}

.glass-card {
    background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .glass-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
    }

.icon-glow-wrapper {
    display: inline-flex;
    padding: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.icon-circle {
    font-size: 3rem;
    line-height: 1;
}

.theme-selector-group {
    background: rgba(var(--bs-body-color-rgb), 0.05);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.7s ease-out forwards;
}

.animate-slide-up-delayed {
    animation: slideUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

/* Estilos modernos para los Botones de Acción Gigantes */
.big-action-btn {
    background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .big-action-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08) !important;
        border-color: var(--bs-primary);
    }

.action-icon-wrapper {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    transition: background 0.3s ease, transform 0.3s ease;
}

.big-action-btn:hover .action-icon-wrapper {
    background: var(--bs-primary);
    color: #fff;
    transform: scale(1.05);
}

.action-title {
    color: var(--bs-body-color) !important;
}

.action-arrow-wrapper {
    color: var(--bs-secondary-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.big-action-btn:hover .action-arrow-wrapper {
    transform: translateX(6px);
    color: var(--bs-primary);
}

/* Adaptación interactiva para Modo Oscuro en Botones */
.dark-theme .big-action-btn:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3) !important;
}

/* Resaltado de campos variables en la vista previa de la escritura */
.campo-pendiente {
    background-color: #fff3cd;
    color: #664d03;
    padding: 0 .15rem;
    border-radius: .2rem;
}

.campo-llenado {
    background-color: #cfe2ff;
    color: #084298;
    padding: 0 .15rem;
    border-radius: .2rem;
    font-weight: 600;
}

.campo-error-msg {
    color: #dc3545;
}

.dark-theme .campo-error-msg {
    color: #ff8f8f !important;
}

/* Aviso de cuantía modificada manualmente (no coincide con el valor del bien): el ámbar pálido de
   Bootstrap (text-warning) no contrasta contra el blanco del tema claro y se pierde por completo
   contra el fondo oscuro del tema oscuro, así que se define un color propio para cada tema. */
.aviso-cuantia {
    color: #7a5b00;
    font-weight: 600;
}

.dark-theme .aviso-cuantia {
    color: #ffcc66 !important;
}

/* Ningún campo debe permitir que su contenido rebase el tamaño del control que lo contiene:
   texto largo se recorta con puntos suspensivos en vez de desbordar la cuadrícula. */
.form-control,
.form-select {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selectores (Registro, Acto, Notario, Provincia/Cantón/Distrito, Forma de pago, moneda, etc.)
   en el mismo tono de marca que el resto de la interfaz (mismo acento que .big-action-btn y las
   tarjetas), en vez del gris genérico de Bootstrap. */
.form-select {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    border-radius: .5rem;
    background-color: rgba(var(--bs-primary-rgb), 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .form-select:hover:not(:disabled) {
        border-color: rgba(var(--bs-primary-rgb), 0.6);
    }

    .form-select:focus {
        border-color: var(--bs-primary);
        background-color: var(--bs-body-bg);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.2);
    }

    .form-select:disabled {
        background-color: rgba(var(--bs-secondary-rgb), 0.06);
        border-color: rgba(var(--bs-secondary-rgb), 0.25);
    }

    .dark-theme .form-select {
        background-color: rgba(var(--bs-primary-rgb), 0.07) !important;
        border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    }

        .dark-theme .form-select:focus {
            background-color: #2a2a2a !important;
            border-color: var(--bs-primary) !important;
        }

/* Selectores de Registro y Acto (principal y de cada acto adicional): el nombre del registro y
   del acto se leen en mayúsculas, con un separador entre cada opción de la lista desplegable.
   Un <select> nativo no permite estilar ni separar sus <option> en la mayoría de navegadores (el
   menú lo dibuja el sistema operativo), por lo que estas dos reglas se aplican al selector
   buscable propio (.buscable-select), no a un <select>. */
.selector-registro-acto .buscable-select-toggle,
.selector-registro-acto .buscable-select-opcion {
    text-transform: uppercase;
}

/* Selector desplegable con buscador propio (BuscableSelect): reemplaza al <select> nativo en los
   selectores de Registro y Acto para poder mostrar separadores reales entre opciones y anclar el
   campo de búsqueda dentro del propio desplegable. */
.buscable-select {
    position: relative;
}

.buscable-select-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    cursor: pointer;
}

    .buscable-select-toggle.disabled {
        cursor: not-allowed;
    }

.buscable-select-valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buscable-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.buscable-select-panel {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.4);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.2);
    padding: .5rem;
}

.buscable-select-buscar {
    margin-bottom: .5rem;
}

.buscable-select-opciones {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) transparent;
}

    .buscable-select-opciones::-webkit-scrollbar {
        width: 6px;
    }

    .buscable-select-opciones::-webkit-scrollbar-thumb {
        background-color: rgba(var(--bs-primary-rgb), 0.5);
        border-radius: 3px;
    }

.buscable-select-opcion {
    padding: .4rem .5rem;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.15);
    cursor: pointer;
}

    .buscable-select-opcion:last-child {
        border-bottom: none;
    }

    .buscable-select-opcion:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }

    .buscable-select-opcion.seleccionada {
        background-color: rgba(var(--bs-primary-rgb), 0.18);
        font-weight: 600;
    }

.buscable-select-sin-resultados {
    color: var(--bs-secondary-color);
    cursor: default;
}

    .buscable-select-sin-resultados:hover {
        background-color: transparent;
    }

/* El panel desplegable (.buscable-select-panel) usa var(--bs-body-bg), que este sistema de temas
   por clase (.dark-theme, no el atributo nativo data-bs-theme) nunca redefine: en oscuro se
   quedaba con fondo claro mientras el texto de las opciones heredaba el color claro de
   .dark-theme — opciones casi invisibles por falta de contraste. */
.dark-theme .buscable-select-panel {
    background-color: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.dark-theme .buscable-select-valor {
    color: #f0f0f0;
}

.dark-theme .buscable-select-opcion {
    color: #f0f0f0;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

    .dark-theme .buscable-select-opcion:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .dark-theme .buscable-select-opcion.seleccionada {
        background-color: rgba(var(--bs-primary-rgb), 0.35);
    }

.dark-theme .buscable-select-sin-resultados {
    color: #9a9a9a;
}

/* Menú del botón dividido "Imprimir": se despliega hacia abajo hasta elegir una opción o
   hacer clic fuera (el backdrop captura ese clic). */
.menu-imprimir-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.menu-imprimir {
    z-index: 1050;
    top: 100%;
    left: 0;
    min-width: 11rem;
}

.dark-theme .menu-imprimir {
    background-color: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.25);
}

    .dark-theme .menu-imprimir .dropdown-item {
        color: #f0f0f0;
    }

        .dark-theme .menu-imprimir .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

/* Quita la flechita de incremento/decremento de los campos numéricos (cuantía, valor del
   bien, área, monto del pago): solo deben aceptar dígitos positivos escritos a mano. */
input[type="number"] {
    -moz-appearance: textfield;
}

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Hoja de protocolo notarial: mismo tamaño, forma y renglonado que la hoja física de papel de
   seguridad (Art. 238 del Código Fiscal, el mismo que exige el Art. 248 para cada folio de
   protocolo): 22 cm de ancho, línea vertical de escritura a 3 cm del borde izquierdo y a 2 cm
   del derecho, 30 renglones de 8.5 mm cada uno, el primero a 25 mm del borde superior. Se usan
   unidades físicas (mm/pt) en vez de rem para que el ancho, los márgenes y el interlineado en
   pantalla sean fieles a la hoja real, no solo una aproximación visual; "max-width" en vez de un
   ancho fijo deja que se achique en pantallas angostas sin perder la proporción, conservando el
   tamaño de letra real (el texto da más vueltas de línea en vez de encogerse, igual que si uno
   se alejara de una hoja física). Sin scroll propio: la hoja siempre se ve completa y crece con
   su contenido (a diferencia del PDF de impresión, que sí pagina cada 30 renglones); quien se
   desplaza es la página. El primer renglón de texto cae sobre el primer renglón impreso porque
   el padding superior coincide exactamente con la posición del renglón (25 mm). En tema oscuro
   se atenúa el brillo del papel (un tono sepia oscuro en vez de blanco) sin perder el contraste
   de la tinta. */
.hoja-protocolo {
    background-color: #f5edd8;
    color: #2b2418;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 12pt;
    line-height: 8.5mm;
    text-align: justify;
    max-width: 220mm;
    width: 100%;
    box-sizing: border-box;
    padding: 25mm 20mm 25mm 30mm;
    border: 1px solid #b9ab84;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(8.5mm - 1px),
        #e0d3a8 calc(8.5mm - 1px),
        #e0d3a8 8.5mm
    );
    background-position-y: 25mm;
}

.dark-theme .hoja-protocolo {
    background-color: #33301f;
    color: #e8dfc5;
    border-color: #4c4530;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(8.5mm - 1px),
        #454029 calc(8.5mm - 1px),
        #454029 8.5mm
    );
}

/* Edición libre: la "hoja" de fondo (.hoja-protocolo sin texto visible propio, solo el papel y
   las líneas) queda detrás de un <textarea> transparente que recibe la escritura a mano. Ambas
   capas comparten fuente/relleno/borde con .hoja-protocolo para que el texto del textarea caiga
   exactamente sobre el renglonado de la capa de abajo. */
.editor-libre-wrapper {
    position: relative;
}

.editor-libre-resaltado {
    position: absolute;
    inset: 0;
    color: transparent !important;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
}

.editor-libre-textarea {
    position: relative;
    display: block;
    width: 100%;
    resize: none;
    overflow-y: hidden;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
}

.editor-libre-textarea:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.palabra-sugerida {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #dc3545;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dark-theme .palabra-sugerida {
    text-decoration-color: #ff8f8f;
}

/* Marcadores, valores ya resueltos y cláusulas protegidas (p. ej. la declaración jurada de la
   Ley 7786): un fondo tenue para que se note que ese tramo es inmutable en edición libre, sin
   competir visualmente con el subrayado rojo de ortografía. */
.texto-protegido {
    background-color: rgba(13, 110, 253, 0.14);
    border-radius: .15rem;
}

.dark-theme .texto-protegido {
    background-color: rgba(94, 158, 255, 0.22);
}

.popup-sugerencias {
    position: fixed;
    z-index: 2000;
    min-width: 170px;
    max-width: 260px;
    background: #fff;
    border: 1px solid rgba(13, 110, 253, 0.35);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
    padding: .25rem;
}

.dark-theme .popup-sugerencias {
    background: #2b2b2b;
    border-color: rgba(255, 255, 255, 0.2);
}

.popup-sugerencias button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: .35rem .6rem;
    border-radius: .35rem;
    font-size: .875rem;
    color: inherit;
}

.popup-sugerencias button:hover {
    background: rgba(13, 110, 253, 0.12);
}

.popup-sugerencias hr {
    margin: .25rem 0;
}

.panel-edicion-libre {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* El panel de edición libre siempre está en el DOM (para poder animarlo): se despliega/recoge
   con una transición de max-height y opacidad en vez de aparecer/desaparecer de golpe con el
   @if de Blazor, que no deja tiempo para transición alguna. */
.panel-edicion-libre-colapsable {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.panel-edicion-libre-colapsable.abierto {
    max-height: 6rem;
    opacity: 1;
}

fieldset.formulario-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

fieldset.formulario-fieldset:disabled {
    opacity: 0.65;
}

/* Panel del formulario (columna derecha): se desplaza de forma independiente al desplazamiento
   general de la página, sin arrastrar consigo la hoja de protocolo ni la barra superior/lateral.
   La barra de scroll se oculta visualmente pero el desplazamiento con rueda o gesto sigue
   funcionando con normalidad. */
.panel-formulario-scroll {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Los paneles no se cortan de golpe contra el borde superior/inferior al desplazarse: se
       desvanecen justo en ese punto (una máscara, no un degradado de color, para que funcione
       igual sobre cualquier fondo/tema). */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

    .panel-formulario-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

/* Transición suave para todos los elementos al cambiar de tema */
body,
.app-wrapper,
.card,
.glass-card,
.big-action-btn,
.btn,
h1, h2, h3, h4, h5, h6,
p,
span {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}
/* Selector de tema Claro/Oscuro (componente ThemeToggle): un solo aspecto en portada, acceso, registro y
   sistema. Siempre muestra las dos opciones y resalta la activa. En la portada hereda sus variables --lp-*;
   fuera de ella usa las globales. */
.theme-toggle {
    display: inline-flex;
    flex: none;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--lp-border, rgba(var(--bs-body-color-rgb), 0.18));
    background: var(--lp-surface, var(--bs-body-bg));
    color: var(--lp-text, var(--bs-body-color));
}

.theme-toggle-opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0.7;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

    .theme-toggle-opcion:hover {
        opacity: 1;
    }

    .theme-toggle-opcion.activa {
        background: var(--lp-primary, var(--bs-primary));
        color: #fff;
        opacity: 1;
    }

    .theme-toggle-opcion:focus-visible {
        outline: 2px solid var(--lp-primary, var(--bs-primary));
        outline-offset: 2px;
    }

.dark-theme .theme-toggle {
    background: var(--lp-surface, #1e1e1e);
    color: var(--lp-text, #e0e0e0);
    border-color: var(--lp-border, rgba(255, 255, 255, 0.2));
}

/* Indicador de seguridad y lista de requisitos de la contraseña (componente IndicadorContrasena). */
.pw-medidor {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-top: 0.5rem;
}

    .pw-medidor span {
        height: 0.35rem;
        border-radius: 999px;
        background: rgba(128, 128, 128, 0.3);
        transition: background-color 0.25s ease;
    }

    .pw-medidor[data-nivel="0"] span:nth-child(-n+1),
    .pw-medidor[data-nivel="1"] span:nth-child(-n+2) { background: var(--bs-danger); }
    .pw-medidor[data-nivel="2"] span:nth-child(-n+3) { background: var(--bs-warning); }
    .pw-medidor[data-nivel="3"] span:nth-child(-n+4) { background: var(--bs-info); }
    .pw-medidor[data-nivel="4"] span:nth-child(-n+5) { background: var(--bs-success); }

.pw-nivel {
    font-size: 0.8rem;
    font-weight: 600;
}

.pw-requisitos {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.82rem;
    columns: 2 14rem;
    column-gap: 1.5rem;
}

    .pw-requisitos li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.1rem 0;
        opacity: 0.7;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    .pw-requisitos li.cumple {
        color: var(--bs-success);
        opacity: 1;
    }

    .pw-requisitos input[type="checkbox"] {
        margin: 0;
        pointer-events: none;
    }

/* Esquina superior derecha de las pantallas públicas de acceso y registro. */
.auth-corner {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20;
}

/* Campana de notificaciones de la barra superior (componente Notificaciones). */
.notificaciones-boton {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.18);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
}

    .notificaciones-boton:hover,
    .notificaciones-boton:focus-visible {
        border-color: var(--bs-primary);
    }

.notificaciones-contador {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

/* Capa transparente que cierra el panel al pulsar fuera de él. */
.notificaciones-fondo {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.notificaciones-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1050;
    width: min(24rem, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.18);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.notificaciones-encabezado {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
}

.notificaciones-lista {
    padding: 0.75rem;
    overflow-y: auto;
}

.dark-theme .notificaciones-boton,
.dark-theme .notificaciones-panel {
    background: #1e1e1e;
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-theme .notificaciones-encabezado {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Selector de cliente frecuente en el encabezado del panel Comparecientes. */
.selector-cliente-frecuente {
    min-width: 17rem;
}

/* Campo de fecha único (dd/mm/aaaa): el selector nativo va oculto y solo se abre desde el botón del calendario. */
.campo-fecha {
    position: relative;
    flex-wrap: nowrap;
}

.campo-fecha .campo-fecha-selector {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}