:root{--azul:#0095ff;--negro:#0b0b0b;--beige:#ece7e1;--tinta:#1a1a1a;--suave:#6b6660;--borde:#ddd6cd;--verde:#12805c;--ambar:#b45309;--rojo:#c62828}
*{box-sizing:border-box}
body{margin:0;background:var(--beige);color:var(--tinta);font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.4}
a{color:var(--azul)}
.top{background:var(--negro)}
.top-in{max-width:760px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.logo{height:22px;width:auto;display:block}
.top nav{display:flex;gap:14px;align-items:center}
.top nav a,.link{color:#fff;text-decoration:none;font:inherit;font-size:15px;background:none;border:0;cursor:pointer;padding:0}
.wrap{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:0;font-weight:600}h2{font-size:18px;margin:0 0 10px}
.suave{color:var(--suave)}.pequeno{font-size:13px}.pie{text-align:center;margin-top:24px}
.titulo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:6px 0 14px}
.titulo p{margin:2px 0 0}
.saldo{background:#fff;border-radius:14px;padding:8px 14px;text-align:right;border:1px solid var(--borde)}
.saldo span{display:block;font-size:12px;color:var(--suave)}.saldo strong{font-size:20px}
.saldo.ambar strong{color:var(--ambar)}.saldo.rojo strong{color:var(--rojo)}
.aviso{border-radius:14px;padding:12px 14px;margin:0 0 12px;font-size:15px}
.aviso.rojo{background:#fde8e8;color:#8a1c1c}.aviso.ambar{background:#fff3da;color:#7a4306}.aviso.verde{background:#dff5ea;color:#0d5c42}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px}
.tabs a{white-space:nowrap;padding:8px 14px;border-radius:999px;background:#fff;color:var(--tinta);text-decoration:none;font-size:14px;border:1px solid var(--borde)}
.tabs a.on{background:var(--negro);color:#fff;border-color:var(--negro)}
.selector{margin:0 0 12px}
select,input{width:100%;font:inherit;padding:11px 12px;border-radius:12px;border:1px solid var(--borde);background:#fff}
label{display:block;font-size:14px;color:var(--suave);margin:0 0 12px}label input,label select{margin-top:4px;color:var(--tinta)}
.pedido,.tarjeta{background:#fff;border-radius:18px;padding:14px 16px;margin:0 0 12px;border:1px solid var(--borde)}
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fila.sub{margin-top:2px}
.cod{font-weight:600;font-size:18px}
.chip{font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;background:#eee;color:#444;white-space:nowrap}
.chip.verde{background:#dff5ea;color:var(--verde)}.chip.ambar{background:#fff3da;color:var(--ambar)}.chip.rojo{background:#fde8e8;color:var(--rojo)}.chip.azul{background:#e1f2ff;color:#00649f}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.etq{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--beige);color:#4a4540}
.etq.verde{background:#dff5ea;color:var(--verde)}.etq.azul{background:#e1f2ff;color:#00649f}
.montos{display:flex;gap:16px;margin-top:10px;font-size:15px;color:var(--suave)}.montos strong{color:var(--tinta)}
.moto{margin-top:10px;font-size:15px}.motivo{margin-top:10px;font-size:14px;color:var(--rojo)}
.boton{display:inline-block;background:var(--azul);color:#fff;border:0;border-radius:12px;padding:12px 18px;font:inherit;font-weight:500;text-decoration:none;cursor:pointer;width:100%;text-align:center}
.boton.chico{width:auto;padding:9px 14px;font-size:14px;margin-top:10px}
.boton.gris{background:#4a4540}.boton.alerta{background:var(--rojo)}
.vacio{background:#fff;border-radius:18px;padding:28px;text-align:center;color:var(--suave);border:1px dashed var(--borde)}
.login{max-width:380px;margin:6vh auto 0;background:#fff;border-radius:22px;padding:28px 22px;border:1px solid var(--borde)}
.login h1{margin:16px 0 4px}.login .logo-grande{display:block;height:auto;width:170px}
.grid2{display:grid;gap:0}
.acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:6px}
.acciones form{margin:0}.acciones .inline{display:flex;gap:8px;align-items:flex-end}.acciones .inline input{width:190px;padding:8px 10px}
.acciones .boton.chico{margin-top:0}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr;column-gap:12px}.grid2 .boton{grid-column:1/-1;width:auto;justify-self:start}}
.sec{font-size:16px;margin:20px 0 10px;color:var(--suave);font-weight:600}
.datos{list-style:none;padding:12px 14px;margin:0 0 14px;background:var(--beige);border-radius:12px;font-size:15px}
.datos li{padding:2px 0}
.mov{font-weight:600;font-size:17px;white-space:nowrap}.mov.neg{color:var(--rojo)}.mov.pos{color:var(--verde)}
.desglose{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin-top:12px;padding:10px 12px;background:var(--beige);border-radius:12px;font-size:14px;color:var(--suave)}
.desglose .v{text-align:right;color:var(--tinta)}
.desglose .fuerte{font-weight:600;color:var(--tinta)}
.desglose .neg{color:var(--rojo)!important;font-weight:600}.desglose .pos{color:var(--verde)!important;font-weight:600}
.desglose .nota{grid-column:1/-1;margin:4px 0 0;font-size:12px}
.tarjeta h2{margin-top:18px}.tarjeta h2:first-child{margin-top:0}
.opciones{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.opcion{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border:1px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta);cursor:pointer}
.opcion input{width:auto;margin:0}
[hidden]{display:none!important}
.top nav a,.link{white-space:nowrap}
@media(max-width:480px){.top-in{padding:12px}.logo{height:17px}.top nav{gap:11px}.top nav a,.link{font-size:14px}}