@charset "utf-8";
/* =========================================================================
   CFDI Fácil — style.css reescrito 2026-05-17
   Paleta tomada del logo: verde lima + cyan
   Mantiene TODOS los selectores y url() legacy del style.css original.
   ========================================================================= */

/* ---------- Variables ---------- */
:root{
    --primary:#7DBE0D;          /* verde lima del logo (acciones) */
    --primary-dark:#5e9209;
    --primary-soft:#eaf5d2;
    --secondary:#1E9BD6;        /* cyan del logo (info, navegación) */
    --secondary-dark:#157aa8;
    --secondary-soft:#dff1fa;
    --sidebar-bg:#1f2d3d;       /* navy oscuro neutro */
    --sidebar-bg-2:#172333;
    --sidebar-text:#c5cfdb;
    --sidebar-text-muted:#7e8a99;
    --sidebar-hover:#2a3a4f;
    --topbar-bg:#ffffff;
    --topbar-text:#2c3e50;
    --body-bg:#f4f6f9;
    --content-bg:#ffffff;
    --text:#2c3e50;
    --text-muted:#7b8794;
    --border:#e3e6ec;
    --border-soft:#eef0f4;
    --danger:#dc3545;
    --warning:#f0ad4e;
    --success:#28a745;
    --info:#17a2b8;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow:0 2px 6px rgba(15,23,42,.06);
    --shadow-md:0 4px 12px rgba(15,23,42,.08);
    --radius:8px;
    --radius-sm:6px;
    --radius-lg:14px;
}

/* ---------- Fuentes (web fonts originales conservadas) ---------- */
@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabThi-webfont.eot');
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabThi-webfont.woff') format('woff'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabThi-webfont.ttf') format('truetype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ColaborateRegular';
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabReg-webfont.eot');
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabReg-webfont.woff') format('woff'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabReg-webfont.ttf') format('truetype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabReg-webfont.svg#ColaborateRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ColaborateMediumRegular';
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabMed-webfont.eot');
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabMed-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabMed-webfont.woff') format('woff'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabMed-webfont.ttf') format('truetype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabMed-webfont.svg#ColaborateMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ColaborateBoldRegular';
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabBol-webfont.eot');
    src: url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabBol-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabBol-webfont.woff') format('woff'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabBol-webfont.ttf') format('truetype'),
         url('https://cfdifacil.mx/wp-content/themes/Nova/fonts/ColabBol-webfont.svg#ColaborateBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Tipografía moderna sumada (no reemplaza Colaborate, se carga desde Google Fonts en el HTML) */

/* ---------- Reset/base ---------- */
html{ width:100%; height:100%; }
body{
    width:100%;
    height:100%;
    min-height:100vh;
    margin:0;
    background:#fff;
    font-family:'Poppins','Inter','Trebuchet MS',Arial,Helvetica,sans-serif;
    color:var(--text);
    font-size:13.5px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body.home{ background:#f2f2f2; }

a{ color:var(--secondary-dark); text-decoration:none; }
a:hover{ color:var(--secondary); }

strong{ font-weight:600; }

td{ line-height:1.5; padding:8px 6px; }
tr{ height:auto; }

/* ---------- Inputs / form ---------- */
input,select,textarea{
    height:36px;
    padding:6px 10px;
    border:1px solid var(--border);
    color:var(--text);
    background:#fff;
    box-shadow:none;
    border-radius:var(--radius-sm);
    font-family:inherit;
    font-size:13.5px;
    box-sizing:border-box;
    transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ height:auto; min-height:90px; padding:10px; resize:vertical; }
select{ padding-right:28px; }

input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(30,155,214,.15);
}

input[type="checkbox"],input[type="radio"]{
    height:auto;
    box-shadow:none;
    accent-color:var(--primary);
}

input[type="submit"], input[type="button"], button{
    background:var(--primary);
    padding:0 18px;
    height:36px;
    color:#fff;
    text-transform:uppercase;
    font-weight:600;
    font-size:12px;
    letter-spacing:.3px;
    border:none;
    cursor:pointer;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
    text-shadow:none;
    margin-top:15px;
    font-family:inherit;
    transition:background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    /* Filtros IE7-9 eliminados — el sistema ya no los soporta */
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover{
    background:var(--primary-dark);
    box-shadow:var(--shadow);
}
input[type="submit"]:active, input[type="button"]:active, button:active{
    background:var(--primary-dark);
    transform:translateY(1px);
}

.textfield{ clear:both; margin-bottom:10px; }
.inline .textfield{ clear:none; margin:8px; float:left; display:inline-block; }
.inline input[type="submit"]{ margin-top:7px; margin-left:173px; }

legend{
    font-size:15px;
    font-weight:600;
    text-align:left;
    margin:20px 0;
    border-bottom:1px solid var(--border-soft);
    padding-bottom:6px;
    float:left;
    width:100%;
    color:var(--text);
}
caption{
    font-size:15px;
    font-weight:600;
    text-align:left;
    margin:20px 0;
    border-bottom:1px solid var(--border-soft);
    padding-bottom:6px;
    color:var(--text);
}

label{
    width:85px;
    text-align:left;
    display:inline-block;
    color:var(--text);
    font-weight:500;
}
table label{ width:auto; }
table img{ text-align:center; display:inline-block; margin-bottom:-6px; }

/* ---------- Header / Topnav ---------- */
#header{
    width:100%;
    height:60px;
    border-bottom:1px solid var(--border);
    padding:0 20px;
    background:var(--sidebar-bg);
    box-shadow:var(--shadow-sm);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    height:40px;
    display:block;
    background:url(../images/logo.png) no-repeat left center;
    background-size:contain;
    width:160px;
    margin-left:0;
    position:relative;
}

/* ---------- Sidebar ---------- */
#nav{
    width:200px;
    max-width:200px;
    border:none;
    padding-top:8px;
    display:inline-block;
    float:left;
    min-height:calc(100vh - 60px);
    background:var(--sidebar-bg);
    color:#fff;
    box-shadow:1px 0 2px rgba(0,0,0,.05);
    position:relative;
}

#menu{ padding:0; margin:0; list-style:none; }
#menu li{ list-style:none; border:none; margin:0; padding:0; }
#menu ul li, #menu li:last-child{ border:none; }

/* Reglas legacy hereda padding-left 20px para items con sprite — lo conservamos para alinear con el resto */
#menu a{
    display:block;
    color:#ffffff !important;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    text-transform:none;
    padding:9px 14px 9px 20px;
    margin-left:20px;
    border-left:3px solid transparent;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
#menu a:hover{
    color:#ffffff !important;
    background:var(--sidebar-hover);
    border-left-color:var(--primary);
    -webkit-transition:color 0.2s linear;
}

#menu ul{
    background:var(--sidebar-bg-2);
    padding:4px 0;
    margin:0;
}
#menu ul a{
    color:#cdd5e0 !important;
    font-size:12.5px;
    margin-left:20px;
    padding:7px 14px 7px 30px;
    border-left:2px solid transparent;
    font-weight:400;
}
#menu ul a:hover{
    background:var(--sidebar-hover);
    color:#ffffff !important;
    text-shadow:none;
    border-left-color:var(--secondary);
    -webkit-transition:color, background-color 0.2s linear;
}

ul{
    display:block;
    margin:0;
    padding:0;
    width:100%;
    list-style:none;
}
#menu li ul{ display:none; }

/* Las clases menu-01..menu-10 del sistema legacy se conservan SIN filter (que invisibilizaba el texto)
   y SIN sprite (no existe icons-menu.png en el servidor o no se ve sobre fondo oscuro).
   Los íconos del menú quedan removidos — solo texto blanco limpio sobre navy. */
#menu .menu-01, #menu .menu-02, #menu .menu-03, #menu .menu-04, #menu .menu-05,
#menu .menu-06, #menu .menu-07, #menu .menu-08, #menu .menu-09, #menu .menu-10{
    position:relative;
    background:none;
    margin-left:0;
    filter:none;
    -webkit-filter:none;
}

/* ---------- Content ---------- */
#content{
    width:81%;
    padding:24px 28px;
    min-height:calc(100vh - 60px);
    display:inline-block;
    float:left;
    position:relative;
    background:#f4f6f9;
}

/* Footer debajo del sidebar+content (clear:both para no quedar al lado del sidebar) */
#footer{ clear:both; }

.center{
    width:100%;
    max-width:100%;
    margin:0;
    display:block;
    padding-bottom:20px;
}

.a-c{ margin:0 auto -6px auto; display:block; position:relative; }

/* Topnav (dropdowns user/seguridad/ayuda/config) */
#topnav{
    position:absolute;
    top:0;
    right:60px;
    background:transparent;
    z-index:10;
    height:60px;
    display:flex;
    align-items:center;
}

#Usuario{
    position:absolute;
    top:0;
    right:290px;
    height:60px;
    display:flex;
    align-items:center;
    color:#ffffff;
    font-size:12.5px;
    font-weight:500;
}
#Demo{ color:var(--text); font-weight:600; }

