:root{
    --sidebar-top:#0e5c82;
    --sidebar:#1583b8;
    --sidebar-2:#1a93cc;
    --sidebar-active:#0d6fa0;
    --sidebar-text:#dff1fb;
    --topbar:#3b3f45;
    --topbar-2:#2f3237;
    --bg:#eef1f4;
    --card-blue:#29b6d8;
    --card-orange:#f4a63a;
    --card-purple:#b5179e;
    --card-lime:#c2cf1a;
    --brand:#1583b8;
    --ink:#333;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:14px;
}
a{text-decoration:none}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.sidebar{
    width:240px;flex-shrink:0;
    background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);
    color:var(--sidebar-text);
    display:flex;flex-direction:column;
    transition:width .2s ease;
    height:100vh;position:sticky;top:0;
}
.sidebar-brand{
    height:64px;display:flex;align-items:center;justify-content:center;
    background:var(--sidebar-top);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .logo{
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;
}
.sidebar-title{
    padding:16px 20px;font-size:12px;letter-spacing:2px;
    text-transform:uppercase;color:#bfe3f6;font-weight:600;
    background:var(--sidebar-top);display:flex;align-items:center;gap:10px;
}
.sidebar-menu{list-style:none;margin:0;padding:8px 0;flex:1;min-height:0;overflow-y:auto}
.sidebar-menu .group-label{
    padding:14px 20px 6px;font-size:10px;letter-spacing:1.5px;
    text-transform:uppercase;color:#8fc7e4;font-weight:700;
}
.sidebar-menu a{
    display:flex;align-items:center;gap:12px;
    padding:11px 20px;color:var(--sidebar-text);
    border-left:3px solid transparent;
    transition:background .15s,border-color .15s;
}
.sidebar-menu a i{width:18px;text-align:center;font-size:15px;opacity:.9}
.sidebar-menu a .chev{margin-left:auto;font-size:11px;opacity:.6}
.sidebar-menu a:hover{background:rgba(0,0,0,.12)}
.sidebar-menu a.active{
    background:var(--sidebar-active);
    border-left-color:#a7e5ff;
    font-weight:600;
}

/* Barra de desplazamiento sutil del menú lateral (combina con el degradado azul) */
.sidebar-menu{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar-menu::-webkit-scrollbar{width:6px}
.sidebar-menu::-webkit-scrollbar-track{background:transparent}
.sidebar-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:10px}
.sidebar-menu:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
.sidebar-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}

/* ===== Main ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
    height:64px;background:linear-gradient(180deg,var(--topbar),var(--topbar-2));
    display:flex;align-items:center;padding:0 22px;color:#fff;gap:16px;
}
.topbar .toggle{background:none;border:none;color:#cfd3d8;font-size:20px;cursor:pointer}
.topbar .spacer{flex:1}
.topbar .top-actions{display:flex;align-items:center;gap:18px}
.topbar .top-actions .ico{position:relative;color:#cfd3d8;font-size:16px;cursor:pointer}
.topbar .top-actions .ico .badge{
    position:absolute;top:-8px;right:-8px;background:#e74c3c;color:#fff;
    font-size:9px;border-radius:10px;padding:1px 5px;
}
.topbar .user{display:flex;align-items:center;gap:10px;cursor:pointer}
.topbar .user .avatar{
    width:34px;height:34px;border-radius:50%;background:var(--brand);
    display:flex;align-items:center;justify-content:center;font-weight:700;
}
.topbar .user form{margin:0}
.topbar .user .logout-btn{
    background:none;border:none;color:#cfd3d8;font-size:13px;cursor:pointer
}

.content{padding:24px;flex:1}
.page-head{margin-bottom:20px}
.page-head h1{
    margin:0;color:var(--brand);font-size:26px;font-weight:800;letter-spacing:.5px;
}
.breadcrumb{
    background:#fff;padding:11px 16px;border-radius:10px;margin-top:12px;
    font-size:12px;color:#8a929b;box-shadow:0 2px 10px rgba(16,42,67,.05);
    text-transform:uppercase;letter-spacing:1px;
}
.breadcrumb a{color:#8a929b}
.breadcrumb .sep{margin:0 8px;color:#c3c9cf}

/* ===== Stat cards ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.stat{
    border-radius:16px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;
    box-shadow:0 8px 20px rgba(16,42,67,.12);min-height:122px;
    display:flex;flex-direction:column;justify-content:space-between;transition:transform .15s,box-shadow .15s;
}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(16,42,67,.18)}
.stat .icon{font-size:30px;opacity:.95}
.stat .num{font-size:30px;font-weight:800;line-height:1}
.stat .label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.95}
.stat.blue{background:linear-gradient(135deg,#33c0e0,#1f9dc4)}
.stat.orange{background:linear-gradient(135deg,#f9b64d,#ee8f2e)}
.stat.purple{background:linear-gradient(135deg,#c93bb0,#9d1187)}
.stat.lime{background:linear-gradient(135deg,#cdd92f,#a9b70f)}
.stat .bg-ico{position:absolute;right:-10px;bottom:-14px;font-size:96px;opacity:.18}

/* ===== Panels ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.panel{
    background:#fff;border-radius:14px;box-shadow:0 3px 14px rgba(16,42,67,.06);
    padding:18px 20px;border:1px solid #eef2f6;
}
.panel h3{margin:0 0 14px;font-size:14px;color:#3a4653;font-weight:700;
    display:flex;align-items:center;gap:8px}
.panel h3 .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(21,131,184,.12)}

/* Contenedor responsivo para los gráficos */
.chart-box{position:relative;width:100%;height:260px}
.chart-box canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.panel-scroll{overflow-x:auto}

