/* AdminLTE fixes */
.alert a.btn, .alert a.close {
    text-decoration: none;
}

.user-panel > .image > img {
    max-width: 60px;
}

.user-panel > .info {
    padding-top: 15px;
    left: 95px;
    font-size: 1.5rem;
}

img.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#reportviewer {
    min-height: 650px;
    min-width: 100%;
}

table.full-width {
    width: 100%;
}

.table-control {
    max-width: 100px;
    height: 25px;
}

.table-select {
    height: 25px;
    padding: 0;
}

select.select-inline-modal {
    min-width: 60%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    select.select-inline-modal {
        min-width: 60%;
    }
}

@media only screen and (max-width: 767px) {
    select.select-inline-modal {
        margin-bottom: 10px;
    }
}

.select2-container *:focus {
    border-color: #3c8dbc;
    box-shadow: none;
}

.strong {
    font-weight: bold;
}

img#logo-landing {
    width: 576px;
    padding-top: 100px;
}

@media only screen and (min-width: 768px) {
    img#logo-landing {
        padding-top: 160px;
    }
}

hr {
    border-top: 1px solid #ccc;
}

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
@media (min-width: 768px) {
    .row.row-eq-height {
        display: flex;
        flex-wrap: wrap;
    }
}

/*
 *Remover borde de form control boostrap
 */
.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    padding-top: 5px;
}

label > input[required="required"] {
    background: red;
}

/* Loader */
.loader {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* fondo antes rgb(249,249,249) fijo (blanco) -> theme-aware: blanco en claro, oscuro en
       oscuro, para que el overlay del loader combine con la pantalla (reportes en tema oscuro). */
    background: url('../Images/loader.gif') 50% 50% no-repeat var(--bs-body-bg);
}

/* logo footer */
.logo-footer {
    height: 38px;
}

@media (min-width: 992px) {
    .logo-footer {
        margin-top: -8px;
        padding-right: 4px;
    }
}

.app-footer {
    padding-left: 6px;
}

.row-button {
    display: inline-block;
    align-self: flex-end;
    margin-bottom: 15px;
    padding-bottom: 2px;
}

.border-right-0 {
    border-right: none !important;
}

.border-left-0 {
    border-left: none !important;
}

.login-page, .register-page {
    /* BS4 usaba #ecf0f5 fijo; theme-aware (igual que .bg-body-tertiary del resto de la app,
     * incl. el Login ya migrado) para que respete claro/oscuro. AdminLTE 4 .login-page no
     * define fondo, asi que esta regla es la que lo provee. */
    background-color: var(--bs-tertiary-bg);
}

.app-content {
    padding-bottom: 7px;
}

.loading {
    z-index: 1060;
    position: absolute;
    top: 0;
    left: -5px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.loading-content {
    position: absolute;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 40%;
    left: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bg-anulado {
    background-color: #f2dede !important;
    text-decoration: line-through !important;
}

.swal2-popup {
    font-size: 1rem !important;
}

.btn.bg-orange {
    color: #FFFFFF !important;
}

#rootwizard .navbar .navbar-inner .container .nav.nav-pills {
    font-size: 1.0625rem;
    margin-bottom: 1rem;
}

#rootwizard .pager.wizard {
    margin-top: 1rem;
    padding-top: 1rem;
    margin-bottom: 0;
    border-top: 1px solid #CCC;
}

/* ===== AdminLTE Fixes ===== */
/* Fondo del submenu abierto: AdminLTE deja --lte-sidebar-submenu-bg en transparent,
   lo que funde el treeview con el resto del menu y hace ilegible que submenus
   pertenecen al padre abierto. Se restaura el tinte que el sidebar tenia en AdminLTE 3. */