ul.topnav{
    list-style:none;
    padding:0;
    margin:0;
    float:right;
    width:auto;
    font-size:13px;
    display:flex;
    gap:4px;
}
ul.topnav li{
    float:none;
    margin:0;
    padding:0;
    position:relative;
    padding-right:0;
}
ul.topnav li a{
    padding:8px 12px;
    color:#e8edf2;
    display:block;
    text-decoration:none;
    float:none;
    border-radius:var(--radius-sm);
    white-space:nowrap;
    transition:background-color .15s ease, color .15s ease;
}
ul.topnav li a:hover{
    color:#fff;
    background:rgba(255,255,255,.13);
    border-radius:4px;
}
ul.topnav li span{
    width:100%;
    height:35px;
    float:left;
    background:url(../images/dropdown.png) no-repeat right 10px;
    position:absolute;
    top:0;
    left:0;
    opacity:.6;
    z-index:2;
    cursor:pointer;
}
ul.topnav li span.subhover{ background-position:right 11px; cursor:pointer; opacity:1; }

ul.topnav li ul.subnav{
    list-style:none;
    position:absolute;
    left:0;
    top:38px;
    background:#fff;
    margin:0;
    padding:6px 0;
    display:none;
    float:left;
    width:200px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    z-index:1000;
}
ul.topnav li ul.subnav li{
    margin:0;
    padding:0;
    border-top:none;
    border-bottom:none;
    clear:both;
    width:100%;
}
html ul.topnav li ul.subnav li a{
    float:none;
    width:auto;
    background:#fff;
    padding:8px 14px;
    font-size:12.5px;
    color:var(--text);
    border-radius:0;
}
html ul.topnav li ul.subnav li a:hover{
    background:var(--secondary-soft);
    color:var(--secondary-dark);
}

/* ---------- Tablas ---------- */
table{
    width:100%;
    margin-top:18px;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}
table .separador{ height:15px; }

thead tr{ height:auto !important; }
thead th{
    padding:10px 12px;
    text-align:left;
    background:var(--sidebar-bg);
    color:#fff;
    font-weight:600;
    line-height:1.4;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:1px solid var(--sidebar-bg-2);
}
thead{
    /* Reglas legacy con gradient SVG/IE eliminadas — flat color via thead th */
    color:#fff;
}

tbody td{ border-bottom:1px solid var(--border-soft); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--secondary-soft); }

.even{ background-color:#fafbfc; }
.odd{ background-color:#fff; }

/* ---------- Mensajes / alertas ---------- */
.error{
    background-color:var(--danger);
    padding:10px 14px;
    margin:10px 0;
    color:#fff;
    border-radius:var(--radius-sm);
    font-size:13px;
}
.validateTips{ color:var(--text-muted); padding:10px 0; }
.alertmsg{ color:var(--primary-dark); font-weight:500; }

/* ---------- Bloque #inicio (login/landing) ---------- */
#inicio{
    background:#fff;
    width:70%;
    min-width:780px;
    max-width:960px;
    display:block;
    padding:32px;
    margin:60px auto 0;
    overflow:hidden;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    border:1px solid var(--border-soft);
}
#inicio .logo{ margin-left:0; margin-top:0; }
#promo{ margin-top:20px; }

.home-menu{
    width:35%;
    float:left;
    display:inline-block;
}
.home-menu #nav{
    width:100%;
    color:var(--text-muted);
    max-width:300px;
    background:none !important;
    border-right:none !important;
    min-height:0;
    box-shadow:none;
    padding-top:0;
}
.home-menu #nav a{
    color:var(--text);
    font-size:13.5px;
    text-decoration:none;
    text-align:center;
    padding:8px 4px;
    margin-left:0;
    background:none !important;
    border-left:none !important;
}
.home-menu #nav a:hover{
    background:var(--primary-soft) !important;
    color:var(--primary-dark);
    border-left:none !important;
}

#inicio #content{
    width:58%;
    padding:0 3%;
    border-left:1px solid var(--border-soft);
    background:#fff;
    min-height:0;
}

/* ---------- Títulos ---------- */
.title{
    font-size:18px;
    text-transform:none;
    font-weight:700;
    border-bottom:2px solid var(--primary);
    padding-bottom:10px;
    margin-bottom:20px;
    color:var(--sidebar-bg);
    margin-top:0;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* ---------- Paginación ---------- */
#pagination, .paging{
    float:right;
    font-size:12.5px;
    font-weight:600;
    text-align:center;
}
.paging{ margin-top:20px; padding-bottom:30px; }

#pagination strong, .paging strong{
    border:1px solid var(--primary);
    padding:4px 10px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    display:inline-block;
    margin:0 2px;
}
#pagination a, .paging a{
    border:1px solid var(--primary-soft);
    padding:4px 10px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    text-decoration:none;
    border-radius:999px;
    display:inline-block;
    margin:0 2px;
    transition:background-color .15s, color .15s;
}
#pagination a:hover, .paging a:hover{ background:var(--primary); color:#fff; }

#btnFacturacion{ float:right; }

/* ---------- Búsqueda / fleft ---------- */
.fleft{ float:left; display:inline-block; margin:10px 15px 0 0; clear:none; }
.fleft label{ width:auto; margin-right:6px; color:var(--text-muted); font-size:12.5px; }
.searchbtn input[type="submit"], .searchbtn input[type="button"]{ margin-top:10px !important; }

td img{ margin-bottom:-6px; }
td a{ display:block; color:var(--secondary-dark); }
td a:hover{ color:var(--secondary); }

#RFC{ margin-right:30px; }

.block{ margin-bottom:14px; }

#footer{
    text-align:center;
    color:var(--text-muted);
    font-size:11.5px;
    margin-top:30px;
    padding:20px 0;
}

.large_inputs input{ width:300px; }
.large_inputs label{ width:130px; }

.imagenformato{ display:inline-block; float:left; margin-top:20px; margin-right:40px; margin-bottom:10px; }
.imagenformato img{ clear:both; display:block; height:170px; margin-bottom:10px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); }
.clear{ display:block; clear:both; }

/* ---------- Indicador de timbres ---------- */
.timbres{
    background:#fff8d6;
    height:auto;
    line-height:1.4;
    color:#8a6d1a;
    display:block;
    width:200px;
    text-align:center;
    float:left;
    margin:10px 0 0;
    padding:8px 12px;
    border:1px solid #f1e3a0;
    border-radius:var(--radius-sm);
    font-weight:600;
    font-size:12.5px;
}

/* ---------- Botones legacy ---------- */
.del{
    background:var(--danger) !important;
    font-size:11px !important;
    padding:0 10px !important;
    margin:5px 2px;
    text-shadow:none !important;
    height:24px !important;
    line-height:24px !important;
    border-radius:var(--radius-sm) !important;
    color:#fff !important;
}
.del:hover{ background:#b02a37 !important; }

.add{
    background:var(--primary) !important;
    font-size:11px !important;
    padding:0 10px !important;
    margin:5px 2px;
    text-shadow:none !important;
    height:24px !important;
    line-height:24px !important;
    border-radius:var(--radius-sm) !important;
    color:#fff !important;
}
.add:hover{ background:var(--primary-dark) !important; }

.btn_complementos{
    height:26px !important;
    padding:2px 10px !important;
    font-size:11px !important;
    text-shadow:none !important;
    line-height:22px !important;
    border-radius:var(--radius-sm) !important;
}

/* ---------- Paquetes (rebrand conservando estructura) ---------- */
#paquete{
    width:150px;
    height:auto;
    position:relative;
    margin:auto;
    float:left;
    padding:0 6px;
    padding-top:20px;
}
.paquete_title{
    border-radius:var(--radius) var(--radius) 0 0 !important;
    background:var(--secondary) !important;
    padding:12px 10px;
    height:auto;
    color:#fff;
    border:none;
    cursor:default;
    box-shadow:none;
    text-shadow:none;
    margin-top:0;
    font-size:15px;
    font-family:'ColaborateMediumRegular','Poppins',sans-serif;
    position:relative;
    text-align:center;
    font-weight:600;
}
.paquete_num{
    color:var(--text);
    font-size:36px;
    font-family:'ColaborateBoldRegular','Poppins',sans-serif;
    width:100%;
    height:70px;
    position:relative;
    background:#fff;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    text-align:center;
    line-height:70px;
    font-weight:700;
}
.paquete_num span{
    color:var(--text-muted);
    font-size:14px;
    font-family:'ColaborateRegular','Poppins',sans-serif;
    text-align:center;
    line-height:1;
    clear:both;
    display:block;
    font-weight:400;
}
.paquete_price{
    color:var(--secondary-dark);
    font-size:22px;
    font-family:'ColaborateBoldRegular','Poppins',sans-serif;
    width:100%;
    height:60px;
    position:relative;
    background:#f7f9fb;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    border-top:1px solid var(--border-soft);
    text-align:center;
    line-height:60px;
    font-weight:700;
}
.paquete_price span{ font-size:16px; }

