:root{
  --tinta:#000; --tinta-2:#3D3D3A; --tinta-3:#78776F;
  --oro:#F4B90D; --papel:#fff; --lienzo:#F5F4F0;
  --raya:#E2E1DB; --raya-fuerte:#C8C6BE;
  --alerta:#A82015; --alerta-fondo:#FBEDEB;
  --bien:#16624A; --bien-fondo:#E9F3EF;
  --radio:3px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--lienzo);color:var(--tinta-2);
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45}
h1,h2,h3,h4{color:var(--tinta);font-weight:600;margin:0;letter-spacing:-.01em}
a{color:var(--tinta)}
.num{font-variant-numeric:tabular-nums}
.barra{background:var(--tinta);color:#fff;padding:12px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.barra .marca{width:9px;height:20px;background:var(--oro);border-radius:1px}
.barra h1{color:#fff;font-size:18px}
.barra nav{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.barra nav a{color:#B9B8B2;text-decoration:none;font-size:14px}
.barra nav a:hover,.barra nav a.sel{color:var(--oro)}
.barra .quien{color:#B9B8B2;font-size:14px}
.envoltura{max-width:1180px;margin:0 auto;padding:22px}
.tarjeta{background:var(--papel);border:1px solid var(--raya);border-radius:var(--radio);padding:20px;margin-bottom:18px}
.franja{background:var(--tinta);color:#fff;border-radius:var(--radio);padding:18px 22px;margin-bottom:18px}
.franja .fila{display:flex;align-items:flex-end;gap:14px;padding:8px 0;border-bottom:1px solid #2C2C29;flex-wrap:wrap}
.franja .fila:last-child{border-bottom:none}
.franja .rotulo{font-size:12px;color:#78776F;text-transform:uppercase;letter-spacing:.08em;font-weight:600;width:64px;flex:none}
.paso{padding-right:16px}
.paso .et{display:block;font-size:13px;color:#A9A8A2}
.paso .vl{font-size:19px;font-weight:600;color:#fff}
.paso.resalte .vl{color:var(--oro);font-size:24px}
.op{color:#6E6D68;padding:0 6px 2px 0;font-size:18px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--tinta);padding:10px 11px;border-bottom:1px solid var(--raya-fuerte);white-space:nowrap}
td{padding:9px 11px;border-bottom:1px solid var(--raya);vertical-align:top}
tbody tr:hover{background:#FBFBF9}
.d{text-align:right}
th.d{text-align:right}
tr.total td{border-top:2px solid var(--tinta);border-bottom:none;font-weight:700;color:var(--tinta);background:var(--lienzo)}
.envuelve{overflow-x:auto}
.tenue{color:var(--tinta-3)}
.cero{color:var(--raya-fuerte)}
.debe{color:var(--alerta);font-weight:600}
.favor{color:var(--bien);font-weight:600}
.bt{background:var(--tinta);color:#fff;border:1px solid var(--tinta);padding:9px 16px;border-radius:var(--radio);
  cursor:pointer;font-weight:600;font-size:14px;font-family:inherit;text-decoration:none;display:inline-block}
.bt:hover{background:#1d1d1b}
.bt.claro{background:var(--papel);color:var(--tinta)}
.bt.claro:hover{background:var(--lienzo)}
.bt.oro{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.bt.oro:hover{background:#e0a908}
.bt.chico{padding:4px 10px;font-size:13px}
.bt:disabled{background:var(--raya-fuerte);border-color:var(--raya-fuerte);cursor:not-allowed}
.bt:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--raya-fuerte);border-radius:var(--radio);
  background:var(--papel);color:var(--tinta);max-width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oro);outline-offset:1px}
label{display:block;font-weight:600;color:var(--tinta);font-size:14px;margin-bottom:4px}
.campo{margin-bottom:14px}
.ayuda{font-size:13px;color:var(--tinta-3);margin-bottom:8px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.aviso{border-left:3px solid var(--raya-fuerte);background:var(--lienzo);padding:11px 14px;margin-bottom:14px;border-radius:0 var(--radio) var(--radio) 0}
.aviso.mal{border-left-color:var(--alerta);background:var(--alerta-fondo)}
.aviso.ok{border-left-color:var(--bien);background:var(--bien-fondo)}
.etiqueta{display:inline-block;padding:1px 8px;border-radius:9px;font-size:12px;font-weight:600;white-space:nowrap}
.etiqueta.ok{background:var(--bien-fondo);color:var(--bien)}
.etiqueta.mal{background:var(--alerta-fondo);color:var(--alerta)}
.etiqueta.ojo{background:#FFF6DC;color:#8A6A00}
.etiqueta.gris{background:var(--raya);color:var(--tinta-2)}
.medidores{display:flex;flex-wrap:wrap;border:1px solid var(--raya);border-radius:var(--radio);background:var(--papel)}
.medidor{flex:1 1 160px;padding:11px 14px;border-right:1px solid var(--raya)}
.medidor:last-child{border-right:none}
.medidor .et{display:block;font-size:13px;color:var(--tinta-3)}
.medidor .vl{font-size:18px;font-weight:600;color:var(--tinta)}
.centro{max-width:420px;margin:60px auto;padding:0 20px}
.hijo{background:var(--lienzo)}
.hijo .interior{padding:12px 16px}
@media (max-width:720px){
  .envoltura{padding:14px}
  /* en el teléfono cada transacción se lee como una ficha, no como una tabla ancha.
     Se usa hijo directo para no tocar la tabla de productos que va adentro. */
  table.tabla-docs > thead{display:none}
  table.tabla-docs > tbody > tr{display:block;border-bottom:1px solid var(--raya-fuerte);padding:8px 0}
  table.tabla-docs > tbody > tr[hidden]{display:none}
  table.tabla-docs > tbody > tr > td{display:flex;justify-content:space-between;align-items:baseline;
    gap:14px;border:none;padding:3px 12px;text-align:right}
  table.tabla-docs > tbody > tr > td::before{content:attr(data-et);color:var(--tinta-3);
    font-size:13px;font-weight:500;flex:none;text-align:left}
  table.tabla-docs > tbody > tr > td:not([data-et])::before{content:none}
  table.tabla-docs > tbody > tr > td.acciones-doc{justify-content:flex-end;gap:8px;padding-top:8px}
  table.tabla-docs > tbody > tr.hijo{padding:0;border-bottom:none}
  table.tabla-docs > tbody > tr.hijo > td{display:block;text-align:left;padding:0}
  .interior{overflow-x:auto}
  .franja .fila{flex-direction:column;align-items:stretch;gap:4px}
  .franja .rotulo{width:auto}
  .medidor{flex-basis:50%;border-bottom:1px solid var(--raya)}
}
@media print{
  .barra nav,.acciones,.noimp{display:none !important}
  body{background:#fff}
  .franja{background:#fff;color:#000;border:1px solid #000}
  .franja .paso .vl,.paso.resalte .vl{color:#000}
}