/*
Template Name: Dosix - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* ── FUENTES LOCALES ──────────────────────────────────────────
   Inter e Lato se sirven desde el servidor (sin CDN).
   Outfit sigue disponible vía Google Fonts (definida en app.css).

   Para cambiar la fuente activa: editar SOLO el valor en
   --tb-font-sans-serif y --tb-font-monospace (dos líneas abajo).
   ────────────────────────────────────────────────────────── */

/* Inter — variable font: un único archivo cubre pesos 100‑900.
   Todos los font-weight del template (300, 400, 500, 600, 700)
   se resuelven con interpolación real, sin fallback aproximado. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/inter.woff2') format('woff2');
}

/* Lato — pesos individuales (disponible como alternativa) */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato/lato-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lato/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url('../fonts/lato/lato-700.woff2') format('woff2');
}

:root {
    --tb-header-height: 50px;

    /* ↓ CAMBIAR AQUÍ para alternar fuente en todo el proyecto:
         'Inter'  → local, actual (variable font, todos los pesos)
         'Lato'   → local (solo pesos 300, 400, 700)
         'Outfit' → Google Fonts, fuente original del template   */
    --tb-font-sans-serif: 'Inter', sans-serif;
    --tb-font-monospace:  'Inter', sans-serif;
}
:root[data-sidebar=dark]{
    --tb-vertical-menu-bg: #2c0850;
}

.page-content{
    padding-top: calc(var(--tb-header-height) + 0.5rem)
}
.nav-pills .nav-link{
    text-align: left;
}

/* ==========================
   Modales con formulario y scroll.

   Bootstrap acota la altura con `.modal-dialog-scrollable .modal-content
   { max-height:100%; overflow:hidden }` y hace scrollear al `.modal-body`,
   contando con que header, body y footer sean hijos directos del content
   —que es un flex column—.

   Cuando un <form> los envuelve (necesario para enviar el modal completo),
   ese form es un bloque normal: no se encoge, el body nunca recibe altura
   acotada y por lo tanto no scrollea, y el footer —con el botón de guardar—
   queda fuera del recorte del content. El formulario se ve entero menos lo
   único que sirve para enviarlo.

   Se hace que el form sea el mismo contenedor flexible que interrumpe.
========================== */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;      /* sin esto un flex item no baja de su contenido */
    overflow: hidden;
    flex: 1 1 auto;
}

/* ==========================
   Cabeceras ordenables (una sola definición para todos los listados).
   El markup lo genera sort_th() en app/Helpers/tabla_helper.php.
========================== */
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable i { opacity: .35; font-size: .9em; vertical-align: middle; }
.sortable:hover i { opacity: .65; }
.sortable.activa { color: var(--vz-primary, #405189); }
.sortable.activa i { opacity: 1; }

/* ==========================
   TomSelect dentro de #modalKit
========================== */

/* 1) Que el control ocupe todo el ancho y se vea como form-control */
#modalKit .ts-wrapper,
#modalKit .ts-control {
    width: 100% !important;
}

#modalKit .ts-control {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background: #fff;
}

/* 2) Que el dropdown SIEMPRE quede por encima del contenido del modal */
#modalKit .ts-dropdown {
    z-index: 2000 !important;
}

/* 3) Evita “mezcla” visual: el dropdown debe tapar el contenido debajo */
#modalKit .ts-dropdown,
#modalKit .ts-dropdown .ts-dropdown-content {
    background: #fff !important;
}

/* 4) Ajusta altura/scroll para que no se vea raro */
#modalKit .ts-dropdown .ts-dropdown-content {
    max-height: 260px;
    overflow-y: auto;
}

/* 5) Evita que el modal recorte el dropdown */
#modalKit .modal-body {
    overflow: visible !important;
}

/* 6) Mejora de items */
#modalKit .ts-dropdown .option {
    padding: .5rem .75rem;
    line-height: 1.2;
}

/* CPE SUNAT: SweetAlert debe mostrarse por encima del layout/topbar/footer. */
.swal2-container {
    z-index: 20000 !important;
}