/* Disposición: una mesa de trabajo. Arriba el estado de la impresora y qué se
   va a imprimir; al medio el formulario; al lado (o abajo en el teléfono) la
   tira de papel tal como va a salir; el botón Imprimir fijo al pie. */
:root{
  --mesa:#E4E7EC; --sup:#F6F7F9; --campo:#FFFFFF; --tinta:#16181D; --tenue:#59606D;
  --raya:#CBD0D9; --acento:#2F2E7A; --sobre-acento:#FFFFFF; --acento-suave:#E3E3F6;
  --papel:#FDFDFB; --tinta-papel:#1B1C22; --gris-papel:#9A9CA6; --sombra:rgba(22,24,29,.18);
  --ok:#1C7A4B; --mal:#B3261E; --mal-suave:#FBE9E7; --ok-suave:#E3F3EA;
  --mono:ui-monospace,"Roboto Mono","DejaVu Sans Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mesa:#121418; --sup:#1B1E24; --campo:#22262D; --tinta:#ECEEF2; --tenue:#A0A7B4;
    --raya:#363B45; --acento:#A9A8F2; --sobre-acento:#15152E; --acento-suave:#2A2A52;
    --papel:#E4E1D8; --tinta-papel:#1B1C22; --gris-papel:#8C8E98; --sombra:rgba(0,0,0,.5);
    --ok:#5FCB94; --mal:#F2877E; --mal-suave:#3A1F1D; --ok-suave:#1B3327;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --mesa:#121418; --sup:#1B1E24; --campo:#22262D; --tinta:#ECEEF2; --tenue:#A0A7B4;
  --raya:#363B45; --acento:#A9A8F2; --sobre-acento:#15152E; --acento-suave:#2A2A52;
  --papel:#E4E1D8; --tinta-papel:#1B1C22; --gris-papel:#8C8E98; --sombra:rgba(0,0,0,.5);
  --ok:#5FCB94; --mal:#F2877E; --mal-suave:#3A1F1D; --ok-suave:#1B3327;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mesa);color:var(--tinta);font:15px/1.45 var(--sans)}
[hidden]{display:none!important}
button,textarea,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.hoja{max-width:1040px;margin:0 auto;padding-inline:16px;padding-block:0 112px;display:flex;flex-direction:column;gap:16px}

/* barra superior */
.barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  padding-block:14px 12px;border-bottom:1px dashed var(--raya)}
.barra h1{margin:0;font:700 15px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.imp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.estado{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tenue);min-width:0}
.punto{width:9px;height:9px;border-radius:50%;background:var(--tenue);flex:none}
.estado.bien{color:var(--ok)} .estado.bien .punto{background:var(--ok)}
.estado.yendo .punto{background:var(--acento);animation:latido 1s ease-in-out infinite}
@keyframes latido{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.estado.yendo .punto{animation:none}}

/* botones */
.btn{border:1px solid var(--raya);background:var(--campo);border-radius:8px;padding:8px 12px;font-weight:600;
  font-size:14px;cursor:pointer;line-height:1.2}
.btn:hover{border-color:var(--tenue)}
.btn:disabled{opacity:.55;cursor:default}
.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.btn.chico{padding:6px 10px;font-size:13px;font-weight:500}
.btn.peligro{color:var(--mal);border-color:var(--mal)}

.aviso{border-radius:8px;padding:10px 12px;font-size:14px;background:var(--acento-suave)}
.aviso.mal{background:var(--mal-suave);color:var(--mal)}
.aviso.ok{background:var(--ok-suave);color:var(--ok)}

/* qué imprimir */
.tipos{display:flex;flex-wrap:wrap;gap:6px}
.tipos button{border:1px solid var(--raya);background:var(--campo);border-radius:8px;padding:9px 11px;font-size:13.5px;
  font-weight:600;cursor:pointer;white-space:nowrap;flex:1 1 auto}
.tipos button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}

