*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f6fb;color:#172033}
a{color:#2854d9;text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:270px;background:#10182f;color:#fff;padding:24px;display:flex;flex-direction:column;gap:28px;position:fixed;inset:0 auto 0 0}
.brand{display:flex;gap:12px;align-items:center}
.brand-icon{width:44px;height:44px;border-radius:14px;background:#fff;color:#10182f;display:flex;align-items:center;justify-content:center;font-weight:800}
.brand span{display:block;color:#aeb8d5;font-size:13px}
.sidebar nav{display:grid;gap:8px}
.sidebar nav a{color:#dfe6ff;padding:12px 14px;border-radius:12px}
.sidebar nav a:hover{background:#1d294d}
.user-box{margin-top:auto;background:#1d294d;padding:14px;border-radius:16px}
.user-box small,.user-box a{display:block;color:#aeb8d5}
.user-box strong{display:block;margin:4px 0 10px}
.content{margin-left:270px;padding:28px;width:calc(100% - 270px)}
.topbar{margin-bottom:22px}
.topbar h1{margin:0;font-size:30px}
.topbar p{margin:6px 0 0;color:#667085}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card,.panel{background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(16,24,47,.07);padding:22px}
.card span,.summary span{display:block;color:#667085;font-size:14px}
.card strong{font-size:32px;margin-top:8px;display:block}
.panel{margin-bottom:18px}
.panel h2{margin-top:0}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.summary div{padding:16px;border:1px solid #e6e8ef;border-radius:16px}
.summary strong{font-size:22px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.steps div{padding:14px;background:#f4f6fb;border-radius:14px;color:#344054}
.actions{margin-bottom:16px}
.btn,button{background:#2854d9;color:#fff;border:0;border-radius:12px;padding:11px 16px;display:inline-block;cursor:pointer;font-weight:700}
.btn.secondary{background:#e9edfb;color:#2854d9}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px;border-bottom:1px solid #edf0f6}
th{color:#667085;font-size:13px}
.badge{background:#e9edfb;color:#2854d9;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;text-transform:capitalize}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid .full{grid-column:1/-1}
label{display:block;margin-bottom:7px;font-weight:700;color:#344054}
input,select{width:100%;padding:12px 14px;border:1px solid #d9deeb;border-radius:12px;background:#fff}
.alert{background:#fff0f0;color:#b42318;border:1px solid #ffd3d0;border-radius:12px;padding:12px;margin-bottom:16px}
.detail-head{display:flex;justify-content:space-between;gap:20px;align-items:center}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#10182f,#2854d9)}
.login-card{width:420px;background:#fff;padding:32px;border-radius:24px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-card h1{margin-bottom:6px}
.login-card p{color:#667085}
.login-card form{display:grid;gap:12px;margin:22px 0}
.brand-login{display:inline-block;background:#e9edfb;color:#2854d9;padding:8px 12px;border-radius:999px;font-weight:800}
.print-page{background:#e9edf5;padding:30px}
.boleta{max-width:850px;margin:auto;background:#fff;border-radius:20px;padding:30px}
.boleta-header,.boleta-grid,.boleta-columns{display:grid;gap:16px}
.boleta-header{grid-template-columns:1fr auto;align-items:center;border-bottom:2px solid #edf0f6;padding-bottom:16px}
.boleta-company{padding:18px 0}
.boleta-grid{grid-template-columns:repeat(4,1fr)}
.boleta-grid div{background:#f4f6fb;padding:14px;border-radius:14px}
.boleta-grid span{display:block;color:#667085;font-size:13px}
.boleta-columns{grid-template-columns:1fr 1fr;margin-top:20px}
.boleta-columns>div{border:1px solid #edf0f6;border-radius:16px;padding:18px}
.boleta-columns p{display:flex;justify-content:space-between;border-bottom:1px solid #edf0f6;padding-bottom:10px}
.boleta-columns .total{font-size:18px;border-bottom:0}
.neto{margin-top:22px;background:#10182f;color:#fff;border-radius:18px;padding:22px;display:flex;justify-content:space-between;align-items:center}
.neto strong{font-size:34px}
.boleta-footer{color:#667085;margin-top:20px;font-size:13px}
@media(max-width:900px){
    .sidebar{position:static;width:100%}
    .app{display:block}
    .content{margin:0;width:100%}
    .grid,.summary,.steps,.form-grid,.boleta-grid,.boleta-columns{grid-template-columns:1fr}
}
@media print{
    .print-page{background:#fff;padding:0}
    .boleta{box-shadow:none;border-radius:0}
    button{display:none}
}