/* Ajustes propios sobre AdminLTE 4 (Bootstrap 5) */
:root {
    --cg-primary: #2c5282;
    --cg-accent: #2f855a;
}

/* --- Buscador de los desplegables largos --------------------------- */
.cg-buscador { position: relative; }

.cg-buscador-oculto {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0;
    border: 0;
}

.cg-buscador-lista {
    display: none;
    position: absolute;
    z-index: 1080;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
}

.cg-buscador-lista.abierta { display: block; }

.cg-buscador-lista li {
    padding: .35rem .75rem;
    cursor: pointer;
    font-size: .9rem;
}

.cg-buscador-lista li.resaltada { background: #e9f3ff; }
.cg-buscador-lista li.elegida { font-weight: 600; }

.cg-buscador-lista li.cg-buscador-vacio {
    cursor: default;
    color: #6c757d;
    font-style: italic;
}

/* --- Tarjetas de cifras del inicio --------------------------------- */
/* Todas las de una fila miden lo mismo: con una sola linea de mas, una
   sobresalia por debajo y rompia el reglon. */
.info-box { height: calc(100% - 1rem); }

/* El rotulo se parte en dos lineas en vez de cortarse con puntos
   suspensivos: a 1200px se leia "Fondo de reser...". */
.info-box .info-box-text {
    white-space: normal;
    overflow: visible;
    line-height: 1.2;
}

.info-box .progress-description {
    white-space: normal;
    line-height: 1.2;
}

/* Entre 1200 y 1400 las cuatro columnas quedan tan estrechas que hasta la
   cifra se parte en dos lineas: en ese tramo van de dos en dos. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .fila-cifras > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --- Marca del menu lateral ---------------------------------------- */
/* El icono y el nombre van centrados entre si y alineados con el menu; con el
   menu recogido queda solo el icono, centrado en los 4.6rem del carril. */
/* Sin fondo propio: la marca se funde con el gris del menu. Hasta aqui llevaba una
   banda azul marino que venia del primer commit, y en AdminLTE 4 se veia peor que en
   el 3: el .sidebar-brand es flex y centra el enlace, que al ser hijo flex se encoge
   a su contenido, de modo que el color no salia como banda de lado a lado sino como
   un recuadro de 132px flotando en medio de un carril de 250.
   El enlace se estira igualmente y empieza por la izquierda: sin eso el nombre se
   queda centrado aunque ya no se vea el recuadro. */
.app-sidebar .brand-link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: .6rem;
    padding-left: 1.1rem;
}

.app-sidebar .brand-icono {
    font-size: 1.4rem;
    line-height: 1;
    /* Ancho fijo: al recoger y desplegar el menu el icono no se mueve. */
    width: 1.75rem;
    text-align: center;
    color: #fff;
}

.app-sidebar .brand-text {
    color: rgba(255, 255, 255, .95);
    letter-spacing: .01em;
}

