/* ============================================================================
   coreui-skin.css — look visual inspirado en CoreUI (Bootstrap Admin Template),
   armado como una capa de estilos propia ENCIMA del Bootstrap 5 que ya usa toda
   la app. CoreUI está construido sobre Bootstrap (a diferencia de Gentelella
   v4, que lo reemplaza por completo), así que este skin es solo variables de
   color + retoques puntuales — ningún formulario, modal, toast, etc. deja de
   funcionar. Cargar DESPUÉS de bootstrap.min.css en _Layout.cshtml.
   ============================================================================ */

:root {
    /* Paleta alineada al logo de Ocelot CR (el gato/edificios azules + techos naranjas),
       en vez del púrpura genérico de CoreUI que traía este skin antes — ningún elemento
       de la marca real se veía reflejado en la app. El naranja se usa con cuentagotas
       (ver .sidebar .nav-link.active más abajo): es el único acento cálido de toda la
       interfaz, para que siga leyéndose como un detalle de marca y no como "otro color más".
    */
    --coreui-sidebar-active: #E8871E;
    --coreui-text-muted: #7C8798;
    --coreui-text-dark: #1B2430;
    --coreui-accent: #1B63A6;
    --coreui-accent-dark: #144A7E;
    --coreui-accent-warm: #E8871E;

    /* Pisa las variables de Bootstrap 5: cualquier .btn-primary, .text-primary,
       .bg-primary, borde de foco, etc. que YA existe en toda la app (docenas de
       vistas) adopta el acento de CoreUI automáticamente, sin tener que tocar
       cada vista una por una. */
    --bs-primary: var(--coreui-accent);
    --bs-primary-rgb: 27, 99, 166;
    --bs-link-color: var(--coreui-accent);
    --bs-link-hover-color: var(--coreui-accent-dark);
}

/* ---------- Tipografía ----------
   Inter en vez de la fuente del sistema por defecto: mejor legibilidad en pantallas de
   trabajo densas (tablas, formularios largos) y números tabulares más parejos para montos.
   Se carga desde Google Fonts en _Layout.cshtml / _AuthLayout.cshtml; si por algún motivo no
   carga (red restringida, etc.), cae de vuelta a la misma pila de fuentes del sistema que ya
   se usaba antes, así que nunca se rompe. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #F5F6FA;
    color: var(--coreui-text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ---------- Sidebar ---------- */
/* Textura de fibra de carbono (hecha 100% en CSS, sin imágenes) en vez del fondo plano de
/* Antes acá había una textura de fibra de carbono hecha en CSS puro. Se volvió a negro sólido a
   pedido — cubre todo el sidebar, incluido el recuadro del logo/ícono de arriba, que hereda este
   mismo fondo (ver la nota en .sidebar .sidebar-header más abajo). */
.sidebar.bg-dark {
    background-color: #000 !important;
    background-image: none !important;
}

/* El recuadro del logo ya no necesita su propio color: hereda el mismo fondo del sidebar (para
   que se vea como una sola pieza continua) y solo se separa del menú con una línea sutil. */
.sidebar .sidebar-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin: -1rem -1rem 1rem -1rem;
    padding: 1rem !important;
}

.sidebar .nav-link {
    border-radius: .375rem;
    margin: 0 .25rem;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

/* Franja + tinte naranja en vez de relleno sólido: el naranja del logo no tiene contraste
   suficiente con texto blanco encima como para usarlo de fondo completo (ver la nota de
   accesibilidad al elegir este valor), así que se usa como acento — franja a la izquierda +
   un tinte apenas perceptible — y el fondo oscuro del sidebar sigue siendo el que le da
   contraste al texto. */
.sidebar .nav-link.active {
    background-color: rgba(232, 135, 30, .16) !important;
    border-left-color: var(--coreui-sidebar-active);
    color: #fff !important;
}

.sidebar .sidebar-text.text-uppercase {
    color: #6E7A8A !important;
    letter-spacing: .05em;
    font-size: 1rem;
}

/* ---------- Botones ---------- */
.btn {
    border-radius: .5rem;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn-primary {
    border-color: var(--coreui-accent-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--coreui-accent-dark);
    border-color: var(--coreui-accent-dark);
}

/* Foco de teclado visible y consistente en toda la app (botones, links, tarjetas cliqueables),
   en vez de depender del azul de foco por defecto del navegador, que a veces casi no se nota
   sobre fondos oscuros como el sidebar. */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--coreui-accent);
    outline-offset: 2px;
}

