:root{
  --red:#C0121A; --red-dark:#8A0D13; --red-soft:#fdecec;
  --ink:#211f1d;
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --bg:#f3f1ee; --surface:#ffffff; --surface-2:#eeebe7;
  --line:#e8e4df;
  --tx:#2a2724; --tx-2:#5b564f; --tx-3:#6d675f;
  --good:#146A4C; --good-soft:#e8f2ed; --good-line:#c4e0d4;
  --info:#26489E; --info-soft:#ebeef8; --info-line:#ccd6f0;
  --warn:#93610C; --warn-soft:#fbf1de; --warn-line:#ecd8ab;
  --bad:#A81219;  --bad-soft:#fbeaea;  --bad-line:#f2cccc;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  

  --shadow:0 1px 2px rgba(33,31,29,.04), 0 6px 18px rgba(33,31,29,.05);
  


  --barra-h:64px;
  


  --red-soft:#fdecec;
  --line-2:#f1eeea; --line-strong:#dcd7d1;
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --r-xs:8px;
  --shadow-2:0 2px 5px rgba(33,31,29,.06), 0 14px 30px rgba(33,31,29,.08);
  

  --col:520px;
  
  --col-ancha-emp:900px;
  
  --sh-nav:0 -1px 12px rgba(20,19,24,.06);
  







  --letra-min:12px; --letra-chica:13px; --letra-base:15px; --letra-media:17px;
  --letra-grande:20px; --letra-titulo:24px; --letra-estado-celular:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.45 var(--font);
  -webkit-text-size-adjust:100%;
}
.oculto{display:none !important}


.dosf-qr{display:block;width:200px;height:200px;max-width:100%;margin:8px auto 12px}


.pantalla{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px}
.caja{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 22px}
.logo{display:block;margin:0 auto 14px}
.caja h1{margin:0 0 4px;font-size:22px;color:var(--ink)}
.sub{margin:0 0 18px;color:var(--tx-2);font-size:var(--letra-chica)}
label{display:block;margin:12px 0 5px;font-size:var(--letra-chica);color:var(--tx-2)}
input,select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--tx);font-size:16px; 
}
input:focus,select:focus{outline:2px solid var(--red);outline-offset:1px}
.ayuda{margin:6px 0 0;font-size:var(--letra-min);color:var(--tx-3)}


.ayuda.en-poder{color:var(--tx);font-weight:600}
.error{margin:12px 0 0;color:var(--bad);font-size:var(--letra-chica);min-height:1em}




.btn{
  display:inline-block;padding:12px 18px;border:0;border-radius:var(--r-sm);
  background:var(--red);color:#fff;font-size:var(--letra-base);font-weight:600;cursor:pointer;
}
.btn:active{background:var(--red-dark)}
.btn-full{display:block;width:100%;margin-top:16px;text-align:center}
.btn-ghost{background:transparent;color:var(--tx-2);border:1px solid var(--line)}




.btn-chico{padding:9px 14px;font-size:14px}


.enc{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:11px;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);
}




.enc-logo{flex-shrink:0}