table.table{width:100%;border-collapse:collapse;font-size:13px}
table.table th{
    text-align:left;color:#9aa3ab;font-weight:600;font-size:11px;
    text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;
    border-bottom:2px solid #eef1f4;
}
table.table td{padding:11px 10px;border-bottom:1px solid #f2f4f6;color:#3f4a56}
table.table tbody tr{transition:background .1s}
table.table tbody tr:hover td{background:#f7fafc}
table.table tr:last-child td{border-bottom:none}
.pill{padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700}
.pill.ok{background:#e6f7ee;color:#1e9e5a}
.pill.warn{background:#fff2e0;color:#d98613}
.pill.err{background:#fdecec;color:#c0392b}

/* ===== Auth ===== */
.auth-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#0e5c82 0%,#1a93cc 60%,#29b6d8 100%);
    padding:20px;
}
.auth-card{
    width:100%;max-width:400px;background:#fff;border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;
}
.auth-head{
    background:var(--sidebar-top);color:#fff;text-align:center;padding:30px 24px 24px;
}
.auth-head .logo{
    width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px;
}
.auth-head h1{margin:0;font-size:20px;font-weight:700}
.auth-head p{margin:6px 0 0;opacity:.8;font-size:13px}
.auth-body{padding:28px 26px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;color:#6b7480;margin-bottom:6px;font-weight:600}
.form-control{
    width:100%;padding:11px 14px;border:1px solid #d7dce1;border-radius:7px;
    font-size:14px;transition:border-color .15s,box-shadow .15s;
}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,131,184,.15)}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 18px;border:none;border-radius:9px;font-size:14px;font-weight:600;
    cursor:pointer;transition:filter .15s,transform .1s,box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;width:100%}
.btn-primary:hover{filter:brightness(1.08)}
.auth-foot{text-align:center;margin-top:16px;font-size:13px;color:#6b7480}
.auth-foot a{color:var(--brand);font-weight:600}
.alert-error{
    background:#fdecec;border:1px solid #f5c2c2;color:#c0392b;
    padding:10px 14px;border-radius:7px;font-size:13px;margin-bottom:16px;
}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7480;margin-bottom:16px}

/* ===== Toolbar / CRUD ===== */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.search-box{position:relative}
.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa3ab;font-size:13px}
.search-box input,.search-box select{
    padding:10px 12px 10px 34px;border:1px solid #dce2e8;border-radius:9px;font-size:13px;min-width:200px;background:#fff;
    box-shadow:0 1px 3px rgba(16,42,67,.04);transition:border-color .12s,box-shadow .12s;
}
.search-box input:focus,.search-box select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,131,184,.12)}
.search-box.no-ico input,.search-box.no-ico select{padding-left:12px}

