/* ==========================================================================
   1. CONFIGURACIÓN DEL MENÚ LATERAL (ARREGLO DE DESBORDE Y ANCHO)
   ========================================================================== */
.main-sidebar {
    background: linear-gradient(
        180deg,
        #08192E 0%,
        #08192E 55%,
        #0e395f 100%
    ) !important;

    position: fixed;
    z-index: 1040;
    border-right: 1px solid rgba(255,255,255,.05);
    box-shadow: 10px 0 30px rgba(0,0,0,.25);
}

/* --- CONTENEDORES CON ANCHO CONTROLADO --- */

/* --- OPTIMIZACIÓN DE ESPACIO E IZQUIERDA ABSOLUTA --- */

/* Eliminamos cualquier colchón izquierdo del contenedor del menú */
.nav-sidebar {
    padding-left: 0px !important; 
    margin-left: 0px !important;
}

/* Reducimos el margen izquierdo del botón para pegarlo más al borde de la barra */
.nav-sidebar .nav-item {
    margin: 4px 10px 4px 6px !important; /* Pasamos de 10px a solo 6px en el lado izquierdo */
    display: block;
    width: auto; 
}

/* Ajuste de los enlaces (Cápsulas) */
.nav-sidebar .nav-link {
    display: flex !important;
    align-items: center !important; 
    padding: 8px 10px !important; /* Reducimos el padding interno para ganar espacio */
    border-radius: 50px !important; 
    color: rgba(255, 255, 255, 0.65) !important; 
    border: 1px solid transparent !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ÍCONOS BIEN PEGADOS AL MARGEN IZQUIERDO */
.nav-sidebar .nav-link .nav-icon {
    margin-left: 0px !important;   /* Cero margen izquierdo: se pega al inicio de la cápsula */
    margin-right: 8px !important;  /* Espacio justo y necesario con el texto */
    min-width: 22px !important;    /* Ajustamos el ancho del ícono para compactarlo */
    text-align: center !important;
    color: rgba(255, 255, 255, 0.65) !important;
}


/* --- EFECTO CAPSULA GLASS (PERFECTAMENTE ACOTADO) --- */
[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link,
[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-item .nav-link.active,
.nav-sidebar .nav-item .nav-link:hover {
    
    background: linear-gradient(
        90deg, 
        rgba(33, 74, 222, 0.75) 0%,   
        rgba(33, 74, 222, 0.45) 50%,  
        rgba(33, 74, 222, 0.25) 100%  
    ) !important; 
    
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; 
    border: 1px solid rgba(59, 130, 246, 0.6) !important; 
    color: #ffffff !important;
    border-radius: 50px !important;
    
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 4px 15px rgba(33, 74, 222, 0.3) !important;
}

/* Iluminación de íconos activos */
[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link .nav-icon,
[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link.active .nav-icon {
    color: #95ddff !important;
}

/* Re-alineación de las flechas del menú desplegable */
.nav-sidebar .nav-link p .right {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centrado vertical matemático */
}

/* ==========================================================================
   3. ESTILO DE SUBMENÚS: MINIMALISMO ABSOLUTO (SIN MOVIMIENTO)
   ========================================================================== */

/* Contenedor del submenú */
/* ==========================================================================
   3. ESTILO DE SUBMENÚS: ESPACIADO INTERNO CON ÍCONOS REALES
   ========================================================================== */

/* Contenedor del submenú */
.nav-sidebar .nav-treeview {
    position: relative;
    padding-left: 16px !important; /* Desplazamiento de bloque sutil */
    margin: 2px 0 4px 0 !important;
}

/* Estado base estático del submenú */
.nav-sidebar .nav-treeview .nav-link {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.45) !important; /* Texto gris discreto */
    
    /* Configuración Flexbox para alinear y separar */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* ¡AQUÍ ESTÁ LA MAGIA! Separa exactamente el ícono del texto */
    
    padding: 6px 12px !important; /* Espaciado interno cómodo */
    border-radius: 0px !important; 
    border: none !important;
    box-shadow: none !important;
    font-size: 0.88rem;
    position: relative;
    transition: color 0.2s ease-in-out; 
}

/* REGRESAMOS LOS ÍCONOS A LA VIDA Y LOS CONFIGURAMOS */
.nav-sidebar .nav-treeview .nav-link .nav-icon,
.nav-sidebar .nav-treeview .nav-link i {
    display: inline-block !important; /* Asegura que se vuelvan a ver */
    font-size: 0.85rem !important;    /* Un toque más pequeños para jerarquía */
    color: rgba(255, 255, 255, 0.35) !important; /* Tono suave por defecto */
    text-align: center !important;
    min-width: 18px !important;       /* Base fija para que los textos queden perfectamente alineados */
    margin: 0 !important;             /* Limpiamos márgenes viejos */
    transition: color 0.2s ease-in-out;
}

/* --- HOVER Y ACTIVO AL MÍNIMO ABSOLUTO (SIN MOVIMIENTO) --- */
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: transparent !important; 
    color: rgba(255, 255, 255, 0.95) !important; /* El texto se ilumina en blanco */
}

/* El ícono original cambia al azul de tu marca elegantemente */
.nav-sidebar .nav-treeview .nav-link:hover .nav-icon,
.nav-sidebar .nav-treeview .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview .nav-link:hover i,
.nav-sidebar .nav-treeview .nav-link.active i {
    color: #214ADE !important; /* Se enciende con tu azul */
}


/* ==========================================================================
   2. SECCIÓN DEL LOGO (MANTENIDO INTACTO)
   ========================================================================== */
.custom-brand-style {
    border-color: rgba(148, 148, 148, 0.15) !important;
    height: 69px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brand-link {
    background-color: #08192E; 
}

.logo-container {
    text-align: center;
    margin: 16px 0;
}


/* ==========================================================================
   3. CABEZOTE / NAVBAR (ADAPTADO A LA IMAGEN SIN ELIMINAR TUS ORIGINALES)
   ========================================================================== */
/* Color Navbar Cabezote/ Altura cabezote */
.main-header.navbar {
    background: #08192E !important; /* Cambiado al color oscuro sólido de la imagen */
    height: 69px;              /* tu altura actual */
    position: sticky;          /* queda fijo al hacer scroll */
    top: 0;
    z-index: 1030;             /* encima del contenido, pero debajo del sidebar si lo deseas */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dropdowns dentro del navbar */
.main-header .dropdown-menu {
    z-index: 1050 !important; /* siempre encima del navbar */
}

/* Botones Cabezote Originales */
.nav-link-tab {
    background-color: rgba(255, 255, 255, 0) !important; /* 0.7 = transparencia */
    border: 1px solid rgba(224, 224, 224, 0.349);
    border-radius: 4px;
    color: #cccccc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px; /* más pequeño */
    min-height: 40px; /* sin altura forzada */
    gap: 4px; /* espacio pequeño entre ícono y texto */
    text-decoration: none !important;
    box-shadow: #e0e0e059 0px 6px 6px -4px;
    transition: all 0.3s ease;
}

/* Hover fondo encendido */
.nav-link-tab:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Forzar texto blanco */
.nav-link-tab:hover p {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 14px; 
}

/* Forzar icono blanco también */
.nav-link-tab:hover i {
    color: #ffffff !important;
}

/* Texto */
.nav-link-tab p {
    margin: 0;
    font-size: 13px; /* texto más compacto */
    line-height: 1.1;
}

/* Hace que toda la sección derecha sea flex y alinee centrado */
.navbar-nav.ml-auto {
    display: flex !important;
    align-items: center !important;
}

.navbar-nav .nav-item {
    margin-left: 0.5rem;
    display: flex !important;
    align-items: center !important;
}

.nav-link-tab .fa-angle-double-right {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Cuando está colapsado (se puede abrir → flecha hacia la derecha) */
.sidebar-collapse .nav-link-tab .fa-angle-double-right {
    transform: rotate(0deg);
}


/* ==========================================================================
   4. NUEVOS ESTILOS ESPECÍFICOS PARA EL DISEÑO ACTUALIZADO DE LA IMAGEN
   ========================================================================== */
/* Botones Azules (Ver Órdenes / Ver Ventas) */
.btn-cabezote {
    background-color: #0B2240 !important;
    border: 1.5px solid #1E3A8A !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    transition: all 0.25s ease;
}

.btn-cabezote:hover, .btn-cabezote.activo {
    background-color: #1E3A8A !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.btn-cabezote .icn-btn {
    font-size: 14px;
    color: #3B82F6;
}

.btn-cabezote:hover .icn-btn, .btn-cabezote.activo .icn-btn {
    color: #FFFFFF;
}

/* Cápsula Nueva de Licencia Activa (Imagen) */
.licencia-capsula {
    background-color: #071E26 !important;
    border: 1px solid #0D5C4D !important;
    color: #A7F3D0 !important;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.licencia-capsula.caducada {
    background-color: #2D1515 !important;
    border: 1px solid #7F1D1D !important;
    color: #FCA5A5 !important;
}

/* Campana de Notificaciones & Badge */
.notification-item {
    position: relative;
}
.notification-item i {
    color: #A0AEC0;
}
.notification-item:hover i {
    color: #FFFFFF;
}
.badge-notif {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #EF4444;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 5px;
    border: 2px solid #0A192F;
}

/* Perfil de Usuario */
.perfil-trigger {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}
.user-image-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1E3A8A;
}
.flecha-nav {
    color: #A0AEC0;
    font-size: 12px;
}
/* Contenedor del menú desplegable del Perfil */
.menu-perfil-box {
    background-color: #08192E !important; /* Fondo gris ultra oscuro */
    border: 1px solid #374151 !important;  /* Borde sutil */
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    padding: 8px !important;
    min-width: 260px; /* Incrementado para que Aut. Fiscal entre en una sola línea */
}

/* Filas de información (Usuario y Dirección Fiscal) */
.user-header-info {
    font-size: 13px;
    color: #F3F4F6 !important; /* ¡Letras blancas/gris claro brillantes! */
    padding: 8px 12px !important;
    text-align: left;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: block !important;
}

/* Efecto iluminado al pasar el mouse sobre el usuario o el ruc */
.user-header-info:hover {
    background-color: rgba(59, 130, 246, 0.15) !important; /* Fondo azul sutil */
    color: #3B82F6 !important; /* Texto resalta en azul claro */
}

/* Asegurar que los textos internos como el <strong> también brillen */
.user-header-info strong {
    color: #FFFFFF !important;
}
.user-header-info:hover strong {
    color: #3B82F6 !important;
}
.btn-logout-nav {
    background: #DC2626;
    color: #FFFFFF !important;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-weight: 600;
}


/* ==========================================================================
   5. SECCIONES DE LICENCIA ANTERIORES (MANTENIDOS INTACTOS)
   ========================================================================== */
/* Separación derecha */
.estadoLicenciaC1,
.estadoLicenciaC2 {
    margin-right: 18px !important;
}

/* --- ESTADOS DE LICENCIA (colores) --- */
.estadoLicenciaD1,
.estadoLicencia1 {
    background: #B6F2D6 !important;
    color: #065F46 !important;
    border: 1px solid #065F46 !important;
    border-radius: 6px !important;
    padding: 6px 14px;
    height: 34px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* Fecha activa */
.estadoLicenciaC1 {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 14px;
    display: block;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.estadoDiasRestantes {
    background: #E6F7EE !important;      /* fondo suave */
    color: #065F46 !important;            /* texto verde */
    padding: 6px 14px !important;
    border-radius: 6px !important;        /* borde redondeado */
    border: 1px solid #065F46 !important; /* color del borde */
    font-size: 14px;
    font-weight: 600;
    display: inline-block !important;
}


/* Versión móvil */
@media (max-width: 600px) {
    .nav-item.mt-2 {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .nav-item.mt-2 .nav-link-tab {
        text-align: center;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    /* Ocultar días restantes en móvil */
    .estadoDiasRestantes,
    .estadoLicenciaC1,
    .licencia-capsula {
        display: none !important;
    }
}

/*==================================================
=            ORDERFIX DASHBOARD 2.0
==================================================*/

/* Mensaje de Bienvenida con Tipografía Moderna */
.dashboard-welcome {
    margin: 5px 0 20px 5px;
}

.dashboard-welcome-title {
    font-family: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700;
    color: #0b132b; 
    letter-spacing: -0.1px; 
    margin-bottom: 2px !important;
    line-height: 1.2;
}

.dashboard-welcome-title span {
    font-family: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    color: #2563EB; 
    font-weight: 700;
}

.dashboard-welcome-subtitle {
    font-family: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    color: #5a5e64; 
    font-size: 10.5px !important;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.1px;
}

/* Card Cajas */

.cardCajas{

    background:#fff;
    border:none;
    border-radius:18px;

    width:100%;
    height:128px;

    margin:10px 0;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(15,23,42,.08);

    transition:.30s;

}

.cardCajas:hover{

    transform:translateY(-8px);

    box-shadow:0 16px 35px rgba(15,23,42,.12);

}

.cardCajas:hover .header i{

    transform:scale(1.08);

}

.cardCajas .header{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px 8px;

}

.cardCajas .header i{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    font-size:18px;

    color:#fff;

    flex-shrink:0;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

    transition:transform .30s ease;

}

/*=============================================
COLORES
=============================================*/

.ventas i{

    background:linear-gradient(135deg,#22C55E,#16A34A);

}

.reparaciones i{

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

}

.abonos i{

    background:linear-gradient(135deg,#06B6D4,#0891B2);

}

.ingresos i{

    background:linear-gradient(135deg,#8B5CF6,#7C3AED);

}

.compras i{

    background:linear-gradient(135deg,#EF4444,#DC2626);

}

.caja i{

    background:linear-gradient(135deg,#F59E0B,#D97706);

}

/*=============================================
TEXTOS
=============================================*/

.data{

    display:flex;

    flex-direction:column;

    justify-content:center;

    margin-left:8px;

}

.data p{

    margin:0;

    color:#868686;

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    line-height:1.1;

}

.data h5{

    margin-top:2px;

    color:#353535;

    font-size:18px;

    font-weight:800;

}

/*=============================================
BODY
=============================================*/

.cardBodyCajas{

    padding:0 14px 10px;

}

/*=============================================
PROGRESS
=============================================*/

.cardBodyCajas .progress{

    height:3px !important;

    border-radius:30px;

    background:#EDF2F7;

    margin-bottom:10px !important;

}

.cardBodyCajas .progress-bar{

    border-radius:30px;

}

/*=============================================
LINK
=============================================*/

.cardBodyCajas a{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:600;

    color:#2563EB;

    transition:.3s;

}

.cardBodyCajas a:hover{

    gap:10px;

}

/*=============================================
BALANCE DIARIO
=============================================*/

.balance-card{

    position:relative;

    width:100%;

    height:155px;

    border-radius:18px;

    overflow:hidden;

    background:linear-gradient(135deg,#08192E 0%,#132F7A 55%,#1E49A5 100%);

    box-shadow:0 12px 30px rgba(8,27,77,.28);

    padding:22px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.balance-left{

    width:52%;

    z-index:2;

}

.balance-title{

    display:block;

    color:#FFFFFF;

    font-size:14px;

    letter-spacing:.5px;

    font-weight:700;

    margin-bottom:12px;

}

.balance-total{

    color:#FFFFFF;

    font-size:38px;

    font-weight:800;

    line-height:1;

    margin:0;

}

.balance-divider{

    width:95%;

    height:1px;

    background:rgba(255,255,255,.20);

    margin:22px 0 18px;

}

.balance-date{

    display:flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.90);

    font-size:15px;

}

.balance-date i{

    font-size:18px;

}

.balance-right{

    position:absolute;

    right:-15px;

    bottom:-60px;

    width:46%;

}

.balance-right img{

    display:block;

    width:100%;

    max-width:290px;

    height:auto;

}

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

@media(max-width:767px){

    .cardCajas{

        margin-bottom:15px;

        height:auto;

    }

    
    .data h5{

        font-size:24px;

    }

}

/*=========================================
TENDENCIA KPI
=========================================*/

.kpi-trend{

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:2px;

    font-size:12px;

    font-weight:700;

}

.kpi-trend i{

    transform:rotate(45deg);

    font-size:11px;

    color:inherit !important;

    width:auto !important;

    height:auto !important;

    background:none !important;

    box-shadow:none !important;

}


/*=========================================
COLORES KPI
=========================================*/

.ventas .kpi-trend{
    color:#22C55E;
}

.reparaciones .kpi-trend{
    color:#2563EB;
}

.abonos .kpi-trend{
    color:#06B6D4;
}

.ingresos .kpi-trend{
    color:#8B5CF6;
}

.compras .kpi-trend{
    color:#EF4444;
}

.caja .kpi-trend{
    color:#F59E0B;
}

/*
ESCRITORIO SUPER GRANDE (XXL revisamos en 1400px en adelante)
*/
@media (min-width:1400px){
}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/
@media (max-width:767px){
    .saltoCaja{
        display: block !important;
        margin: 5px;
    }

    .estadoLicencia1{
        display: none !important;
    }
    .estadoLicencia2{
        display: block !important;
    }
    .estadoLicenciaC1{
        display: none !important;
    }
    .estadoLicenciaC2{
        display: block !important;
    }
    .estadoLicenciaD1{
        display: none !important;
    }
    .estadoLicenciaD2{
        display: block !important;
    }
    .colCentrar{
        text-align: center !important;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

/* PANEL SCROLL DEL MODULO DE VENTAS */
.tablaScroll{
    width: 100%;
    height: 250px;
    overflow: auto;
    background-color: #ebedf0; /* color suave */
}

.row.align-items-stretch {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.card-grow {
    flex-grow: 1;
}

#patternContainer {
    width: 300px;
    margin: 30px auto;
}

svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}


/*=============================================
TARJETAS DASHBOARD
=============================================*/

.dashboard-card{

    border:none !important;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(15,23,42,.08);

    transition:.30s;

    background:#fff;
    

}

.dashboard-card:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 35px rgba(15,23,42,.12);

}

.dashboard-header{

    background:#fff !important;

    border:none !important;

    padding:20px 24px 10px;

}

.dashboard-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#163B9E;

}

.dashboard-title i{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:#EEF4FF;

    font-size:18px;

}

.icon-blue{
    color:#2563EB !important;
}

.icon-purple{
    color:#7C3AED !important;
}

.icon-cyan{
    color:#0891B2 !important;
}

.icon-orange{
    color:#F59E0B !important;
}

.dashboard-card .card-body{

    padding:10px 22px 22px;

}

/*=============================================
GRÁFICOS DASHBOARD
=============================================*/

.dashboard-chart{

    width:100% !important;
    height:320px !important;

}

/*=============================================
FILTRO DASHBOARD
=============================================*/

.dashboard-filter{

    min-width:120px;

    border:1px solid #E2E8F0;

    border-radius:10px;

    padding:8px 12px;

    font-size:13px;

    font-weight:600;

    color:#475569;

    background:#FFFFFF;

    outline:none;

    cursor:pointer;

    transition:.3s;

}

.dashboard-filter:hover{

    border-color:#2563EB;

}

/*=============================================
ESTADOS ORDENES
=============================================*/

.order-item{

    display:flex;

    align-items:center;

    margin-bottom:15px;

    font-size:13px;

}

.order-dot{

    width:11px;

    height:11px;

    border-radius:50%;

    margin-right:10px;

    flex-shrink:0;

}

.order-name{

    flex:1;

    margin-left:12px;

    color:#475569;

    font-weight:600;

    font-size:13px;

}

.order-item strong{

    color:#0F172A;

    font-size:13px;

    font-weight:700;

}

/*=============================================
FOOTER TARJETAS
=============================================*/

.dashboard-footer{

    margin-top:18px;

    padding:16px 0;

    border-top:1px solid #EEF2F7;

    text-align:center;

}

.dashboard-footer a{

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}

.dashboard-footer a i{

    margin-left:6px;

    transition:.3s;

}

.dashboard-footer a:hover i{

    transform:translateX(4px);

}

/*=============================================
BADGE DASHBOARD
=============================================*/

.dashboard-badge{

    display:flex;
    align-items:center;
    gap:6px;

    padding:8px 14px;

    border:1px solid #E2E8F0;

    border-radius:10px;

    background:#FFFFFF;

    color:#475569;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.dashboard-badge:hover{

    border-color:#2563EB;

    color:#2563EB;

}

/* --- PATTERNLOCK STYLE--- */

/* Estilo base para todos los puntos (Inactivos con su círculo gris exterior) */
#patternLock .dots circle {
    fill: #b0bec5 !important;       /* Color gris del punto central pequeño */
    
    /* EL ANILLO GRIS EXTERIOR: */
    stroke: #e0e0e0 !important;      /* Color gris claro para el anillo que los envuelve */
    stroke-width: 2px !important;    /* Un borde delgado y definido */
    
    r: 8px !important;               /* Tamaño del punto del medio */
    paint-order: fill stroke !important;
    
    /* El truco para el espacio vacío entre el punto central y el anillo exterior: */
    /* Incrementamos el padding de renderizado expandiendo el espacio del stroke */
    stroke-dasharray: none;
    r: 8px !important;
}

/* Ajustamos el comportamiento base usando una pequeña variación para simular la separación */
#patternLock .dots circle {
    fill: #b0bec5 !important;
    stroke: rgba(176, 190, 197, 0.25) !important; /* Gris translúcido para el contorno */
    stroke-width: 32px !important;                 /* Ancho total del círculo exterior */
    r: 8px !important;
    paint-order: fill stroke !important;
    transition: stroke 0.2s, fill 0.2s;
}

/* --- ESTADO ACTIVO (Cuando el usuario pasa el dedo) --- */
#patternLock .dots circle.active {
    fill: #1976d2 !important;                      /* Centro cambia a azul fuerte */
    stroke: rgba(30, 136, 229, 0.16) !important;   /* El anillo cambia al halo azul de Android */
    filter: drop-shadow(0px 0px 0px #e0e0e0) !important; /* Mantiene la silueta del anillo base en el fondo */
}

/* --- LÍNEAS DE CONEXIÓN --- */
#patternLock line:not(.previewLine) {
    stroke: #1e88e5 !important;
    stroke-width: 6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#patternLock .previewLine {
    stroke: #1e88e5 !important;
    stroke-width: 4 !important;
    opacity: 0.5;
}

/* Forzar remoción de residuos de flechas */
#patternLock polygon, #patternLock g:not(.dots) {
    display: none !important;
}

/* --- DISEÑO DE LA CAJA DE SECUENCIA (MÁS PEQUEÑO Y ESTILIZADO) --- */
.secuencia-container {
    background-color: #ffffff;
    border: 1px solid #ebedf0;
    border-radius: 10px;          /* Bordes un poco menos redondeados */
    padding: 8px 14px;            /* Caja más delgada (menos alto) */
    margin: 12px auto 5px auto;
    max-width: 300px;             /* Más angosta */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.secuencia-label {
    display: block;
    font-family: 'Nunito', sans-serif;    
    font-size: 10px;               /* Letras de 'SECUENCIA' más pequeñas */
    color: #7a8b99;
    font-weight: 800;              /* Le subimos un poco el grosor para que resalte limpia */
    letter-spacing: 1px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.secuencia-valores {
    font-size: 20px;              /* Números más pequeños y discretos */
    font-family: 'Nunito', sans-serif; 
    font-weight: 700;
    color: #000000;
    letter-spacing: 3px;          /* Separación limpia entre dígitos */
}


.tarjetas-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.tarjeta-header {
    margin-bottom: 10px;
}

.tarjeta-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.75rem;
    color: #0C0B77;
}

.tarjeta-header small {
    font-weight: 500;
    font-size: 1.3rem;
    color: #888888;
}

.precio {
  font-size: 25px;
  font-weight: 600;
  background: #0C0B77;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  margin: 15px auto;
  display: inline-block;
}

.precio-anterior {
    font-size: 0.9em;      /* más pequeño que el precio actual */
    color: #888888;        /* color gris para diferenciarlo */
    text-decoration: line-through; /* tachado */
    margin: 0;             /* para que quede pegado al precio */
}
  
/* Dropdown estilos originales */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

  /* Responsive */
@media (max-width: 1024px) {
    .tarjetas-container {
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .tarjetas-container {
        flex-direction: column;
        align-items: center;
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*==================================================
=            SOPORTE DASHBOARD
==================================================*/

#miCardSoporte{

    margin-top:25px;

}

.support-header{

    text-align:center;

    padding:30px 20px 15px;

}

.support-title{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#DBEAFE;

    padding:14px 28px;

    border-radius:999px;

    margin-bottom:12px;

}

.support-title h2{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#1E3A8A;

}

.support-title i{

    font-size:22px;

    color:#1E3A8A;

}

.support-subtitle{

    margin:0;

    font-size:18px;

    color:#6B7280;

}

/*=============================================
ICONOS
=============================================*/

.iconos-contacto{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:28px;

    flex-wrap:wrap;

}

.icono-contenedor{

    width:180px;

    background:#FFFFFF;

    border-radius:20px;

    padding:28px 20px;

    text-align:center;

    box-shadow:0 8px 20px rgba(15,23,42,.08);

    transition:.30s;

}

.icono-contenedor:hover{

    transform:translateY(-8px);

    box-shadow:0 16px 35px rgba(15,23,42,.12);

}

.boton-icono{

    width:78px;

    height:78px;

    margin:0 auto 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    font-size:38px;

    text-decoration:none;

    transition:.30s;

}

.icono-contenedor:hover .boton-icono{

    transform:scale(1.08);

}

.icono-texto{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#374151;

}

/*=============================================
COLORES
=============================================*/

.navegador{

    background:#F1F5F9;

}

.navegador i{

    color:#14CBA8;

}

.whatsapp{

    background:#ECFDF5;

}

.whatsapp i{

    color:#25D366;

}

.soporte{

    background:#EFF6FF;

}

.soporte i{

    color:#2563EB;

}

.youtube{

    background:#FEF2F2;

}

.youtube i{

    color:#FF0000;

}

/*=============================================
MENU USUARIO
=============================================*/

.user-menu .dropdown-toggle::after{

    display:none;

}


/* 🎯 Ajuste visual para el campo Técnico con Select2 Crear Orden*/
.select2-container .select2-selection--single {
    height: 38px !important;
    padding: 5px 10px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0 0.25rem 0.25rem 0 !important;
    transition: all 0.2s ease-in-out;
}

/* Texto del Select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: #495057 !important;
    font-size: 14px;
    font-weight: 500;
}

/* Flecha del Select */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 4px !important;       /* controla la distancia desde arriba */
    right: 6px !important;     /* pegada al borde derecho */
    height: 16px !important;   /* ajusta el tamaño del área de la flecha */
    width: 20px !important;    /* mantiene proporción visual */
    transform: none !important; /* elimina el centrado automático */
}

/* Alineación con el grupo de input */
.input-group .select2-container {
    flex: 1;
}

/* Efecto de enfoque para hacerlo más profesional */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #007bff !important;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.4);
}


/* ==========================================================================
   DISEÑO ULTRA PREMIUM COMPACTO - INSPIRACIÓN TOTAL EN EL DASHBOARD
   ========================================================================== */
.info-box.custom-kpi {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px 14px !important; /* Equilibrio perfecto de espacio */
    box-shadow: 0 4px 12px rgba(13, 26, 40, 0.02), 0 1px 3px rgba(13, 26, 40, 0.02) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #eef2f6 !important; /* Borde ultra fino tipo card superior */
    border-bottom: 4px solid #cbd5e1 !important; /* Línea de acento inferior limpia */
    color: #111111 !important;
    display: flex !important;
    align-items: flex-start !important; /* Alinea el icono arriba si el texto es largo */
    justify-content: flex-start !important;
    gap: 12px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease !important;
}

/* Hover con efecto elástico sutil y realce de borde */
.info-box.custom-kpi:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 10px 25px rgba(13, 26, 40, 0.06) !important;
    border-color: rgba(13, 26, 40, 0.1) !important;
}

/* Icono estilizado con tamaño exacto del panel principal */
.info-box.custom-kpi .info-box-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    background-color: var(--kpi-bg) !important;
    color: var(--kpi-icon) !important;
    box-shadow: none !important;
}

/* Contenedor de Contenido (Mismo orden jerárquico del dashboard) */
.info-box.custom-kpi .info-box-content {
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    flex: 1 !important;
}

/* Título del Estado (Arriba, sutil y tipografía limpia) */
.info-box.custom-kpi .info-box-text p,
.info-box.custom-kpi .info-box-text {
    margin: 0 !important;
    font-size: 11px !important;
    color: #64748b !important; /* Gris Slate exacto */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}

/* Número Principal + Contenedor para simular la tendencia si la usas */
.info-box.custom-kpi .info-box-number h6,
.info-box.custom-kpi .info-box-number {
    margin: 3px 0 0 0 !important;
    font-size: 19px !important; /* Un punto más pequeño para máxima finura */
    color: #0f172a !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Asegura compatibilidad limpia anulando fondos nativos pesados */
.info-box.custom-kpi[class*="bg-"] {
    background: #ffffff !important;
}

/* ==========================================================================
   PALETA DE COLORES SINCRONIZADA E IDENTICA A LAS PASTILLAS
   ========================================================================== */

/* POR REPARAR */
.box-porreparar {
    border-bottom-color: #d93025 !important;
    --kpi-icon: #d93025;
    --kpi-bg: #ffe9e9;
}

/* EN DIAGNÓSTICO */
.box-diagnostico {
    border-bottom-color: #0891b2 !important;
    --kpi-icon: #0891b2;
    --kpi-bg: #ecfeff;
}

/* ESPERANDO REPUESTO */
.box-repuesto {
    border-bottom-color: #db2777 !important;
    --kpi-icon: #db2777;
    --kpi-bg: #fdf2f8;
}

/* EN ESPERA */
.box-espera {
    border-bottom-color: #b7791f !important;
    --kpi-icon: #b7791f;
    --kpi-bg: #fff7db;
}

/* REPARADO */
.box-reparados {
    border-bottom-color: #1e40af !important;
    --kpi-icon: #1e40af;
    --kpi-bg: #e6f0ff;
}

/* SIN REPARACIÓN */
.box-sinreparacion {
    border-bottom-color: #ff8c42 !important;
    --kpi-icon: #ff8c42;
    --kpi-bg: #fff1e6;
}

/* ENTREGADO */
.box-entregados {
    border-bottom-color: #16a34a !important;
    --kpi-icon: #16a34a;
    --kpi-bg: #e7f6ec;
}

/* ENTREGADO SIN REPARAR */
.box-entregados-sr {
    border-bottom-color: #0D2840 !important;
    --kpi-icon: #0D2840;
    --kpi-bg: #eef2ff;
}

/* EQUIPO ABANDONADO */
.box-abandonado {
    border-bottom-color: #475569 !important;
    --kpi-icon: #475569;
    --kpi-bg: #f8fafc;
}


/* ==========================================================================
   ESTILO MODERNO PARA PÍLDORAS DE ESTADO (BADGES EN TABLAS)
   ========================================================================== */
.btnStatus {
    border-radius: 50px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content !important;
    min-width: unset !important;
    max-width: max-content !important;
    height: auto !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: all .2s ease;
}

/* Efecto hover en las píldoras */
.btnStatus:hover {
    transform: translateY(-1px);
    opacity: .95;
}

/* Puntito base para los estados */
.btnStatus::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================================
   CONFIGURACIÓN DE COLORES PARA LAS PÍLDORAS (MÁXIMA PRIORIDAD PARA DATATABLE)
   ========================================================================== */

/* === POR REPARAR === */
.btnStatus.btn-danger, 
.btnStatus.btn-danger:hover {
    background-color: #ffe9e9 !important;
    color: #d93025 !important;
    border: 1px solid #ffb3ae !important;
}
.btnStatus.btn-danger::before { background-color: #d93025 !important; }

/* === EN DIAGNÓSTICO (Forzamos sobre cualquier btn-info o clase similar) === */
.btnStatus.en-diagnostico,
.btnStatus.btn-info,
.btnStatus.btn-info:hover {
    background-color: #ecfeff !important;
    color: #0891b2 !important;
    border: 1px solid #a5f3fc !important;
}
.btnStatus.en-diagnostico::before,
.btnStatus.btn-info::before { 
    content: "" !important;
    background-color: #0891b2 !important; 
}

/* === ESPERANDO REPUESTO === */
.btnStatus.esperando-repuesto,
.btnStatus.btn-secondary,
.btnStatus.btn-secondary:hover {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
    border: 1px solid #fbcfe8 !important;
}
.btnStatus.esperando-repuesto::before,
.btnStatus.btn-secondary::before { 
    content: "" !important;
    background-color: #db2777 !important; 
}

/* === EN ESPERA === */
.btnStatus.en-espera,
.btnStatus.btn-warning.en-espera,
.btnStatus.btn-warning.en-espera:hover {
    background-color: #fff7db !important;
    color: #b7791f !important;
    border: 1px solid #ffe08a !important;
}
.btnStatus.en-espera::before,
.btnStatus.btn-warning.en-espera::before { background-color: #b7791f !important; }

/* === REPARADO === */
.btnStatus.reparado,
.btnStatus.btn-primary,
.btnStatus.btn-primary:hover {
    background-color: #e6f0ff !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd !important;
}
.btnStatus.reparado::before,
.btnStatus.btn-primary::before { background-color: #1e40af !important; }

/* === SIN REPARACIÓN === */
.btnStatus.sin-reparacion,
.btnStatus.btn-warning:not(.en-espera):not(.entregado-sr) {
    background-color: #fff1e6 !important;
    color: #ff8c42 !important;
    border: 1px solid #ffc799 !important;
}
.btnStatus.sin-reparacion::before,
.btnStatus.btn-warning:not(.en-espera):not(.entregado-sr)::before { background-color: #ff8c42 !important; }

/* === ENTREGADO === */
.btnStatus.entregado,
.btnStatus.btn-success,
.btnStatus.btn-success:hover {
    background-color: #e7f6ec !important;
    color: #16a34a !important;
    border: 1px solid #86efac !important;
}
.btnStatus.entregado::before,
.btnStatus.btn-success::before { background-color: #16a34a !important; }

/* === ENTREGADO SIN REPARAR === */
.btnStatus.entregado-sr,
.btnStatus.btn-warning.entregado-sr {
    background-color: #eef2ff !important;
    color: #0D2840 !important;
    border: 1px solid #6da7da !important;
}
.btnStatus.entregado-sr::before,
.btnStatus.btn-warning.entregado-sr::before { background-color: #0D2840 !important; }

/* === EQUIPO ABANDONADO === */
.btnStatus.equipo-abandonado,
.btnStatus.btn-dark,
.btnStatus.btn-dark:hover {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.btnStatus.equipo-abandonado::before,
.btnStatus.btn-dark::before { 
    content: "" !important;
    background-color: #475569 !important; 
}

/* ==========================================================================
   RESPONSIVE MÓVIL
   ========================================================================== */
@media(max-width:768px){
    .btnStatus {
        font-size: 11px !important;
        padding: 6px 12px !important;
        gap: 6px;
    }
    .btnStatus::before {
        width: 7px;
        height: 7px;
    }
}
/* =====================================================
   ESTILO MODERNO PARA ESTADOS DE USUARIOS (PÍLDORA)
===================================================== */

.btnActivar, .btnStatus.tu-usuario {
    border-radius: 50px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: fit-content !important;
    min-width: unset !important;
    max-width: max-content !important;
    height: auto !important;
    white-space: nowrap;
    box-shadow: none !important;
    cursor: pointer;
    transition: all .2s ease;
}

/* EFECTO HOVER ELEVADO */
.btnActivar:hover, .btnStatus.tu-usuario:hover {
    transform: translateY(-1px);
    opacity: .95;
}

/* CONFIGURACIÓN DEL PUNTITO BASE */
.btnActivar::before, .btnStatus.tu-usuario::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* =====================================================
   ESTADO: ACTIVADO (VERDE SUAVE)
===================================================== */
.btnActivar.btn-success {
    background: #e7f6ec !important;
    color: #16a34a !important;
    border: 1px solid #86efac !important;
}

.btnActivar.btn-success::before {
    background: #16a34a !important;
}

/* =====================================================
   ESTADO: DESACTIVADO (ROJO SUAVE)
===================================================== */
.btnActivar.btn-danger {
    background: #ffe9e9 !important;
    color: #d93025 !important;
    border: 1px solid #ffb3ae !important;
}

.btnActivar.btn-danger::before {
    background: #d93025 !important;
}

/* =====================================================
   ESTADO: TU USUARIO (GRIS NEUTRO)
===================================================== */
.btnStatus.tu-usuario {
    background: #888888 !important;
    color: #ffffff !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: 50px !important;
    cursor: default;
}

.btnStatus.tu-usuario::before {
    content: "" !important;
    display: inline-block !important;
    width: 0px !important;
    height: 0px !important;
    background: #f3f4f6 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/*VENTAS - REVISAR A QUE PERTENECE ESTE CODIGO*/
.overlayPrincipal2 {
    position: absolute;  /*Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(220, 220, 220, 0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    display: none;
}
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -75px 0 0 -75px;
    width: 120px;
    height: 120px;
}

/* Estilos botones de ventas */
.btn-verde-claro {
    background: linear-gradient(135deg, #637dcc, #5275dd);
    color: #ffffff;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
    border-radius: 10px; /* o 0, o 999px */
}

/* Hover gris claro */
.btn-verde-claro:hover {
    background-color: #d2e0d2 !important; /* Gris claro */
}

/* ESTILO BOTONES DE CREDITO Y VENTAS REALIZADAS */
.btnHeaderWhite {
    background-color: #dcdcdc;
    color: #0D2840;
    border: 1px solid #404040;
    border-radius: 9;
    font-weight: 500;
    padding: 6px 14px;
    font-size: 13px;
}

.btnHeaderWhite i {
    color: inherit;
}

.btnHeaderWhite:hover {
    background-color: #637dcc;   /* gris MÁS OSCURO */
    border-color: #404040;
    color: #ffffff;
    text-decoration: none;
}



/* Estilo boton cantidad en ventas */
.icono-cantidad {
    display: inline-flex;
    width: 20px;
    height: 20px;
    background: #d9ecff; /* fondo más claro */
    color: #0055cc; /* azul intenso */
    font-weight: bold;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}

/* Estilo boton eliminar en ventas */
.icono-eliminar {
    display: inline-flex;
    width: 20px;
    height: 20px;
    background: #ffe5e5; /* fondo suave */
    color: #e07a7a; /* rojo muy suave para el ícono */
    font-weight: bold;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}

/* Estilo boton impuesto en ventas */
.icono-impuesto {
    display:inline-flex;
    width:20px;
    height:20px;
    background:#f3e8ff; /* lila claro */
    color:#6a00d9;      /* morado */
    font-weight:bold;
    align-items:center;
    justify-content:center;
    border-radius:3px;
    font-size:12px;
    margin-right:5px;
}

/* Estilo boton descuento en ventas */
.icono-descuento {
    display:inline-flex;
    width:20px;
    height:20px;
    background:#ffe9cc; /* naranja claro */
    color:#ff8a00;      /* naranja intenso suave */
    font-weight:bold;
    align-items:center;
    justify-content:center;
    border-radius:3px;
    font-size:12px;
    margin-right:5px;
}

/*
ESCRITORIO SUPER GRANDE (XXL revisamos en 1400px en adelante)
*/
@media (min-width:1400px){
    .tamanoSweetAlert { 
        width: 900px !important;
    }
}

/*
ESCRITORIO GRANDE (XL revisamos en 1200px)
*/
@media (max-width:1399px) and (min-width:1200px){
    .tamanoSweetAlert { 
        width: 900px !important;
    }
}

/*
ESCRITORIO MEDIANO O TABLET HORIZONTAL (LG revisamos en 1000px)
*/
@media (max-width:1199px) and (min-width:992px){
    .tamanoSweetAlert { 
        width: 800px !important;
    }
}

/*
ESCRITORIO PEQUEÑO O TABLET VERTICAL (MD revisamos en 840px)
*/
@media (max-width:991px) and (min-width:768px){
    .tamanoSweetAlert { 
        width: 700px !important;
    }
}

.modal-content {
    animation: modalSlideIn 0.3s ease-out !important;
    border-radius: 12px !important;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    background: linear-gradient(135deg, #4361ee, #3f37c9) !important;
    color: #fff !important;
}

.btnDanger {
    background: linear-gradient(135deg, #ff6b6b, #d32f2f) !important; /* degradado rojo */
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover */
.btnDanger:hover {
    background: linear-gradient(135deg, #ff0000, #8b0000);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 0, 0, 0.55);
    color: #ffffff;
}

.btnPrimary {
    background: linear-gradient(135deg, #637dcc, #5275dd) !important;
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover efecto tipo "Agregar" */
.btnPrimary:hover {
    background: linear-gradient(135deg, #2196f3, #0d47a1);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(21, 101, 192, 0.55);
    color: #ffffff;
}

.btnDefault {
    background-color: rgba(128, 128, 128, 0.2) !important;
    color: gray !important;
    border: 1px solid gray;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

.btnSuccess {
    background: linear-gradient(135deg, #32cd32, #32cd32) !important;
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover efecto tipo "Agregar" */
.btnSuccess:hover {
    background: linear-gradient(135deg, #23D946, #23D946);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(21, 101, 192, 0.55);
    color: #ffffff;
}

.btnWarning {
    background: linear-gradient(135deg, rgb(255, 140, 0), rgb(255, 140, 0)) !important; /* degradado rojo */
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover */
.btnWarning:hover {
    background: linear-gradient(135deg, #DE9521, #DE9521);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px #DE9521;
    color: #ffffff;
}

.btnBlue {
    background: linear-gradient(135deg, rgb(10, 72, 230), rgb(10, 72, 230)) !important; /* degradado rojo */
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover */
.btnBlue:hover {
    background: linear-gradient(135deg, #214ADE, #214ADE);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px #214ADE;
    color: #ffffff;
}

.btnBlack {
    background: linear-gradient(135deg, #293756, #293756) !important; /* degradado rojo */
    color: #ffffff !important;
    border: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}

/* Hover */
.btnBlack:hover {
    background: linear-gradient(135deg, #494D4D, #494D4D);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px #494D4D;
    color: #ffffff;
}

.filepond--action-remove-item svg {
    background: red;
}

.select2-container--default .select2-selection--single {
    border-radius: 4px !important;
}

.variable {
    display: inline-block;
    padding: 4px 8px;
    margin: 3px;
    background: #e9f5ff;
    border: 1px solid #0d6efd;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}
.variable:hover {
    background: #0d6efd;
    color: #fff;
}


#btnSoporte {
    position: fixed;
    bottom: 60px;
    right: 20px;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido */
    gap: 8px;
    padding: 0 16px;         /* Quitamos padding vertical fijo */
    height: 45px;            /* Definimos una altura fija */
    min-width: 45px;         /* Definimos un ancho mínimo */
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    white-space: nowrap;
    overflow: hidden;
}

/* Estado Compacto (Círculo Perfecto) */
#btnSoporte.compacto {
    width: 45px;   /* Igual a la altura para que sea círculo */
    padding: 0;    /* Quitamos padding para que no se deforme */
}

#btnSoporte.compacto span {
    display: none;
}

/* Al pasar el mouse se expande */
#btnSoporte:hover {
    width: 180px;  /* Ajusta este valor al ancho que desees cuando esté abierto */
    padding: 0 16px;
}

#btnSoporte:hover span {
    display: inline;
}

@media (max-width: 768px) {
    /* 1. Modificamos el estado BASE en móvil (antes de los 3 segundos) */
    #btnSoporte {
        bottom: 20px !important; /* Lo bajamos un poco más para asegurar distancia */
        right: 20px !important;
        width: 45px !important;  /* Nace como un círculo perfecto, NUNCA largo */
        padding: 0 !important;   /* Sin paddings que empujen texto */
        overflow: hidden !important;
    }

    /* Ocultamos el texto de inmediato en móvil para que no rompa el diseño */
    #btnSoporte span {
        display: none !important;
    }

    /* 2. Estado cuando pasan los 3 segundos (se convierte en la barrita lateral) */
    #btnSoporte.movil-compacto {
        width: 8px !important;
        min-width: unset !important;
        padding: 0 !important;
        right: 0px !important; 
        border-radius: 10px 0 0 10px !important;
    }

    #btnSoporte.movil-compacto i {
        display: none !important;
    }

    /* 3. Anulación absoluta de cualquier comportamiento HOVER / TOUCH en móvil */
    #btnSoporte:hover, 
    #btnSoporte:active, 
    #btnSoporte:focus {
        width: 45px !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Si ya es la barrita, el touch/hover tampoco lo deforma */
    #btnSoporte.movil-compacto:hover,
    #btnSoporte.movil-compacto:active {
        width: 8px !important;
        padding: 0 !important;
    }
}

/* =====================================================
   ESTILO GENERAL DATATABLES
===================================================== */

table.dataTable{
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100% !important;
    background: transparent !important;
}

/* HEADER */
table.dataTable thead th{
    background: #f6f9fc !important;
    border: none !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
}

/* FILAS */
table.dataTable tbody tr{
    background: #ffffff !important;
    transition: all .2s ease;
}

/* HOVER */
table.dataTable tbody tr:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

/* CELDAS */
table.dataTable tbody td{
    background: #ffffff !important;
    border-top: 1px solid #eef2f7 !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    color: #5e5e5e !important;
    font-weight: 600 !important;
}

/* REDONDEO */
table.dataTable tbody tr td:first-child{
    border-left: 1px solid #eef2f7 !important;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

table.dataTable tbody tr td:last-child{
    border-right: 1px solid #eef2f7 !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* BOTONES */
table.dataTable .btn{
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all .2s ease;
}

table.dataTable .btn:hover{
    transform: scale(1.05);
}

/* BUSCADOR */
.dataTables_filter input{
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 14px !important;
}

/* SELECT */
.dataTables_length select{
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 22px !important;
}

/* PAGINACIÓN */
.dataTables_paginate .paginate_button{
    border-radius: 10px !important;
    border: none !important;
    margin: 0 2px;
}

.dataTables_paginate .paginate_button.current{
    background: #111827 !important;
    color: #fff !important;
}

/* RESPONSIVE */
table.dataTable tbody td.dtr-control{
    padding-left: 30px !important;
}

/* TÍTULOS DEL BOTÓN + */
table tbody td ul.dtr-details li span.dtr-title{
    color: #1f2d3d !important;
    font-weight: bold !important;
    font-size: 12px !important;
}

/* DATOS DEL BOTÓN + */
table tbody td ul.dtr-details li span.dtr-data{
    font-size: 12px !important;
}

@media (max-width:768px){

    table.dataTable tbody td{
        font-size:12px;
        padding:10px 10px !important;
    }

}

/*ORDENES*/
#tablaOrdenes td:nth-child(2){
    min-width:190px;
}

/* Dar más espacio a la columna EQUIPO */
#tablaOrdenes td:nth-child(3),
#tablaOrdenes th:nth-child(3){
    min-width: 180px !important;
}

/* Dar más espacio a la columna FALLA */
#tablaOrdenes td:nth-child(4),
#tablaOrdenes th:nth-child(4){
    min-width: 180px !important;
}

/*PRODUCTOS*/
#tablaProductos img{
    width:45px;
    height:45px;
}

/*CLIENTES*/
#tablaClientes td:nth-child(3){
    min-width:220px;
}

/*CLIENTES*/
#tablaIngresos td:nth-child(4){
    font-weight:800 !important;
}


/* =====================================================
   DATATABLES RESPONSIVE - TODAS LAS TABLAS (AJUSTE PEGADO)
===================================================== */

/* Contenedor principal de la fila */
table tbody td ul.dtr-details li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    width: 100% !important;
}

/* Títulos (EJ: FALLA, EQUIPO, ACCIONES) */
table tbody td ul.dtr-details li span.dtr-title {
    color: #1f2d3d !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;

    white-space: nowrap !important;
    padding-right: 10px !important;
    margin-right: 10px !important;
}

/* Contenido (EJ: Celular Acer, Botones) */
table tbody td ul.dtr-details li span.dtr-data {
    flex: 1 !important;
    font-size: 12px !important;
    color: #5e5e5e !important;
    word-break: break-word !important;
}

/* Forzar a que el contenedor de botones no tenga márgenes extraños */
table tbody td ul.dtr-details li span.dtr-data .btn,
table tbody td ul.dtr-details li span.dtr-data a {
    margin: 0 !important;
    max-width: 100% !important;
}

/* SEPARAR EL + DEL N° EN PROVEEDORES */
#example1 tbody td.dtr-control {
    padding-left: 30px !important;
}

/* SEPARAR EL + DEL N° EN ADMINISTRAR VENTAS */
#tablaVentas tbody td.dtr-control {
    padding-left: 30px !important;
}



/* NUEVOS BOTONES EN CONFIGURACIO PARA USUARIOS - WHATSAPP - TERMINOS Y CONDICIONES */
.config-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-bottom:1px solid #e5e7eb;
    padding-bottom:12px;
}

.config-nav-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:10px;
    text-decoration:none !important;
    color:#6b7280;
    font-weight:600;
    transition:.2s;
}

.config-nav-item:hover{
    background:#f3f4f6;
    color:#111827;
}

.config-nav-item.active{
    background:#0D2840;
    color:#fff !important;
}

@media (max-width: 768px){

    .config-nav{
        gap:6px;
    }

    .config-nav-item{
        flex: 1 1 calc(50% - 6px);
        justify-content:center;
        padding:12px 10px;
        font-size:14px;
    }

}

/* Lupa visual en el buscador de todos los Select2 del sistema CREAR ORDEN */
.select2-container--open .select2-dropdown .select2-search--dropdown {
    position: relative;
    display: block;
}

.select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0aec0' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center; 
    background-size: 15px; 
    padding-right: 35px !important; 
    border-radius: 4px; 
}