.enc-quien{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.enc-quien b{color:var(--ink);font-size:var(--letra-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enc-quien span{color:var(--tx-3);font-size:var(--letra-min)}




.enc-ayuda{
  margin-left:auto;flex-shrink:0;min-height:48px;padding:0 14px;
  background:transparent;color:var(--tx-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.enc-ayuda.on{color:var(--ink);border-color:var(--ink)}
main{padding:14px 16px calc(var(--barra-h) + 26px)}

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.nav{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  

  min-height:calc(var(--barra-h) - 8px);margin:4px 1px;border:0;background:transparent;color:var(--tx-2);
  font-family:inherit;font-size:11px;cursor:pointer;padding:6px 2px;
}
.nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}





.nav.on{background:var(--red-soft);color:var(--red);font-weight:600;border-radius:var(--r-sm)}


.pcardbox{background:var(--surface);border:1px solid transparent;border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:16px 14px;margin-top:14px}
.pcardbox > b{display:block;color:var(--ink);font-size:var(--letra-base);overflow-wrap:anywhere}
.pcardbox > p{margin:4px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.pcardbox label{display:block;margin-top:12px;font-size:var(--letra-min);font-weight:600;
  color:var(--tx-2);text-transform:uppercase;letter-spacing:.05em}
.pcardbox .fila{margin-top:10px}
.sec{margin:20px 0 8px}
.sec h2{margin:0;font-size:var(--letra-chica);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.sec span{display:block;font-size:var(--letra-min);color:var(--tx-3);margin-top:2px}
.card{background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px}



.datos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dato{display:flex;flex-direction:column;gap:2px;min-width:0}
.dato .k{font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.03em}
.dato .v{font-size:var(--letra-base);color:var(--ink);overflow-wrap:anywhere}
.dato.destaca{grid-column:1/-1}
.dato.destaca .v{font-size:22px;font-weight:700;color:var(--red)}

.lista{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}





























.fila{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:12px 14px;background:var(--surface);
  border:0;font:inherit;color:inherit;cursor:pointer}
.fila > *{min-width:0}
.fila:not(button){cursor:default}
.fila b{color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.fila .monto{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.fila.desc .monto{color:var(--bad);font-weight:500}
.fila.anulada{opacity:.62}

.apagado{color:var(--tx-3);font-size:12.5px}
.nota{margin:0;font-size:14px}
.badge{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;
  font-size:var(--letra-min);font-weight:600;background:var(--surface-2);color:var(--tx-2);
  border:1px solid var(--line)}
.badge.good{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.badge.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;color:var(--tx)}
.check input{width:auto;margin-top:2px}




.capa{position:fixed;inset:0;z-index:20;background:var(--bg);overflow-y:auto;
  padding-bottom:calc(env(safe-area-inset-bottom,0) + 24px)}
.capa-enc{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.capa-enc b{color:var(--ink)}
.atras{border:0;background:transparent;color:var(--red);font:inherit;font-weight:600;cursor:pointer;padding:0}
.capa-cuerpo{padding:0 16px 20px}


.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--barra-h) + 16px);z-index:30;
  background:var(--ink);color:#fff;padding:12px 15px;border-radius:var(--r-md);font-size:14px}



@media (max-width:340px){
  .datos{grid-template-columns:1fr}
  .nav{font-size:11px}
}





.fichar{padding:26px 18px;font-size:19px;margin-top:10px}
.fichar.salida{background:var(--ink)}
.fichar.salida:active{filter:brightness(.85)}
.fichar:disabled{opacity:.55}









.modulos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modulo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:88px;padding:14px 10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);font-size:var(--letra-chica);font-weight:600;text-align:center;line-height:1.25;
}
.modulo:active{background:var(--surface-2)}
.modulo svg{width:24px;height:24px;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}





.volver{
  display:inline-flex;align-items:center;min-height:44px;margin:0 0 -12px;padding:0 10px 0 0;
  border:0;background:transparent;color:var(--tx-2);font-size:14px;cursor:pointer;
}
.volver:active{color:var(--ink)}



.pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:var(--letra-min);color:var(--tx-3)}
.pie:first-child{margin-top:0;padding-top:0;border-top:0}




.chip{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--tx-2);font-size:var(--letra-min);font-weight:600;
  border:1px solid var(--line)}
.chip.ojo{background:var(--warn-soft);color:var(--ink);border-color:var(--warn-line)}
.chip.mal{background:var(--bad-soft);color:var(--ink);border-color:var(--bad-line)}




.tira{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.foto-mini{width:74px;height:74px;object-fit:cover;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}


.pieza-retiro{background:var(--surface)}
.pieza-retiro .tira{margin-top:0;padding:0 14px 12px}











.instalar{
  padding:11px 14px;
  display:flex; align-items:center; gap:11px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.instalar img{flex:0 0 auto; border-radius:var(--r-sm)}




.instalar > div{flex:1 1 auto; min-width:0}
.instalar b{display:block; font-size:14px; color:var(--ink)}
.instalar span{display:block; font-size:12.5px; color:var(--tx-2); line-height:1.35}


.instalar .btn{flex:0 0 auto; min-height:40px; padding:0 15px; font-size:14px}


.instalar-x{
  flex:0 0 auto; width:36px; height:36px; padding:0; margin-right:-6px;
  background:none; border:0; cursor:pointer;
  color:var(--tx-3); font-size:var(--letra-base); line-height:1;
  border-radius:var(--r-pill); -webkit-tap-highlight-color:transparent;
}





@media (max-width:359px){
  .instalar span{display:none}
}


.app-inst{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px; margin-top:16px;
}
.app-inst h2{margin:0; font-size:14px; font-weight:600; color:var(--ink)}
.app-inst .btn{margin-top:12px}


.app-pasos{
  margin:12px 0 0; padding-left:20px;
  display:flex; flex-direction:column; gap:7px;
  font-size:var(--letra-chica); line-height:1.45; color:var(--tx-2);
}





.sin-constancia{ color:var(--warn); font-weight:600; }



















body{ font-family:var(--font); font-size:16px; line-height:1.5; }
b, strong{ font-weight:600; }
input, select, textarea, button{ font-family:inherit; }


main{ max-width:var(--col); margin:0 auto; padding:18px 14px calc(var(--barra-h) + 28px); }
.enc{ padding-left:max(16px, calc((100% - var(--col)) / 2 + 14px));
  padding-right:max(16px, calc((100% - var(--col)) / 2 + 14px)); }
.capa-cuerpo{ max-width:var(--col); margin:0 auto; padding:0 14px 20px; }
.capa-enc{ padding-left:max(16px, calc((100% - var(--col)) / 2 + 14px)); }
.toast{ max-width:calc(var(--col) - 28px); margin:0 auto; }
.app-inst{ max-width:var(--col); margin-left:auto; margin-right:auto; }






.sec{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:26px 2px 12px; }
.sec h2{ font-size:var(--letra-media); font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--tx); }
.sec span{ display:block; margin:0; font-size:var(--letra-min); color:var(--tx-3); min-width:0; }
.sec::after{ content:''; flex:1 1 40px; height:1px; background:var(--line); align-self:center; }
#cuerpo > .sec:first-child, #cuerpo > .volver + .sec{ display:block; margin:2px 0 16px; }
#cuerpo > .sec:first-child::after, #cuerpo > .volver + .sec::after{ content:none; }
#cuerpo > .sec:first-child h2, #cuerpo > .volver + .sec h2{
  font-size:22px; line-height:1.25; color:var(--red); letter-spacing:-.02em;
}
#cuerpo > .sec:first-child span, #cuerpo > .volver + .sec span{
  margin-top:5px; font-size:14px; color:var(--tx-2);
}


.card{ border:0; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px 16px; }




#cuerpo > :is(.card, .vacio, .btn, button, .lista) + :is(.card, .vacio, .lista){ margin-top:12px; }
.pcardbox{ padding:18px 16px; }
.caja{ border:0; box-shadow:var(--shadow); }
.app-inst{ border:0; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px 16px; }


.lista{ background:var(--line-2); border:0; border-radius:var(--r-md); box-shadow:var(--shadow); }
.lista:has(> .vacio:only-child){ background:none; box-shadow:none; overflow:visible; }


.vacio{
  margin:0; padding:18px 16px;
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r-md);
  font-size:var(--letra-base); line-height:1.45; color:var(--tx-2); overflow-wrap:anywhere;
}


.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:13px 18px; font-size:16px; font-weight:600;
  border-radius:var(--r-sm); touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:var(--red-dark); }