.paquete_btn{
    color:#fff;
    font-size:14px;
    font-family:'ColaborateBoldRegular','Poppins',sans-serif;
    background:#fff;
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    width:100%;
    position:relative;
    text-align:center;
    line-height:1;
    padding:10px 0 14px;
}
.paquete_btn a{
    border-radius:var(--radius-sm) !important;
    background:var(--primary) !important;
    padding:8px 18px;
    height:auto;
    border:none;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    text-shadow:none;
    margin-top:4px;
    color:#fff;
    font-size:13px;
    text-decoration:none;
    font-family:'ColaborateBoldRegular','Poppins',sans-serif;
    display:inline-block;
    transition:background-color .15s ease;
}
.paquete_btn a:hover{ background:var(--primary-dark) !important; text-shadow:none; }

/* ---------- Exportar Excel ---------- */
.export{
    display:inline-block;
    background:#fff url(../images/file-xls.png) 8px center no-repeat;
    padding-left:32px;
    height:36px;
    border:1px solid var(--border);
    line-height:34px;
    width:auto;
    position:relative;
    padding-right:14px;
    text-decoration:none;
    margin-top:10px;
    color:var(--text);
    border-radius:var(--radius-sm);
    font-weight:500;
    font-size:12.5px;
    transition:border-color .15s, color .15s, background-color .15s;
}
.export:hover{ border-color:var(--primary); color:var(--primary-dark); background-color:var(--primary-soft); }

.mensajetxtarea{
    width:600px;
    resize:vertical;
    height:140px;
    margin-top:10px;
}

#divMasVendidos td{ font-size:11.5px; padding:0 6px; border-right:1px solid var(--border-soft); }
#divMasVendidos td:last-child{ border-right:none; font-weight:600; }
#divMasVendidos td:first-child{ font-weight:600; }