/* cuerpo */
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:860px){
  .cuerpo{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .vista{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
  .extras{grid-column:1}
}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
h2{margin:0;font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}

.form{display:flex;flex-direction:column;gap:12px;min-width:0}
.fila{display:flex;flex-wrap:wrap;gap:12px}
.fila>.cmp{flex:1 1 130px}
.cmp{display:flex;flex-direction:column;gap:5px;min-width:0}
.cmp>span,.grupo>span{font-size:12.5px;color:var(--tenue)}
.cmp input,.cmp textarea{width:100%;border:1px solid var(--raya);border-radius:8px;background:var(--campo);padding:9px 11px;font-size:15px}
.cmp textarea{resize:vertical;min-height:74px;line-height:1.45}
.cmp textarea.alto{min-height:190px;font-family:var(--mono);line-height:1.5}
.cmp input::placeholder,.cmp textarea::placeholder{color:var(--tenue);opacity:.8}
.herr{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

.opciones{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.grupo{display:flex;flex-direction:column;gap:5px;min-width:0}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--raya);border-radius:8px;overflow:hidden;background:var(--campo);align-self:flex-start}
.seg button{border:0;background:transparent;padding:7px 11px;font-size:13.5px;cursor:pointer;border-left:1px solid var(--raya)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--acento);color:var(--sobre-acento);font-weight:600}
.seg .cuenta{padding:7px 10px;min-width:34px;text-align:center;font-variant-numeric:tabular-nums;border-left:1px solid var(--raya);font-size:13.5px}

details.ajustes{border:1px solid var(--raya);border-radius:10px;background:var(--sup);padding:0 14px}
details.ajustes>summary{cursor:pointer;padding:11px 0;font-weight:600;font-size:14px}
details.ajustes .dentro{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
.ayuda{margin:0;font-size:13px;color:var(--tenue);max-width:62ch}
.ayuda code{font-family:var(--mono);background:var(--campo);border:1px solid var(--raya);border-radius:4px;padding:0 4px;color:var(--tinta)}

/* la tira de papel */
.vista{display:flex;flex-direction:column;gap:10px;min-width:0}
.vista .cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#largo{font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.rollo{overflow-x:auto;padding-bottom:6px;filter:drop-shadow(0 6px 10px var(--sombra))}
.papel{--margen:14px;--cols:32;font:14px/1.3 var(--mono);color:var(--tinta-papel);background:var(--papel);
  width:calc(var(--cols)*1ch + 2*var(--margen));padding:16px var(--margen) 30px;margin-inline:auto;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%}
.papel .l{white-space:pre;height:1.3em;overflow:visible}
.papel .l.cen{text-align:center} .papel .l.der{text-align:right}
.papel .l.neg{font-weight:700}
.papel .l.alta{height:2.6em} .papel .l.alta>span{display:block;transform:scaleY(2);transform-origin:center top}
.papel .l.grande{font-size:2em;height:1.3em}
.papel .l.av{color:var(--gris-papel);white-space:normal;height:auto}
.papel .qr{padding:.3em 0 .5em}
.papel .qr canvas{display:block;margin:0 auto;image-rendering:pixelated;height:auto}
.papel .qr canvas.foto{image-rendering:auto}

/* guardadas */
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--raya);border-radius:10px;background:var(--sup);overflow:hidden}
.lista li{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;border-top:1px solid var(--raya)}
.lista li:first-child{border-top:0}
.lista .abrir{flex:1 1 0;min-width:0;text-align:left;border:0;background:transparent;padding:6px 10px;cursor:pointer;border-radius:6px}
.lista .abrir:hover{background:var(--acento-suave)}
.lista .tit{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista .sub{display:block;font-size:12.5px;color:var(--tenue)}
.lista li.actual .tit::before{content:"● ";color:var(--acento)}
.vacio{margin:0;font-size:14px;color:var(--tenue)}

/* pie fijo */
.pie{position:fixed;left:0;right:0;bottom:0;background:var(--sup);border-top:1px solid var(--raya);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.pie .filap{max-width:1008px;margin:0 auto;display:flex;gap:10px;align-items:center}
#btnImprimir{flex:1 1 auto;padding:14px 16px;font-size:17px;border-radius:10px}