/* Botones "outline" (contorno, fondo transparente) rellenos de color en vez de solo contorno:
   reutiliza los mismos tokens de color que Bootstrap ya define para el estado hover/focus de
   cada variante (--bs-btn-hover-bg, --bs-btn-hover-border-color, --bs-btn-hover-color — que YA
   son, precisamente, la versión "rellena" de cada color) y los aplica como estado normal, no
   solo al pasar el mouse. Aplica a todos los botones outline que ya existen en las vistas
   (Editar, Cancelar, Exportar, etc.) sin tener que tocar cada .cshtml uno por uno.
   Nota: esto sacrifica la jerarquía visual entre una acción principal (botón sólido, ej. "+
   Nueva Unidad/Filial") y una de apoyo (botón outline, ej. "Exportar a Excel") — con esta regla
   ambas se ven igual de "cargadas". Fue una decisión explícita a pedido, revertida de la versión
   anterior de este archivo que dejaba los outline como contorno real. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
    --bs-btn-color: var(--bs-btn-hover-color);
    --bs-btn-bg: var(--bs-btn-hover-bg);
    --bs-btn-border-color: var(--bs-btn-hover-border-color);
}

/* ---------- Tarjetas: look CoreUI — blancas, esquinas suaves, sombra liviana ---------- */
.card {
    border: 1px solid #E5E7EE;
    border-radius: .75rem;
    box-shadow: 0 2px 6px rgba(20, 33, 58, .06);
}

.card-body {
    padding: 1.25rem;
}

.card .card-title {
    color: var(--coreui-text-dark);
    font-weight: 600;
}

.card.text-white .card-title {
    color: #fff;
}