/* ---------- Botones Bootstrap-like (conservados) ---------- */
.btn-success{ color:#fff; background-color:var(--success); border-color:var(--success); }
.btn-warning{ color:#fff; background-color:var(--warning); border-color:var(--warning); }
.btn-danger{ color:#fff; background-color:var(--danger); border-color:var(--danger); }
.btn-primary{ color:#fff; background-color:var(--secondary); border-color:var(--secondary-dark); }

.paginate_button{
    border:1px solid var(--primary);
    padding:2px 10px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    border-radius:999px;
}

/* ---------- Blink legacy ---------- */
@-webkit-keyframes blinker{ from{opacity:1} to{opacity:0} }
.blink{
    font-weight:700 !important;
    color:var(--danger) !important;
    font-size:140% !important;
}

/* ---------- Helpers de layout legacy ---------- */
.wrapper{ display:block; }
.tab-button{ display:inline-block; padding:8px 14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; margin-right:6px; color:var(--text); }
.tab-button:hover, .tab-button.active{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.contentWrapper{ background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.form__field{ display:block; width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; }
.form__select{ display:block; width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; background:#fff; }
.ui-error{ border-color:var(--danger) !important; box-shadow:0 0 0 3px rgba(220,53,69,.12) !important; }
.reqfield{ color:var(--danger); font-weight:600; }
.lblTotal{ font-weight:700; color:var(--text); }
.lblinfogral{ color:var(--text-muted); font-size:12.5px; }

#divAlertas{ display:block; margin:10px 0; }
#lblMesajeAnuncios{ display:block; margin:10px 0; color:var(--secondary-dark); }

/* ---------- Responsive básico (legacy) ---------- */
@media (max-width: 900px){
    #nav{ width:100%; max-width:none; min-height:auto; float:none; display:block; padding:10px 0; }
    #content{ width:100%; padding:18px; float:none; display:block; min-height:auto; }
    #inicio{ width:92%; min-width:0; padding:20px; }
    .home-menu, #inicio #content{ width:100%; float:none; display:block; border:none; padding:0; }
    #topnav{ position:static; margin:10px 0; }
    #Usuario{ position:static; text-align:left; margin:8px 20px; }
    .large_inputs input{ width:100%; }
}

/* =========================================================================
   SISTEMA cf-*  (admin dashboard moderno, basado en template demo.html)
   Selectores nuevos cf-* — NO chocan con el legacy. Cuando una página usa
   este layout, oculta el legacy con: body > #header, body > #nav { display:none }
   Paleta tomada del logo (cyan del logo + verde lima accent).
   ========================================================================= */
:root{
    --cf-primary: var(--secondary);             /* cyan del logo */
    --cf-primary-dark: var(--secondary-dark);
    --cf-primary-soft: var(--secondary-soft);
    --cf-accent: var(--primary);                /* verde lima del logo */
    --cf-accent-dark: var(--primary-dark);
    --cf-sidebar-bg: var(--sidebar-bg);
    --cf-sidebar-bg-hover: var(--sidebar-hover);
    --cf-sidebar-text: var(--sidebar-text);
    --cf-sidebar-text-active: #ffffff;
    --cf-sidebar-accent: var(--primary);        /* el borde izquierdo activo en verde lima */
    --cf-topbar-bg:#ffffff;
    --cf-body-bg: var(--body-bg);
    --cf-card-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* Cuando se usa el layout cf-*, oculta los bloques legacy duplicados */
.cf-layout ~ #header,
.cf-layout ~ #nav,
.cf-layout ~ #topnav,
.cf-layout ~ #footer { display:none !important; }

/* Reset suave del body cuando el layout es cf-* */
body.cf-body{
    background: var(--cf-body-bg);
    font-family:'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:#1f2937;
    min-height:100vh;
}

.cf-layout{ display:flex; min-height:100vh; }

/* ============ cf-* SIDEBAR ============ */
.cf-sidebar{
    width:260px;
    background:var(--cf-sidebar-bg);
    color:var(--cf-sidebar-text);
    position:fixed; top:0; left:0; bottom:0;
    overflow-y:auto;
    z-index:1030;
    transition:transform .25s ease;
}
.cf-sidebar-brand{
    display:flex; align-items:center; justify-content:center;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.06);
    text-decoration:none;
}
.cf-sidebar-brand .cf-logo-img{
    display:block;
    max-width:130px; height:auto;
    background:#fff;
    border-radius:14px;
    padding:10px 14px;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.cf-user-card{
    margin:14px; padding:12px;
    background:rgba(255,255,255,.04);
    border-radius:10px;
    font-size:12px; color:var(--cf-sidebar-text);
    line-height:1.4;
}
.cf-user-card .cf-user-name{ color:#fff; font-weight:600; font-size:13px; display:block; margin-bottom:2px; }
.cf-user-card .cf-demo-badge{
    background:var(--cf-accent); color:#fff;
    padding:2px 6px; border-radius:4px;
    font-size:10px; font-weight:600; margin-left:6px;
}

.cf-sidebar-section{
    color:#64748b; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.8px;
    padding:18px 20px 8px;
}
.cf-nav{ list-style:none !important; padding:0 !important; margin:0 !important; }
.cf-nav > li{ list-style:none !important; margin:0 !important; padding:0 !important; }
.cf-nav > li > a, .cf-nav > li > .cf-nav-toggle{
    display:flex; align-items:center; gap:12px;
    padding:11px 20px;
    color:var(--cf-sidebar-text) !important;
    text-decoration:none;
    font-size:14px; font-weight:500;
    border-left:3px solid transparent;
    cursor:pointer;
    transition:all .15s;
}
.cf-nav > li > a:hover, .cf-nav > li > .cf-nav-toggle:hover{
    background:var(--cf-sidebar-bg-hover);
    color:var(--cf-sidebar-text-active) !important;
    border-left-color:var(--cf-sidebar-accent);
}
.cf-nav > li > .cf-nav-toggle .bi-chevron-down{
    margin-left:auto; font-size:11px; transition:transform .2s;
}
.cf-nav > li.cf-open > .cf-nav-toggle .bi-chevron-down{ transform:rotate(180deg); }
.cf-nav > li.cf-open > .cf-nav-toggle{
    background:var(--cf-sidebar-bg-hover);
    color:var(--cf-sidebar-text-active) !important;
    border-left-color:var(--cf-sidebar-accent);
}
.cf-nav > li > .cf-submenu{
    list-style:none !important; margin:0 !important; padding:0 !important;
    background:rgba(0,0,0,.18);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
}
.cf-nav > li.cf-open > .cf-submenu{ max-height:700px; }
.cf-submenu li{ list-style:none !important; margin:0 !important; padding:0 !important; }
.cf-submenu li a{
    display:block;
    padding:9px 20px 9px 52px;
    color:#94a3b8 !important; font-size:13px;
    text-decoration:none;
    transition:all .15s;
}
.cf-submenu li a:hover{
    background:var(--cf-sidebar-bg-hover);
    color:#fff !important;
    padding-left:56px;
}
.cf-nav-icon{ width:18px; text-align:center; font-size:16px; }

/* ============ cf-* MAIN ============ */
.cf-main{ flex:1; margin-left:260px; display:flex; flex-direction:column; min-width:0; }
.cf-topbar{
    background:var(--cf-topbar-bg);
    height:64px;
    display:flex; align-items:center;
    padding:0 24px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    position:sticky; top:0; z-index:1020;
}
.cf-toggle-sidebar{
    border:0; background:transparent;
    font-size:22px; color:#475569;
    margin-right:12px;
    display:none;
    cursor:pointer;
}
.cf-topbar-title{ font-size:15px; font-weight:600; color:#334155; }
.cf-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.cf-topbar-btn{
    border:0; background:transparent;
    height:40px; padding:0 12px; border-radius:10px;
    color:#475569; font-size:13px; font-weight:500;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:background .15s;
    text-decoration:none; cursor:pointer;
}
.cf-topbar-btn:hover{ background:#f1f5f9; color:var(--cf-primary); }
.cf-topbar-btn i.bi{ font-size:16px; }
.cf-topbar-btn.cf-icon-only{ width:40px; padding:0; }

.cf-topbar-user{
    display:flex; align-items:center; gap:10px;
    padding:6px 12px; border-radius:10px;
    cursor:pointer; transition:background .15s;
    color:#334155; text-decoration:none;
}
.cf-topbar-user:hover{ background:#f1f5f9; }
.cf-topbar-user .cf-avatar{
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--cf-primary), var(--cf-accent));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:14px;
}
.cf-topbar-user .cf-user-name-tb{
    font-size:13px; font-weight:600; line-height:1.2;
    max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cf-topbar-user .cf-user-role-tb{ font-size:11px; color:#94a3b8; }

/* ============ cf-* CONTENT ============ */
.cf-content{ padding:24px; flex:1; }
.cf-page-header{ margin-bottom:24px; }
.cf-page-header h1{ font-size:22px; font-weight:700; color:#0f172a; margin:0 0 4px; }
.cf-page-header p{ color:#64748b; margin:0; font-size:14px; }

.cf-hero{
    background:linear-gradient(120deg, var(--cf-primary) 0%, var(--cf-accent) 100%);
    border-radius:16px;
    padding:28px 32px;
    color:#fff;
    display:flex; align-items:center; gap:24px;
    margin-bottom:24px;
    box-shadow:0 10px 30px rgba(30,155,214,.25);
    position:relative; overflow:hidden;
}
.cf-hero::after{ content:''; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); }
.cf-hero::before{ content:''; position:absolute; right:80px; top:-40px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.06); }
.cf-hero-icon{
    width:64px; height:64px; border-radius:16px;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:32px; flex-shrink:0;
    backdrop-filter:blur(10px);
}
.cf-hero h2{ font-size:22px; font-weight:700; margin:0 0 6px; color:#fff !important; }
.cf-hero p{ margin:0; opacity:.9; font-size:14px; max-width:580px; color:#fff !important; }
.cf-hero-actions{ margin-left:auto; position:relative; z-index:1; }
.btn-light-hero{
    background:#fff; color:var(--cf-primary) !important;
    border:0; padding:10px 18px; border-radius:10px;
    font-weight:600; font-size:13px;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s, box-shadow .15s;
}
.btn-light-hero:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.15); color:var(--cf-primary) !important; }

.cf-card{
    background:#fff; border-radius:14px;
    box-shadow:var(--cf-card-shadow);
    border:1px solid #eef2f7;
    transition:transform .15s, box-shadow .15s;
    overflow:hidden; height:100%;
}
.cf-card-link{ text-decoration:none; color:inherit; display:block; height:100%; }
.cf-card-link:hover .cf-card{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.cf-card-body{ padding:20px; }
.cf-card-icon{
    width:48px; height:48px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:14px;
}
.ico-blue   { background:#e0eeff; color:#1E86FF; }
.ico-green  { background:#dcfce7; color:#16a34a; }
.ico-purple { background:#ede9fe; color:#7c3aed; }
.ico-orange { background:#ffedd5; color:#ea580c; }
.ico-pink   { background:#fce7f3; color:#db2777; }
.ico-teal   { background:#ccfbf1; color:#0d9488; }
.ico-amber  { background:#fef3c7; color:#d97706; }
.ico-gray   { background:#e5e7eb; color:#475569; }
.ico-red    { background:#fee2e2; color:#dc2626; }
.ico-indigo { background:#e0e7ff; color:#4f46e5; }
.ico-cyan   { background:var(--cf-primary-soft); color:var(--cf-primary-dark); }
.ico-lime   { background:var(--primary-soft); color:var(--cf-accent-dark); }
.cf-card-title{ font-size:15px; font-weight:600; color:#0f172a; margin:0 0 4px; }
.cf-card-desc{ font-size:13px; color:#64748b; margin:0; line-height:1.45; }
.cf-card-foot{ display:flex; align-items:center; color:var(--cf-primary); font-size:12px; font-weight:600; margin-top:12px; gap:4px; }
.cf-stat{ display:flex; align-items:center; gap:14px; }
.cf-stat .cf-stat-icon{ width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cf-stat .cf-stat-label{ font-size:12px; color:#64748b; font-weight:500; margin:0; }
.cf-stat .cf-stat-value{ font-size:22px; font-weight:700; color:#0f172a; margin:0; }

.cf-footer{
    padding:18px 24px;
    color:#94a3b8; font-size:12px;
    border-top:1px solid #eef2f7;
    background:#fff;
}
.cf-footer a{ color:#64748b; }

.cf-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1025; }
.cf-backdrop.show{ display:block; }

@media (max-width: 991.98px){
    .cf-sidebar{ transform:translateX(-100%); }
    .cf-sidebar.show{ transform:translateX(0); }
    .cf-main{ margin-left:0; }
    .cf-toggle-sidebar{ display:inline-flex; }
    .cf-topbar-user .cf-user-name-tb,
    .cf-topbar-user .cf-user-role-tb{ display:none; }
    .cf-hero{ flex-direction:column; text-align:center; align-items:center; }
    .cf-hero-actions{ margin-left:0; }
}

/* Dropdowns Bootstrap reforzados (para cuando el layout cf-* usa Bootstrap) */
.cf-layout .dropdown-menu{
    position:absolute !important;
    z-index:1050 !important;
    min-width:240px !important;
    padding:8px 0 !important;
    margin:6px 0 0 !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.10) !important;
    list-style:none !important;
}
.cf-layout .dropdown-menu li{ list-style:none !important; margin:0 !important; padding:0 !important; display:list-item !important; background:transparent !important; border:0 !important; }
.cf-layout .dropdown-menu .dropdown-item{
    display:flex !important; align-items:center !important; gap:8px !important;
    width:100% !important; padding:8px 16px !important;
    color:#334155 !important; font-size:13px !important; font-weight:500 !important;
    text-decoration:none !important; background:transparent !important; border:0 !important;
    line-height:1.4 !important; white-space:nowrap !important; clear:both !important;
}
.cf-layout .dropdown-menu .dropdown-item:hover,
.cf-layout .dropdown-menu .dropdown-item:focus{ background:#f1f5f9 !important; color:var(--cf-primary) !important; }
.cf-layout .dropdown-menu .dropdown-item.text-danger{ color:#dc2626 !important; }
.cf-layout .dropdown-menu .dropdown-item.text-danger:hover{ background:#fee2e2 !important; color:#b91c1c !important; }
.cf-layout .dropdown-menu .dropdown-header{
    display:block !important; padding:6px 16px !important;
    font-size:11px !important; font-weight:600 !important; color:#94a3b8 !important;
    text-transform:uppercase !important; letter-spacing:.5px !important; margin:0 !important;
}
.cf-layout .dropdown-menu .dropdown-divider{ height:0 !important; margin:6px 0 !important; border:0 !important; border-top:1px solid #e5e7eb !important; }
.cf-layout .dropdown-menu-end{ right:0 !important; left:auto !important; }
.cf-layout .dropdown-menu .dropdown-item i.bi{ flex-shrink:0; width:18px; text-align:center; }
.cf-layout .cf-topbar .dropdown{ position:relative; }
.cf-layout .dropdown-menu.show{ display:block !important; }

/* Cuando el layout cf-* envuelve un #content legacy, éste se aplana */
.cf-content #content{ background:transparent !important; padding:0 !important; width:auto !important; min-height:0 !important; float:none !important; display:block !important; }

/* Oculta el div de alertas legacy en layout cf-* */
.cf-layout #divAlertas{ display:none; }


/* ===== FIXES 2025: Sidebar menu accordion + Topnav ===== */

/* Sidebar: ensure submenu is hidden by default and shows cleanly */
#menu li ul {
    display: none;
    overflow: hidden;
}

/* Sidebar: menu item padding fix - remove double indentation */
#menu > li > a {
    margin-left: 0 !important;
    padding-left: 20px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 39px;
    line-height: 39px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Sidebar submenu items - clean indented style */
#menu ul li a {
    margin-left: 0 !important;
    padding-left: 38px !important;
    display: flex !important;
    align-items: center;
    height: 34px;
    line-height: 34px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Topnav span: cursor pointer for dropdown trigger */
ul.topnav li span {
    cursor: pointer !important;
    top: 0 !important;
}

/* Topnav: make dropdown anchor have relative position for better layout */  
ul.topnav li a {
    white-space: nowrap;
}

/* Topnav: hide dropdown items that are not in dropdown (show flat) */
ul.topnav li:not(:first-child):not(:last-child) > a:not(:only-child) {
    display: block;
}

/* ===== END FIXES ===== */

/* ===== LAYOUT REDESIGN: Dashboard moderno tipo HTML referencia ===== */

/* Body fondo gris claro */
body {
    background: #f4f6f9 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header: barra superior compacta oscura con logo blanco */
#header {
    background: var(--sidebar-bg) !important;
    height: 60px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 0 !important;
}

/* Logo en header - ajusta al nuevo alto */
.logo {
    height: 40px !important;
    width: 150px !important;
    background-size: contain !important;
    background-position: left center !important;
    margin: 0 !important;
    filter: brightness(0) invert(1);
}

/* Nav sidebar - empieza justo debajo del header */
#nav {
    min-height: calc(100vh - 60px) !important;
    padding-top: 12px !important;
    width: 200px !important;
    max-width: 200px !important;
}

/* Content area - fondo gris, padding generoso */
#content {
    background: #f4f6f9 !important;
    padding: 24px 28px !important;
    min-height: calc(100vh - 60px) !important;
    width: calc(100% - 200px) !important;
    box-sizing: border-box !important;
}

/* .center - sin max-width para aprovechar el espacio */
.center {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 24px 0 !important;
}

/* Títulos de sección */
.title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--sidebar-bg) !important;
    text-transform: none !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    letter-spacing: 0 !important;
}

/* Topnav a nueva altura */
#topnav {
    height: 60px !important;
    top: 0 !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Topnav links en blanco sobre fondo oscuro */
ul.topnav li a {
    color: #e8edf2 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
}
ul.topnav li a:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
ul.topnav li ul.subnav li a {
    color: var(--text) !important;
    background: #fff !important;
}

/* Usuario en header */
#Usuario {
    color: #c8d4e0 !important;
    font-size: 12px !important;
    right: 0 !important;
    top: auto !important;
    position: relative !important;
    white-space: nowrap !important;
    margin-right: 8px !important;
}

/* Cards / paneles de contenido */
table {
    margin-top: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.07) !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
}

/* Formularios de filtro / búsqueda - wrap en card */
form .filtro,
.filtros,
form:not([id]) {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}

/* Inputs y selects modernos */
input[type=text], input[type=password], input[type=email], input[type=number], 
input[type=date], input[type=tel], select, textarea {
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: var(--text) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(30,155,214,.12) !important;
    outline: none !important;
}
textarea { height: auto !important; min-height: 80px !important; }

/* Botones */
input[type=button], input[type=submit], input[type=reset], .btn-action {
    border-radius: 6px !important;
    height: 36px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    transition: opacity .15s ease, transform .1s ease !important;
}
input[type=submit] {
    background: var(--primary) !important;
    color: #fff !important;
}
input[type=submit]:hover { opacity: .88 !important; }
input[type=button] {
    background: var(--secondary) !important;
    color: #fff !important;
}
input[type=reset] {
    background: #e3e6ec !important;
    color: var(--text) !important;
}

/* Espaciado de labels */
label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; }

/* Footer compacto */
#footer {
    background: transparent !important;
    padding: 12px 28px !important;
    font-size: 11.5px !important;
    color: var(--text-muted) !important;
    margin-top: 0 !important;
}

/* ===== END LAYOUT REDESIGN ===== */

/* =====================================================
   CFDI FACIL - DISEÑO DE FORMULARIOS MODERNO v3
   Inspirado en el HTML de referencia
   ===================================================== */

/* Eliminar BRs vacíos dentro de formularios */
form br, .center > br, #content > br {
    display: none !important;
}

/* ---- CONTENEDOR PRINCIPAL: card blanca con sombra ---- */
.center > form,
.center > div > form,
.center > table,
form > table {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e3e6ec;
    box-shadow: 0 2px 8px rgba(15,23,42,.07);
    overflow: hidden;
    margin-bottom: 16px;
}

/* ---- SECCIÓN SUPERIOR: datos del encabezado de factura ---- */
/* Primera tabla dentro del formulario - la de encabezado */
#facturacionAdd > table,
.center form > table:first-of-type {
    background: #fff;
    border: 1px solid #e3e6ec !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.07) !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* ---- FILAS DE LA TABLA ---- */
/* Reducir altura de filas - deben ser compactas */
table tr {
    height: auto !important;
}

table td, table th {
    padding: 8px 12px !important;
    vertical-align: middle !important;
}

/* Filas de encabezado (tipo label + input) */
table tr td[colspan] {
    padding: 10px 16px !important;
}

/* ---- TÍTULOS DE SECCIONES DENTRO DE TABLAS ---- */
/* TD que actúa como header de sección */
table tr:first-child th,
table thead th {
    background: #1f2d3d !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: 10px 14px !important;
    border: none !important;
}

/* ---- FILAS ALTERNADAS ---- */
table tbody tr.even,
table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}
table tbody tr.odd,
table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}
table tbody tr:hover {
    background: #eef5ff !important;
}

/* ---- TIMBRES: badge compacto ---- */
.timbres {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #fff8d0, #fef3a0) !important;
    border: 1px solid #e6c200 !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 12.5px !important;
    color: #7a5c00 !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
    width: auto !important;
    float: right !important;
}

/* ---- BOTONES DE ACCIÓN PRINCIPALES ---- */
input[type=button], input[type=submit], input[type=reset] {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s, box-shadow .15s !important;
    white-space: nowrap !important;
}

input[type=submit] {
    background: #7DBE0D !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(125,190,13,.3) !important;
}
input[type=submit]:hover {
    background: #6aab00 !important;
    box-shadow: 0 3px 10px rgba(125,190,13,.4) !important;
    transform: translateY(-1px) !important;
}

input[type=button] {
    background: #1E9BD6 !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(30,155,214,.25) !important;
}
input[type=button]:hover {
    background: #1687ba !important;
    transform: translateY(-1px) !important;
}

input[type=reset] {
    background: #e8edf2 !important;
    color: #4a5568 !important;
}

/* ---- BOTONES PEQUEÑOS (+ - tipo cantidad) ---- */
input[type=button][value="+"],
input[type=button][value="-"] {
    width: 30px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    height: 30px !important;
}

/* ---- BOTONES FINALES (Facturar, Preview, Cotización) ---- */
#btnFacturacion {
    background: #7DBE0D !important;
    color: #fff !important;
    font-size: 14px !important;
    height: 40px !important;
    padding: 0 28px !important;
    box-shadow: 0 3px 10px rgba(125,190,13,.35) !important;
}
#btnPreview {
    background: #1E9BD6 !important;
    height: 40px !important;
    padding: 0 22px !important;
}
#btnCotizacion {
    background: #6c757d !important;
    height: 40px !important;
    padding: 0 22px !important;
}

/* ---- FILA DE BOTONES FINALES ---- */
#facturacionAdd > input[type=button],
#facturacionAdd > input[type=submit] {
    margin: 16px 6px 0 0 !important;
    vertical-align: middle !important;
}

/* ---- SEPARADOR DE SECCIONES: card de conceptos ---- */
#conceptos,
table[id="conceptos"] {
    margin-top: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #e3e6ec !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.07) !important;
    overflow: hidden !important;
}

/* ---- CAMPOS INLINE: label + input en misma fila ---- */
table td label,
table td .label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* ---- ENCABEZADO DE FORMULARIO CON TIMBRES ---- */
.title + .timbres,
.title ~ .timbres {
    position: absolute !important;
    top: 24px !important;
    right: 28px !important;
    float: none !important;
}

/* Wrapper del title para posicionamiento relativo */
.center {
    position: relative !important;
}

/* ---- TOTALES ---- */
table td[align=right],
table td:last-child {
    text-align: right;
}

/* Fila de subtotal/total */
tr:has(> td > #Subtotal),
tr:has(> td > #Total) {
    background: #f0f7e6 !important;
    font-weight: 700 !important;
}

/* ---- AUTOCOMPLETE INPUT ---- */
.easy-autocomplete {
    width: 100% !important;
}
.easy-autocomplete input {
    width: 100% !important;
}

/* ---- INPUTS DENTRO DE TABLAS ---- */
table td input[type=text],
table td input[type=date],
table td input[type=number],
table td select {
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
}

/* Inputs de búsqueda amplios */
table td input[type=text][id*="Descripcion"],
table td input[type=text][id*="descripcion"] {
    width: 220px !important;
}

/* ---- RECEPTOR / INFO GENERAL (popup/inline sections) ---- */
#receptor, #informacionGeneral, #informacionGlobal {
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(15,23,42,.07);
}

/* ---- TABLA DE CONCEPTOS HEADER ---- */
#conceptos thead th {
    background: #2c3e50 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 10px 10px !important;
    text-align: center !important;
}

/* ---- TOTALES TABLE ---- */
#tblConceptoComplemento th,
table.totales td {
    background: #f0f7e6 !important;
    font-weight: 700 !important;
    color: #3d5a0c !important;
}

/* =====================================================
   FIN FORMULARIOS MODERNO v3
   ===================================================== */

/* =====================================================
   CFDI FACIL - REDISEÑO FINAL FORMULARIOS v4
   Compacto, intuitivo, parecido al HTML referencia
   ===================================================== */

/* --- RESET ESPACIADO GLOBAL --- */
form br { display: none !important; }
.center > br { display: none !important; }

/* --- GRID LAYOUT PARA ROWS DE ENCABEZADO (Sucursal, Fecha, etc) --- */
/* Hacer que las rows de encabezado sean más compactas */
#facturacionAdd > table > tbody > tr:nth-child(-n+5) > td[colspan],
#facturacionAdd > table > tbody > tr:nth-child(-n+5) > td {
    padding: 7px 14px !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

/* --- TABLA PRINCIPAL DE FACTURA: aspecto de card con secciones --- */
#facturacionAdd > table {
    background: #fff !important;
    border: 1px solid #dce1ea !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.09) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Fila separadora visual entre encabezado y conceptos */
#facturacionAdd > table tr.separador,
#facturacionAdd > table td.separador {
    height: 8px !important;
    background: linear-gradient(90deg, #1f2d3d 0%, #2c3e50 100%) !important;
    padding: 0 !important;
}

/* --- HEADER DE LA TABLA (TH de conceptos) --- */
#facturacionAdd > table thead th,
#facturacionAdd table tr:nth-child(6) th,
table#conceptos thead th {
    background: #1f2d3d !important;
    color: #e8f0fe !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    padding: 10px 8px !important;
    text-align: center !important;
    border: none !important;
    white-space: nowrap !important;
}

/* --- INPUTS EN CONCEPTOS --- */
table#conceptos td input[type=text] {
    text-align: center !important;
    padding: 5px 6px !important;
    height: 32px !important;
    min-width: 60px !important;
    font-size: 12.5px !important;
    border: 1px solid #e3e6ec !important;
    border-radius: 5px !important;
}

/* --- FILA DE TOTALES --- */
#facturacionAdd > table tr:nth-last-child(-n+4) td {
    font-weight: 600 !important;
    color: #1f2d3d !important;
}

/* Celda de Subtotal/Total */
#facturacionAdd input[id*="Subtotal"],
#facturacionAdd input[id*="Total"],
#facturacionAdd td[align=right] {
    text-align: right !important;
    font-weight: 700 !important;
    color: #1f2d3d !important;
    font-size: 14px !important;
}

/* --- BOTONES DE SECCIÓN (Receptor, Info General, etc) --- */
#btnReceptor, #btnGeneral, #btnGlobal, #btnAnterior {
    background: #1f2d3d !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 2px !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.2) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    transition: background .15s !important;
}
#btnReceptor:hover, #btnGeneral:hover, #btnGlobal:hover, #btnAnterior:hover {
    background: #2c3e50 !important;
}

/* --- BOTONES DE PLANTILLA/COTIZACIÓN --- */
#btnPlantilla, #btnGetCotizacion {
    background: #1E9BD6 !important;
    color: #fff !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
}

/* --- BOTÓN PRINCIPAL FACTURAR --- */
#btnFacturacion {
    background: linear-gradient(135deg, #7DBE0D, #6aab00) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 32px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(125,190,13,.4) !important;
    letter-spacing: .3px !important;
}
#btnPreview {
    background: linear-gradient(135deg, #1E9BD6, #1687ba) !important;
    color: #fff !important;
    height: 42px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
}
#btnCotizacion {
    height: 42px !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    background: #6c757d !important;
}

/* --- BARRA INFERIOR CON BOTONES FINALES --- */
#facturacionAdd > input[type=submit],
#facturacionAdd > input[type=button]:last-of-type {
    margin-top: 16px !important;
    margin-right: 8px !important;
}

/* --- TÍTULO + TIMBRES INLINE --- */
.title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.timbres {
    font-size: 12px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #fff9d6, #fff0a0) !important;
    border: 1px solid #e6c200 !important;
    color: #7a5500 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    /* Quitar position:absolute para que fluya inline con el título */
    position: static !important;
    float: none !important;
    margin-bottom: 0 !important;
}

/* --- RECEPTOR SEARCH BAR compacto --- */
#facturacionAdd > table tr:first-child td {
    background: #f8fafc !important;
    border-bottom: 1px solid #e8ecf2 !important;
}

/* Pseudo-separador visual entre "encabezado" y "conceptos" */
#facturacionAdd > table tr:nth-child(5) td {
    background: #f0f7e6 !important;
    border-bottom: 2px solid #c8e577 !important;
    padding: 8px 14px !important;
}

/* --- ÁREA DE CONCEPTOS - header de búsqueda --- */
#facturacionAdd > table tr:nth-child(6) td:first-child {
    background: #f8fafc !important;
    padding: 12px 14px !important;
}

/* --- INPUTS DENTRO DE LA FILA DE ITEMS --- */
#facturacionAdd td input[type=text]:not([id*="NoIdentif"]):not([id*="Descripcion"]) {
    width: 80px !important;
}

/* Campo descripción más ancho */
#facturacionAdd td input#Descripcion,
#facturacionAdd td input[id*="Descripcion"] {
    width: 200px !important;
}

/* --- ZEBRA + HOVER en la tabla de ítems --- */
#facturacionAdd table tbody tr:hover > td {
    background: rgba(30,155,214,.06) !important;
}

