: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:#0b2230;
    color:var(--sidebar-text);
    display:flex;flex-direction:column;
    transition:width .2s ease;
    height:100vh;position:sticky;top:0;
    overflow:hidden;
}
.sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('../images/sidebar-milky-way.jpg') center center/cover no-repeat;
    transform:scale(1.02);
}
.sidebar::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(4,20,32,.84),rgba(5,50,72,.72) 42%,rgba(8,92,124,.80));
}
.sidebar > *{
    position:relative;
    z-index:1;
}
.sidebar-brand{
    height:64px;display:flex;align-items:center;justify-content:center;
    background:rgba(4,20,32,.58);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(2px);
}
.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:rgba(4,20,32,.44);display:flex;align-items:center;gap:10px;
    backdrop-filter:blur(2px);
}
.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,.26)}
.sidebar-menu a.active{
    background:rgba(8,111,160,.72);
    border-left-color:#a7e5ff;
    font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* 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
}

.plin-toast-wrap{
    position:fixed;
    right:22px;
    top:82px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
}
.plin-toast{
    width:min(360px,calc(100vw - 32px));
    display:flex;
    align-items:center;
    gap:14px;
    padding:17px 18px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,#10b981 0%,#059669 54%,#047857 100%);
    border:1px solid rgba(255,255,255,.26);
    box-shadow:0 18px 42px rgba(5,150,105,.34),0 8px 18px rgba(15,23,42,.16);
    transform:translateX(120%);
    opacity:0;
    transition:transform .28s ease,opacity .28s ease;
    pointer-events:auto;
}
.plin-toast.show{transform:translateX(0);opacity:1}
.plin-toast-icon{
    width:46px;
    height:46px;
    flex:0 0 auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.20);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
    font-size:20px;
}
.plin-toast-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.plin-toast-body strong{font-size:15px;font-weight:900;letter-spacing:.4px;color:#fff}
.plin-toast-body span{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plin-toast-body em{margin-top:4px;font-size:12px;font-style:normal;font-weight:900;color:#dcfce7;text-decoration:underline}

.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.soft{background:#eef7fc;color:#1583b8}
.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}

/* ===== Login VENTAS PRO ===== */
body.login-page{
    min-height:100vh;
    color:#17202a;
    background:#061829;
}
body.login-page::before,
body.login-page::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
}
body.login-page::before{
    background:
        radial-gradient(circle at 20% 26%,rgba(56,189,248,.22),transparent 18%),
        radial-gradient(circle at 82% 22%,rgba(14,165,233,.20),transparent 20%),
        radial-gradient(circle at 72% 82%,rgba(125,211,252,.12),transparent 24%),
        linear-gradient(135deg,#041423 0%,#073052 45%,#0b6f9e 100%);
}
body.login-page::after{
    opacity:.42;
    background:
        linear-gradient(90deg,transparent 0 12%,rgba(125,211,252,.12) 12.08%,transparent 12.2%),
        linear-gradient(90deg,transparent 0 86%,rgba(125,211,252,.10) 86.08%,transparent 86.2%),
        linear-gradient(0deg,transparent 0 24%,rgba(125,211,252,.08) 24.08%,transparent 24.2%),
        linear-gradient(0deg,transparent 0 76%,rgba(125,211,252,.07) 76.08%,transparent 76.2%),
        radial-gradient(circle at 12% 24%,rgba(125,211,252,.55) 0 2px,transparent 7px),
        radial-gradient(circle at 86% 24%,rgba(125,211,252,.42) 0 2px,transparent 7px),
        radial-gradient(circle at 16% 76%,rgba(14,165,233,.36) 0 2px,transparent 7px),
        radial-gradient(circle at 82% 68%,rgba(14,165,233,.32) 0 2px,transparent 7px);
}
.login-page .auth-wrap{
    position:relative;
    z-index:1;
    min-height:100vh;
    padding:28px 18px;
    background:
        radial-gradient(ellipse at center,rgba(3,14,25,.06) 0%,rgba(3,14,25,.10) 28%,rgba(3,14,25,.28) 60%,rgba(3,14,25,.38) 100%),
        radial-gradient(circle at 50% 18%,rgba(56,189,248,.10),transparent 34%);
}
.login-page .login-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.login-page .auth-card{
    position:relative;
    z-index:2;
}
.login-page .bg-world{
    position:absolute;
    left:7%;
    top:14%;
    width:30vw;
    max-width:420px;
    min-width:260px;
    aspect-ratio:1.7;
    opacity:.14;
    border-radius:50%;
    background:
        radial-gradient(ellipse at 22% 45%,rgba(125,211,252,.75) 0 7%,transparent 7.5%),
        radial-gradient(ellipse at 42% 35%,rgba(125,211,252,.72) 0 10%,transparent 10.5%),
        radial-gradient(ellipse at 64% 48%,rgba(125,211,252,.70) 0 13%,transparent 13.5%),
        radial-gradient(ellipse at 78% 35%,rgba(125,211,252,.65) 0 5%,transparent 5.5%),
        linear-gradient(rgba(125,211,252,.22) 1px,transparent 1px),
        linear-gradient(90deg,rgba(125,211,252,.18) 1px,transparent 1px);
    background-size:auto,auto,auto,auto,42px 42px,42px 42px;
    filter:drop-shadow(0 0 28px rgba(56,189,248,.20));
}
.login-page .bg-panel,
.login-page .bg-module{
    position:absolute;
    border:1px solid rgba(125,211,252,.22);
    background:rgba(8,41,69,.22);
    box-shadow:0 18px 50px rgba(0,12,25,.20),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
}
.login-page .bg-sales{
    left:7.5%;
    top:28%;
    width:300px;
    height:220px;
    border-radius:18px;
    padding:18px;
    opacity:.86;
}
.login-page .bg-panel-label{
    color:rgba(224,242,254,.72);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.6px;
}
.login-page .bg-growth{
    margin-top:8px;
    color:rgba(125,211,252,.92);
    font-size:28px;
    font-weight:800;
}
.login-page .bg-line-chart{
    position:absolute;
    left:18px;
    right:18px;
    top:72px;
    width:calc(100% - 36px);
    height:90px;
}
.login-page .bg-line-chart polyline{
    fill:none;
    stroke:rgba(125,211,252,.58);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.login-page .bg-line-chart circle{
    fill:rgba(224,242,254,.78);
    stroke:rgba(8,47,73,.85);
    stroke-width:2;
}
.login-page .bg-bars{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    height:50px;
    display:flex;
    align-items:end;
    gap:10px;
}
.login-page .bg-bars span{
    flex:1;
    border-radius:9px 9px 2px 2px;
    background:linear-gradient(180deg,rgba(125,211,252,.58),rgba(14,165,233,.18));
}
.login-page .bg-total{
    right:8%;
    top:29%;
    width:250px;
    border-radius:18px;
    padding:18px;
    opacity:.88;
}
.login-page .bg-amount{
    margin-top:10px;
    color:rgba(255,255,255,.88);
    font-size:24px;
    font-weight:800;
}
.login-page .bg-period{
    margin-top:5px;
    color:rgba(203,213,225,.72);
    font-size:12px;
    font-weight:600;
}
.login-page .bg-module{
    min-width:138px;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:16px;
    padding:12px 14px;
    color:rgba(226,244,255,.82);
    font-size:13px;
    font-weight:700;
    opacity:.70;
}
.login-page .bg-module i{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:rgba(125,211,252,.96);
    background:rgba(125,211,252,.12);
}
.login-page .bg-cart{right:12%;top:51%}
.login-page .bg-box{right:7%;top:61%}
.login-page .bg-users{right:15%;top:71%}
.login-page .bg-report{left:11%;top:66%}
.login-page .auth-card{
    width:100%;
    max-width:430px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    box-shadow:0 28px 70px rgba(0,18,38,.38);
    overflow:hidden;
    backdrop-filter:blur(14px);
}
.login-page .auth-head{
    position:relative;
    padding:34px 30px 25px;
    background:linear-gradient(145deg,rgba(8,53,86,.98),rgba(10,103,147,.96));
    overflow:hidden;
}
.login-page .auth-head::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.10) 23.2%,transparent 23.6%),
        linear-gradient(0deg,transparent 0 64%,rgba(255,255,255,.08) 64.2%,transparent 64.5%),
        radial-gradient(circle at 26% 64%,rgba(125,211,252,.28) 0 2px,transparent 7px),
        radial-gradient(circle at 76% 27%,rgba(125,211,252,.20) 0 2px,transparent 7px);
    opacity:.5;
}
.login-page .auth-head .logo,
.login-page .auth-head h1,
.login-page .auth-head p{
    position:relative;
    z-index:1;
}
.login-page .auth-head .logo{
    width:68px;
    height:68px;
    margin-bottom:15px;
    border:1px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:28px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px rgba(0,26,46,.22);
}
.login-page .auth-head h1{
    font-size:25px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:0;
}
.login-page .auth-head p{
    margin-top:8px;
    color:rgba(255,255,255,.86);
    opacity:1;
    font-size:14px;
}
.login-page .auth-body{
    padding:30px 30px 22px;
}
.login-page .form-group{
    margin-bottom:17px;
}
.login-page .form-group label{
    margin-bottom:8px;
    color:#334155;
    font-size:13px;
    font-weight:700;
}
.login-page .form-control{
    height:50px;
    padding:13px 15px;
    border:1px solid #cfd9e4;
    border-radius:10px;
    background:#fff;
    color:#17202a;
    font-size:14px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.login-page .form-control:focus{
    border-color:#1494d2;
    box-shadow:0 0 0 4px rgba(20,148,210,.14);
}
.login-page .checkbox-row{
    margin:2px 0 19px;
    gap:10px;
    color:#526173;
    font-size:13px;
}
.login-page .checkbox-row input{
    width:16px;
    height:16px;
    accent-color:#1583b8;
}
.login-page .btn-primary{
    min-height:48px;
    border-radius:10px;
    background:linear-gradient(180deg,#199bd3,#117cad);
    box-shadow:0 12px 24px rgba(17,124,173,.24);
    font-weight:800;
    text-transform:uppercase;
}
.login-page .btn-primary:hover{
    filter:none;
    background:linear-gradient(180deg,#158cc0,#0e6f9c);
    box-shadow:0 14px 28px rgba(14,111,156,.28);
}
.login-page .auth-foot{
    margin-top:18px;
    color:#667085;
    font-size:13px;
}
.login-page .auth-foot a{
    color:#0f8fc8;
    font-weight:800;
}
.login-page .auth-credit{
    padding:0 30px 24px;
    text-align:center;
    background:rgba(255,255,255,.97);
    font-size:13px;
}
.login-page .credit-product{
    color:#334155;
    font-weight:700;
}
.login-page .credit-by{
    margin:0 4px;
    color:#8b98a8;
}
.login-page .credit-company{
    color:#18aee2;
    font-weight:800;
    text-decoration:none;
}
.login-page .credit-company:hover{
    color:#38c6f4;
}
.login-page .alert-error{
    border-radius:10px;
}

@media(max-width:1024px){
    .login-page .bg-sales{left:4%;width:240px;height:188px;opacity:.58}
    .login-page .bg-total{right:4%;width:218px;opacity:.62}
    .login-page .bg-world{opacity:.09}
    .login-page .bg-users,
    .login-page .bg-report{display:none}
    .login-page .bg-cart{right:5%;top:55%;opacity:.46}
    .login-page .bg-box{right:4%;top:66%;opacity:.42}
}
@media(max-width:760px){
    .login-page .bg-panel,
    .login-page .bg-module,
    .login-page .bg-world{display:none}
    body.login-page::after{opacity:.20}
    .login-page .auth-wrap{
        background:
            radial-gradient(circle at 50% 12%,rgba(56,189,248,.14),transparent 38%),
            linear-gradient(135deg,rgba(4,20,35,.06),rgba(3,14,25,.20));
    }
}

@media(max-width:520px){
    .login-page .auth-card{max-width:100%;border-radius:18px}
    .login-page .auth-head{padding:30px 22px 22px}
    .login-page .auth-body{padding:26px 22px 20px}
    .login-page .auth-credit{padding:0 22px 22px}
}

/* ===== 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:14px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;
    line-height:1.45;font-weight:700;display:flex;align-items:flex-start;gap:10px;
    box-shadow:0 6px 18px rgba(16,42,67,.08);
}
.flash i{flex:0 0 auto;margin-top:2px;font-size:16px}
.flash.success{background:#d9fbe8;color:#0f5f31;border:1px solid #8ed9ad}
.flash.error{background:#fff1f1;color:#8f1d1d;border:1px solid #ef9a9a}

/* ===== Modal simple ===== */
.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.46);
}
.modal-card{
    width:min(560px,100%);
    max-height:calc(100dvh - 36px);
    overflow-y:auto;
    background:#fff;
    border:1px solid #eef2f6;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(15,23,42,.28);
    padding:22px;
}
.modal-card h3{
    margin:0 0 14px;
    font-size:16px;
    color:#3a4653;
    font-weight:800;
}

/* ===== 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-page{
    height:calc(100dvh - 64px - 48px);
    display:flex;
    flex-direction:column;
    min-height:0;
}
.pos-page .page-head{
    flex:0 0 auto;
}
.pos{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,400px);
    gap:20px;
    align-items:start;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}
.pos-left{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
}

/* --- 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;
    min-height:0;
    overflow-y:auto;
    padding-right:4px;
}
.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:0;
    display:flex;
    flex-direction:column;
    height:100%;
    max-height:100%;
    min-height:0;
    overflow:hidden;
}
@supports not (height: 100dvh){
    .pos-page{
        height:calc(100vh - 64px - 48px);
    }
}
.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;flex:0 0 auto}
.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-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.cart-items{
    padding:8px 16px;
    min-height:0;
}
.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-body .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 20px 16px}
.cart-body .fields .full{grid-column:1 / -1}
.cart-body label{font-size:11px;color:#8a929b;display:block;margin-bottom:4px;font-weight:600}
.cart-body select,.cart-body input{width:100%;padding:9px 10px;border:1px solid #dce2e8;border-radius:9px;font-size:13px;background:#fff;color:#334}
.cart-body select:focus,.cart-body input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,131,184,.12)}
.cart-foot{
    border-top:1px solid #eef1f4;
    padding:12px 20px 14px;
    background:#fbfcfd;
    flex:0 0 auto;
    box-shadow:0 -8px 18px rgba(16,42,67,.05);
}
.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:0 0 6px}
.totales .r{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#5a6570}
.totales .r.total{font-size:22px;font-weight:800;color:var(--ink);border-top:1px dashed #d9e0e7;margin-top:6px;padding-top:8px}
.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.ok{background:#e6f7ee;color:#1e9e5a;display:block;font-weight:700}
.pos-msg.warn{background:#fff2e0;color:#9a6a11;display:block}
.pos-msg.err{background:#fdecec;color:#c0392b;display:block}

@media(max-width:900px){
    .pos-page{
        height:auto;
        min-height:calc(100dvh - 64px - 48px);
    }
    .pos{
        grid-template-columns:1fr;
        overflow:visible;
    }
    .pos-grid{overflow:visible}
    .cart{
        position:relative;
        top:auto;
        height:calc(100dvh - 32px);
        max-height:calc(100dvh - 32px);
    }
}

@media(max-height:760px) and (min-width:901px){
    .cart-head{padding:13px 18px}
    .cart-body .fields{padding:6px 18px 12px;gap:8px}
    .cart-foot{padding:10px 18px 12px}
    .btn-cobrar{padding:13px;margin-top:8px}
    .totales .r.total{font-size:20px}
}

/* ===== 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}
    .pos-page{height:auto;min-height:calc(100dvh - 64px - 32px)}
    .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:#fff4d6;color:#70480a;border:1px solid #e3a826}
.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}
}