/* =========================
   LAYOUT SAAS PRO - Sistema Multiempresa
   Diseño Moderno Tipo SaaS (Stripe, Linear, Vercel, Sucursal)
   Modernización Visual Completa - Sin Romper Funcionalidad
   ========================= */

/* =========================
   TIPOGRAFIA GLOBAL
   ========================= */

body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-size:14px;
line-height:1.6;
color:#334155;
background:#f5f7fb;
}

h1,h2,h3,h4,h5,h6{
font-weight:600;
color:#1e293b;
line-height:1.3;
}

/* =========================
   ESTANDARIZACIÓN DE ICONOS - TABLER ICONS
   ========================= */

/* Iconos Tabler base */
i.ti,
i[class*="ti-"]{
font-family:'tabler-icons';
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
font-size:18px;
display:inline-block;
vertical-align:middle;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* Iconos en KPI Cards */
.kpi-card i.ti,
.kpi-card i[class*="ti-"]{
font-size:22px;
}

/* Iconos en cards */
.card i.ti,
.card i[class*="ti-"]{
font-size:18px;
}

/* Iconos pequeños */
.font-10 i.ti,
.font-10 i[class*="ti-"]{
font-size:12px;
}

/* Iconos en botones */
.btn i.ti,
.btn i[class*="ti-"]{
font-size:16px;
vertical-align:middle;
}

/* Iconos en sidebar */
.sidebar-nav i.ti,
.sidebar-nav i[class*="ti-"]{
font-size:20px;
}

/* Iconos Font Awesome - Mantener compatibilidad */
i.fa,
i[class*="fa-"]{
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:18px;
display:inline-block;
vertical-align:middle;
}

.kpi-card i.fa,
.kpi-card i[class*="fa-"]{
font-size:22px;
}

/* Iconify icons - Ya están usando Tabler */
iconify-icon{
display:inline-flex;
vertical-align:middle;
}

/* =========================
   HEADER ESTILO SAAS - AZUL DEGRADADO
   ========================= */

.topbar{
height:64px;
background:linear-gradient(90deg,#2c7be5,#1a5fd0);
border-bottom:none;
box-shadow:0 2px 8px rgba(0,0,0,.1);
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
}

.topbar .navbar{
height:64px;
padding:0 20px;
}

.topbar .navbar-header{
display:flex;
align-items:center;
margin-right:20px;
}

.topbar .navbar-brand{
padding:0;
display:flex;
align-items:center;
}

.topbar .navbar-brand img{
height:32px;
width:auto;
filter:brightness(0) invert(1);
}

/* Texto Empresa - Blanco sobre azul */
.header-company{
font-size:16px;
font-weight:600;
color:#ffffff;
margin-right:6px;
letter-spacing:.3px;
}

.header-divider{
margin:0 8px;
color:rgba(255,255,255,.5);
font-weight:400;
}

.header-branch{
font-size:14px;
color:rgba(255,255,255,.9);
font-weight:400;
}

/* Botones Header */
.topbar .btn{
border-radius:20px;
padding:6px 16px;
font-size:13px;
display:flex;
align-items:center;
gap:6px;
font-weight:500;
border:none;
transition:all .2s ease;
}

.topbar .btn-primary{
background:#ffffff;
color:#2c7be5;
}

.topbar .btn-primary:hover{
background:#f0f4ff;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(255,255,255,.3);
}

/* Iconos Header - Blanco */
.topbar iconify-icon{
color:#ffffff;
transition:color .2s ease;
}

.topbar .nav-link:hover iconify-icon{
color:rgba(255,255,255,.8);
}

.topbar .nav-link{
padding:8px 12px;
border-radius:8px;
transition:background .2s ease;
color:#ffffff;
}

.topbar .nav-link:hover{
background:rgba(255,255,255,.1);
}

.topbar .sidebartoggler{
cursor:pointer;
}

.topbar .sidebartoggler:hover{
background:rgba(255,255,255,.15);
}

/* Notificaciones */
.topbar .t-notify{
position:relative;
display:inline-block;
}

.topbar .t-notify-stock:not(.notify) .heartbit,
.topbar .t-notify-stock:not(.notify) .point,
.topbar .t-notify-bell:not(.notify) .heartbit,
.topbar .t-notify-bell:not(.notify) .point{
display:none;
}

.topbar .heartbit{
position:absolute;
top:-2px;
right:-2px;
width:8px;
height:8px;
background:#ffffff;
border-radius:50%;
animation:heartbit 1.5s ease-in-out infinite;
box-shadow:0 0 0 2px #ef4444;
}

.topbar .point{
position:absolute;
top:0;
right:0;
width:6px;
height:6px;
background:#ef4444;
border-radius:50%;
border:1px solid #ffffff;
}

@keyframes heartbit{
0%{
transform:scale(0);
opacity:1;
}
100%{
transform:scale(2.5);
opacity:0;
}
}

/* Responsive Header */
@media (max-width:991.98px){
.topbar .navbar{
padding:0 15px;
}

.topbar .header-company,
.topbar .header-branch{
font-size:14px;
}

.topbar .btn{
padding:5px 12px;
font-size:12px;
}

.topbar .navbar-header{
margin-right:10px;
}
}

@media (max-width:767.98px){
.topbar{
height:60px;
}

.topbar .navbar{
height:60px;
padding:0 10px;
}

.topbar .navbar-brand img{
height:28px;
}

.topbar .btn{
padding:4px 10px;
font-size:11px;
}
}

/* =========================
   SIDEBAR MODERNO
   ========================= */

.left-sidebar{
width:260px;
background:#ffffff;
border-right:1px solid #e6e9ef;
position:fixed;
top:64px;
left:0; /* Visible por defecto en desktop */
height:calc(100vh - 64px);
transition:width .3s ease,left .3s ease;
z-index:999;
overflow-y:auto;
box-shadow:2px 0 8px rgba(0,0,0,.04);
}

/* Modo mini-sidebar nativo: sidebar colapsado a 70px en desktop */
body.mini-sidebar .left-sidebar,
body[data-sidebartype="mini-sidebar"] .left-sidebar{
width:70px;
}

body.mini-sidebar .left-sidebar .hide-menu{
display:none!important;
}

.scroll-sidebar{
height:100%;
overflow-y:auto;
overflow-x:hidden;
}

.scroll-sidebar::-webkit-scrollbar{
width:6px;
}

.scroll-sidebar::-webkit-scrollbar-track{
background:transparent;
}

.scroll-sidebar::-webkit-scrollbar-thumb{
background:#d5d9e0;
border-radius:10px;
}

.scroll-sidebar::-webkit-scrollbar-thumb:hover{
background:#b8c2d1;
}

/* Perfil usuario */
.user-profile{
background:url("../images/background/user-info.jpg") center/cover;
padding:30px 20px;
text-align:center;
color:#fff;
position:relative;
}

.user-profile::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.3);
}