/* --- FORMULARIOS DE OTRAS PÁGINAS --- */
/* Clientes, Productos, Configuración - mismo estilo card */
.center form:not(#facturacionAdd) {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #dce1ea !important;
    box-shadow: 0 2px 10px rgba(15,23,42,.07) !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
}

/* Tablas de listados - aspecto limpio */
.center > div.data table,
div[id=data] table,
#data table {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #dce1ea !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
}

/* =====================================================
   FIN REDISEÑO FINAL v4
   ===================================================== */


/* =====================================================
   CFDI FACIL - OVERRIDES FINALES con !important
   ===================================================== */

/* Botones de sección secundarios - tono oscuro navy */
#btnReceptor, #btnGeneral, #btnGlobal, #btnAnterior {
    background: #1f2d3d !important;
    color: #fff !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    margin: 3px 4px 3px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.25) !important;
    letter-spacing: .2px !important;
}

/* Botón principal Facturar */
#btnFacturacion {
    background: #7DBE0D !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 28px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(125,190,13,.4) !important;
}

/* Preview */
#btnPreview {
    background: #1E9BD6 !important;
    color: #fff !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
}

/* Cotización */
#btnCotizacion {
    background: #6c757d !important;
    color: #fff !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
}

/* Botones pequeños + - */
input[type=button][value="+"],
input[type=button][value="-"] {
    background: #e8ecf2 !important;
    color: #2c3e50 !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Botones de plantilla/cotización */  
#btnPlantilla, #btnGetCotizacion,
#btnListaPlantillas, #btnListarCotizaciones {
    background: #1E9BD6 !important;
    color: #fff !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
}

