/*=====================================================
                    Tipografia
======================================================*/
@font-face{
    font-family: "RobotoCondensedLight";
    src: url("../webfonts/robotocondensed-light.ttf"), 
    url("../webfonts/robotocondensed-light.eot"), 
    url("../webfonts/robotocondensed-light.woff"), 
    url("../webfonts/robotocondensed-light.woff2"), 
    url("../webfonts/robotocondensed-light.svg");
}
@font-face{
    font-family: "RobotoRegular";
    src: url("../webfonts/roboto-regular.ttf"), 
    url("../webfonts/roboto-regular.eot"), 
    url("../webfonts/roboto-regular.woff"), 
    url("../webfonts/roboto-regular.woff2"), 
    url("../webfonts/roboto-regular.svg");
}
@font-face{
    font-family: "OswaldLight";
    src: url("../webfonts/oswald-light.ttf"), 
    url("../webfonts/oswald-light.eot"), 
    url("../webfonts/oswald-light.woff"), 
    url("../webfonts/oswald-light.woff2"), 
    url("../webfonts/oswald-light.svg");
}

body,html{
    height: 100%; width: 100%;
    margin: 0; padding: 0;
    font-size: 11px;
    font-family: "RobotoRegular";
    position: relative;
    background-color: #f8fafc;
}
.dark-mode{ background-color: #121212; color: white; }

.main-container{
    height: 100%; width: 100%;
    display: flex; justify-content: center; align-items: center;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
}
.main-container > .login,
.main-container > .hero-body{
    height: auto; width: 100%;
    max-width: 400px; min-width: 300px;
}

.is-photo{ max-width: 300px; height: auto; margin: 0 auto; }
.text-condensedLight{ font-family: "RobotoCondensedLight"; }
.tittles{ font-family: "OswaldLight"; }
.full-width{ margin: 0; padding: 0; width: 100%; box-sizing: border-box; }
.list-unstyle{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
.img-responsive{ width: 100%; height: auto; }

.divider-menu-h{
    height: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
    width: 92% !important;
    margin: 0 auto !important;
}
.page-container{
    height: 100%; width: 100%;
    margin: 0; padding: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
}

/* Scrollbar del sidebar */
.scroll::-webkit-scrollbar{ width: 4px; }
.scroll::-webkit-scrollbar-thumb{ background: rgba(147,197,253,.2); border-radius: 2px; }
.scroll::-webkit-scrollbar-thumb:hover{ background: rgba(147,197,253,.4); }
.scroll::-webkit-scrollbar-track{ background: transparent; }

/*============= Navbar superior =============*/
.navBar{
    background-color: #ffffff;
    height: 52px;
    color: #0f172a;
    position: relative;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.navBar-options{
    line-height: 52px; height: 52px;
    padding: 0 16px;
    transition: all .3s ease-in-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navBar-options .fa-exchange-alt,
.navBar-options-list{ line-height: 52px; height: 52px; margin: 0; padding: 0; }
.navBar-options .fa-exchange-alt{
    width: 36px; font-size: 16px;
    cursor: pointer; user-select: none;
    text-align: center; outline: none;
    color: #64748b;
    border-radius: 8px;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.navBar-options .fa-exchange-alt:hover{ background: #f1f5f9; color: #1e40af; }
.navBar-options-list ul{ height: 52px; display: flex; align-items: center; gap: 6px; }
.navBar-options-list ul li{
    height: 52px; line-height: 52px;
    cursor: pointer; padding: 0 4px;
    font-size: 16px; user-select: none;
    display: flex; align-items: center;
}
.navBar-options-list ul li a,
.navBar-options-list ul li img{ margin: 0; padding: 0; box-sizing: border-box; }
.navBar-options-list ul li a{
    color: #64748b;
    border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.navBar-options-list ul li a:hover{ color: #dc2626; background: #fef2f2; }
.navBar-options-list ul li img{
    border: 2px solid rgba(30,64,175,.15);
    border-radius: 8px;
    width: 32px; height: 32px;
    object-fit: cover;
    transition: border-color .15s;
}
.navBar-options-list ul li img:hover{ border-color: rgba(30,64,175,.4); }

/*============= Layout base =============*/
.navLateral,
.pageContent,
.navLateral-body{ height: 100%; }
.navLateral,
.pageContent{ overflow-y: auto; }

/*============= Sidebar azul =============*/
.navLateral{
    width: 260px;
    border-right: none;
    transition: all .3s ease-in-out;
}
.navLateral-change{ pointer-events: none; opacity: 0; width: 0; border-right: none; }
.navLateral-body{ background-color: #1e40af; }

/* Logo — tiene clases has-text-centered tittles is-uppercase de Bulma */
.navLateral-body-logo{
    height: 52px; line-height: 52px;
    color: #eff6ff !important; width: 100%;
    font-size: 15px !important; font-weight: 600; letter-spacing: -.2px;
    background-color: #1e3a8a !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0 14px;
    text-align: left !important;
}

/* Figura de usuario — height:77px viene del style inline del HTML */
.navLateral-body-cl,
.navLateral-body-cr{
    box-sizing: border-box; height: 77px;
    float: left; margin: 0; padding: 0; position: relative;
}
.navLateral-body-cl{ width: 30%; }
.navLateral-body-cl img{
    width: 42px; height: 42px;
    margin: 0 auto; display: block; margin-top: 17px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.2);
    object-fit: cover;
}
.navLateral-body-cr{ width: 70%; font-family: "RobotoCondensedLight"; color: #bfdbfe; }
.navLateral-body-cr span{ display: block; padding-top: 18px; font-size: 13px; font-weight: 600; color: #eff6ff; line-height: 1.4; }
.navLateral-body-cr span small{ font-size: 11px; color: #93c5fd; font-weight: 400; }

/* Título sección menú — tiene has-text-centered tittles is-uppercase de Bulma */
.navLateral-body-tittle-menu{
    height: 40px; line-height: 40px;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .06em;
    background-color: rgba(0,0,0,.15) !important;
    color: rgba(147,197,253,.7) !important;
    text-align: center;
    padding: 0 14px;
}

/* Items menú */
.menu-principal li,
.menu-principal li a{ display: block; }
.menu-principal li a{
    height: 42px; color: #bfdbfe;
    position: relative;
    transition: all .15s ease-in-out;
    border-left: 2px solid transparent;
}
.menu-principal li a:hover{
    color: #eff6ff;
    background-color: rgba(255,255,255,.08);
    border-left-color: rgba(191,219,254,.35);
}
.menu-principal li a div.navLateral-body-cl,
.menu-principal li a div.navLateral-body-cr{ height: 42px; line-height: 42px; }
.menu-principal li a div.navLateral-body-cl{ text-align: center; font-size: 15px; color: #93c5fd; transition: color .15s; }
.menu-principal li a div.navLateral-body-cr{ color: #bfdbfe; font-size: 12px; font-weight: 500; transition: color .15s; }
.menu-principal li a div.navLateral-body-cr label{ color: inherit; cursor: pointer; font-size: inherit; font-weight: inherit; }
.menu-principal li a:hover div.navLateral-body-cl{ color: #dbeafe; }
.menu-principal li a:hover div.navLateral-body-cr,
.menu-principal li a:hover div.navLateral-body-cr label{ color: #eff6ff; }

/* Chevron */
.btn-subMenu span.fa-chevron-down{
    position: absolute; top: 0; right: 10px;
    line-height: 42px; height: 42px;
    font-size: 11px; color: rgba(147,197,253,.45);
    transition: all .25s ease-in-out;
}

/* ──────────────────────────────────────────────────
   SUBMENÚ — REGLAS CRÍTICAS: NO modificar estas líneas
   El JS de main.js depende de este mecanismo exacto
────────────────────────────────────────────────── */
.btn-subMenu + .sub-menu-options{
    transition: all .3s ease-in-out;
}
.sub-menu-options{
    height: 0;              /* cerrado */
    background-color: rgba(0,0,0,.15);
    overflow-y: hidden;
    transition: all .3s ease-in-out;
}
.sub-menu-options li a{ border-left: 3px solid transparent; color: rgba(147,197,253,.65); font-size: 12px; }
.sub-menu-options li a:hover{ border-left: 3px solid #93c5fd; color: #bfdbfe; background-color: rgba(255,255,255,.06); }
.btn-subMenu-show{ background-color: rgba(255,255,255,.1); border-left-color: #93c5fd; }
.btn-subMenu-show .navLateral-body-cl{ color: #dbeafe; }
.btn-subMenu-show .navLateral-body-cr{ color: #eff6ff; }
.btn-subMenu-show .navLateral-body-cr label{ color: #eff6ff; }
.btn-subMenu-show + .sub-menu-options{
    height: auto;           /* abierto — selector + inmediato */
    overflow-y: auto;
    background-color: rgba(0,0,0,.18);
}
.btn-subMenu-show span.fa-chevron-down{ transform: rotate(180deg); color: #93c5fd; }
/* ────────────────────────────────────────────────── */

/* Cerrar sesión */
.btn-exit div.navLateral-body-cl{ color: #fca5a5; }
.btn-exit div.navLateral-body-cr{ color: #fca5a5; opacity: .8; }
.btn-exit:hover{ background-color: rgba(239,68,68,.12); border-left-color: #fca5a5; }
.btn-exit:hover div.navLateral-body-cr{ opacity: 1; }

/*============= Contenido =============*/
.pageContent{
    width: calc(100% - 260px);
    background-color: #f8fafc;
    transition: all .3s ease-in-out;
}
.pageContent-change{ width: 100%; }

/*============= Detalle venta =============*/
.sale-details{
    display: flex; justify-content: space-between;
    transition: all .3s ease-in-out; padding: 5px;
}
.sale-details:hover{ background-color: rgba(0,0,0,.04); }

/*============= Media Queries =============*/
@media (max-width: 750px){
    .navLateral{ pointer-events: none; opacity: 0; width: 0; border-right: none; }
    .navLateral-change{ width: 260px; pointer-events: auto; opacity: 1; }
    .pageContent{ width: 100%; }
    .pageContent-change{ width: calc(100% - 260px); }
}

footer{
    background-color: #ffffff; padding: 10px 20px;
    display: flex; justify-content: space-around; align-items: center;
    gap: 20px; border-top: 1px solid rgba(15,23,42,.08);
    bottom: 0; width: 100%;
}
.campo{ display: flex; flex-direction: column; text-align: center; }
.campo label{ font-size: 14px; font-weight: bold; color: #333; }
.campo input{
    padding: 5px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 14px; background-color: #f8fafc;
    color: #333; text-align: center; width: 150px;
}

/* ============================================================
   DISEÑO PROFESIONAL — Dashboard, Tablas, Botones, Modales
   Extiende el tema azul al contenido del sistema
   ============================================================ */

/* ── FONDO Y TIPOGRAFÍA GENERAL ── */
.pageContent { background-color: #f8fafc !important; }

/* ── PÁGINA HEADER (título + subtítulo) ── */
.title { font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -.3px; margin-bottom: 2px !important; }
.subtitle { font-size: 13px !important; color: #64748b !important; font-weight: 400 !important; margin-top: 2px !important; }

/* ── BOTONES GENERALES ── */
.button {
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
    border-width: 1px !important;
}
.button:active { transform: scale(.97) !important; }
.button.is-info {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
    color: #fff !important;
}
.button.is-info:hover { background-color: #1e3a8a !important; border-color: #1e3a8a !important; }
.button.is-link {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.button.is-link:hover { background-color: #1d4ed8 !important; }
.button.is-success {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}
.button.is-success:hover { background-color: #047857 !important; }
.button.is-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.button.is-danger:hover { background-color: #b91c1c !important; }
.button.is-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.button.is-link.is-light {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}
.button.is-link.is-light:hover { background-color: #dbeafe !important; }
.button.is-danger.is-light {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
.button.is-success.is-light {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

/* ── INPUTS ── */
.input, .select select, .textarea {
    border-color: #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #0f172a !important;
    background-color: #fff !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.input:focus, .select select:focus, .textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
    outline: none !important;
}
.label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; margin-bottom: 4px !important; }

/* ── TABLAS ── */
.table {
    border-radius: 12px !important;
    overflow: hidden;
    font-size: 13px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}
.table thead { background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; }
.table thead th {
    background: transparent !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    border: none !important;
    padding: 11px 14px !important;
}
.table tbody td {
    padding: 10px 14px !important;
    border-color: #f1f5f9 !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 13px !important;
    background-color: #fff !important;
}
.table.is-striped tbody tr:nth-child(even) td { background-color: #f8fafc !important; }
.table.is-hoverable tbody tr:hover td { background-color: #eff6ff !important; transition: background .12s; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table-container {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
}

/* ── TARJETAS / CARDS ── */
.card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
}
.card-header { background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; border-radius: 12px 12px 0 0 !important; }
.card-header-title { color: #fff !important; font-size: 14px !important; }

/* ── NOTIFICACIONES ── */
.notification { border-radius: 10px !important; font-size: 13px !important; }
.notification.is-info.is-light { background-color: #eff6ff !important; color: #1e40af !important; border-left: 4px solid #2563eb; }
.notification.is-success.is-light { background-color: #ecfdf5 !important; color: #059669 !important; border-left: 4px solid #10b981; }
.notification.is-warning.is-light { background-color: #fffbeb !important; color: #d97706 !important; border-left: 4px solid #f59e0b; }
.notification.is-danger.is-light { background-color: #fef2f2 !important; color: #dc2626 !important; border-left: 4px solid #ef4444; }

/* ── MENSAJES ── */
.message { border-radius: 10px !important; }
.message.is-warning .message-header { background-color: #d97706 !important; border-radius: 10px 10px 0 0 !important; }
.message.is-info .message-header { background-color: #1e40af !important; border-radius: 10px 10px 0 0 !important; }
.message.is-danger .message-header { background-color: #dc2626 !important; border-radius: 10px 10px 0 0 !important; }
.message.is-success .message-header { background-color: #059669 !important; border-radius: 10px 10px 0 0 !important; }

/* ── MODALES ── */
.modal-card { border-radius: 14px !important; overflow: hidden; box-shadow: 0 20px 50px rgba(15,23,42,.2) !important; }
.modal-card-head {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
    border: none !important;
    padding: 16px 20px !important;
}
.modal-card-title { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; }
.modal-card-head .delete { background: rgba(255,255,255,.2) !important; }
.modal-card-head .delete:hover { background: rgba(255,255,255,.35) !important; }
.modal-card-body { padding: 20px !important; }
.modal-card-foot { border-top: 1px solid #e2e8f0 !important; background: #f8fafc !important; }

/* ── TAGS / BADGES ── */
.tag { border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; }
.tag.is-info { background-color: #dbeafe !important; color: #1e40af !important; }
.tag.is-success { background-color: #dcfce7 !important; color: #15803d !important; }
.tag.is-danger { background-color: #fee2e2 !important; color: #dc2626 !important; }
.tag.is-warning { background-color: #fef3c7 !important; color: #b45309 !important; }

/* ── PAGINACIÓN ── */
.pagination-link.is-current { background-color: #2563eb !important; border-color: #2563eb !important; }
.pagination-link:hover, .pagination-previous:hover, .pagination-next:hover {
    border-color: #2563eb !important; color: #2563eb !important;
}

/* ── SELECT ── */
.select:not(.is-multiple):not(.is-loading)::after { border-color: #2563eb !important; }

/* ── ANIMACIONES DE ENTRADA ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pageContent > section,
.pageContent > div,
.column { animation: fadeInUp .25s ease both; }

/* ── NAVBAR MARGIN FIX ── */
.navBar { margin-bottom: 0 !important; }
.navBar + * { padding: 20px; }

/* ── SWEETALERT2 ── */
.swal2-popup { border-radius: 14px !important; font-family: "RobotoRegular", system-ui !important; }
.swal2-confirm { background-color: #2563eb !important; border-radius: 8px !important; font-weight: 600 !important; }
.swal2-cancel { border-radius: 8px !important; font-weight: 600 !important; }
.swal2-title { color: #0f172a !important; font-size: 18px !important; }

/* ── CHIPS PRODUCTOS MÁS VENDIDOS (saleNew) ── */
#sale-barcode-form .button.is-success {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    transition: all .15s !important;
}
#sale-barcode-form .button.is-success:hover {
    background-color: #1e40af !important;
    color: #fff !important;
    border-color: #1e40af !important;
    transform: translateY(-1px);
}

/* ── INPUT CANTIDAD EN TABLA DE VENTA ── */
.sale_input-cant {
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    border-color: #e2e8f0 !important;
}
.sale_input-cant:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* ── TOTAL DE VENTA ── */
#venta_total_hidden {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1e40af !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    border-radius: 10px !important;
    text-align: center !important;
}
#venta_cambio {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
    font-weight: 700 !important;
}

/* ── SCROLLBAR CONTENIDO ── */
.pageContent::-webkit-scrollbar { width: 5px; }
.pageContent::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.pageContent::-webkit-scrollbar-track { background: #f1f5f9; }