:root{--tinta:#16181d;--suave:#5c6370;--linea:#e3e6ec;--fondo:#fff;
      --papel:#f4f6f9;--acento:#8c2f39;--frio:#2a5f7a;--bien:#2f6b45}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
     font:15.5px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--frio)}
header{background:var(--fondo);border-bottom:1px solid var(--linea);
       display:flex;align-items:center;gap:26px;padding:0 26px}
header .marca{font-weight:800;letter-spacing:1.5px;text-decoration:none;
              color:var(--acento);padding:15px 0}
header nav{display:flex;gap:20px;flex:1}
header nav a{text-decoration:none;color:var(--suave);padding:15px 0;
             border-bottom:2px solid transparent}
header nav a.on{color:var(--tinta);border-bottom-color:var(--acento)}
header .salir{color:var(--suave);text-decoration:none;font-size:14px}
main{max-width:1000px;margin:0 auto;padding:26px}
h1{font-size:25px;margin:0 0 4px;letter-spacing:-.3px}
h2{font-size:19px;margin:0 0 12px}
h2 small{font-weight:400;color:var(--suave);font-size:14px;margin-left:9px}
.sub{color:var(--suave);margin:0 0 22px}
.tarjeta{background:var(--fondo);border:1px solid var(--linea);border-radius:10px;
         padding:20px 22px;margin:0 0 18px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;color:var(--suave);font-size:12px;text-transform:uppercase;
   letter-spacing:.5px;font-weight:600;border-bottom:1px solid var(--linea);
   padding:7px 9px}
td{padding:8px 9px;border-bottom:1px solid #f1f3f6}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.cliente{background:#f7fafc;font-weight:600}
.pie{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linea);
     color:var(--suave);font-size:13.5px}
.malo{color:var(--acento);font-weight:600}
.aviso{background:#fdf8e6;border-left:4px solid #c9a227;padding:11px 15px;
       margin:0 0 14px;font-size:14.5px;border-radius:0 6px 6px 0}
.aviso code{background:#fff;padding:1px 5px;border-radius:4px;font-size:13px}
body.centrado{display:flex;align-items:center;justify-content:center;
              min-height:100vh}
.entrada{width:330px}
.entrada h1{color:var(--acento);letter-spacing:2px;margin-bottom:2px}
.entrada label{display:block;margin:0 0 14px;font-size:13.5px;color:var(--suave)}
.entrada input{display:block;width:100%;margin-top:5px;padding:9px 11px;
               border:1px solid var(--linea);border-radius:7px;font-size:15px;
               font-family:inherit}
.entrada input:focus{outline:2px solid var(--frio);outline-offset:1px}
.entrada button{width:100%;padding:10px;border:0;border-radius:7px;
                background:var(--acento);color:#fff;font-size:15px;
                font-weight:600;cursor:pointer;font-family:inherit}