/* Piezas de la app que no están en helm.css (prefijo a-). helm.css es el sistema; esto es solo armado. */
html,body{margin:0;background:#EEF2F2}
.a-pantalla{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.a-pantalla>.h-cuerpo{flex:1;align-content:start}
.h-firma img{width:28px;height:28px;display:block}
.h-tabs .a-tab-btn{margin-left:auto;height:34px;border-bottom:0}
.a-suc{margin-left:8px;background:transparent;border:0;color:var(--sobre-banda-2);font:inherit;font-size:13px;font-weight:400}
.a-suc option{color:var(--tinta)}
.a-solo-cel{display:none!important}

/* Entradas */
.entrar{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);flex:1}
.entrar .izq{background:var(--petroleo);color:var(--sobre-banda);padding:36px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.entrar .izq .h-firma img{width:40px;height:40px} .entrar .izq .h-firma b{font-size:22px} .entrar .izq .h-firma span{font-size:9px}
.entrar .izq .h-titulo{margin-top:48px}
.entrar .izq p{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--sobre-banda-2);max-width:36ch}
.entrar .izq .pie{font-size:12.5px;color:var(--sobre-banda-2)}
.entrar .der{display:grid;place-items:center;padding:36px;background:var(--papel)}
.forma{width:min(420px,100%);display:grid;gap:16px}
.forma h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0}
.o{display:flex;align-items:center;gap:12px;color:var(--piedra);font-size:13px} .o::before,.o::after{content:"";flex:1;height:1px;background:var(--linea)}
.a-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.negocios{display:grid;gap:10px}
.negocios .h-renglon{border:1px solid var(--linea);border-radius:12px}

/* Aparato de caja */
.a-caja-pant{background:var(--fondo)}
.cabeza{display:flex;align-items:center;gap:14px;height:60px;padding:0 24px;background:var(--petroleo);color:var(--sobre-banda)}
.cabeza .hora{font-family:var(--display);font-weight:300;font-size:26px;font-variant-numeric:tabular-nums}
.caja{display:grid;grid-template-columns:minmax(0,1fr) 360px;flex:1}
.caja .gente{padding:24px 28px;display:grid;gap:16px;align-content:start;overflow:auto}
.caja .pin{background:var(--papel);border-left:1px solid var(--linea);padding:24px 26px;display:grid;gap:14px;align-content:center}
.caja .pin .quien{text-align:center} .caja .pin .quien b{display:block;font-size:18px;font-weight:600}

/* Nueva factura */
.nf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.nf-izq{display:grid;gap:16px;min-width:0}
.nf-res{position:sticky;top:16px}
.cpt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--fondo)}
.cpt .tx{flex:1;min-width:0}
.a-num{width:92px;height:40px;text-align:right}
.a-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.a-ancho{grid-column:1/-1}
.a-concepto{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr) 120px;gap:10px;padding:14px;border-radius:12px;background:var(--fondo);position:relative}
.a-concepto .h-in{background:var(--papel)}
.a-concepto .a-quitar{position:absolute;top:12px;right:14px;font-size:13px}
.a-opciones{display:grid;border:1px solid var(--linea);border-radius:var(--r-s);overflow:hidden}
.a-opciones>button{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--linea)}
.a-opciones>button:first-child{border-top:0}
.a-opciones>button:hover{background:var(--sel)}
.a-opciones b{font-weight:600;font-size:14px}
.a-elegido{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s);background:var(--sel);border:1px solid var(--sel-linea)}
.a-elegido .tx{flex:1;min-width:0}
.a-in-limpio{border:0;outline:0;background:transparent;flex:1;min-width:0;height:100%;font-size:15px}
.a-area{height:80px;padding:10px 14px;resize:vertical}
.a-uuid{font-size:12px;font-weight:500;word-break:break-all;text-align:right}
.a-variante{display:flex;gap:8px}
.a-variante .h-in{height:44px}
.a-sello{display:grid;gap:12px;padding:14px;border-radius:12px;background:var(--fondo)}
.a-sello .h-campo>span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
input[type=file]{font-size:13.5px}