/* ---- TABLA FACTURA: compactar el encabezado ---- */
/* La tabla principal queda en card */
#facturacionAdd > table {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.09) !important;
    border: 1px solid #dce1ea !important;
    background: #fff !important;
}

/* Filas de datos cliente en la tabla: fondo sutil */
#facturacionAdd > table > tbody > tr:nth-child(-n+4) > td {
    background: #f8fafc !important;
    border-bottom: 1px solid #edf0f5 !important;
}

/* Fila de botones (Receptor, Info General, etc) - fondo diferenciado */
#facturacionAdd > table > tbody > tr:nth-child(5) > td {
    background: linear-gradient(90deg, #f0f7e6, #e8f5e0) !important;
    border-bottom: 2px solid #c0dc6a !important;
    padding: 10px 14px !important;
}

/* ---- TÍTULO INLINE CON BADGE ---- */
.title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.timbres {
    position: static !important;
    float: none !important;
    background: linear-gradient(135deg, #fff9d6 0%, #fff0a0 100%) !important;
    border: 1px solid #e6c200 !important;
    border-radius: 20px !important;
    color: #7a5500 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

/* =====================================================
   FIN OVERRIDES
   ===================================================== */


/* =====================================================
   CFDI FACIL - OVERRIDE FINAL BUTTONS (longhand)
   background-color (longhand) beats background (shorthand)
   when both have !important + same specificity
   ===================================================== */

/* Botones específicos - usar background-color longhand */
#btnReceptor, #btnGeneral, #btnGlobal, #btnAnterior {
    background-color: #2c3e50 !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #3d5060 !important;
}
#btnReceptor:hover, #btnGeneral:hover, #btnGlobal:hover, #btnAnterior:hover {
    background-color: #1f2d3d !important;
    background-image: none !important;
}

