/* ==========================================================================
   La impresora dentro del panel (js/33-impresora.js)
   ========================================================================== */

/* El indicador de la barra: el semáforo de la caja (16 de octubre de 2026,
   rehecho). Un ícono en su azulejo con la luz del conjunto en la esquina, el
   rótulo con su cuenta, y una barrita por impresora —CAJA, SUSHI, COCINA,
   BEBIDAS— con su propio color. El color del estado se declara UNA vez
   (`--imp-c`) y lo toman la luz, el azulejo, las barritas y el borde. Quieto:
   nada late; lo que cambia, cambia con una transición. */
.imp {
  --imp-c: #9a8f86; --imp-sua: rgba(253,244,231,.10);
  flex: none; position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .3rem .7rem .3rem .3rem; border-radius: 14px;
  border: 1px solid rgba(253,244,231,.13);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--imp-sua), transparent 60%),
    linear-gradient(180deg, rgba(253,244,231,.085), rgba(253,244,231,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px rgba(0,0,0,.22);
  color: var(--crema); text-align: left; white-space: nowrap; cursor: pointer;
  transition: border-color var(--d-rapido) var(--ease), background var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease);
}
.imp--ok    { --imp-c: var(--verde-cl);    --imp-sua: rgba(30,158,92,.20); }
.imp--pausa { --imp-c: var(--naranja-cl);  --imp-sua: rgba(247,183,51,.18); }
.imp--mal   { --imp-c: #FF5A5F;            --imp-sua: rgba(210,38,45,.28); border-color: rgba(255,90,95,.55); }
.imp:hover  { border-color: rgba(253,244,231,.26); transform: translateY(-1px); }
.imp[aria-expanded="true"] { border-color: color-mix(in srgb, var(--imp-c) 60%, transparent); }
.imp:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

/* El azulejo del ícono, teñido del estado, con la luz en la esquina. */
.imp__ico {
  position: relative; display: grid; place-items: center; flex: none;
  width: 2.05rem; height: 2.05rem; border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--imp-c) 30%, var(--nori-3)), var(--nori-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--imp-c) 35%, transparent),
              inset 0 1px 0 rgba(255,255,255,.08);
  color: color-mix(in srgb, var(--imp-c) 45%, var(--crema));
  transition: background var(--d-medio) var(--ease), color var(--d-medio) var(--ease);
}
.imp__ico .ico { font-size: 1.02rem; }
.imp__luz {
  position: absolute; top: -3px; right: -3px; width: .62rem; height: .62rem; border-radius: 99px;
  background: var(--imp-c); border: 2px solid var(--nori);
  box-shadow: 0 0 9px color-mix(in srgb, var(--imp-c) 75%, transparent);
  transition: background var(--d-medio) var(--ease);
}

.imp__txt { display: grid; gap: .12rem; line-height: 1.05; }
.imp__t { font: 600 .8rem/1.05 var(--sans); letter-spacing: .005em; }
.imp__d {
  font: 500 .7rem/1.05 var(--sans); color: var(--arena);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.imp--ok .imp__d { color: color-mix(in srgb, var(--verde-cl) 55%, var(--crema)); }
.imp--pausa .imp__d { color: color-mix(in srgb, var(--naranja-cl) 70%, var(--crema)); }
.imp--mal .imp__d { color: #FF8A8E; }

/* Una barrita por impresora, como las rayas de la señal pero parejas. */
.imp__barras { display: inline-flex; align-items: center; gap: 3px; padding-left: .55rem;
  border-left: 1px solid rgba(253,244,231,.12); height: 1.35rem; }
.imp__barras:empty { display: none; }
.imp__b {
  width: 4px; height: 15px; border-radius: 2px; background: rgba(253,244,231,.16);
  transition: background var(--d-medio) var(--ease), box-shadow var(--d-medio) var(--ease);
}
.imp__b--ok    { background: var(--verde-cl);   box-shadow: 0 0 6px rgba(30,158,92,.55); }
.imp__b--pausa { background: var(--naranja-cl); box-shadow: 0 0 6px rgba(247,183,51,.45); }
.imp__b--mal   { background: #FF5A5F;           box-shadow: 0 0 6px rgba(255,90,95,.55); }

@media (max-width: 720px) {
  .imp { padding: .25rem; gap: .45rem; }
  .imp__txt { display: none; }
  .imp__barras { padding-left: 0; border-left: 0; padding-right: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .imp, .imp * { transition: none; } .imp:hover { transform: none; } }

/* La página de la caja. Escondida = FUERA de la pantalla, no `display:none`:
   tiene que seguir dibujada para imprimir. */
.imp-hoja {
  position: fixed; top: 0; left: -200vw; z-index: 90;
  width: min(30rem, calc(100vw - 2rem)); height: min(44rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.imp-hoja--vista { left: auto; right: 1rem; top: 5rem; height: min(44rem, calc(100vh - 6rem)); }
.imp-hoja__cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .6rem .55rem 1rem; background: var(--nori); color: var(--crema);
}
.imp-hoja__x { background: none; border: 0; color: inherit; padding: .3rem; cursor: pointer; }
.imp-hoja iframe { flex: 1; width: 100%; border: 0; }

/* Lo de la caja se imprime en su marco; el panel nunca lo manda al papel. */
@media print { .imp-hoja, .imp { display: none !important; } }