/* Menu recogido (y sin el raton encima, que es cuando AdminLTE lo despliega). */
body.sidebar-collapse .app-sidebar:not(:hover) .brand-link {
    justify-content: center;
    /* Sin los margenes laterales de AdminLTE el icono cae en el centro exacto del carril. */
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapse .app-sidebar:not(:hover) .brand-text { display: none; }

.small-box .small-box-icon > i { font-size: 56px; }

.table-financiera td.numero,
.table-financiera th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-financiera tfoot td { font-weight: 600; background: #f8f9fa; }

.cuenta-nivel-1 { font-weight: 700; }
.cuenta-nivel-2 { font-weight: 600; padding-left: .75rem !important; }
.cuenta-nivel-3 { padding-left: 1.5rem !important; }
.cuenta-nivel-4 { padding-left: 2.25rem !important; color: #495057; }

.badge-ecf-3 { background: #28a745; color: #fff; }
.badge-ecf-5 { background: #dc3545; color: #fff; }
.badge-ecf-2 { background: #ffc107; color: #212529; }
.badge-ecf-0 { background: #6c757d; color: #fff; }

.estado-cuenta-vencido { background-color: #fff5f5; }

@media print {
    .app-sidebar, .app-header, .app-footer, .app-content-header .text-end, .no-print { display: none !important; }
    .app-main { margin-left: 0 !important; }
}

/* ------------------------------------------------------------------ */
/* Pantallas de acceso (login, recuperar clave, registro)              */
/* ------------------------------------------------------------------ */
.cg-acceso {
    min-height: 100vh;
    margin: 0;
    background: #eef2f7;
}

.cg-acceso-marco {
    display: flex;
    min-height: 100vh;
}

/* Panel izquierdo con la marca */
.cg-acceso-marca {
    flex: 0 0 46%;
    max-width: 46%;
    padding: 3.5rem 3rem;
    color: #fff;
    background: linear-gradient(150deg, #1b2a41 0%, #2c5282 55%, #2f855a 160%);
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.cg-acceso-marca::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}

.cg-acceso-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}

.cg-acceso-panel .cg-acceso-logo {
    background: #2c5282;
    border-color: #2c5282;
}

.cg-acceso-titulo {
    margin: 1.25rem 0 .25rem;
    font-size: 2.1rem;
    font-weight: 300;
    letter-spacing: .5px;
}

.cg-acceso-titulo strong { font-weight: 700; }

.cg-acceso-lema {
    margin-bottom: 2.25rem;
    color: rgba(255, 255, 255, .72);
}

.cg-acceso-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.cg-acceso-lista li {
    padding: .5rem 0;
    color: rgba(255, 255, 255, .88);
    font-size: .95rem;
}

.cg-acceso-lista i {
    width: 28px;
    color: #9ae6b4;
}

.cg-acceso-pie {
    color: rgba(255, 255, 255, .55);
    position: relative;
    z-index: 1;
}

/* Panel derecho con el formulario */
.cg-acceso-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.cg-acceso-caja {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    padding: 2.25rem 2rem;
    box-shadow: 0 18px 45px rgba(27, 42, 65, .12);
}

.cg-acceso-caja .form-control {
    height: calc(2.5rem + 2px);
}

.cg-acceso-caja .input-group-text {
    background: #f7fafc;
    color: #718096;
}

.cg-acceso-caja .btn-primary {
    background: #2c5282;
    border-color: #2c5282;
    height: calc(2.5rem + 2px);
}

.cg-acceso-caja .btn-primary:hover { background: #244268; border-color: #244268; }

.cg-acceso-copy {
    margin-top: 1.75rem;
    color: #a0aec0;
    font-size: .8rem;
}

@media (max-width: 991.98px) {
    .cg-acceso-marco { display: block; }
}

/* ================================================================== */
/* Capa responsiva: laptop (>=992), tablet (576-991), movil (<576)     */
/* ================================================================== */

/* --- Encabezado de pagina y barra de acciones --- */
.cg-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.cg-encabezado h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.cg-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
}

/* Los botones del encabezado se escriben sueltos en cada vista: el gap
   sustituye los margenes y evita que se peguen al envolverse. */
.cg-acciones > form { margin: 0; }

.cg-acciones .form-inline { flex-wrap: wrap; gap: .375rem; }
.cg-acciones .form-inline .form-control { margin-right: 0 !important; }

/* --- Tablas: densidad segun el ancho disponible --- */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
    .table th, .table td { padding: .4rem .5rem; font-size: .875rem; }
    .table-sm th, .table-sm td { padding: .3rem .4rem; }
}

/* --- Tabla apilada: cada fila se vuelve una tarjeta ---------------- */
/* condogest.js pone la clase cg-apilada cuando la tabla no cabe en el  */
/* ancho disponible (siempre en movil, en tablet solo si se desborda)   */
/* y copia el titulo de cada columna a data-label.                      */
table.cg-apilada thead,
table.cg-apilada col,
table.cg-apilada colgroup { display: none; }

table.cg-apilada,
table.cg-apilada tbody,
table.cg-apilada tfoot,
table.cg-apilada tr,
table.cg-apilada td {
    display: block;
    width: 100%;
}

table.cg-apilada {
    padding: .5rem;
    margin-bottom: 0;
    background: transparent;
}

table.cg-apilada tr {
    margin: 0 0 .5rem;
    padding: .25rem .625rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
}

table.cg-apilada tr:last-child { margin-bottom: 0; }

table.cg-apilada td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    border: 0;
    border-bottom: 1px solid #f1f3f5;
    text-align: right;
    white-space: normal;
    /* El valor se parte si hace falta: un correo largo o una fila de
       distintivos se salian por el borde derecho de la tarjeta. */
    overflow-wrap: anywhere;
}

/* El valor ocupa lo que le queda y sus distintivos bajan de linea en vez
   de empujarse fuera de la tarjeta. */
table.cg-apilada td > * { min-width: 0; }

table.cg-apilada td .badge { white-space: normal; }

table.cg-apilada td:last-child { border-bottom: 0; }

table.cg-apilada td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
}

/* Celdas sin encabezado (botones de accion) o que ocupan la fila
   completa (totales, mensajes de "sin datos"). */
table.cg-apilada td.cg-celda-sola::before,
table.cg-apilada td.cg-celda-ancha::before { content: none; }

table.cg-apilada td.cg-celda-sola,
table.cg-apilada td.cg-celda-ancha {
    display: block;
    text-align: center;
}

table.cg-apilada td.cg-celda-vacia { display: none; }

/* Identificador de la fila: primera celda a modo de titulo. */
table.cg-apilada tbody td:first-child {
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
}

table.cg-apilada tbody td:first-child::before { color: #adb5bd; }

/* Controles de captura dentro de la tabla (lecturas, lineas). */
table.cg-apilada td > .form-control,
table.cg-apilada td > .input-group,
table.cg-apilada td > select { flex: 1 1 auto; min-width: 0; width: auto; }

table.cg-apilada tfoot tr {
    border-color: #adb5bd;
    background: #f8f9fa;
    font-weight: 600;
}

table.cg-apilada.table-financiera tfoot td { background: transparent; }

/* Filas resaltadas: el fondo va en la tarjeta, no en la celda. */
table.cg-apilada tr.estado-cuenta-vencido { background: #fff5f5; border-color: #f5c6cb; }

/* En tablet la tarjeta aprovecha el ancho: dos pares por linea. */
@media (min-width: 576px) {
    table.cg-apilada tr { display: flex; flex-wrap: wrap; }

    table.cg-apilada td { flex: 0 0 50%; max-width: 50%; }

    table.cg-apilada tbody td:first-child,
    table.cg-apilada td.cg-celda-ancha,
    table.cg-apilada td.cg-celda-sola { flex: 0 0 100%; max-width: 100%; }

    table.cg-apilada td { padding-left: .5rem; padding-right: .5rem; }
    table.cg-apilada tr { padding-left: .125rem; padding-right: .125rem; }
}

/* Aviso de desplazamiento cuando la tabla sigue siendo ancha. */
.table-responsive.cg-desplazable { position: relative; }

.table-responsive.cg-desplazable::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(108, 117, 125, .18));
}

@media (max-width: 575.98px) {
    /* Pares etiqueta/valor de las pantallas de detalle. */
    dl.row dt { font-size: .8rem; color: #6c757d; }
}

/* --- Ajustes generales de movil ----------------------------------- */
@media (max-width: 767.98px) {
    /* iOS hace zoom al enfocar un campo con fuente menor a 16px. */
    .form-control,
    .form-control-sm,
    .form-select,
    textarea { font-size: 1rem; }

    .app-content-header { padding: .5rem .5rem 0; }
    .app-content > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .cg-encabezado h1 { font-size: 1.375rem; }

    .cg-acciones { justify-content: stretch; width: 100%; }
    .cg-acciones > .btn,
    .cg-acciones > form > .btn { flex: 1 1 auto; }
    .cg-acciones .form-inline { width: 100%; }
    .cg-acciones .form-inline .form-control,
    .cg-acciones .form-inline .btn { flex: 1 1 8rem; }

    .card-header .row > [class*="col-"] { margin-bottom: .5rem; }
    .card-footer .btn { margin-bottom: .25rem; }

    .small-box .inner h3 { font-size: 1.6rem; }
    .small-box .small-box-icon > i { font-size: 44px; }
    .info-box { min-height: 72px; }
    .info-box .info-box-number { font-size: 1.05rem; }

    /* El menu de notificaciones no debe salirse de la pantalla. */
    .app-header .dropdown-menu-lg { max-width: calc(100vw - 1rem); }
    .app-header .dropdown-menu-end { right: .25rem; }

    .app-footer { font-size: .8rem; padding: .75rem .5rem; text-align: center; }

    /* Listas descriptivas y pares etiqueta/valor. */
    .nav-tabs .nav-link { padding: .4rem .6rem; font-size: .9rem; }

    /* Paginacion larga: se envuelve en vez de desbordarse. */
    .pagination { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .card-title { font-size: 1rem; }
    .btn-group-vertical-xs { display: flex; flex-direction: column; gap: .25rem; }
    .modal-dialog { margin: .5rem; }
}

/* --- Graficos: alto adaptable al dispositivo ---------------------- */
.cg-grafico { position: relative; width: 100%; height: 280px; }

@media (max-width: 991.98px) { .cg-grafico { height: 240px; } }
@media (max-width: 575.98px) { .cg-grafico { height: 210px; } }

/* --- Pantallas de acceso en tablet y movil ------------------------ */
@media (max-width: 991.98px) {
    .cg-acceso-panel { padding: 1.5rem 1rem; }
    .cg-acceso-caja { padding: 1.75rem 1.25rem; box-shadow: 0 10px 30px rgba(27, 42, 65, .1); }
}

@media (max-width: 575.98px) {
    .cg-acceso { background: #fff; }
    .cg-acceso-marco { min-height: 100vh; }
    .cg-acceso-panel { padding: 1.25rem .75rem; justify-content: flex-start; padding-top: 2.25rem; }
    .cg-acceso-caja { padding: .5rem 1rem 1.5rem; border-radius: 0; box-shadow: none; max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* De AdminLTE 3 a 4: tres clases que usabamos y que 4 ya no trae      */
/* ------------------------------------------------------------------ */
/* btn-xs esta en 65 botones de accion dentro de tablas. Es la
   definicion de AdminLTE 3, puesta aqui para no tener que decidir
   entre tocar 38 pantallas o ver los botones crecer. */
.btn-xs {
    padding: .125rem .25rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .15rem;
}

/* form-inline desaparecio de Bootstrap 5. Donde la usamos es siempre lo
   mismo: un campo y un boton en la misma linea de un encabezado. */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-inline > .form-control,
.form-inline > .form-select { width: auto; }

/* Los dos colores del panel de inicio que eran de la paleta de AdminLTE 3. */
.bg-teal { background-color: var(--bs-teal) !important; color: #fff !important; }
.bg-navy { background-color: #001f3f !important; color: #fff !important; }

/* El panel de usuario del menu (.user-panel en 3) se maqueta a mano. */
.cg-usuario { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cg-usuario a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.cg-usuario a:hover { color: #fff; }

/* Para que text-truncate funcione dentro de un flex. */
.min-width-0 { min-width: 0; }

/* Bootstrap 4 separaba las columnas 15px; la 5 subio a 24px. Son 4,5px menos de
   ancho util a cada lado del contenido y otros tantos en cada columna, y las
   tablas financieras van justas: la de empresas se quedaba con 16px fuera de su
   caja, que el usuario no ve porque no sabe que hay mas. Se vuelve a la medida
   con la que estan maquetadas las 92 pantallas.

   Solo las filas de primer nivel, que son las que reparten la pagina: las de
   dentro de un formulario llevan su propio g-2 y ahi 8px esta bien. */
.app-content > .container-fluid,
.app-content-header > .container-fluid { --bs-gutter-x: .9375rem; }

.app-content > .container-fluid > .row { --bs-gutter-x: .9375rem; }

/* Y Bootstrap 5 tambien engordo el badge: de .25em/.4em a .35em/.65em. En una
   ficha se agradece; en una tabla de siete columnas son cinco pixeles por cada
   uno y la fila ya no cabe. Dentro de una tabla vuelve a su talla. */
.table .badge { --bs-badge-padding-y: .3em; --bs-badge-padding-x: .45em; }

/* Bootstrap 4 daba a toda etiqueta medio rem por debajo; la 5 se lo quito y lo
   puso en .form-label. Son 303 etiquetas: ponerles la clase una a una engorda el
   cambio sin que se vea distinto, asi que se devuelve el margen a las que no
   llevan ninguna clase, que son exactamente las que lo perdieron. Las que si la
   llevan (small mb-0, form-check-label) ya dicen lo que quieren. */
label:not([class]) { margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   Ruta de navegacion (migas)

   Va encima del titulo y tiene que leerse como un apunte, no como un segundo
   encabezado: el que manda en la pantalla es el <h1> que viene debajo.
   -------------------------------------------------------------------------- */
.cg-migas .breadcrumb {
    margin-bottom: .25rem;
    font-size: .8125rem;
}

.cg-migas .breadcrumb-item,
.cg-migas .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color, #6c757d);
}

.cg-migas .breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.cg-migas .breadcrumb-item a:hover,
.cg-migas .breadcrumb-item a:focus-visible {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: underline;
}