#btnFacturacion {
    background-color: #7DBE0D !important;
    background-image: none !important;
}
#btnPreview {
    background-color: #1E9BD6 !important;
    background-image: none !important;
}
#btnCotizacion {
    background-color: #6c757d !important;
    background-image: none !important;
}

/* =====================================================
   FIN OVERRIDE FINAL
   ===================================================== */

/* ============================================================
   RESPONSIVE / MOBILE STYLES
   Agrega soporte completo para móvil y tablet
   Breakpoints: 768px (tablet), 480px (mobile)
   ============================================================ */

/* --- Botón Hamburguesa --- */
#hamburger-btn {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1100;
    order: -1;
}
#hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff !important;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: static !important;
    opacity: 1 !important;
}

/* --- Overlay móvil --- */
#overlay-mob {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}
#overlay-mob.show {
    display: block;
}

/* ============================================================
   TABLET: 768px - 992px
   ============================================================ */

/* ============================================================
   FONT AWESOME ICONOS - Sidebar menu
   ============================================================ */
.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 15px;
    margin-right: 9px;
    color: #7DBE0D;
    flex-shrink: 0;
}
.nav-sub-icon {
    width: 16px;
    text-align: center;
    font-size: 12px;
    margin-right: 7px;
    color: #1E9BD6;
    opacity: 0.8;
    flex-shrink: 0;
}
#menu > li > a {
    display: flex !important;
    align-items: center !important;
}
#menu ul li a {
    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   TOPNAV - Rediseno profesional con iconos
   ============================================================ */
#topnav {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 61px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 100 !important;
    gap: 0 !important;
}

.topnav-user-info {
    display: flex;
    align-items: center;
    height: 61px;
    padding: 0 10px 0 18px;
    gap: 6px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.topnav-username {
    color: #a8bccf;
    font-size: 12.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topnav-username i {
    font-size: 19px;
    color: #7DBE0D;
    flex-shrink: 0;
}

ul.topnav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    height: 61px !important;
    gap: 0 !important;
}
ul.topnav > li {
    position: relative !important;
    height: 61px !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
}
ul.topnav > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 61px !important;
    padding: 0 16px !important;
    color: #d0dce8 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
    box-sizing: border-box !important;
    transition: background 0.18s, color 0.18s !important;
}
ul.topnav > li > a:hover {
    background: rgba(255,255,255,0.11) !important;
    color: #fff !important;
}
ul.topnav > li > a i {
    font-size: 16px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
ul.topnav > li:last-child > a {
    color: #fb9090 !important;
}
ul.topnav > li:last-child > a:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}
ul.topnav li ul.subnav {
    display: none;
    position: absolute !important;
    top: 61px !important;
    right: 0 !important;
    left: auto !important;
    background: #ffffff !important;
    min-width: 220px !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
    padding: 6px 0 !important;
    z-index: 9999 !important;
    border: 1px solid #e2e8f0 !important;
}
ul.topnav > li:hover ul.subnav {
    display: block !important;
}
ul.topnav li ul.subnav li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.topnav li ul.subnav li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #334155 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-left: none !important;
    height: auto !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
}
ul.topnav li ul.subnav li a:hover {
    background: #f1f5f9 !important;
    color: #1E9BD6 !important;
}
ul.topnav li span {
    display: none !important;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

#hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1060;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
#hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s;
}
#hamburger-btn.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
#hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
}
#hamburger-btn.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

#overlay-mob {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1039;
}
#overlay-mob.show {
    display: block;
}

@media (max-width: 992px) {
    #hamburger-btn {
        display: flex !important;
    }
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 61px !important;
        z-index: 1050 !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
    }
    #nav {
        position: fixed !important;
        top: 61px !important;
        left: -230px !important;
        width: 230px !important;
        height: calc(100vh - 61px) !important;
        z-index: 1040 !important;
        overflow-y: auto !important;
        transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        float: none !important;
        box-shadow: none !important;
    }
    #nav.nav-open {
        left: 0 !important;
        box-shadow: 6px 0 24px rgba(0,0,0,0.25) !important;
    }
    #content {
        margin-left: 0 !important;
        width: 100% !important;
        float: none !important;
        padding: 73px 12px 20px 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .topnav-user-info {
        display: none !important;
    }
    ul.topnav > li > a {
        padding: 0 12px !important;
        font-size: 0 !important;
        gap: 0 !important;
    }
    ul.topnav > li > a i {
        font-size: 22px !important;
    }
    ul.topnav li ul.subnav {
        right: 0 !important;
        left: auto !important;
        max-width: 92vw !important;
    }
    h1.title {
        font-size: 16px !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    #content {
        padding: 71px 8px 16px 8px !important;
    }
    ul.topnav > li > a {
        padding: 0 9px !important;
    }
    ul.topnav > li > a i {
        font-size: 20px !important;
    }
}


/* ============================================================
   JQUERY UI DIALOGS - MOBILE RESPONSIVE
   Hace que todos los dialogs sean responsive en celular
   ============================================================ */

.ui-dialog {
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    border: none !important;
    overflow: hidden !important;
}

.ui-dialog-titlebar {
    background: #1f2d3d !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ui-dialog-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
}
.ui-dialog-titlebar-close::after {
    content: 'X' !important;
    font-size: 14px !important;
    color: #fff !important;
    display: block !important;
    font-weight: bold !important;
}

.ui-dialog-content {
    padding: 16px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 70vh !important;
}

.ui-dialog-buttonpane {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important;
}

.ui-widget-overlay {
    background: rgba(0,0,0,0.5) !important;
    opacity: 1 !important;
}

.ui-dialog-content table {
    width: 100% !important;
}
.ui-dialog-content td,
.ui-dialog-content th {
    padding: 7px 10px !important;
    vertical-align: top !important;
}
.ui-dialog-content input[type="text"],
.ui-dialog-content input[type="number"],
.ui-dialog-content input[type="email"],
.ui-dialog-content select,
.ui-dialog-content textarea {
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {
    .ui-dialog {
        max-width: 96vw !important;
        width: 96vw !important;
        left: 2vw !important;
        top: 12px !important;
        position: fixed !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-height: 92vh !important;
    }
    .ui-dialog-content {
        max-height: calc(92vh - 110px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px !important;
    }
    .ui-dialog-content table,
    .ui-dialog-content tbody,
    .ui-dialog-content tr,
    .ui-dialog-content td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .ui-dialog-content tr {
        margin-bottom: 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 6px !important;
    }
    .ui-dialog-content td {
        padding: 3px 0 !important;
    }
    .ui-dialog-content input[type="text"],
    .ui-dialog-content input[type="number"],
    .ui-dialog-content input[type="email"],
    .ui-dialog-content input[type="date"],
    .ui-dialog-content select,
    .ui-dialog-content textarea,
    .ui-dialog-content .easy-autocomplete,
    .ui-dialog-content .easy-autocomplete-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        height: 40px !important;
    }
    .ui-dialog-content textarea {
        height: auto !important;
        min-height: 60px !important;
    }
    .ui-dialog-buttonpane .ui-dialog-buttonset {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }
    .ui-dialog-buttonpane .ui-button {
        flex: 1 1 auto !important;
        text-align: center !important;
        min-width: 90px !important;
    }
    .ui-dialog-titlebar {
        padding: 12px 14px !important;
    }
}

@media (max-width: 480px) {
    .ui-dialog {
        max-width: 99vw !important;
        width: 99vw !important;
        left: 0.5vw !important;
        top: 8px !important;
        max-height: 95vh !important;
    }
    .ui-dialog-content {
        max-height: calc(95vh - 100px) !important;
        padding: 10px !important;
    }
}


/* ============================================================
   MOBILE FORMS - Override HTML size attribute widths
   El atributo size= en inputs define ancho en caracteres
   Estos overrides fuerzan 100% en mobile
   ============================================================ */
@media (max-width: 992px) {

    /* All inputs with size attribute - override with 100% */
    .ui-dialog-content input[size],
    .ui-dialog-content input[size="20"],
    .ui-dialog-content input[size="30"],
    .ui-dialog-content input[size="40"],
    .ui-dialog-content input[size="50"],
    .ui-dialog-content input[size="60"],
    .ui-dialog-content input[size="70"],
    .ui-dialog-content input[size="80"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All selects in dialogs */
    .ui-dialog-content select {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Easy autocomplete inside dialogs */
    .ui-dialog-content .easy-autocomplete {
        width: 100% !important;
    }
    .ui-dialog-content .easy-autocomplete input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Main form on facturacion/add - fix horizontal scroll */
    #facturacionAdd table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    #facturacionAdd table td {
        word-wrap: break-word !important;
        overflow: hidden !important;
    }
    #facturacionAdd input[type="text"],
    #facturacionAdd input[type="number"],
    #facturacionAdd select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Conceptos table - horizontal scroll only for that section */
    #tablaConceptos,
    #tablaConceptos table,
    table[id*="tabla"],
    table[id*="Tabla"] {
        min-width: unset !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* Fix: buttons in factura not wrapped */
    #btnReceptor, #btnGeneral, #btnGlobal, #btnAnterior {
        font-size: 11px !important;
        padding: 4px 8px !important;
        margin: 2px !important;
        height: 30px !important;
    }
}

@media (max-width: 480px) {
    #btnReceptor, #btnGeneral, #btnGlobal, #btnAnterior {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}


/* ============================================================
   MOBILE WIZARD - Facturacion Nueva por pasos
   Solo aplica en mobile (max-width: 992px)
   ============================================================ */

/* === CONFIG CARD (Sucursal, Fecha, Plantilla, Cotizacion) === */
.mob-config-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(15,23,42,.08);
    border: 1px solid #e2e8f0;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.mob-config-card .mob-config-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mob-config-card .mob-config-title i {
    color: #1E9BD6;
    font-size: 13px;
}
.mob-config-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-config-row label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 3px;
    display: block;
}
.mob-config-row select,
.mob-config-row input[type="text"],
.mob-config-row input[type="date"] {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    -webkit-appearance: none;
}
.mob-config-row select:focus,
.mob-config-row input:focus {
    border-color: #1E9BD6 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,155,214,.12) !important;
}

/* === WIZARD STEPS === */
.mob-wizard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 90px;
}

