:root{
  --nav:#123b36;--nav2:#165b4e;--nav3:#1f7a67;
  --bg:#f6f8f6;--panel:#ffffff;--text:#18302a;--muted:#6b7d77;
  --line:#dfe8e4;--primary:#0f766e;--primary2:#115e59;
  --green:#16803c;--red:#c2413a;--amber:#c27a15;
  --accent:#f59e0b;--shadow:0 12px 32px rgba(18,59,54,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.app-layout,.app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:270px;height:100vh;max-height:100vh;background:linear-gradient(180deg,var(--nav) 0%,#0d2e2a 100%);color:#fff;padding:22px 14px;z-index:100;display:flex;flex-direction:column;overflow:hidden;box-shadow:8px 0 30px rgba(18,59,54,.14)}
.brand{display:flex;align-items:center;gap:12px;padding:7px 14px 25px;font-size:27px;font-weight:850;letter-spacing:-.5px}.brand-icon{font-size:34px}.brand-name{white-space:nowrap}
.nav-menu,.sidebar nav{display:flex;flex-direction:column;gap:5px;width:100%;flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.nav-item,.sidebar nav a{display:flex;align-items:center;gap:13px;width:100%;min-height:46px;padding:11px 13px;border-radius:12px;color:#dcece8;text-decoration:none;font-size:16px;font-weight:650;transition:.18s ease}
.nav-item:hover,.sidebar nav a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.nav-item.active,.sidebar nav a.active{background:linear-gradient(90deg,var(--nav2),var(--nav3));color:#fff;box-shadow:inset 3px 0 var(--accent)}
.nav-icon{width:25px;text-align:center;font-size:19px;flex:0 0 25px}.nav-divider{height:1px;background:rgba(255,255,255,.1);margin:9px 10px}.nav-spacer{flex:1}
.nav-item.logout,.sidebar nav a.logout{color:#fecaca;margin-top:7px}.nav-item.logout:hover{background:rgba(194,65,58,.16)}
.main{margin-left:270px;min-height:100vh;flex:1;padding:30px;min-width:0}.content{width:100%;max-width:1450px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.topbar h1{margin:0;font-size:32px;letter-spacing:-.8px}.topbar p,.subtitle{margin:6px 0 0;color:var(--muted);font-size:16px}
.user-pill{background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:999px;font-weight:700;color:#33514a;white-space:nowrap;box-shadow:0 4px 15px rgba(18,59,54,.05)}
.panel,.card,.quick,.login-card{background:var(--panel);border:1px solid rgba(223,232,228,.95);border-radius:18px;box-shadow:var(--shadow)}
.panel{padding:26px}.quick{padding:22px;margin-top:20px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.card{padding:21px}.card span{display:block;color:var(--muted);font-size:14px}.card strong{display:block;font-size:28px;margin-top:10px;letter-spacing:-.5px}.card.danger strong{color:var(--red)}
.quick h2,.panel h2{margin:0 0 16px;font-size:20px}.quick-grid{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;padding:11px 15px;background:#e7efec;color:#18302a;cursor:pointer;font-weight:750;text-decoration:none;transition:.15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn.primary,.btn-blue,.btn-primary{background:var(--primary);color:#fff}.btn.primary:hover,.btn-blue:hover{background:var(--primary2)}.btn-green{background:var(--green);color:#fff}.btn-secondary{background:#60736d;color:#fff}.btn-danger{background:var(--red);color:#fff}.btn-gray{background:#60736d;color:#fff}.btn-red{background:var(--red);color:#fff}.btn.small{padding:7px 10px;font-size:13px}
.danger{background:#fff1ef!important;color:#9f2f2a!important}
.toolbar,.bar,.cabecera-boletas{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 18px}.search,.bar form,.busqueda{display:flex;gap:9px;flex:1}.search input,.bar input,.busqueda input{flex:1}
input,select,textarea{font:inherit;width:100%;padding:12px 13px;border:1px solid #c8d6d1;border-radius:10px;background:#fff;color:#18302a;outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:#2a9d8f;box-shadow:0 0 0 3px rgba(42,157,143,.12)}textarea{resize:vertical}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px}table{width:100%;border-collapse:separate;border-spacing:0;min-width:700px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}th{background:#f0f6f3;color:#36564e;font-size:13px;text-transform:uppercase;letter-spacing:.03em}tbody tr:hover{background:#f6fbf9}tbody tr:last-child td{border-bottom:0}.actions{display:flex;gap:7px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#e2ece8;color:#36564e}.badge.pagado,.badge-paid,.badge.ok{background:#dcfce7;color:#166534}.badge.parcial{background:#fef3c7;color:#92400e}.badge.pendiente,.badge-pending,.badge.red{background:#fee2e2;color:#991b1b}
.alert,.alerta,.flash{padding:12px 15px;border-radius:11px;margin:0 0 18px;font-weight:600}.alert.error,.alert-error,.alerta-error,.flash-error{background:#fee2e2;color:#991b1b}.alert-ok,.alerta-exito,.flash-ok,.flash-success{background:#dcfce7;color:#166534}.flash-info{background:#dff3ef;color:#0f5d54}
.form-card{max-width:820px}.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field,.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}.field label,.form-group label{font-weight:750}.field.full{grid-column:1/-1}.form-card .actions{margin-top:18px}.total{margin:18px 0;font-size:20px;font-weight:800;text-align:right}.order-table{margin-bottom:14px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;box-shadow:var(--shadow)}.stat b{display:block;font-size:27px;margin-top:7px}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.report-title{font-size:28px;font-weight:850}.report-meta{color:var(--muted)}.report-total{font-size:22px;font-weight:850}.report-actions{display:flex;gap:10px;flex-wrap:wrap}.report-section{margin-top:22px}.report-section h2{margin-bottom:10px}
.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#d9eee9 0,#eef6f3 42%,#f8fafc 100%);padding:20px}.login-card{width:min(430px,100%);padding:34px}.login-card h1{text-align:center;margin:6px 0;font-size:29px}.login-card p{text-align:center;color:var(--muted)}.logo{text-align:center;font-size:56px}.login-card form{display:flex;flex-direction:column;gap:8px;margin-top:22px}.login-card label{font-weight:750}.login-card input{margin-bottom:8px}.login-card .btn{width:100%;margin-top:8px}.login-card small{display:block;margin-top:18px;color:var(--muted);text-align:center}
.contenedor-boletas{padding:0}.tabla-container{overflow-x:auto}.info,.boleta{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.boleta{text-align:center}.boleta img{max-width:100%;max-height:75vh;border-radius:12px}.boleta iframe{width:100%;height:75vh;border:0}.botones{display:flex;gap:10px;margin-top:18px}
.preview{display:none;max-width:320px;max-height:320px;margin-top:12px;border-radius:12px;border:1px solid var(--line)}

/* Scroll independiente del men lateral en PC y tablet */
@media(min-width:721px){
 .sidebar{height:100vh;max-height:100vh;overflow:hidden}
 .sidebar nav,.nav-menu{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .sidebar nav::-webkit-scrollbar,.nav-menu::-webkit-scrollbar{width:6px}
 .sidebar nav::-webkit-scrollbar-thumb,.nav-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:10px}
}
@media(max-width:1050px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:235px}.main{margin-left:235px;padding:22px}.nav-item{font-size:15px}.brand{font-size:24px}}
@media(max-width:720px){
 .sidebar{position:relative!important;inset:auto!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;padding:10px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;box-shadow:none}
 .app-layout,.app{display:block;min-height:100dvh}
 .brand{flex:0 0 auto!important;padding:6px 12px 10px!important;margin:0!important;font-size:24px!important;gap:9px!important}
 .brand-icon{font-size:29px!important}
 .nav-menu,.sidebar nav{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;width:100%!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;gap:3px!important;padding:2px 0 28px!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior-y:contain!important;scrollbar-width:thin}
 .nav-menu::-webkit-scrollbar,.sidebar nav::-webkit-scrollbar{width:6px}
 .nav-menu::-webkit-scrollbar-thumb,.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:10px}
 .nav-item,.sidebar nav a{flex:0 0 auto!important;width:100%!important;min-height:44px!important;padding:9px 12px!important;margin:0!important;border-radius:10px!important;gap:10px!important;font-size:15px!important;line-height:1.2!important;transform:none!important}
 .nav-icon{width:23px!important;flex:0 0 23px!important;font-size:18px!important}
 .nav-spacer{flex:0 0 0!important;height:0!important;display:none!important}
 .nav-divider{display:none!important}
 .nav-item.logout,.sidebar nav a.logout{margin-top:3px!important;margin-bottom:4px!important}
 .main{margin-left:0!important;padding:14px!important;min-width:0!important}
 .cards,.stat-grid{grid-template-columns:1fr}
 .topbar{align-items:flex-start;flex-direction:column}
 .toolbar,.bar,.cabecera-boletas,.search,.bar form,.busqueda{flex-direction:column;align-items:stretch}
 .form{grid-template-columns:1fr}
 .field.full{grid-column:auto}
 .panel{padding:18px}
 table{min-width:620px}
}
@media print{
 .sidebar,.topbar,.report-actions,.no-print{display:none!important}.main{margin:0;padding:0}.panel{box-shadow:none;border:0}.report-section{break-inside:avoid}body{background:#fff}
}




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

.app-layout, .app {
    width: 100%;
    min-width: 0;
}


@media (min-width: 721px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        height: 100vh;
        padding: 22px 14px;
        overflow: hidden;
    }

    .sidebar nav, .nav-menu {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar nav::-webkit-scrollbar, .nav-menu::-webkit-scrollbar { width: 6px; }
    .sidebar nav::-webkit-scrollbar-thumb, .nav-menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.35);
        border-radius: 10px;
    }

    .main {
        margin-left: 270px;
        width: calc(100% - 270px);
        max-width: calc(100% - 270px);
        min-width: 0;
        flex: 0 0 calc(100% - 270px);
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .content { width: 100%; max-width: 1450px; min-width: 0; }
    .panel, .card, .quick, .stat, .info-box { min-width: 0; max-width: 100%; }
    .caja-grid { min-width: 0; }
    .caja-grid > div { min-width: 0; }
    .table-wrap, .tabla-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (max-width: 1050px) and (min-width: 721px) {
    .sidebar { width: 235px; max-width: 235px; }
    .main {
        margin-left: 235px;
        width: calc(100% - 235px);
        max-width: calc(100% - 235px);
        flex-basis: calc(100% - 235px);
        padding: 22px;
    }
}


@media (max-width: 720px) {
    #notificacionesBox { position: static !important; }
    #notificacionesPanel.notificaciones-panel {
        z-index: 100000 !important;
        max-height: calc(100vh - 90px) !important;
    }
}

@media (max-width: 720px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .app-layout, .app {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px 10px 18px !important;
        overflow: visible !important;
        display: block !important;
        box-shadow: none !important;
    }

    .brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 4px 14px 16px !important;
        margin: 0 !important;
        font-size: 25px !important;
    }

    .nav-menu, .sidebar nav, .sidebar > nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(50px, auto) !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-item, .sidebar nav a, .sidebar > nav a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 10px 9px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        gap: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        transform: none !important;
        white-space: normal !important;
    }

    .nav-icon {
        width: 26px !important;
        min-width: 26px !important;
        flex: 0 0 26px !important;
        font-size: 20px !important;
    }

    .nav-spacer, .nav-divider { display: none !important; }
    .nav-item.logout, .sidebar nav a.logout, .sidebar > nav a.logout {
        grid-column: 1 / -1 !important;
        margin-top: 7px !important;
        margin-bottom: 0 !important;
    }

    .main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        margin-left: 0 !important;
        padding: 12px !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .content, .panel, .card, .quick, .stat, .info-box, .caja-grid, .caja-cards {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .caja-grid, .caja-cards { grid-template-columns: minmax(0, 1fr) !important; }
    .table-wrap, .tabla-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .topbar h1 { font-size: 26px !important; }
}


input[type="number"]{appearance:textfield;-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{font-variant-numeric:tabular-nums}


.subpantalla-backdrop{position:fixed;inset:0;background:rgba(8,28,25,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.subpantalla-backdrop.open{display:flex}
.subpantalla{width:min(1100px,96vw);height:min(90vh,900px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35);display:flex;flex-direction:column}
.subpantalla-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #dfe8e4;background:#f7faf9}
.subpantalla-head strong{font-size:16px}.subpantalla-close{border:0;border-radius:9px;padding:8px 12px;background:#60736d;color:#fff;font-weight:750;cursor:pointer}
.subpantalla iframe{border:0;flex:1;width:100%;background:#fff}