:root{
  --papel:#F4F3EE; --tinta:#141A15; --verde:#2C5F3B; --verde-sup:#E6EDE4;
  --ambar:#B8791A; --ladrillo:#9E3B26; --linea:#CBD1C6; --tenue:#5E6A5E;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
.oculto{display:none !important}

/* barra superior */
.barra{background:var(--tinta);color:#fff;padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.barra .quien{font-size:13px;color:#B7C2B5}
.barra .quien b{color:#fff;font-weight:600}
.cola{font-size:12px;background:#31402F;color:#CFE0C9;padding:5px 9px;border-radius:3px;
  display:flex;align-items:center;gap:6px;cursor:pointer}
.cola.limpia{background:var(--verde);color:#DCEBD8}
.punto{width:7px;height:7px;border-radius:50%;background:var(--ambar);display:inline-block}

/* pestañas */
.pestanas{display:flex;background:var(--tinta);flex:0 0 auto;border-top:1px solid #2B342A}
.pestanas button{flex:1;background:none;border:none;color:#9FAD9C;font-family:inherit;
  font-size:14px;padding:12px 4px;cursor:pointer;border-bottom:3px solid transparent}
.pestanas button.on{color:#fff;font-weight:700;border-bottom-color:#8FC08F}

/* contenido */
main{flex:1 1 auto;overflow:auto;padding:16px}
.vista{max-width:560px;margin:0 auto}
h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px}
.sub{font-size:13px;color:var(--tenue);margin-bottom:14px}

.campo{margin-top:15px}
.campo>label{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px}
.control,select.control,input.control{
  width:100%;min-height:56px;border:1.5px solid var(--linea);background:#fff;border-radius:4px;
  padding:0 13px;font-size:17px;color:var(--tinta);font-family:inherit;
}
select.control{appearance:none;background-image:none}
input.control:focus,select.control:focus,button:focus-visible{outline:3px solid var(--ambar);outline-offset:1px}
input.grande{font-size:26px;font-weight:800;letter-spacing:-.02em}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:52px;padding:0 15px;border:1.5px solid var(--linea);background:#fff;
  border-radius:4px;font-size:16px;font-family:inherit;color:var(--tinta);cursor:pointer;
  display:flex;align-items:center}
.chip.on{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:600}
.chip.riesgo.on{background:var(--ladrillo);border-color:var(--ladrillo)}
.atajos{display:flex;gap:8px;margin-top:8px}
.atajos button{flex:1;min-height:44px;border:1.5px solid var(--linea);background:#fff;
  border-radius:4px;font-size:14px;font-family:inherit;color:var(--verde);font-weight:600;cursor:pointer}

.renglon{display:flex;border:1.5px solid var(--linea);border-radius:4px;background:#fff;
  margin-bottom:10px;overflow:hidden}
.renglon .cinta{width:7px;flex:0 0 7px;background:var(--verde)}
.renglon .info{flex:1 1 auto;padding:10px 12px;min-width:0}
.renglon .lote{font-size:15px;font-weight:600}
.renglon .meta{font-size:12.5px;color:var(--tenue);margin-top:2px}
.renglon .cant{flex:0 0 108px;border-left:1.5px solid var(--linea);display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;padding:0 11px}
.renglon .cant b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.renglon .cant span{font-size:11.5px;color:var(--tenue)}
.renglon .quitar{flex:0 0 44px;border:none;border-left:1.5px solid var(--linea);background:#fff;
  color:var(--ladrillo);font-size:20px;cursor:pointer;font-family:inherit}

.agregar{width:100%;min-height:52px;border:1.5px dashed var(--linea);background:transparent;
  border-radius:4px;font-size:15px;color:var(--verde);font-weight:600;cursor:pointer;font-family:inherit}

.cifra{background:var(--tinta);border-radius:6px;padding:15px 17px;margin-top:18px;color:#fff}
.cifra .rot{font-size:13px;color:#9FAD9C}
.cifra .val{font-size:44px;font-weight:800;letter-spacing:-.035em;color:#F0C46A;
  font-variant-numeric:tabular-nums;line-height:1.05;margin-top:2px}
.cifra .desglose{font-size:12.5px;color:#9FAD9C;margin-top:7px}

.saldo{display:flex;gap:10px;margin-top:15px}
.saldo>div{flex:1;border:1.5px solid var(--linea);border-radius:4px;background:#fff;padding:10px 12px}
.saldo .rot{font-size:12px;color:var(--tenue)}
.saldo .n{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}
.saldo .baja .n{color:var(--ladrillo)}

.aviso{border-left:5px solid var(--ambar);background:#FBF3E3;padding:11px 13px;font-size:13.5px;
  line-height:1.5;margin-top:14px;border-radius:0 4px 4px 0}
.aviso.alto{border-left-color:var(--ladrillo);background:#FAECE8}
.aviso.ok{border-left-color:var(--verde);background:var(--verde-sup)}

.pie{flex:0 0 auto;padding:11px 16px 16px;background:var(--papel);border-top:1px solid var(--linea)}
.primaria{width:100%;min-height:60px;background:var(--verde);color:#fff;border:none;border-radius:4px;
  font-size:18px;font-weight:700;cursor:pointer;font-family:inherit}
.primaria.riesgo{background:var(--ladrillo)}
.primaria:disabled{background:#A9BCA4;cursor:default}
.secundaria{width:100%;min-height:44px;background:none;color:var(--tenue);border:none;
  font-size:14px;margin-top:5px;cursor:pointer;font-family:inherit}

.lista{border:1.5px solid var(--linea);border-radius:4px;background:#fff;overflow:hidden}
.lista .fila{display:flex;align-items:center;padding:12px 13px;border-bottom:1px solid #EDEFEA;gap:10px}
.lista .fila:last-child{border-bottom:none}
.lista .nom{flex:1 1 auto;min-width:0}
.lista .nom b{font-size:15.5px;font-weight:600;display:block}
.lista .nom span{font-size:12.5px;color:var(--tenue)}
.lista .mto{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:baseline;background:var(--tinta);
  color:#fff;border-radius:6px;padding:14px 16px;margin-top:13px}
.total .r{font-size:14px;color:#9FAD9C}
.total .v{font-size:32px;font-weight:800;color:#F0C46A;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

.barrita{height:10px;background:#E7EAE4;border-radius:2px;overflow:hidden;margin-top:5px}
.barrita i{display:block;height:100%;background:var(--verde)}
.barrita i.alta{background:var(--ambar)}
.barrita i.llena{background:var(--ladrillo)}

/* acceso */
.acceso{max-width:380px;margin:8vh auto;padding:0 20px}
.acceso .marca{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--verde);margin-bottom:4px}
.acceso .marca span{color:var(--ambar)}
.acceso p{font-size:14px;color:var(--tenue);margin-bottom:22px}