.profile-img{
position:relative;
z-index:1;
}

.profile-img img{
width:70px;
height:70px;
border-radius:50%;
border:3px solid #fff;
box-shadow:0 4px 10px rgba(0,0,0,.2);
object-fit:cover;
}

.profile-text{
margin-top:10px;
font-weight:600;
position:relative;
z-index:1;
}

.profile-text a{
color:#fff;
text-decoration:none;
font-size:15px;
}

/* Navegación sidebar */
.sidebar-nav{
padding-top:10px;
}

.sidebar-nav ul{
padding:10px;
list-style:none;
margin:0;
}

.sidebar-nav ul li{
margin-bottom:4px;
}

.sidebar-nav ul li a{
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
font-size:14px;
color:#4a4f55;
border-radius:8px;
transition:all .2s ease;
text-decoration:none;
font-weight:500;
}

.sidebar-nav ul li a:hover{
background:#f2f5fb;
color:#1e293b;
transform:translateX(2px);
}

.sidebar-nav ul li.active>a,
.sidebar-nav ul li>a.active{
background:#e9f2ff;
color:#2c7be5;
font-weight:600;
}

.sidebar-nav ul li.active iconify-icon,
.sidebar-nav ul li>a.active iconify-icon{
color:#2c7be5;
}

.sidebar-nav iconify-icon{
font-size:20px;
color:#8a8f98;
transition:color .2s ease;
flex-shrink:0;
}

.sidebar-nav ul li a:hover iconify-icon{
color:#2c7be5;
}

/* Submenú */
.sidebar-nav ul li ul.collapse{
padding-left:20px;
margin-top:4px;
}

.sidebar-nav ul li ul.collapse li a{
padding:8px 16px;
font-size:13px;
color:#64748b;
}

.sidebar-nav ul li ul.collapse li a:hover{
background:#f8fafc;
color:#2c7be5;
}

/* Overlay sidebar - SOLO EN MÓVIL (no aparece en desktop) */
.dark-transparent{
position:fixed;
top:64px;
left:0;
width:100%;
height:calc(100vh - 64px);
background:rgba(0,0,0,.5);
z-index:998; /* Por debajo del sidebar (z-index:999) pero por encima del contenido */
display:none;
opacity:0;
transition:opacity .3s ease;
cursor:pointer;
}

/* Overlay solo visible en móvil cuando el sidebar está abierto */
@media (max-width:991.98px){
body.show-sidebar .dark-transparent{
display:block;
opacity:1;
}
}

/* =========================
   SIDEBAR EN MÓVIL
   ========================= */
@media (max-width:991.98px){
/* En móvil, el sidebar está oculto por defecto */
.left-sidebar{
left:-260px;
}

/* Sidebar visible cuando tiene show-sidebar */
body.show-sidebar .left-sidebar,
.show-sidebar .left-sidebar{
left:0;
box-shadow:4px 0 16px rgba(0,0,0,.15);
}

/* Overlay solo en móvil */
.dark-transparent{
top:64px;
display:none; /* Oculto por defecto */
}

/* Overlay visible solo cuando el sidebar está abierto en móvil */
body.show-sidebar .dark-transparent{
display:block;
opacity:1;
}

/* En móvil, el page-wrapper no tiene margen */
.page-wrapper{
margin-left:0;
}
}

/* =========================
   CONTENIDO PRINCIPAL
   ========================= */

.page-wrapper{
margin-left:70px; /* Margen por defecto para mini-sidebar (70px) */
padding:24px;
padding-top:calc(64px + 24px);
background:#f5f7fb;
transition:margin-left .3s ease;
min-height:calc(100vh - 64px);
/* auto: con margin-left del sidebar, width:100% desborda y “come” el margen derecho */
width:auto;
max-width:100%;
box-sizing:border-box;
}