.btn:active{ transform:translateY(1px); }
.btn-full{ display:flex; width:100%; margin-top:20px; }
.btn-ghost{ background:var(--surface); color:var(--tx-2); border:1px solid var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--tx); }
.btn-chico{ min-height:40px; padding:8px 14px; font-size:13.5px; border-radius:var(--r-pill); }
.btn[disabled], .btn:disabled{
  opacity:1; background:var(--surface-2); color:var(--tx-3);
  border:1px solid var(--line-strong); cursor:default; transform:none;
}

.fichar{ min-height:72px; padding:24px 18px; font-size:19px; }
.fichar.salida:hover{ background:var(--ink); }
.fichar:disabled{ opacity:.55; background:var(--red); color:#fff; border:0; }
.fichar.salida:disabled{ background:var(--ink); }
.instalar .btn{ min-height:40px; }


input, select{ min-height:48px; padding:12px 13px; border-color:var(--line-strong); background:var(--surface-2); }
input:focus, select:focus{ background:var(--surface); }
input[type=checkbox], input[type=radio]{ min-height:0; }

textarea{ width:100%; box-sizing:border-box; padding:12px 13px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2); color:var(--tx); font-size:16px; resize:vertical; }
textarea:focus{ background:var(--surface); outline:2px solid var(--red); outline-offset:1px; }
label{ font-size:var(--letra-chica); font-weight:600; }


.badge{ padding:4px 9px; font-size:var(--letra-min); border:1px solid color-mix(in srgb, currentColor 28%, transparent); }







