:root{
  --naranja:#ea6a1e; --naranja-d:#c95410;
  --tinta:#1f2733; --gris:#64748b; --linea:#e5e8ee; --fondo:#f4f6fa;
  --verde:#15803d; --verde-bg:#dcfce7; --ambar:#b45309; --ambar-bg:#fef3c7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--fondo);color:var(--tinta)}

/* ---- Login ---- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff,#f4f6fa)}
.login-card{background:#fff;padding:2.2rem;border-radius:16px;box-shadow:0 10px 40px rgba(31,39,51,.12);width:100%;max-width:380px}
.login-card h1{font-size:1.05rem;margin:0 0 .2rem}
.login-card .sub{color:var(--gris);font-size:.85rem;margin:0 0 1.4rem}
.login-card label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.9rem}
.login-card input{width:100%;margin-top:.3rem;padding:.65rem .75rem;border:1.5px solid var(--linea);border-radius:9px;font-size:1rem}
.login-card input:focus{outline:none;border-color:var(--naranja)}
.login-card button{width:100%;margin-top:.4rem;padding:.75rem;border:0;border-radius:9px;background:var(--naranja);color:#fff;font-size:1rem;font-weight:600;cursor:pointer}
.login-card button:hover{background:var(--naranja-d)}
.login-card .foot{color:var(--gris);font-size:.72rem;text-align:center;margin:1rem 0 0}
.alert{background:#fde8e8;color:#b42318;border:1px solid #f7cdcd;padding:.6rem .75rem;border-radius:9px;font-size:.85rem;margin-bottom:1rem}

/* ---- App ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#fff;padding:.8rem 2rem;border-bottom:1px solid var(--linea)}
.brand{display:flex;align-items:center;gap:.9rem}
.brand .logo{height:46px;width:auto;display:block}
.brand-txt strong{display:block;font-size:1rem}
.brand-txt span{font-size:.78rem;color:var(--gris)}
.user{display:flex;align-items:center;gap:1rem;font-size:.82rem;color:var(--gris)}
.btn-ghost{border:1px solid var(--linea);background:#fff;color:var(--tinta);padding:.45rem .8rem;border-radius:8px;text-decoration:none;font-size:.82rem;cursor:pointer;display:inline-block}
.btn-ghost:hover{border-color:var(--naranja);color:var(--naranja)}

.login-logo{display:block;height:72px;width:auto;margin:0 auto 1rem}

.wrap{max-width:1680px;margin:1.5rem auto;padding:0 2rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.3rem}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:1.1rem 1.2rem}
.kpi .lbl{font-size:.75rem;color:var(--gris);text-transform:uppercase;letter-spacing:.03em}
.kpi .val{font-size:1.5rem;font-weight:700;margin-top:.3rem}
.kpi .sub{font-size:.76rem;color:var(--gris);margin-top:.2rem}
.kpi.ok .val{color:var(--verde)} .kpi.warn .val{color:var(--ambar)}

.card{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:1.2rem 1.3rem;margin-bottom:1.3rem}
.card-head{display:flex;align-items:center;justify-content:space-between}
.card-head h2{font-size:1rem;margin:0}
.hint{color:var(--gris);font-size:.8rem;margin:.3rem 0 1rem}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.55rem .6rem;text-align:right;border-bottom:1px solid var(--linea);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:#f8fafc;color:var(--gris);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover{background:#fcfcfd}
tfoot td{font-weight:700;border-top:2px solid var(--linea)}
.bar{height:8px;border-radius:5px;background:var(--naranja);display:inline-block;vertical-align:middle;min-width:2px}
.vol{color:var(--ambar);font-weight:600}
.comp{color:var(--tinta)}

.rango{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.rango label{font-size:.78rem;font-weight:600;color:var(--gris);display:flex;flex-direction:column;gap:.3rem}
.rango input{padding:.5rem .6rem;border:1.5px solid var(--linea);border-radius:8px;font-size:.9rem}
.rango button{padding:.55rem 1.1rem;border:0;border-radius:8px;background:var(--naranja);color:#fff;font-weight:600;cursor:pointer}
.rango button:hover{background:var(--naranja-d)}
#rango-result{margin-top:1rem}
.rango-tools{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
#detalle-result{margin-top:1rem}
#detalle-result table{min-width:520px}

.pie{color:var(--gris);font-size:.75rem;text-align:center;padding:1rem 0}

/* ---- Celular ---- */
@media (max-width:640px){
  .topbar{padding:.7rem 1rem}
  .brand .logo{height:38px}
  .brand-txt strong{font-size:.9rem}
  .wrap{padding:0 .9rem;margin:1rem auto}
  .kpi .val{font-size:1.3rem}
  .rango{gap:.6rem}
  .rango label{flex:1 1 140px}
  .card{padding:1rem}
}

@media print{
  .topbar .user,.btn-ghost,.rango button,#form-rango,.rango-tools{display:none}
  body{background:#fff}
  .card,.kpi{box-shadow:none;border-color:#ccc}
}