/* ---------- Formularios: un poco más de aire y esquinas consistentes con los botones ---------- */
.form-control,
.form-select {
    border-radius: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.form-label {
    font-weight: 500;
    margin-bottom: .35rem;
}

/* ---------- Tablas ---------- */
.table thead th {
    color: var(--coreui-text-muted);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .04em;
    border-bottom-width: 1px;
    border-color: #E5E7EE;
    /* Sin esto, el navegador prefiere una sola línea por encabezado (aunque el título tenga
       varias palabras, ej. "NÚMERO DE UNIDAD/FILIAL") y ensancha la columna entera para lograrlo
       — eso es justo lo que hacía que muchas tablas necesitaran scroll horizontal. max-width
       limita cuánto puede crecer cada columna solo por el ancho de su encabezado (el contenido
       de las filas puede seguir siendo más angosto); white-space: normal habilita el wrap. */
    white-space: normal;
    max-width: 160px;
    vertical-align: bottom;
    text-align: left;
}

/* Resalta la fila al pasar el mouse en TODAS las tablas de la app (ninguna de las 60 vistas con
   tablas usa la clase table-hover de Bootstrap todavía) — sin esto, una tabla larga se siente
   estática; con el hover, cada fila da la sensación de ser algo con lo que se puede interactuar,
   aunque no tenga un link. No aplica dentro de .table-apilada-movil (las tarjetas móviles ya
   tienen su propio estado visual y no se "pasa el mouse" en celular). */
.table:not(.table-apilada-movil) tbody tr:hover > * {
    background-color: rgba(27, 99, 166, .05);
}

/* Los botones Ver/Editar/Eliminar (y similares) van sueltos como enlaces .btn en la última
   columna de ~21 tablas de la app, sin agruparlos. Un <a class="btn"> es inline-block, así que
   si esa columna queda angosta (por ejemplo con el sidebar sin colapsar, compitiendo con 10+
   columnas de datos antes), el navegador los pasa a su propia línea uno por uno — la fila se
   estira muchísimo en vertical, y por eso hacía falta colapsar el sidebar para que se vieran
   bien. Con nowrap ya no se apilan: si de verdad no entran, el contenedor de la página (ver
   .container-fluid en _Layout.cshtml) muestra su propio scroll horizontal en vez de deformar
   la fila, tanto con el sidebar colapsado como sin colapsar. */
.table:not(.table-apilada-movil) tbody td:last-child {
    white-space: nowrap;
}

/* ---------- Tablas en celular/tablet: filas como tarjetas apiladas ----------
   Sin esto, cualquier tabla con muchas columnas (Cuotas, Pagos, Gastos, etc.) obliga a hacer
   scroll horizontal en pantallas angostas para leer las columnas de la derecha. Con
   tablas-responsivas-movil.js poniendo un data-label por celda (el texto de su columna en
   <thead>), acá se apila cada fila en una tarjeta vertical "etiqueta: valor", sin scroll
   lateral. Solo aplica a las tablas que ese script marcó como .table-apilada-movil (las que sí
   tienen encabezados reconocibles); una tabla sin <thead> útil sigue viéndose como tabla normal
   con scroll horizontal, en vez de apilar valores sin contexto. */
@media (max-width: 767.98px) {
    .table-apilada-movil thead {
        display: none;
    }

    .table-apilada-movil, .table-apilada-movil tbody {
        display: block;
        width: 100%;
    }

    .table-apilada-movil tbody tr {
        display: block;
        background-color: #fff;
        border: 1px solid #E5E7EE;
        border-radius: .625rem;
        box-shadow: 0 2px 6px rgba(20, 33, 58, .06);
        margin-bottom: .75rem;
        padding: .25rem .75rem;
    }

    /* Filas informativas (encabezado de "Agrupar por unidad", o el "No hay registros..." de una
       tabla vacía): un solo <td colspan> sin columna asociada, así que se muestran como texto
       simple en vez de forzar el layout "etiqueta: valor" de las filas de datos. */
    .table-apilada-movil tbody tr.fila-ancho-completo-movil,
    .table-apilada-movil tbody tr.fila-grupo-unidad {
        background-color: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .table-apilada-movil tbody tr.fila-ancho-completo-movil td,
    .table-apilada-movil tbody tr.fila-grupo-unidad td {
        display: block;
    }

    .table-apilada-movil td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem 0;
        border-bottom: 1px solid #F0F1F5;
        text-align: right;
    }

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

    .table-apilada-movil td[data-label]::before {
        content: attr(data-label);
        color: var(--coreui-text-muted);
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
        flex-shrink: 0;
    }

    /* table-striped pinta filas pares/impares de fondo distinto pensando en una tabla horizontal;
       acá cada fila ya es su propia tarjeta blanca, así que ese rayado se apaga para no chocar
       con el borde/sombra de la tarjeta. */
    .table-apilada-movil.table-striped tbody tr:nth-of-type(odd) {
        background-color: #fff;
    }
}


/* ---------- Links y texto secundario ---------- */
.text-muted {
    color: var(--coreui-text-muted) !important;
}

/* Bootstrap subraya todos los links por defecto, incluso los sueltos dentro de párrafos y
   textos de ayuda ("¿Olvidaste tu contraseña?", "Ver todos", etc.) — se ve recargado en una app
   con tantos links de acción. Se saca el subrayado y se deja solo al pasar el mouse o enfocar
   con teclado, que es cuando de verdad hace falta la señal.
   Ojo: un <a class="btn ..."> (hay muchísimos en esta app: "Exportar a Excel", "+ Nueva Unidad",
   etc.) sigue siendo un <a> de fondo — la primera versión de esta regla no excluía .btn, y como
   "a:hover" (selector de tipo + pseudo-clase) le gana en especificidad al "text-decoration: none"
   que trae .btn de Bootstrap (un solo selector de clase), esos botones quedaban subrayados al
   pasar el mouse. Se agrega ":not(.btn)" para que la regla no toque nada que ya se vea como
   botón, pestaña o item de menú (esos ya vienen sin subrayado por sus propias clases) — se
   excluyen todos los que se usan en esta app y podían sufrir el mismo problema. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.sidebar-brand):not(.page-link) {
    text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.sidebar-brand):not(.page-link):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.sidebar-brand):not(.page-link):focus {
    text-decoration: underline;
}

/* ---------- Alertas: redondeo consistente con tarjetas/botones/campos ---------- */
.alert {
    border-radius: .625rem;
}

/* ---------- Checkboxes / radios: borde más visible que el gris clarito de Bootstrap ---------- */
.form-check-input {
    border: 2px solid #8a93a3;
}
.form-check-input:checked {
    border-color: var(--coreui-accent);
    background-color: var(--coreui-accent);
}
.form-check-input:focus {
    border-color: var(--coreui-accent);
    box-shadow: 0 0 0 .2rem rgba(27, 99, 166, .25);
}

/* ---------- Botón "Mi Filial" / volver (selector de perfil) en el sidebar: destacado (fondo
   claro, ícono propio) pero con el mismo tamaño de letra que el resto de los botones del
   sidebar (Seguridad, Cerrar sesión) — antes era notablemente más grande. ---------- */
.btn-perfil {
    padding: .55rem .75rem;
    font-size: .875rem;
    font-weight: 600;
}
.btn-perfil .nav-icon {
    font-size: 1rem;
}

/* ---------- Tarjetas de KPI cliqueables (Dashboard) ----------
   El link real es un .stretched-link invisible dentro del card-body (mismo patrón que
   recomienda Bootstrap para "toda la tarjeta es un link" sin perder el texto seleccionable ni
   el resto de la semántica de la tarjeta). Esta clase solo agrega la señal visual de que se
   puede hacer clic: cursor de mano y una sombra sutil al pasar el mouse. */
.kpi-card-link {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-card-link:hover {
    box-shadow: 0 .5rem 1rem rgba(20, 33, 58, .15);
    transform: translateY(-1px);
}

/* ---------- Barra de scroll horizontal flotante ----------
   #contenidoPrincipal (el contenedor de toda la página, ver _Layout.cshtml) puede necesitar
   scroll horizontal si una tabla es más ancha que la pantalla (ver overflow-x-auto ahí mismo).
   El problema: la barra de scroll nativa del navegador queda al final de ESE contenedor, es
   decir después de todo el contenido de la página — si la tabla tiene muchas filas, hay que
   bajar hasta el final de la página para encontrarla. Acá se oculta esa barra nativa (sigue
   pudiéndose hacer scroll con el trackpad/gesto táctil, solo no se ve) y en su lugar
   scroll-flotante.js (ver el script en _Layout.cshtml) dibuja una barra fija abajo en la
   pantalla, siempre visible mientras haga falta, sincronizada con el scroll real. */
#contenidoPrincipal {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#contenidoPrincipal::-webkit-scrollbar {
    display: none;
}
#scrollHorizontalFlotante {
    position: fixed;
    bottom: 0;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1030;
    background-color: #F5F6FA;
    border-top: 1px solid #E5E7EE;
    display: none;
}
#scrollHorizontalFlotante > div {
    height: 1px;
}