/* Capas */
.a-velo{position:fixed;inset:0;background:rgba(13,47,55,.40);z-index:20}
.a-hoja{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--papel);z-index:21;display:flex;flex-direction:column;box-shadow:var(--sombra-flota)}
.a-hoja-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linea)}
.a-hoja-cab h3{flex:1;margin:0;font-family:var(--display);font-weight:500;font-size:21px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-hoja-cuerpo{flex:1;overflow:auto;padding:18px 20px}
.a-hoja-pie{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--linea)}
.a-menu{position:fixed;top:56px;right:16px;width:min(320px,calc(100% - 32px));background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra-flota);z-index:21;padding:8px;color:var(--tinta)}
.a-menu-yo{display:flex;gap:12px;align-items:center;padding:10px}
.a-menu-yo .h-av{background:var(--petroleo);color:#fff}
.a-menu-lbl{padding:10px 10px 4px}
.a-menu-op{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:8px;font-size:14.5px}
.a-menu-op:hover{background:var(--sel)} .a-menu-op .h-ico:last-child:not(:first-child){margin-left:auto;color:var(--ok)}
.a-menu-sep{height:1px;background:var(--linea);margin:6px 0}
.helm.a-toast{background:transparent;min-height:0;position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;z-index:30;pointer-events:none;padding:0 16px}

@container helm (max-width:720px){
  .entrar{grid-template-columns:1fr;align-content:start}
  .entrar .izq{padding:22px 20px 70px} .entrar .izq .pie,.entrar .izq p{display:none} .entrar .izq .h-titulo{margin-top:24px}
  .entrar .der{padding:0 12px 24px;margin-top:-52px;place-items:stretch;background:transparent}
  .entrar .der .forma{background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra-hoja);padding:20px 18px;width:100%}
  .caja{grid-template-columns:1fr}
  .caja .gente{padding:16px 14px;gap:12px}
  .caja .gente .h-gente{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none}
  .caja .gente .h-persona{flex:0 0 96px;padding:12px 6px} .caja .gente .h-persona.on{padding:11px 5px}
  .caja .pin{border-left:0;border-top:1px solid var(--linea);padding:18px 16px}
  .cabeza{padding:0 16px} .cabeza .hora{font-size:22px} .cabeza .h-firma .w{display:none}
  .nf{grid-template-columns:1fr;gap:12px} .nf-res{position:static}
  .a-concepto{grid-template-columns:1fr 1fr}
}
@container helm (max-width:520px){
  .a-solo-pc{display:none!important} .a-solo-cel{display:inline-flex!important}
  .a-dos{grid-template-columns:1fr}
  .a-variante{flex-wrap:wrap} .a-variante .h-in{flex:1 1 40%}
  .a-hoja{top:auto;max-height:92dvh;border-radius:var(--r) var(--r) 0 0}
  .a-toast{bottom:84px}
}
.h-ph .h-paso{color:#fff;font-size:12.5px}
.a-concepto{align-items:start}
.h-pb>*{min-width:0}
@container helm (max-width:520px){ .h-seg button{padding:0 6px;font-size:13.5px} .h-dia>.h-btn{position:absolute;top:72px;right:16px;height:34px;padding:0 12px} }
.h-banda{position:relative}
.a-menu-yo>div{min-width:0} .a-menu-yo .h-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Detalle de factura, autorizar con PIN, equipo */
.a-acciones{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.a-forma{display:grid;gap:14px}
.a-conceptos{display:grid;gap:8px;margin:14px 0 4px}
.a-rel{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px}
.a-rel>span:first-child{flex:1;min-width:0}
.h-btn.a-peligro{background:var(--err);border-color:var(--err)}
.helm.a-capa{position:fixed;inset:0;z-index:40;background:transparent;min-height:0}
.a-capa .a-velo{position:absolute}
.a-autoriza{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra-flota);z-index:21}
.a-autoriza .a-hoja-cab h3{font-size:19px}
.a-autoriza .h-gente{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.a-av-gris{background:var(--fondo)!important;color:var(--tinta)!important}
.a-menu-tabs{display:none}
@container helm (max-width:520px){ .a-menu-tabs{display:grid!important} }
.a-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .a-tres .h-campo>span{font-weight:500;font-size:12.5px}