.app-sidebar {
    --lte-sidebar-submenu-bg: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"].app-sidebar,
[data-bs-theme="dark"] .app-sidebar {
    --lte-sidebar-submenu-bg: rgba(255, 255, 255, 0.05);
}

.sidebar-wrapper .nav-header {
    background-color: transparent;
}
/* ===== END AdminLTE Fixes ===== */

/* ===== BS5 Fixes ===== */
.table th, .table td {
    padding: 0.5rem;
}
/* ===== END BS4 Fixes ===== */

/* ===== DataTables BS4 Fixes ===== */
table.dataTable {
    border-collapse: collapse !important;
}

/* ===== END DataTables BS4 Fixes ===== */

/* =============================================================================
 * MODO OSCURO — Fixes de elementos que no responden a data-bs-theme="dark"
 * ============================================================================= */

/* --- Asterisco de campos obligatorios (markRequiredFields / addRequiredValidation).
 *     Se removio el inline color:black de la fuente (common.js, feicCommon.js,
 *     formularioJuridico.js) para que el * herede el color del label (theme-adaptive).
 *     Esta regla queda como red de seguridad + intencion explicita: negro en claro,
 *     claro en oscuro. !important por si algun span aun trajera color inline. --- */
.required-mark {
    color: var(--bs-body-color) !important;
}

/* --- Select2 (tema bootstrap-5): trae colores #fff hardcodeados y NO soporta
 *     dark mode. Overrides SOLO en oscuro (el modo claro queda intacto), usando
 *     variables BS5 para que combine con el tema. --- */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Tags de select2 multiple */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* --- SweetAlert2: mapea todo a variables --swal2-* (en :root: fondo blanco, texto
 *     gris). Su modo oscuro se activa por data-swal2-theme / prefers-color-scheme, NO
 *     por nuestro toggle, asi que siempre salia claro. En oscuro re-mapeamos las
 *     variables a BS5. Se usa html[data-bs-theme="dark"] (especificidad 0,1,1) para
 *     ganarle al :root de swal (0,1,0), que se inyecta en runtime. Los botones usan
 *     customClass (btn btn-danger, etc.) -> ya siguen el tema. --- */
html[data-bs-theme="dark"] {
    --swal2-background: var(--bs-body-bg);
    --swal2-color: var(--bs-body-color);
    --swal2-footer-border-color: var(--bs-border-color);
    --swal2-input-background: var(--bs-body-bg);
    --swal2-input-border: 1px solid var(--bs-border-color);
    --swal2-validation-message-background: var(--bs-tertiary-bg);
    --swal2-validation-message-color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .swal2-input,
html[data-bs-theme="dark"] .swal2-textarea,
html[data-bs-theme="dark"] .swal2-select {
    color: var(--bs-body-color);
}

/* --- Select2 (single): la flecha del desplegable es un SVG de fondo con stroke #343a40
 *     hardcodeado y SIN variante dark (a diferencia de .form-select de BS5). En oscuro
 *     queda invisible. La cambiamos a stroke claro (#dee2e6), igual que hace BS5 con
 *     .form-select -> negra en claro, blanca en oscuro (como .text-body). --- */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* ===== END MODO OSCURO ===== */

/* =============================================================================
 * FIXES DE MIGRACION BS5 (post-QA visual)
 * ============================================================================= */

/* (#2) Cards apiladas pegadas: BS5 / AdminLTE 4 no dan margin-bottom al .card
 *      (AdminLTE 3 si lo tenia). Lo restauramos para que haya separacion. */
.card {
    margin-bottom: 1rem;
}

/* (#3) Header de tabla .bg-gray-light (AdminLTE 3): quedo sin estilo y en oscuro el
 *      texto no contrasta. Definicion neutra legible en AMBOS temas (gris sutil del
 *      tema + texto del tema). */
.bg-gray-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* (#4) DataTables: (a) separar el indicador de orden del texto del encabezado;
 *      (b) las flechas usan --dt-column-ordering (negro por defecto; su variante
 *      oscura se activa con :root.dark, clase que NO usamos) -> en modo oscuro las
 *      hacemos claras para que sean visibles.
 *  Nota: el encabezado se mantiene en una sola línea (white-space: nowrap); sin esto,
 *  en columnas angostas el icono (ancho fijo de 12px) saltaba a un segundo renglón. */
table.dataTable thead > tr > th {
    white-space: nowrap;
}

table.dataTable thead .dt-column-order {
    margin-left: 0.4em;
}

[data-bs-theme="dark"] table.dataTable {
    --dt-column-ordering: 255, 255, 255;
}

/* Navbar principal (.app-header) con fondo primary: texto e iconos SIEMPRE blancos en
 * ambos temas, como en la version anterior. Sin esto, BS5 colorea el texto del navbar
 * segun el tema de la pagina (oscuro en tema claro). Solo afecta al navbar, no a los
 * dropdowns que despliega. */
.app-header.bg-primary {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

/* Titulo de la cabecera de pagina: las vistas usan <h1> (semanticamente correcto para
 * el titulo de la pagina); AdminLTE 4 usa h3.mb-0 y no estiliza el <h1>, por eso sale
 * gigante (2.5rem + margen). Lo ajustamos al tamano/espaciado de v4 y lo alineamos con
 * el breadcrumb, sin tocar las vistas. */
.app-content-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0;
}

.app-content-header .d-sm-flex {
    align-items: center;
}

/* Columna de perfil (Asociados/Details y vistas similares): AdminLTE 4 ELIMINO del
 * framework las clases del perfil (profile-user-img, profile-username,
 * list-group-unbordered, margin-r-5) -> las define solo en su pagina demo. Las
 * restauramos con los valores estandar del perfil para que la columna izquierda luzca
 * como el perfil de AdminLTE 4. (Variables BS5 para que funcione en claro y oscuro.) */
.profile-user-img {
    width: 100px;
    margin: 0 auto;
    padding: 3px;
    border: 3px solid var(--bs-border-color);
}

.profile-username {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* list-group sin recuadros: filas limpias separadas por una linea (no cajas). */
.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.list-group-unbordered > .list-group-item p {
    margin-bottom: 0;
}

/* margin-r-5: pequeno espacio a la derecha (iconos de "Acerca De"). */
.margin-r-5 {
    margin-right: 5px;
}

/* toastr (legacy, aun en ~77 vistas) comparte la clase .toast con el componente de
 * Bootstrap 5. Los toasts de toastr ya son de color solido con texto blanco
 * (#toast-container > div { color:#fff }, selector con ID) -> LEGIBLES en claro y
 * oscuro; NO tienen el problema de "caja blanca" de swal. El unico artefacto del choque
 * de clases es el borde translucido que BS5 .toast les inyecta (toastr no define border).
 * Lo neutralizamos, scoped a #toast-container para no tocar toasts nativos de BS5. */
#toast-container > .toast {
    border: 0;
}

/* (#5) BS5: los <select> usan .form-select (BS4 usaba .form-control). Con solo
 *      .form-control el <select> pierde la flecha y el padding y parece un input normal.
 *      Reproducimos el aspecto de .form-select para los <select> con .form-control que NO
 *      son select2 (select2 oculta el <select> nativo con .select2-hidden-accessible, asi
 *      que esos no se ven afectados). Flecha dark-aware, igual que el .form-select de BS5.
 *      Deuda tecnica: se retira al renombrar .form-control -> .form-select en los <select>
 *      por area (415 DropDownList + selects crudos en ~161 vistas). */
select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    padding-right: 2.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-bs-theme="dark"] select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* (#6) select2 multiple: el tema BS5 pone .select2-search a width:100%, lo que lo empuja
 *      a una linea propia debajo de los tags -> el control arranca alto, como un textarea.
 *      En BS4 la busqueda iba EN LINEA con los tags y el control tenia la altura de un
 *      select normal, creciendo solo al hacer wrap. Restauramos ese comportamiento:
 *      busqueda en linea (flex), tags sin margen vertical (el row-gap separa las filas al
 *      hacer wrap) y contenido centrado verticalmente. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
    width: auto;
    /* basis 0 (no el ancho del contenido) para que NO salte a una linea propia: arranca
     * en 0 y crece para llenar lo que queda en la fila de los tags. min-width mantiene el
     * campo usable y fuerza el wrap solo cuando de verdad no cabe. */
    flex: 1 1 0;
    min-width: 4rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    align-items: center;
    row-gap: 0.375rem;
    /* el padre (.select2-selection--multiple) es flex y este <ul> se encoge a su
     * contenido (~ancho de los tags), dejando sin espacio a la busqueda -> esta hace wrap
     * a una linea propia. Forzandolo a llenar el contenedor, tags + busqueda caben en una
     * sola fila y solo crece al hacer wrap de verdad. */
    width: 100%;
    flex: 1 1 auto;
}

/* Ojo: el selector DEBE incluir .select2-selection__rendered para igualar la especificidad
 * del tema (0,4,0); sin ese eslabon el tema gana y el chip queda alto (padding 0.35em). */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    margin-top: 0;
    margin-bottom: 0;
    /* chip compacto para que la fila quede cerca de la altura de un select normal */
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* (#7) Inputs [readonly]: BS4 les daba fondo gris para diferenciarlos de los editables;
 *      BS5 lo quito (solo conserva el de :disabled). Lo restauramos con la MISMA variable
 *      que usa :disabled -> gris en claro, oscuro en oscuro. Excluimos .form-control-plaintext
 *      (en BS5 son texto plano a proposito, sin fondo). :disabled ya trae su fondo nativo. */
.form-control[readonly]:not(.form-control-plaintext) {
    background-color: var(--bs-secondary-bg);
}

/* (#8) DataTables + plugin Select: la fila seleccionada usa el primary COMPLETO (azul
 *      intenso, rgb(var(--dt-row-selected))) con texto blanco, que dificulta leer el
 *      contenido. Lo cambiamos a primary-subtle (var BS5, ya dark-aware) con texto del
 *      tema. Mismos selectores que DT (misma especificidad) y Site.css carga despues -> gana.
 *      Cubre: seleccion por celda (background-color, del plugin select) y por fila (box-shadow
 *      inset, del core .table), incluidas las variantes striped y hover. */
table.dataTable > tbody > tr > .selected {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
}

table.table.dataTable > tbody > tr.selected > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > *,
table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
}

table.table.dataTable > tbody > tr.selected a {
    color: var(--bs-link-color);
}

/* (#9) Consistencia de altura de labels: muchas se renderizan con @Html.LabelFor /
 *      CustomLabelFor / Html.Label SIN la clase .form-label -> margin-bottom:0, mientras
 *      las que si la tienen usan 0.5rem. En una misma fila eso deja los inputs a distinta
 *      altura. AdminLTE ya da display:inline-block a todo label, asi que la unica diferencia
 *      es ese margen. Se lo damos a toda label de CAMPO dentro de un grupo (.mb-3/.form-group),
 *      excluyendo las de check/radio/horizontales (deben ir pegadas al control). Las que ya
 *      tienen .form-label no cambian (mismo valor). Fix general, sin tocar vistas ni el helper. */
.mb-3 > label:not(.form-check-label):not(.col-form-label):not(.radio-inline):not(.checkbox-inline),
.form-group > label:not(.form-check-label):not(.col-form-label):not(.radio-inline):not(.checkbox-inline) {
    margin-bottom: 0.5rem;
}
/* ===== END FIXES DE MIGRACION ===== */