/* Cuando el sidebar está en modo full (expandido) */
body[data-sidebartype="full"] .page-wrapper,
body:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) .page-wrapper{
margin-left:260px;
}

/* Mantener margen de 70px en mini-sidebar */
body.mini-sidebar .page-wrapper,
body[data-sidebartype="mini-sidebar"] .page-wrapper{
margin-left:70px;
}

.container-fluid{
padding:0;
width:100%;
max-width:100%;
box-sizing:border-box;
}

/* Full width solo en desktop (>=992px): no altera el layout responsive movil */
@media (min-width: 992px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
width:100% !important;
max-width:100% !important;
}

/* Wrappers principales usados por modulos (.dashboard-wrapper excluido: tablero usa max-width + margin auto) */
.inf-ven-all-pro,
.inf-kardex-pro,
.compra-pro{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}

/* Inline max-width de wrappers administrativos (sin afectar elementos pequenos) */
.page-wrapper [style*="max-width: 1100px"],
.page-wrapper [style*="max-width: 1200px"],
.page-wrapper [style*="max-width: 1300px"],
.page-wrapper [style*="max-width: 1360px"],
.page-wrapper [style*="max-width: 1400px"]{
max-width:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
}

/* Responsive contenedor principal */
@media (max-width:991.98px){
.page-wrapper{
margin-left:0;
padding-top:calc(64px + 20px);
padding:20px;
}

/* En móvil, cuando el sidebar está visible */
body.show-sidebar .page-wrapper{
margin-left:0; /* No agregar margen en móvil, el sidebar es overlay */
}
}

@media (max-width:767.98px){
.page-wrapper{
padding:15px;
padding-top:calc(64px + 15px);
}
}

/* =========================
   SISTEMA DE GRID RESPONSIVO PARA CARDS
   ========================= */

/* Grid automático para cards en fila */
.row{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-left:0;
margin-right:0;
}

.row>[class*='col-']{
padding-left:0;
padding-right:0;
}

/* Grid moderno para cards KPI */
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-bottom:24px;
}

/* =========================
   DASHBOARD GRID SYSTEM
   ========================= */

/* Grid flexible para dashboard */
.dashboard-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:20px;
width:100%;
}

/* Grid para KPI Cards superiores (3 columnas) */
.dashboard-kpi-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:20px;
width:100%;
}

/* Grid principal: Canal de venta + Cards KPI */
.dashboard-main-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-bottom:20px;
width:100%;
}

.dashboard-main{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-bottom:20px;
width:100%;
}

/* Grid para cards KPI inferiores (4 columnas) */
.dashboard-kpi-grid-3{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:20px;
width:100%;
}

/* Grid para tablas */
.dashboard-tables-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-bottom:20px;
width:100%;
}

/* Filter section */
.dashboard-filter{
margin-bottom:20px;
}

/* Dashboard sections - Espaciado reducido */
.dashboard-kpi-grid,
.dashboard-main-grid,
.dashboard-kpi-grid-3,
.dashboard-tables-grid{
margin-bottom:20px;
}

/* KPI Cards compactas horizontales */
.kpi-card{
min-height:120px;
display:flex;
align-items:center;
}

.kpi-card .card-body{
padding:20px;
width:100%;
}

.kpi-card .kpi-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
width:100%;
}

.kpi-card .kpi-text{
flex:1;
min-width:0;
}

.kpi-card .kpi-icon{
flex-shrink:0;
width:48px;
height:48px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.15);
backdrop-filter:blur(10px);
}

.kpi-card.bg-success .kpi-icon{
background:rgba(255,255,255,.15);
}

.kpi-card.bg-danger .kpi-icon{
background:rgba(255,255,255,.15);
}

.kpi-card.bg-warning .kpi-icon{
background:rgba(255,255,255,.15);
}

.kpi-card.bg-primary .kpi-icon{
background:rgba(255,255,255,.15);
}

.kpi-card .kpi-icon i{
font-size:24px!important;
color:#ffffff;
}

.kpi-card h3{
font-size:28px;
font-weight:600;
line-height:1.2;
margin-bottom:4px;
color:#ffffff;
}

.kpi-card h4{
font-size:13px;
font-weight:500;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.5px;
opacity:.9;
color:#ffffff;
}

.kpi-card h5{
font-size:24px;
font-weight:600;
line-height:1.2;
color:#ffffff;
}

.kpi-card .text-white-50,
.kpi-card .font-13{
font-size:13px;
color:rgba(255,255,255,.7)!important;
margin-top:4px;
display:block;
}

.text-white-50{
color:rgba(255,255,255,.7)!important;
}

/* Gráficos responsivos (sin afectar SVG del preloader ni iconos sueltos) */
.card canvas,
.card svg,
.card img,
.chart-container canvas,
.chart-container svg{
max-width:100%!important;
height:auto!important;
width:100%!important;
display:block;
}

.card .chart-container,
.chart-container{
width:100%!important;
height:auto!important;
position:relative;
overflow:hidden;
box-sizing:border-box;
}

/* Asegurar que gráficos Morris, Chart.js, etc sean responsive */
#morris-chart,
#chart,
.chart,
[class*="chart"]{
max-width:100%!important;
height:auto!important;
}

/* =========================
   RESPONSIVE DASHBOARD - TABLET
   ========================= */

