/* ==========================================================================
   Papelito · el ticket
   Un solo componente para los dos usos: el que sale de la boca y el que vive
   en una columna. Cambia el tamaño, no la anatomía.
   ========================================================================== */

/* --- El recorte -----------------------------------------------------------
   Zigzag arriba y abajo con las puntas redondeadas. Tres capas de máscara:
   el diente de arriba repetido en x, el de abajo, y el cuerpo en el medio.

   El diente se dibuja con arcos y no con vértices: `Q` redondea la cresta y el
   valle. Sin eso queda un serrucho digital, que es justo lo que no queremos.
   -------------------------------------------------------------------------- */
.ticket {
  /* --zig-w y --zig-h viven en tokens.css. Acá estaban repetidos y pisaban al
     token, así que los dientes salían gruesos aunque el token dijera otra cosa. */

  /* Diente de arriba: flancos rectos, cresta y valle redondeados con curvas
     cuadráticas — zigzag redondeado, no una onda. Los radios ocupan buena
     parte del diente; con radios chicos el redondeo no se distingue.
     Todos los puntos de control caen DENTRO del viewBox: si la cresta se
     controla desde afuera, el trazo se recorta y el diente sale plano. */
  --zig-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='30' height='14' viewBox='0 0 30 14' preserveAspectRatio='none'%3E\
%3Cpath d='M0 14 L0 12.2 Q3 12.2 6 9.6 L11 5.8 Q15 1.8 19 5.8 L24 9.6 \
Q27 12.2 30 12.2 L30 14 Z' fill='%23000'/%3E%3C/svg%3E");

  /* el de abajo es el mismo, espejado en y */
  --zig-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='30' height='14' viewBox='0 0 30 14' preserveAspectRatio='none'%3E\
%3Cpath d='M0 0 L0 1.8 Q3 1.8 6 4.4 L11 8.2 Q15 12.2 19 8.2 L24 4.4 \
Q27 1.8 30 1.8 L30 0 Z' fill='%23000'/%3E%3C/svg%3E");

  position: relative;
  /* En la columna llena el ancho disponible. El que sale de la impresora usa
     --ticket-w, que el JS mantiene igual al ancho real del de la columna: el
     ticket tiene que medir lo mismo en los dos lados. */
  width: 100%;
  flex: none;

  /* IMPORTANTE: la máscara NO va acá, va en .ticket__body.
     El orden de render en CSS es filter → mask, así que si el mismo elemento
     lleva la máscara y la sombra, la máscara recorta la sombra que el filtro
     dibujó por fuera del recorte y no queda nada. Con la máscara un nivel más
     adentro, el hijo se recorta primero y recién después el padre proyecta la
     sombra — que además sale con los dientes del zigzag. */
}

/* --- Textura de papel térmico --------------------------------------------
   Vetas verticales muy sutiles, como el Ticker_modelo. Va en un pseudo y no en
   el background del .ticket para no pelearse con la máscara. */
.ticket__body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(90deg,
      rgba(139, 30, 65, 0.028) 0px,
      rgba(139, 30, 65, 0.028) 1px,
      transparent 1px,
      transparent 4px),
    linear-gradient(160deg, rgba(255,255,255,0.6), transparent 60%);
}

/* --- Contenido ------------------------------------------------------------ */
.ticket__body {
  position: relative;
  padding: calc(var(--zig-h) + var(--s3)) var(--s3) calc(var(--zig-h) + var(--s3));
  background: var(--paper);

  -webkit-mask-image: var(--zig-top), var(--zig-bottom), linear-gradient(#000, #000);
          mask-image: var(--zig-top), var(--zig-bottom), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
          mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-position: top left, bottom left, center;
          mask-position: top left, bottom left, center;
  -webkit-mask-size: var(--zig-w) var(--zig-h), var(--zig-w) var(--zig-h),
                     100% calc(100% - var(--zig-h) * 2);
          mask-size: var(--zig-w) var(--zig-h), var(--zig-w) var(--zig-h),
                     100% calc(100% - var(--zig-h) * 2);
}

.ticket__meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;   /* la fecha nunca parte en dos líneas */
  gap: 5px;
  padding-right: 22px;   /* deja lugar al menú de tres puntos */
  /* Calibrado contra el ticket más angosto posible: `#001 · 17 ago · 08:36 a. m.`
     tiene que entrar en una línea. Subirlo parte la fecha o la recorta. */
  font-size: 11px;
  font-weight: var(--w-med);
  color: var(--ink-soft);
}
.ticket__id { font-weight: 700; color: var(--marca); }
.ticket__sep { opacity: 0.45; }

.ticket__text {
  margin-top: var(--s2);
  font-size: 16px;
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* El chip de urgencia está apagado (ver ticket.js). Los estilos quedan para
   cuando vuelva, junto con el selector que hoy no existe. */
.ticket__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s3);
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--w-bold);
}
.ticket__tag::before {
  content: '';
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.ticket[data-urgencia='baja']  .ticket__tag { color: var(--urg-baja);  background: var(--urg-baja-bg);  }
.ticket[data-urgencia='media'] .ticket__tag { color: var(--urg-media); background: var(--urg-media-bg); }
.ticket[data-urgencia='alta']  .ticket__tag { color: var(--urg-alta);  background: var(--urg-alta-bg);  }

/* --- Franja lateral de estado --------------------------------------------
   Va dentro del área enmascarada, por eso es un pseudo y no un border. */
.ticket__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--zig-h);
  bottom: var(--zig-h);
  width: 6px;
  border-radius: 0 3px 3px 0;
  background: var(--col-pend);
}
.ticket[data-estado='haciendo'] .ticket__body::before { background: var(--col-doing); }
.ticket[data-estado='listo']    .ticket__body::before { background: var(--col-done);  }

/* --- El que sale de la impresora ------------------------------------------
   No lleva NINGUNA diferencia de tamaño ni de tipografía respecto del que vive
   en una columna: es el mismo ticket con la misma maqueta, sólo que dibujado a
   escala dentro de la boca. El ancho lo pone .printer__paper. */