.btn-sm{padding:7px 12px;font-size:13px}
.btn-success{background:#1e9e5a;color:#fff}
.btn-success:hover{filter:brightness(1.08)}
.btn-light{background:#eef1f4;color:#4a5560}
.btn-light:hover{background:#e2e7ec}
.btn-danger{background:#e74c3c;color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-warning{background:#f4a63a;color:#fff}
.btn-icon{padding:7px 10px;border-radius:8px;font-size:12px;border:none;cursor:pointer;transition:.12s}
.btn-icon.edit{background:#eaf6fc;color:#1583b8}
.btn-icon.edit:hover{background:#d6edf8}
.btn-icon.del{background:#fdecec;color:#e74c3c}
.btn-icon.del:hover{background:#f9d9d9}
.actions{display:flex;gap:6px}
.actions form{margin:0}

/* Badges de estado / stock */
.badge-stock{padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700}
.badge-stock.ok{background:#e6f7ee;color:#1e9e5a}
.badge-stock.low{background:#fff2e0;color:#d98613}
.badge-stock.out{background:#fdecec;color:#e74c3c}
.badge-soft{background:#eef2f6;color:#5a6570;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700}

/* Thumbnail producto */
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#eef1f4;
    display:flex;align-items:center;justify-content:center;color:#b6c0c9;font-size:16px}

/* ===== Formularios ===== */
.form-card{background:#fff;border-radius:14px;box-shadow:0 3px 14px rgba(16,42,67,.06);border:1px solid #eef2f6;padding:26px 28px;max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;margin-top:22px}
.help{font-size:11px;color:#9aa3ab;margin-top:4px}
.invalid{border-color:#e74c3c!important}
.invalid-msg{color:#e74c3c;font-size:11px;margin-top:4px}
textarea.form-control{resize:vertical;min-height:80px}
select.form-control{background:#fff}

/* ===== Alertas flash ===== */
.flash{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:13px;display:flex;align-items:center;gap:10px}
.flash.success{background:#e3f7ec;color:#1e7e45;border:1px solid #bfe9d0}
.flash.error{background:#fdecec;color:#c0392b;border:1px solid #f5c2c2}

/* ===== Paginación ===== */
.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:18px 0 0;flex-wrap:wrap}
.pagination a,.pagination span{
    padding:7px 12px;border-radius:6px;font-size:13px;color:#4a5560;background:#fff;
    border:1px solid #e2e7ec;text-decoration:none;
}
.pagination .active span{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination .disabled span{color:#c3c9cf}

@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-card{padding:20px}}

/* ===== POS ===== */
/* ============ PUNTO DE VENTA (rediseño) ============ */
.pos{display:grid;grid-template-columns:1fr 400px;gap:20px;align-items:start}

/* --- Buscador --- */
.pos-search{margin-bottom:16px;position:relative;background:#fff;border-radius:12px;
    box-shadow:0 3px 14px rgba(16,42,67,.06);border:1px solid #e9eef3;display:flex;align-items:center;padding:0 16px}
.pos-search i{color:#9aa8b6;font-size:15px}
.pos-search input{width:100%;min-width:0;border:none;outline:none;background:none;padding:15px 12px;font-size:15px;color:#334}
.pos-search input::placeholder{color:#aab4bf}

/* --- Grid de productos --- */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.pos-prod{
    position:relative;background:#fff;border-radius:14px;box-shadow:0 3px 12px rgba(16,42,67,.06);
    padding:16px 14px 14px;cursor:pointer;border:1px solid #eaeff4;transition:transform .14s,box-shadow .14s,border-color .14s;
    display:flex;flex-direction:column;overflow:hidden;
}
.pos-prod:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 10px 22px rgba(21,131,184,.16)}
.pos-prod.sinstock{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
.pos-prod.sinstock:hover{transform:none;box-shadow:0 3px 12px rgba(16,42,67,.06);border-color:#eaeff4}
.pos-prod .pp-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.pos-prod .pp-ava{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:17px;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.pos-prod .stk{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pos-prod .stk.ok{background:#e6f7ee;color:#1e9e5a}
.pos-prod .stk.low{background:#fff2e0;color:#d98613}
.pos-prod .stk.out{background:#fdecec;color:#c0392b}
.pos-prod .code{font-size:10px;color:#aab4bf;font-weight:700;letter-spacing:.4px}
.pos-prod .name{font-size:13.5px;font-weight:700;color:#2c3a47;margin:3px 0 10px;line-height:1.3;min-height:35px}
.pos-prod .pp-bot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.pos-prod .price{color:var(--brand);font-weight:800;font-size:16px}
.pos-prod .pp-add{width:30px;height:30px;border-radius:9px;background:#eef7fc;color:var(--brand);
    display:flex;align-items:center;justify-content:center;font-size:13px;transition:.14s}
.pos-prod:hover .pp-add{background:var(--brand);color:#fff;transform:scale(1.08)}

/* --- Carrito --- */
.cart{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(16,42,67,.10);
    position:sticky;top:16px;display:flex;flex-direction:column;max-height:calc(100vh - 90px);overflow:hidden}
.cart-head{background:linear-gradient(135deg,var(--sidebar-top),var(--sidebar-2));color:#fff;padding:16px 20px;
    display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.cart-head .count{margin-left:auto;background:rgba(255,255,255,.22);min-width:26px;height:26px;padding:0 9px;
    border-radius:20px;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800}
.cart-items{flex:1;overflow-y:auto;padding:8px 16px;min-height:130px}
.cart-empty{text-align:center;color:#b6c0c9;padding:44px 10px;font-size:13px}
.cart-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f1f4f7}
.cart-row:last-child{border-bottom:none}
.cart-row .info{flex:1;min-width:0}
.cart-row .info .n{font-size:13px;font-weight:700;color:#2c3a47;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row .info .p{font-size:11px;color:#9aa3ab;margin-top:2px}
.qty{display:flex;align-items:center;gap:0;background:#f3f6f9;border-radius:9px;padding:3px}
.qty button{width:26px;height:26px;border:none;border-radius:7px;background:#fff;cursor:pointer;font-weight:800;
    color:var(--brand);font-size:15px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:.1s}
.qty button:hover{background:var(--brand);color:#fff}
.qty input{width:34px;text-align:center;border:none;background:none;font-weight:700;font-size:13px;color:#2c3a47}
.cart-row .line{font-weight:800;font-size:13.5px;min-width:64px;text-align:right;color:#2c3a47}
.cart-row .rm{border:none;background:none;color:#d0555a;cursor:pointer;font-size:13px;padding:4px;border-radius:6px;transition:.1s}
.cart-row .rm:hover{background:#fdecec}

/* --- Pie del carrito --- */
.cart-foot{border-top:1px solid #eef1f4;padding:16px 20px;background:#fbfcfd}
.cart-foot .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.cart-foot .fields .full{grid-column:1 / -1}
.cart-foot label{font-size:11px;color:#8a929b;display:block;margin-bottom:4px;font-weight:600}
.cart-foot select,.cart-foot input{width:100%;padding:9px 10px;border:1px solid #dce2e8;border-radius:9px;font-size:13px;background:#fff;color:#334}
.cart-foot select:focus,.cart-foot input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,131,184,.12)}
.pay-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay-chip{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1.5px solid #e2e8ee;border-radius:10px;
    background:#fff;cursor:pointer;font-size:12.5px;font-weight:600;color:#5a6570;transition:.12s}
.pay-chip i{font-size:14px;color:#9aa8b6}
.pay-chip:hover{border-color:#c3d3df}
.pay-chip.active{border-color:var(--brand);background:#eef7fc;color:var(--brand)}
.pay-chip.active i{color:var(--brand)}
.totales{font-size:13px;margin:12px 0 6px}
.totales .r{display:flex;justify-content:space-between;padding:3px 0;color:#5a6570}
.totales .r.total{font-size:22px;font-weight:800;color:var(--ink);border-top:1px dashed #d9e0e7;margin-top:8px;padding-top:10px}
.totales .r.total span:last-child{color:var(--brand)}
.btn-cobrar{width:100%;background:linear-gradient(135deg,#22a862,#178a4e);color:#fff;border:none;padding:15px;border-radius:12px;
    font-size:16px;font-weight:800;cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;
    box-shadow:0 6px 16px rgba(23,138,78,.28);transition:.14s}
.btn-cobrar:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-cobrar #btn_total{margin-left:auto;background:rgba(255,255,255,.2);padding:3px 12px;border-radius:20px;font-size:14px}
.btn-cobrar:disabled{background:#c3c9cf;cursor:not-allowed;box-shadow:none;transform:none}
.btn-cobrar:disabled #btn_total{display:none}
.pos-msg{padding:10px 12px;border-radius:8px;font-size:12px;margin-top:10px;display:none}
.pos-msg.err{background:#fdecec;color:#c0392b;display:block}

@media(max-width:900px){.pos{grid-template-columns:1fr}.cart{position:static;max-height:none}}

/* ===== Ticket ===== */
.ticket{background:#fff;max-width:340px;margin:0 auto;padding:24px;border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);font-family:'Consolas','Courier New',monospace;color:#222}
.ticket h2{text-align:center;margin:0 0 2px;font-size:18px}
.ticket .sub{text-align:center;color:#666;font-size:12px;margin-bottom:12px}
.ticket .meta{font-size:12px;border-top:1px dashed #bbb;border-bottom:1px dashed #bbb;padding:8px 0;margin-bottom:8px}
.ticket .meta div{display:flex;justify-content:space-between}
.ticket table{width:100%;font-size:12px;border-collapse:collapse}
.ticket table th{text-align:left;border-bottom:1px solid #ddd;padding:4px 0}
.ticket table td{padding:3px 0;vertical-align:top}
.ticket .tot{border-top:1px dashed #bbb;margin-top:8px;padding-top:8px;font-size:13px}
.ticket .tot .r{display:flex;justify-content:space-between;padding:1px 0}
.ticket .tot .r.big{font-size:16px;font-weight:800}
.ticket .foot{text-align:center;color:#666;font-size:11px;margin-top:14px}
@media print{
    .sidebar,.topbar,.page-head,.no-print{display:none!important}
    body,.app,.main,.content{background:#fff!important;margin:0;padding:0}
    .ticket{box-shadow:none;max-width:100%}
}

/* Placeholder */
.placeholder-box{
    background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);
    padding:60px 30px;text-align:center;color:#8a929b;
}
.placeholder-box .big{font-size:60px;color:#cfe4f1;margin-bottom:16px}
.placeholder-box h2{color:#4a5560;margin:0 0 8px}
.placeholder-box p{max-width:520px;margin:0 auto 18px;line-height:1.6}
.placeholder-box .tag{
    display:inline-block;background:#eaf6fc;color:var(--brand);
    padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;
}

/* ===== Sidebar colapsado (botón hamburguesa) ===== */
.sidebar.collapsed{width:64px}
.sidebar.collapsed .txt,
.sidebar.collapsed .sidebar-title span,
.sidebar.collapsed .group-label,
.sidebar.collapsed .chev{display:none}
.sidebar.collapsed .sidebar-menu a{justify-content:center;padding:12px 0}
.sidebar.collapsed .sidebar-menu a i{margin:0}

/* ===== Responsive ===== */
@media(max-width:1100px){
    .cards{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
}
@media(max-width:768px){
    .sidebar{width:64px}
    .sidebar .txt,.sidebar-title span,.sidebar-menu .group-label,.sidebar-menu a .chev{display:none}
    .sidebar .sidebar-menu a{justify-content:center;padding:12px 0}
    .content{padding:16px}
    .page-head h1{font-size:22px}
    .chart-box{height:220px}
}
@media(max-width:560px){
    .cards{grid-template-columns:1fr}
    .topbar .user span{display:none}
    .chart-box{height:200px}
    .stat .num{font-size:24px}
}

/* Aviso de suscripción / trial */
.flash.warning{background:#fff6e6;color:#9a6a11;border:1px solid #f4c869}
.sub-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;margin-bottom:16px;font-size:13px;font-weight:600}
.sub-banner.trial{background:#eaf4ff;color:#1560a8;border:1px solid #b8d8fb}
.sub-banner.vencida{background:#fdecec;color:#c0392b;border:1px solid #f3b6b0}
.sub-banner a{margin-left:auto;font-weight:700;text-decoration:underline}

/* Efectivo recibido / vuelto en el POS */
.vuelto-row{display:flex;justify-content:space-between;margin-top:8px;font-weight:800;color:#178a4e;font-size:14px;
    background:#edf9f1;border-radius:8px;padding:8px 10px}
#cashWrap input{font-weight:700}

/* ============ Facturación Electrónica ============ */
.fe-banner{
    display:flex;gap:20px;align-items:flex-start;
    background:linear-gradient(120deg,var(--sidebar-top) 0%,var(--brand) 55%,var(--sidebar-2) 100%);
    color:#fff;border-radius:16px;padding:22px 26px;margin-bottom:22px;
    box-shadow:0 8px 24px rgba(14,92,130,.25);position:relative;overflow:hidden;
}
.fe-banner-ico{
    width:56px;height:56px;flex:none;border-radius:14px;background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;font-size:24px;
}
.fe-banner-body{flex:1;min-width:0}
.fe-banner-title{font-size:22px;font-weight:800;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fe-flag{font-size:13px;font-weight:600;background:rgba(255,255,255,.18);padding:2px 10px;border-radius:20px}
.fe-banner-sub{margin:6px 0 12px;font-size:13px;color:#eaf6fc;opacity:.95;max-width:640px}
.fe-pills{display:flex;flex-wrap:wrap;gap:8px}
.fe-pills .pill{display:inline-flex;align-items:center;gap:5px}
.fe-banner-side{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:210px}
.fe-sunat{font-size:20px;font-weight:800;letter-spacing:1px;background:#fff;color:var(--sidebar-top);padding:3px 12px;border-radius:8px}
.fe-sunat-sub{font-size:11px;opacity:.9;margin-bottom:8px}
.fe-btn-test{width:auto !important;background:#fff;color:var(--sidebar-top);font-weight:700}
.fe-btn-test:hover{filter:brightness(.96)}
.fe-test-result{font-size:12px;margin-top:6px;text-align:left;max-width:260px;line-height:1.4}
.fe-test-result.ok{color:#d5ffe8}
.fe-test-result.err{color:#ffe0e0}

.fe-form .fe-section{max-width:none;margin-bottom:20px}
.fe-section-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #eef2f6}
.fe-section-ico{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.fe-section-ico.blue{background:var(--brand)}
.fe-section-ico.teal{background:#17a2b8}
.fe-section-ico.amber{background:var(--card-orange)}
.fe-section-head h3{margin:0;font-size:16px;color:var(--ink);font-weight:800}
.fe-section-head p{margin:2px 0 0;font-size:12px;color:#9aa3ab}

.fe-switch-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #eef2f6;border-radius:12px;margin-bottom:12px;cursor:pointer;transition:.15s}
.fe-switch-row:hover{border-color:#d6e6f0;background:#fafcfe}
.fe-switch-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand);flex:none}
.fe-switch-row span{display:flex;flex-direction:column;gap:2px}
.fe-switch-row strong{font-size:13.5px;color:var(--ink)}
.fe-switch-row small{font-size:12px;color:#9aa3ab}

.fe-note{display:flex;align-items:center;gap:9px;background:#eaf6fc;color:#0e5c82;border:1px solid #cfe9f6;border-radius:10px;padding:11px 14px;font-size:12.5px;margin-bottom:18px}

.fe-actions{display:flex;justify-content:flex-end;gap:12px;background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:16px 20px;box-shadow:0 3px 14px rgba(16,42,67,.06)}

@media (max-width:820px){
    .fe-banner{flex-direction:column}
    .fe-banner-side{text-align:left;align-items:flex-start;width:100%}
    .fe-test-result{text-align:left}
}