.mob-step {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 6px rgba(15,23,42,.06);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mob-step.is-complete {
    border-color: #7DBE0D;
    background: #f0f7e6;
}
.mob-step.is-open {
    border-color: #1E9BD6;
    box-shadow: 0 4px 20px rgba(30,155,214,.15);
}

/* Step header (the clickable row) */
.mob-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mob-step-header:active {
    background: #f1f5f9;
}
.mob-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.mob-step.is-open .mob-step-number {
    background: #1E9BD6;
    color: #fff;
}
.mob-step.is-complete .mob-step-number {
    background: #7DBE0D;
    color: #fff;
}
.mob-step-info {
    flex: 1;
}
.mob-step-label {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}
.mob-step.is-open .mob-step-label {
    color: #1E9BD6;
}
.mob-step.is-complete .mob-step-label {
    color: #5a8a00;
}
.mob-step-sublabel {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.mob-step.is-complete .mob-step-sublabel {
    color: #7DBE0D;
}
.mob-step-chevron {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.25s;
    flex-shrink: 0;
}
.mob-step.is-open .mob-step-chevron {
    transform: rotate(180deg);
    color: #1E9BD6;
}

/* Step content (expandable) */
.mob-step-content {
    display: none;
    padding: 0 16px 16px 16px;
    border-top: 1px solid #f1f5f9;
}
.mob-step.is-open .mob-step-content {
    display: block;
}
.mob-step-content .mob-field-group {
    margin-bottom: 14px;
}
.mob-step-content .mob-field-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}
.mob-step-content input[type="text"],
.mob-step-content input[type="number"],
.mob-step-content input[type="email"],
.mob-step-content input[type="date"],
.mob-step-content select,
.mob-step-content textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 42px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    display: block !important;
}
.mob-step-content textarea {
    height: auto !important;
    min-height: 70px !important;
    padding: 10px 12px !important;
}
.mob-step-content input:focus,
.mob-step-content select:focus,
.mob-step-content textarea:focus {
    border-color: #1E9BD6 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,155,214,.12) !important;
}
/* Done button inside step */
.mob-step-done-btn {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #7DBE0D, #6aab00);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}
.mob-step-done-btn:active {
    opacity: 0.9;
}

/* === CONCEPTOS section === */
.mob-conceptos {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 16px;
}
.mob-conceptos-header {
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mob-conceptos-header i {
    color: #1E9BD6;
}
.mob-conceptos-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   CONCEPTOS MOBILE - Layout de tarjetas por concepto
   Transforma la tabla horizontal en tarjetas verticales
   en dispositivos con pantalla <= 992px
   ============================================================ */

@media (max-width: 992px) {

    /* Quitar scroll horizontal del body de conceptos */
    .mob-conceptos-body {
        overflow-x: visible !important;
        overflow: visible !important;
    }

    /* Ocultar encabezados de la tabla en móvil */
    #conceptos thead {
        display: none !important;
    }

    /* Cada fila separador también la ocultamos */
    #conceptos tr.separador {
        display: none !important;
    }

    /* Hacer que tbody, tr y td sean block */
    #conceptos,
    #conceptos tbody,
    #conceptos tfoot {
        display: block !important;
        width: 100% !important;
    }

    /* Cada fila de concepto se convierte en tarjeta */
    #conceptos tbody tr:not(.separador) {
        display: block !important;
        background: #fff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        margin: 10px 12px !important;
        padding: 10px 12px 12px 12px !important;
        box-shadow: 0 1px 4px rgba(15,23,42,.07) !important;
    }

    /* Cada celda se convierte en fila label+input */
    #conceptos tbody td {
        display: flex !important;
        flex-direction: column !important;
        padding: 5px 0 !important;
        border: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Etiqueta de cada campo usando ::before con content */
    #conceptos tbody td::before {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        margin-bottom: 3px !important;
        display: block !important;
    }

    /* Labels por posición de columna */
    #conceptos tbody td:nth-child(1)::before { content: "Código"; }
    #conceptos tbody td:nth-child(2)::before { content: "Descripción"; }
    #conceptos tbody td:nth-child(3)::before { content: "Unidad de Medida"; }
    #conceptos tbody td:nth-child(4)::before { content: "Precio Unitario"; }
    #conceptos tbody td:nth-child(5)::before { content: "Cantidad"; }
    #conceptos tbody td:nth-child(6)::before { content: "Descuento"; }
    #conceptos tbody td:nth-child(7)::before { content: "Precio Total"; }
    #conceptos tbody td:nth-child(8)::before { content: ""; }

    /* Inputs dentro de las celdas a 100% - especificidad alta para override */
    #facturacionAdd #conceptos tbody td input[type=text],
    #facturacionAdd #conceptos tbody td input[type=number],
    #facturacionAdd #conceptos tbody td select,
    #conceptos tbody td input[type=text],
    #conceptos tbody td input[type=number],
    #conceptos tbody td select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        font-size: 15px !important;
        padding: 7px 10px !important;
        border-radius: 7px !important;
        border: 1.5px solid #e2e8f0 !important;
        background: #f8fafc !important;
        height: 38px !important;
    }

    #conceptos tbody td input[type=text]:focus,
    #conceptos tbody td input[type=number]:focus {
        border-color: #1E9BD6 !important;
        background: #fff !important;
        outline: none !important;
    }

    /* Easy-autocomplete dentro de conceptos */
    #conceptos tbody td .easy-autocomplete {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    #conceptos tbody td .easy-autocomplete input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Celda del botón complementos - fila con botón + acciones */
    #conceptos tbody td:nth-child(8) {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        flex-wrap: wrap !important;
    }

    /* Botón complementos */
    #conceptos tbody td .btn_complementos {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 8px 10px !important;
        border-radius: 7px !important;
        background: #1E9BD6 !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    /* Botones + y - */
    #conceptos tbody td input.add,
    #conceptos tbody td input.del {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        font-size: 18px !important;
        padding: 0 !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        border: 2px solid !important;
    }
    #conceptos tbody td input.add {
        background: #e8f5e9 !important;
        color: #388e3c !important;
        border-color: #388e3c !important;
    }
    #conceptos tbody td input.del {
        background: #ffebee !important;
        color: #d32f2f !important;
        border-color: #d32f2f !important;
    }

    /* Fila tfoot de subtotal/total */
    #conceptos tfoot tr {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        border-top: 1.5px solid #e2e8f0 !important;
    }
    #conceptos tfoot td {
        display: inline !important;
        border: none !important;
        padding: 4px 0 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
}



/* === BOTÓN AGREGAR CONCEPTO (móvil) === */
.mob-add-concepto-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px 14px 12px;
    padding: 11px 16px;
    background: #1E9BD6;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 6px rgba(30,155,214,.25);
    letter-spacing: 0.2px;
}
.mob-add-concepto-btn:active {
    opacity: 0.85;
}
.mob-add-concepto-btn i {
    margin-right: 6px;
}

/* === BOTTOM ACTION BAR (Facturar) === */
.mob-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    z-index: 1000;
    display: flex;
    gap: 10px;
}
.mob-action-bar #btnFacturacion,
.mob-action-bar #btnPreview {
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.mob-action-bar #btnFacturacion {
    background: linear-gradient(135deg, #7DBE0D, #6aab00) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(125,190,13,.35) !important;
}
.mob-action-bar #btnPreview {
    background: #f1f5f9 !important;
    color: #334155 !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    padding: 0 !important;
    font-size: 20px !important;
}

/* Hide original elements when wizard is active */
body.mob-wizard-active #facturacionAdd > table {
    display: none !important;
}
body.mob-wizard-active .mob-wizard-container {
    display: block !important;
}
.mob-wizard-container {
    display: none;
}