.barra{ box-shadow:var(--sh-nav); justify-content:center; }
.nav{
  flex:1 1 0; max-width:96px; min-width:0; padding:6px 1px 7px;
  font-size:11px; font-weight:600; letter-spacing:-.01em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.nav span{
  max-width:100%; text-align:center; line-height:1.15;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.nav.on{ background:var(--red-soft); color:var(--red); }
.nav:hover{ color:var(--tx); }
.nav.on:hover{ color:var(--red); }


.modulo{ border:0; border-radius:var(--r-lg); box-shadow:var(--shadow); }












.nav{ font-size:11px; }
@media (max-width:340px){ .nav{ letter-spacing:-.02em; } }

.fila b + .badge, .fila b ~ .badge{ margin-left:8px; vertical-align:1px; }


.fila > .badge{ flex:0 0 auto; margin-top:0; }





.card-orden{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 10px; }
.card-orden > .dato.destaca, .card-orden > .btn{ grid-column:1 / -1; }
.card-orden > .btn-full{ margin-top:8px; }



.badge.suelta{ white-space:normal; border-radius:var(--r-sm); overflow-wrap:anywhere; }
.card > .badge.suelta{ display:block; margin-top:10px; }
.card-orden > .badge.suelta{ grid-column:1 / -1; justify-self:start; }






.fotos-piezas{ margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); }
.fotos-piezas > b{ display:block; color:var(--ink); overflow-wrap:anywhere; }
.fotos-estado{ margin:4px 0 0; color:var(--warn); font-weight:600; }
.fotos-estado.completas{ color:var(--good); }
.foto-pieza{ margin-top:12px; }
.foto-pieza-titulo{ display:block; font-size:14px; color:var(--tx); overflow-wrap:anywhere; }
.foto-pieza-tipos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:6px; }
.foto-pieza-tipos .foto-tipo{ min-height:48px; min-width:0; padding:6px 4px; overflow-wrap:anywhere; }
.foto-pieza-tipos .foto-tipo.hecha{ background:var(--good-soft); color:var(--good); border-color:var(--good-line); }
.foto-pieza .error{ margin-top:6px; }





.direccion{ margin:4px 0 0; font-size:var(--letra-base); line-height:1.4; color:var(--tx); overflow-wrap:anywhere; }
.acciones-parada{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.acciones-parada .btn{ flex:1 1 130px; min-height:48px; text-decoration:none; }





.opciones{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:6px; }
.opciones.opciones-1{ grid-template-columns:minmax(0, 1fr); }
.opciones .opcion{ min-height:48px; min-width:0; padding:8px 10px; font-size:var(--letra-base); line-height:1.25; overflow-wrap:anywhere; text-align:center; }
.opciones .opcion.elegida{ background:var(--red-soft); color:var(--red); border-color:var(--red); }
.foto-grande{ min-height:72px; margin-top:6px; font-size:var(--letra-media); }
.foto-grande.hecha{ background:var(--good-soft); color:var(--good); border-color:var(--good-line); }



.foto-mini.adjunto{ display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--line-strong); border-radius:var(--r-xs); background:var(--surface-2);
  color:var(--tx-2); font-size:var(--letra-chica); font-weight:600; }






.rotulo-tira{ margin-top:10px; font-weight:600; color:var(--tx-2); }
.acciones-pieza{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.acciones-pieza .btn{ min-height:48px; }
.tomas-finales{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.toma{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-align:center; }
.toma b{ font-size:var(--letra-chica); color:var(--tx-2); overflow-wrap:anywhere; }
.toma .btn{ min-height:44px; width:100%; padding-left:4px; padding-right:4px; }
.card.foco{ border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }
.camara-final{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:16px; background:var(--ink); color:var(--surface); overflow:auto; }
.camara-titulo{ margin:0; font-weight:600; font-size:var(--letra-media); text-align:center; overflow-wrap:anywhere; }
.camara-marco{ position:relative; width:100%; max-width:560px; aspect-ratio:3 / 4; background:var(--ink);
  border:1px solid var(--tx-3); border-radius:var(--r-sm); overflow:hidden; }
.camara-marco video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.camara-guia{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; pointer-events:none; }
.camara-marco.sin-vivo .camara-guia{ opacity:1; object-fit:contain; }
.camara-ayuda{ margin:0; max-width:560px; text-align:center; font-size:var(--letra-base); overflow-wrap:anywhere; }
.camara-botones{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; max-width:560px; }
.camara-botones .btn{ min-height:48px; flex:1 1 160px; }







@media (min-width:700px){
  main{ max-width:var(--col-ancha-emp); }
  .enc{ padding-left:max(16px, calc((100% - var(--col-ancha-emp)) / 2 + 14px));
    padding-right:max(16px, calc((100% - var(--col-ancha-emp)) / 2 + 14px)); }
  #cuerpo{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:14px; align-items:start; }
  #cuerpo > *{ grid-column:1 / -1; min-width:0; }
  #cuerpo > .card{ grid-column:auto; }
  

  #cuerpo > :is(.card, .vacio, .btn, button, .lista) + .card, #cuerpo > .card{ margin-top:0; margin-bottom:12px; }
  .modulos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}