@media (max-width:1199.98px){
.dashboard-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.dashboard-kpi-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.dashboard-main-grid,
.dashboard-main{
grid-template-columns:1fr;
gap:20px;
}

.dashboard-kpi-grid-3{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.dashboard-tables-grid{
grid-template-columns:1fr;
gap:20px;
}
}

/* =========================
   RESPONSIVE DASHBOARD - TABLET PEQUEÑA
   ========================= */

@media (max-width:991.98px){
.dashboard-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:16px;
}

.dashboard-kpi-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:16px;
}

.dashboard-main-grid,
.dashboard-main{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-kpi-grid-3{
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:16px;
}

.dashboard-tables-grid{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-filter{
margin-bottom:16px;
}

.cards-grid{
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:16px;
}

.kpi-card{
min-height:110px;
}

.kpi-card .card-body{
padding:16px;
}
}

/* =========================
   RESPONSIVE DASHBOARD - MOBILE
   ========================= */

@media (max-width:575.98px){
.dashboard-grid{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-kpi-grid{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-main-grid,
.dashboard-main{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-kpi-grid-3{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-tables-grid{
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}

.dashboard-filter{
margin-bottom:16px;
}

.cards-grid{
grid-template-columns:1fr;
gap:16px;
}

.kpi-card{
min-height:100px;
}

.kpi-card .card-body{
padding:16px;
}

.kpi-card h3{
font-size:24px;
}

.kpi-card h4{
font-size:12px;
margin-bottom:6px;
}

.kpi-card .kpi-icon{
width:40px;
height:40px;
}

.kpi-card .kpi-icon i{
font-size:20px!important;
}

.kpi-card .text-white-50,
.kpi-card .font-13{
font-size:12px;
}
}

/* =========================
   CARDS MODERNAS - SISTEMA UNIFICADO
   ========================= */

.card{
border:none;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
background:#ffffff;
transition:all .2s ease;
margin-bottom:20px;
overflow:hidden;
position:relative;
width:100%;
min-height:auto;
box-sizing:border-box;
}

.card:hover{
box-shadow:0 8px 24px rgba(0,0,0,.08);
transform:translateY(-2px);
}

/* Evitar alturas fijas grandes */
.card[style*="height:300px"],
.card[style*="height:400px"],
.card[style*="height:500px"]{
height:auto!important;
min-height:auto!important;
}

/* Card header */
.card-header{
padding:20px 24px;
border-bottom:1px solid #f1f5f9;
background:#ffffff;
font-weight:600;
font-size:16px;
color:#1e293b;
}

/* Card body */
.card-body{
padding:20px;
}

.card-body.p-0{
padding:0;
}

.card-body.p-b-0{
padding-bottom:0;
}

.card-body.p-t-0{
padding-top:0;
}

.card-body.p-r-0{
padding-right:0;
}

.card-body.p-l-0{
padding-left:0;
}

/* Card title */
.card-title{
font-size:18px;
font-weight:600;
color:#1e293b;
margin-bottom:16px;
line-height:1.3;
}

.card-title.m-b-10{
margin-bottom:10px;
}

.card-title.m-b-0{
margin-bottom:0;
}

/* Card outline variants */
.card-outline-success{
border-left:4px solid #10b981;
}

.card-outline-info{
border-left:4px solid #06b6d4;
}

.card-outline-primary{
border-left:4px solid #2c7be5;
}

.card-outline-warning{
border-left:4px solid #f59e0b;
}

.card-outline-danger{
border-left:4px solid #ef4444;
}

/* =========================
   KPI CARDS (ESTADÍSTICAS)
   ========================= */

/* Cards de estadísticas con iconos */
.card .text-right{
text-align:right;
}

.card .text-muted{
color:#64748b;
font-size:13px;
margin-bottom:4px;
display:block;
}

.card h1.font-light{
font-size:32px;
font-weight:600;
color:#1e293b;
margin:8px 0;
line-height:1.2;
}

.card h1.font-light sup{
font-size:16px;
margin-right:4px;
}

/* Reemplazar iconos antiguos con estilo moderno */
.card i.ti-arrow-up,
.card i.ti-arrow-down,
.card i.fas{
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:6px;
font-size:14px;
}

.card i.ti-arrow-up.text-success{
background:#dcfce7;
color:#10b981;
}

.card i.ti-arrow-up.text-info{
background:#cffafe;
color:#06b6d4;
}

.card i.ti-arrow-up.text-primary{
background:#dbeafe;
color:#2c7be5;
}

/* Progress bars modernos */
.progress{
height:6px;
background:#f1f5f9;
border-radius:10px;
overflow:hidden;
margin-top:12px;
}

.progress-bar{
height:100%;
border-radius:10px;
transition:width .3s ease;
}

.progress-bar.bg-success{
background:#10b981;
}

.progress-bar.bg-info{
background:#06b6d4;
}

.progress-bar.bg-primary{
background:#2c7be5;
}

.progress-bar.bg-warning{
background:#f59e0b;
}

.progress-bar.bg-danger{
background:#ef4444;
}

/* =========================
   TABLAS MODERNAS - SISTEMA UNIFICADO
   ========================= */

.table{
background:#fff;
border-radius:10px;
overflow:hidden;
margin-bottom:0;
width:100%;
border-collapse:separate;
border-spacing:0;
max-width:100%;
box-sizing:border-box;
}

/* Tablas responsive */
.table-responsive{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
width:100%;
position:relative;
}

.table-responsive table{
width:100%;
min-width:600px;
}

.table-responsive::-webkit-scrollbar{
height:8px;
}

.table-responsive::-webkit-scrollbar-track{
background:#f1f5f9;
border-radius:10px;
}

.table-responsive::-webkit-scrollbar-thumb{
background:#d5d9e0;
border-radius:10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover{
background:#b8c2d1;
}

.table thead{
background:#f8fafc;
}

.table thead th{
padding:14px 16px;
font-weight:600;
font-size:13px;
color:#334155;
text-transform:uppercase;
letter-spacing:.5px;
border-bottom:2px solid #e2e8f0;
vertical-align:middle;
}

.table tbody td{
padding:14px 16px;
font-size:14px;
color:#475569;
border-bottom:1px solid #f1f5f9;
vertical-align:middle;
}

.table tbody tr:hover{
background:#f8fafc;
}

.table tbody tr:last-child td{
border-bottom:none;
}

/* Tablas con bordes */
.table-bordered{
border:1px solid #e2e8f0;
}

.table-bordered thead th{
border:1px solid #e2e8f0;
}

.table-bordered tbody td{
border:1px solid #e2e8f0;
}

/* Tablas striped */
.table-striped tbody tr:nth-of-type(odd){
background:#fafbfc;
}

.table-striped tbody tr:nth-of-type(odd):hover{
background:#f8fafc;
}

/* =========================
   DATATABLES MODERNOS
   ========================= */

.dataTables_wrapper{
background:#fff;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
padding:20px;
margin-bottom:24px;
}

.dataTables_wrapper .dataTables_filter{
margin-bottom:16px;
}

.dataTables_wrapper .dataTables_filter input{
border:1px solid #e2e8f0;
border-radius:8px;
padding:8px 12px;
font-size:14px;
transition:all .2s ease;
width:250px;
}

.dataTables_wrapper .dataTables_filter input:focus{
outline:none;
border-color:#2c7be5;
box-shadow:0 0 0 3px rgba(44,123,229,.1);
}

.dataTables_wrapper .dataTables_length{
margin-bottom:16px;
}

.dataTables_wrapper .dataTables_length select{
border:1px solid #e2e8f0;
border-radius:8px;
padding:6px 10px;
font-size:14px;
}

.dataTables_wrapper .dataTables_info{
color:#64748b;
font-size:13px;
padding-top:12px;
}

.dataTables_wrapper .dataTables_paginate{
padding-top:12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
padding:6px 12px;
margin:0 2px;
border-radius:6px;
border:1px solid #e2e8f0;
background:#fff;
color:#475569;
transition:all .2s ease;
cursor:pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
background:#f8fafc;
border-color:#2c7be5;
color:#2c7be5;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
background:#2c7be5;
border-color:#2c7be5;
color:#fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
opacity:.5;
cursor:not-allowed;
}

/* =========================
   FORMULARIOS MODERNOS - SISTEMA UNIFICADO
   ========================= */

.form-control{
border:1px solid #e2e8f0;
border-radius:8px;
padding:10px 14px;
font-size:14px;
transition:all .2s ease;
background:#fff;
color:#334155;
width:100%;
}

.form-control:focus{
border-color:#2c7be5;
box-shadow:0 0 0 3px rgba(44,123,229,.1);
outline:none;
}

.form-control::placeholder{
color:#94a3b8;
}

.form-label{
font-weight:500;
color:#334155;
margin-bottom:8px;
font-size:14px;
display:block;
}

.form-group{
margin-bottom:20px;
}

.form-group.m-b-40{
margin-bottom:40px;
}

.form-group.m-b-0{
margin-bottom:0;
}

/* Select moderno */
.form-select,
select.form-control{
border:1px solid #e2e8f0;
border-radius:8px;
padding:10px 14px;
font-size:14px;
transition:all .2s ease;
background:#fff;
cursor:pointer;
}

.form-select:focus,
select.form-control:focus{
border-color:#2c7be5;
box-shadow:0 0 0 3px rgba(44,123,229,.1);
outline:none;
}

/* Floating labels */
.floating-labels .form-group{
position:relative;
}

.floating-labels .form-group label{
position:absolute;
top:10px;
left:14px;
font-size:13px;
color:#94a3b8;
transition:all .2s ease;
pointer-events:none;
z-index:1;
}

.floating-labels .form-group.focused label,
.floating-labels .form-group label.active{
top:-8px;
left:10px;
font-size:11px;
color:#2c7be5;
background:#fff;
padding:0 4px;
}

.floating-labels .form-group .bar{
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background:#2c7be5;
transition:width .2s ease;
}

.floating-labels .form-group.focused .bar{
width:100%;
}

/* =========================
   BOTONES MODERNOS - SISTEMA UNIFICADO
   ========================= */

.btn{
border-radius:8px;
padding:8px 16px;
font-size:14px;
font-weight:500;
transition:all .2s ease;
border:none;
display:inline-flex;
align-items:center;
gap:6px;
cursor:pointer;
text-decoration:none;
}

.btn-primary{
background:#2c7be5;
color:#fff;
}

.btn-primary:hover{
background:#1a5fd0;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(44,123,229,.3);
}

.btn-success{
background:#10b981;
color:#fff;
}

.btn-success:hover{
background:#059669;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(16,185,129,.3);
}

.btn-danger{
background:#ef4444;
color:#fff;
}

.btn-danger:hover{
background:#dc2626;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(239,68,68,.3);
}

.btn-warning{
background:#f59e0b;
color:#fff;
}

.btn-warning:hover{
background:#d97706;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(245,158,11,.3);
}

.btn-info{
background:#06b6d4;
color:#fff;
}

.btn-info:hover{
background:#0891b2;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(6,182,212,.3);
}

.btn-secondary{
background:#64748b;
color:#fff;
}

.btn-secondary:hover{
background:#475569;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(100,116,139,.3);
}

.btn-sm{
padding:6px 12px;
font-size:13px;
}

.btn-lg{
padding:12px 24px;
font-size:16px;
}

.btn-group{
display:inline-flex;
gap:8px;
}

/* =========================
   BADGES MODERNOS
   ========================= */

.badge,
.label{
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:500;
display:inline-block;
}

.badge-success,
.label-success{
background:#dcfce7;
color:#16a34a;
}

.badge-danger,
.label-danger{
background:#fee2e2;
color:#dc2626;
}

.badge-warning,
.label-warning{
background:#fef3c7;
color:#d97706;
}

.badge-info,
.label-info{
background:#dbeafe;
color:#2563eb;
}

.badge-primary,
.label-primary{
background:#dbeafe;
color:#2563eb;
}

.label-rounded{
border-radius:12px;
}

.label-inverse{
background:#1e293b;
color:#fff;
}

/* =========================
   ALERTAS MODERNAS
   ========================= */

.alert{
border-radius:8px;
padding:14px 16px;
border:none;
font-size:14px;
margin-bottom:16px;
}

.alert-success{
background:#dcfce7;
color:#16a34a;
}

.alert-danger{
background:#fee2e2;
color:#dc2626;
}

.alert-warning{
background:#fef3c7;
color:#d97706;
}

.alert-info{
background:#dbeafe;
color:#2563eb;
}

/* =========================
   NAV TABS MODERNOS
   ========================= */

.nav-tabs{
border-bottom:2px solid #e2e8f0;
margin-bottom:20px;
}

.nav-tabs .nav-link{
border:none;
border-bottom:2px solid transparent;
color:#64748b;
padding:12px 16px;
font-weight:500;
transition:all .2s ease;
}

.nav-tabs .nav-link:hover{
color:#2c7be5;
border-bottom-color:#e2e8f0;
}

.nav-tabs .nav-link.active{
color:#2c7be5;
border-bottom-color:#2c7be5;
background:transparent;
}

.tab-content{
padding-top:0;
}

.tab-pane{
display:none;
}

.tab-pane.active{
display:block;
}

/* =========================
   BREADCRUMBS MODERNOS
   ========================= */

.breadcrumb{
background:transparent;
padding:0;
margin-bottom:20px;
display:flex;
flex-wrap:wrap;
list-style:none;
}

.breadcrumb-item{
color:#64748b;
font-size:13px;
}

.breadcrumb-item+.breadcrumb-item::before{
content:"/";
margin:0 8px;
color:#94a3b8;
}

.breadcrumb-item.active{
color:#1e293b;
font-weight:500;
}

.breadcrumb-item a{
color:#2c7be5;
text-decoration:none;
}

.breadcrumb-item a:hover{
text-decoration:underline;
}

/* =========================
   DROPDOWN MODERNOS
   ========================= */

.dropdown-menu{
border:none;
box-shadow:0 8px 24px rgba(0,0,0,.12);
border-radius:8px;
padding:8px;
margin-top:8px;
min-width:200px;
}

.dropdown-menu-right{
right:0;
left:auto;
}

.dropdown-item{
padding:10px 14px;
border-radius:6px;
font-size:14px;
transition:all .2s ease;
color:#334155;
text-decoration:none;
display:block;
}

.dropdown-item:hover{
background:#f8fafc;
color:#2c7be5;
}

.dropdown-item.active{
background:#e9f2ff;
color:#2c7be5;
}

/* =========================
   MODALES MODERNOS
   ========================= */

.modal-content{
border:none;
border-radius:12px;
box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.modal-header{
border-bottom:1px solid #f1f5f9;
padding:20px 24px;
}

.modal-title{
font-size:18px;
font-weight:600;
color:#1e293b;
}

.modal-body{
padding:24px;
}

.modal-footer{
border-top:1px solid #f1f5f9;
padding:20px 24px;
display:flex;
justify-content:flex-end;
gap:8px;
}

/* =========================
   SCROLLBAR PERSONALIZADO
   ========================= */

::-webkit-scrollbar{
width:6px;
height:6px;
}

::-webkit-scrollbar-track{
background:#f1f5f9;
}

::-webkit-scrollbar-thumb{
background:#d5d9e0;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#b8c2d1;
}

/* =========================
   PRELOADER MODERNO
   ========================= */

.preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
}

.preloader .circular{
width:50px!important;
height:50px!important;
max-width:50px!important;
max-height:50px!important;
flex:0 0 auto;
box-sizing:content-box;
}

.preloader .path{
stroke:#2c7be5;
stroke-width:3;
stroke-linecap:round;
animation:dash 1.5s ease-in-out infinite;
}

@keyframes dash{
0%{
stroke-dasharray:1,200;
stroke-dashoffset:0;
}
50%{
stroke-dasharray:89,200;
stroke-dashoffset:-35;
}
100%{
stroke-dasharray:89,200;
stroke-dashoffset:-124;
}
}

/* =========================
   UTILIDADES MODERNAS
   ========================= */

.text-muted{
color:#64748b!important;
}

.text-primary{
color:#2c7be5!important;
}

.text-success{
color:#10b981!important;
}

.text-danger{
color:#ef4444!important;
}

.text-warning{
color:#f59e0b!important;
}

.text-info{
color:#06b6d4!important;
}

.bg-light{
background:#f8fafc!important;
}

.bg-white{
background:#fff!important;
}

.shadow-sm{
box-shadow:0 2px 4px rgba(0,0,0,.05)!important;
}

.shadow{
box-shadow:0 6px 18px rgba(0,0,0,.06)!important;
}

.shadow-lg{
box-shadow:0 12px 30px rgba(0,0,0,.1)!important;
}

.rounded{
border-radius:8px!important;
}

.rounded-lg{
border-radius:12px!important;
}

.rounded-full{
border-radius:50%!important;
}

/* Espaciado consistente */
.m-t-0{margin-top:0!important;}
.m-t-5{margin-top:5px!important;}
.m-t-10{margin-top:10px!important;}
.m-t-20{margin-top:20px!important;}
.m-b-0{margin-bottom:0!important;}
.m-b-5{margin-bottom:5px!important;}
.m-b-10{margin-bottom:10px!important;}
.m-b-20{margin-bottom:20px!important;}
.m-b-40{margin-bottom:40px!important;}
.p-0{padding:0!important;}
.p-15{padding:15px!important;}
.p-20{padding:20px!important;}
.p-t-0{padding-top:0!important;}
.p-t-20{padding-top:20px!important;}
.p-b-0{padding-bottom:0!important;}
.p-r-0{padding-right:0!important;}
.p-l-0{padding-left:0!important;}

/* =========================
   RESPONSIVE GENERAL
   ========================= */

@media (max-width:991.98px){
.card-body{
padding:20px;
}

.page-wrapper{
padding:20px;
}

.table{
font-size:13px;
}

.table thead th,
.table tbody td{
padding:12px 14px;
}
}

@media (max-width:575.98px){
.card-body{
padding:16px;
}

.page-wrapper{
padding:15px;
}

.table{
font-size:12px;
}

.table thead th,
.table tbody td{
padding:10px 12px;
}

.card-title{
font-size:16px;
}

h1.font-light{
font-size:24px;
}
}

/* =========================
   COMPATIBILIDAD CON CLASES EXISTENTES
   ========================= */

/* Mantener compatibilidad con clases antiguas */
.font-light{
font-weight:300;
}

.font-13{
font-size:13px;
}

.font-10{
font-size:10px;
}

.font-15{
font-size:15px;
}

.font-18{
font-size:18px;
}

.font-medium{
font-weight:500;
}

/* Page titles */
.page-titles{
margin-bottom:24px;
}

.page-titles h4{
font-size:20px;
font-weight:600;
color:#1e293b;
margin-bottom:8px;
}

/* Message widgets */
.message-box{
padding:0;
}

.message-widget{
padding:0;
}

.contact-box{
padding:0;
}

/* Custom tabs */
.customtab .nav-link{
border-radius:8px 8px 0 0;
}

.customtab .nav-link.active{
background:#f8fafc;
}
/* --- Mejoras Visuales Atrape Soft --- */
.atrape-card-modern {
    border: none;
    transition: transform 0.3s ease;
}
.border-left-success { border-left: 5px solid #10b981 !important; }
.border-left-info { border-left: 5px solid #06b6d4 !important; }
.border-left-primary { border-left: 5px solid #2c7be5 !important; }

.kpi-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.bg-light-success { background-color: #dcfce7; }
.bg-light-info { background-color: #cffafe; }
.bg-light-primary { background-color: #dbeafe; }
.bg-light-warning { background-color: #fef3c7; }
.bg-light-danger { background-color: #fee2e2; }

/* Efecto de fondo suave para egresos/ingresos */
.bg-light-success-soft { background-color: rgba(16, 185, 129, 0.05); }
.bg-light-danger-soft { background-color: rgba(239, 68, 68, 0.05); }

.bg-white-transparent { background-color: rgba(255, 255, 255, 0.2); }

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.extra-small { font-size: 11px; }
.gap-3 { gap: 1rem; }
.opacity-8 { opacity: 0.8; }
.opacity-7 { opacity: 0.7; }

/* ARREGLO DE POSICIONES HEADER */
.topbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    height: 64px;
    background: linear-gradient(90deg, #2c7be5 0%, #1a5fd0 100%) !important;
}

.topbar .navbar {
    height: 64px;
    padding: 0 1.5rem;
}

/* Ajuste del contenedor principal para que no se meta debajo del header */
.page-wrapper {
    margin-top: 64px; /* Esta es la clave del desfase */
    padding-top: 20px;
}

/* Sidebar Limpio */
.left-sidebar {
    top: 64px;
    height: calc(100% - 64px);
    background: #ffffff !important;
    border-right: 1px solid #e3e8f0;
}

.user-profile-simple {
    background-color: #f8fafc !important;
}
/* HEADER SLIM (Como en tu referencia) */
.topbar {
    height: 55px !important; /* Más delgado */
    transition: all 0.3s ease;
}

.topbar .navbar {
    height: 55px !important;
}

/* Evitar que el contenido se meta debajo */
.page-wrapper {
    margin-top: 55px !important;
    padding-top: 25px !important;
}

/* SIDEBAR QUE NO PIERDE EL USER AL ENCOGER */
body.mini-sidebar .user-profile-simple {
    padding: 10px 5px !important;
}

body.mini-sidebar .user-profile-simple h6, 
body.mini-sidebar .user-profile-simple small {
    display: none; /* Oculta texto pero deja la imagen */
}

body.mini-sidebar .user-profile-simple img {
    width: 35px !important;
    height: 35px !important;
}

/* Efecto al hacer scroll: Desaparece el azul si quieres que sea total */
/* O simplemente lo mantenemos fijo pero delgado */
.topbar.fix-header {
    position: fixed;
    top: 0;
    width: 100%;
}
/* --- FIJAR HEADER (STICKY) --- */
.topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* Asegura que esté por encima del sidebar y contenido */
    height: 55px !important;
    background: linear-gradient(90deg, #2c7be5 0%, #1a5fd0 100%) !important;
}

/* Ajuste del Sidebar para que empiece debajo del header fijo */
.left-sidebar {
    position: fixed;
    top: 55px !important; /* Altura exacta del header */
    height: calc(100vh - 55px) !important;
    z-index: 1020;
}

/* Ajuste del Contenido Principal para que no se oculte detrás del header */
.page-wrapper {
    margin-top: 55px !important; /* Empuja el contenido hacia abajo */
    padding-top: 20px !important;
    min-height: calc(100vh - 55px);
}

/* Fix para que el fondo azul no desaparezca al scrollear */
body.fix-header .topbar {
    position: fixed;
}
/* --- OPTIMIZACIÓN MÓVIL --- */
@media (max-width: 767px) {
    /* Header más compacto en móvil */
    .topbar {
        height: 50px !important;
    }
    .topbar .navbar {
        height: 50px !important;
        padding: 0 10px !important;
    }
    .page-wrapper {
        margin-top: 50px !important;
        padding: 15px !important;
        margin-left: 0 !important;
    }

    /* Sidebar oculto por defecto en móvil */
    .left-sidebar {
        left: -260px;
        top: 50px !important;
        transition: 0.3s ease-in-out;
        z-index: 2000 !important;
        width: 260px !important;
    }

    /* Clase para mostrar el sidebar al dar clic en el botón */
    body.show-sidebar .left-sidebar {
        left: 0;
    }

    /* Overlay (fondo oscuro) cuando el menú está abierto */
    .dark-transparent {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1500;
    }
    body.show-sidebar .dark-transparent {
        display: block;
    }

    /* Ajuste de tarjetas KPI en móvil para que no se vean gigantes */
    .dashboard-kpi-grid {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 10px;
    }
}
/* ==========================================
   CORRECCIÓN DE TEXTOS EN SIDEBAR (MÓVIL Y PC)
   ========================================== */

/* 1. PC: Ocultar textos SOLO cuando está encogido y NO tiene el mouse encima */
body.mini-sidebar .left-sidebar .hide-menu,
body.mini-sidebar .left-sidebar .user-profile-simple h6,
body.mini-sidebar .left-sidebar .user-profile-simple small {
    display: none;
}

body.mini-sidebar .left-sidebar .sidebar-nav ul li a {
    justify-content: center;
    padding: 15px 0 !important;
}

/* 2. PC: Mostrar textos al pasar el mouse (Efecto Hover de expansión) */
@media (min-width: 992px) {
    body.mini-sidebar .left-sidebar:hover {
        width: 260px !important;
    }
    body.mini-sidebar .left-sidebar:hover .hide-menu,
    body.mini-sidebar .left-sidebar:hover .user-profile-simple h6,
    body.mini-sidebar .left-sidebar:hover .user-profile-simple small {
        display: block !important;
    }
    body.mini-sidebar .left-sidebar:hover .sidebar-nav ul li a {
        justify-content: flex-start !important;
        padding: 10px 15px !important;
    }
}

/* 3. MÓVIL Y TABLET: Siempre mostrar los textos (Cajón flotante) */
@media (max-width: 991px) {
    body.mini-sidebar .left-sidebar .hide-menu,
    body.mini-sidebar .left-sidebar .user-profile-simple h6,
    body.mini-sidebar .left-sidebar .user-profile-simple small,
    .left-sidebar .hide-menu {
        display: block !important;
    }
    
    body.mini-sidebar .left-sidebar .sidebar-nav ul li a,
    .sidebar-nav ul li a {
        justify-content: flex-start !important;
        padding: 10px 15px !important;
    }

    /* Forzar que el menú móvil respete el ancho normal */
    .left-sidebar {
        width: 260px !important;
    }
}

/* =========================
   MÓVIL / TABLET: ancho útil real (evita doble padding page-wrapper + container-fluid p-4)
   ========================= */
@media (max-width: 991.98px) {
    #main-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
    }
}

@media (max-width: 767.98px) {
    .page-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .page-wrapper > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dashboard-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}

@media (max-width: 575.98px) {
    .page-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* =========================
   HEADER — modo vidrio (glass), solo estética
   Al final del archivo para sobreescribir gradientes sólidos del .topbar.
   ========================= */
header.topbar {
    background: linear-gradient(
        90deg,
        rgba(44, 123, 229, 0.82) 0%,
        rgba(26, 95, 208, 0.76) 100%
    ) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 4px 22px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

header.topbar .navbar {
    background: transparent !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header.topbar {
        background: linear-gradient(90deg, #2c7be5, #1a5fd0) !important;
    }
}