:root{
  --escritorio:#E9EDF1;
  --papel:#FFFFFF;
  --tinta:#16202B;
  --birome:#1B4FD8;
  --lapiz:#6B7684;
  --linea:#D5DBE2;
  --rojo:#B3261E;
  --verde:#1E6B45;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--escritorio);
  color:var(--tinta);
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
}
.num{font-variant-numeric:tabular-nums}

header{background:var(--tinta);color:#fff;padding-top:env(safe-area-inset-top)}
.barra{max-width:1080px;margin:0 auto;padding:14px 16px 0}
.negocio{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{
  appearance:none;border:0;background:transparent;color:#B9C4D2;
  font:inherit;font-weight:600;font-size:16px;
  padding:12px 16px;border-radius:6px 6px 0 0;cursor:pointer;min-height:46px;
}
nav button[aria-current="true"]{background:var(--escritorio);color:var(--tinta)}
nav button:focus-visible{outline:3px solid #7FA6FF;outline-offset:-3px}

main{max-width:1080px;margin:0 auto;padding:20px 16px 64px}
section[hidden]{display:none}
h2{font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--lapiz);margin:0 0 18px;font-size:15px}

.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:16px}

label{display:block;font-size:14px;color:var(--lapiz);margin-bottom:5px;font-weight:600}
input,select,textarea{
  font:inherit;color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea);border-radius:6px;padding:11px 12px;width:100%;min-height:46px;
}
input:focus,select:focus,textarea:focus{outline:3px solid #B9CCFF;border-color:var(--birome)}
input[type=number],input.num{text-align:right;font-variant-numeric:tabular-nums}

.btn{
  appearance:none;font:inherit;font-weight:600;cursor:pointer;
  background:var(--birome);color:#fff;border:1px solid var(--birome);
  border-radius:6px;padding:11px 18px;min-height:46px;
}
.btn:hover{background:#1743B8}
.btn:focus-visible{outline:3px solid #B9CCFF;outline-offset:2px}
.btn.suave{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
.btn.suave:hover{background:#F3F5F8}
.btn.riesgo{background:var(--papel);color:var(--rojo);border-color:#E6C2BF}
.btn.riesgo:hover{background:#FBF0EF}
.btn.chico{padding:7px 12px;min-height:38px;font-size:15px}
.btn.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.verde:hover{background:#175536}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>*{flex:0 0 auto}
.crece{flex:1 1 220px}

/* Buscador: el elemento protagonista */
.buscador input{
  font-size:20px;padding:16px 16px 16px 46px;min-height:58px;border-width:2px;border-color:#C3CEDB;
  background:var(--papel) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px center;
  background-size:22px;
}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:13px;color:var(--lapiz);font-weight:600;padding:0 8px 8px;border-bottom:1px solid var(--linea)}
th.der,td.der{text-align:right}
td{padding:10px 8px;border-bottom:1px solid #EDF0F3;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.cod{font-size:13px;color:var(--lapiz)}
.precio{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
td input{min-height:40px;padding:7px 9px}
.w-margen{width:88px}
.w-cant{width:74px}
.w-precio{width:112px}
td .btn.chico{margin:2px 0}

.vacio{text-align:center;color:var(--lapiz);padding:28px 12px}
.vacio p{margin:0 0 14px}

.resultado{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;text-align:left;
  background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:12px 14px;margin-bottom:6px;cursor:pointer;font:inherit;min-height:52px}
.resultado:hover{border-color:var(--birome);background:#F5F8FF}
.resultado:focus-visible{outline:3px solid #B9CCFF}

.totales{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--tinta);margin-top:12px;padding-top:12px}
.totales .plata{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}

.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.cifra{background:var(--papel);padding:16px}
.cifra span{display:block;font-size:14px;color:var(--lapiz);font-weight:600}
.cifra strong{display:block;font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px}
.cifra.destacada strong{color:var(--verde)}
@media (max-width:640px){ .cifras{grid-template-columns:1fr} }

.aviso{background:#FFF8E1;border:1px solid #E8D9A0;border-radius:6px;padding:12px 14px;margin-bottom:16px;font-size:15px}
.aviso[hidden]{display:none}
.aviso p{margin:0 0 10px}
.aviso .fila{margin-top:10px}
.capa{position:fixed;inset:0;background:rgba(22,32,43,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.capa[hidden]{display:none}
.modal{background:var(--papel);border-radius:10px;padding:20px;max-width:620px;width:100%;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 6px;font-size:20px}
.grilla2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.previa{font-size:13px;color:var(--lapiz);background:#F5F7FA;border-radius:6px;padding:10px;overflow:auto;white-space:nowrap}
.archivo{background:#F5F7FA;border:1px solid var(--linea);border-radius:6px;padding:10px 12px;font-size:15px;word-break:break-all;margin:12px 0}

#aviso-guardado{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--tinta);color:#fff;
  padding:12px 20px;border-radius:8px;font-weight:600;z-index:30;max-width:90vw;text-align:center}
#aviso-guardado[hidden]{display:none}

@media (max-width:640px){
  body{font-size:16px}
  .grilla2{grid-template-columns:1fr}
  table.apilable thead{position:absolute;left:-9999px}
  table.apilable tr{display:block;border:1px solid var(--linea);border-radius:8px;padding:10px;margin-bottom:10px;background:var(--papel)}
  table.apilable td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:5px 0}
  table.apilable td::before{content:attr(data-rot);color:var(--lapiz);font-size:14px;font-weight:600}
  table.apilable td.der{text-align:right}
  table.apilable td.acciones{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding-top:10px}
  table.apilable td.acciones::before{content:""}
  table.apilable td.acciones .btn.chico{flex:1 1 auto;min-height:44px}
}