/* Tickets termicos 80mm termicos 80mm */
@page { size: 80mm auto; margin: 3mm 2mm; }

body.ticket-print {
    font-family: "Courier New", monospace;
    width: 72mm;
    margin: 0;
    color: #000;
    background: #fff;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.28;
}

.print-only { display: block; }
.on-screen { display: none; }

.hdr { text-align: center; border-bottom: 1px dashed #000; padding-bottom: 5px; margin-bottom: 7px; }
.hdr h1 { font-size: 26px; margin: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; line-height: 1.1; }
.hdr .sub { font-size: 14px; letter-spacing: 1px; }
.rule { border-bottom: 1px dashed #000; margin: 6px 0; }
.row { display: flex; justify-content: space-between; }
.row .r { text-align: right; }
.line { display: flex; justify-content: space-between; align-items: flex-start; font-size: 17px; gap: 4px; }
.line .qty { width: 34px; flex-shrink: 0; }
.line small { font-weight: inherit; }
.line .name { flex: 1; overflow-wrap: anywhere; }
.line .amt { text-align: right; white-space: nowrap; }
.line .sub-total { font-size: 15px; }
/* Aclaracion del mozo para cocina/barra. Sale abajo del item, corrida a la
   izquierda para que se lea como una nota y no como otra linea del pedido. */
.line.nota { font-size: 15px; padding-left: 34px; margin-top: -2px; }
.line.nota .name { font-style: italic; }
/* Input de la aclaracion en el carrito (solo pantalla, nunca se imprime). */
#carrito .nota-inp { width: 100%; margin: 0.15rem 0 0.4rem; padding: 0.2rem 0.45rem;
  background: #0d1330; border: 1px solid #25305c; border-radius: 0.35rem;
  color: #d6d3f0; font-size: 0.78rem; line-height: 1.3; }
#carrito .nota-inp::placeholder { color: #5f5b7d; }
#carrito .nota-inp:focus { outline: none; border-color: #38bdf8; }
.total { display: flex; justify-content: space-between; font-size: 24px; font-weight: 900; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 6px 0; margin: 7px 0; }
.centered { text-align: center; }
.small { font-size: 14px; }
.meta { font-size: 15px; margin: 3px 0; }
.banda { height: 40mm; }

.ticket-tag { display: inline-block; border: 1px solid #000; padding: 1px 6px; font-weight: bold; letter-spacing: 1px; }
/* Logo del local: SOLO ticket de cliente, abajo de todo antes del TOTAL. El PNG
   trae transparencia real (fondo transparente, lineas negras): sobre el papel
   blanco sale negro sobre blanco. 60mm de ancho entran en los 72mm del papel. */
.ticket-logo { text-align: center; margin: 6px 0 2px; }
.ticket-logo img { width: 33mm; max-width: 100%; height: auto; margin-left: 20mm; }

/* Horno / frito. En el ticket (papel) va en negro y en negrita como todo lo demas:
   la cocina no ve colores, solo la palabra. */
.prep-tag { display: inline-block; border: 1px solid #000; padding: 0 4px; font-weight: bold;
            font-size: 0.82em; letter-spacing: 1px; color: #000; background: #fff; }
.prep-btn { background: none; border: 0; padding: 0; margin-left: 0.35rem; cursor: pointer; line-height: 1; }
.prep-btn:hover .prep-tag { background: #000; color: #fff; }
/* En pantalla (carrito) se distingue con color; al imprimir manda el negro de arriba. */
#carrito .prep-tag.prep-horno { border-color: #f59e0b; color: #fbbf24; }
#carrito .prep-tag.prep-frito { border-color: #38bdf8; color: #7dd3fc; }

/* linea 'ambos' todavia sin decidir: apagada para que llame la atencion sin gritar */
#carrito .prep-tag.prep-ninguna { border-color: #6d6987; color: #8a87a3;
  border-style: dashed; letter-spacing: 0.5px; }
#carrito .prep-btn.prep-ninguna .prep-tag { animation: prepPide 1.6s ease-in-out infinite; }
@keyframes prepPide { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
#prodRows .prep-tag.prep-horno, #prodRows .prep-tag.prep-ambos { border-color: #f59e0b; color: #fbbf24; }
#prodRows .prep-tag.prep-frito { border-color: #38bdf8; color: #7dd3fc; }

/* ============ PLANILLA A4 (cierre del día) ============ */
@page a4page { size: A4 portrait; margin: 14mm 12mm; }

#impresionA4 { display: none; }

body.a4-print { page: a4page; background: #fff; }
body.a4-print #impresion { display: none !important; }

.planilla-a4 { font-family: "Segoe UI", Arial, sans-serif; color: #000; background: #fff; padding: 2mm 1mm; }
.planilla-a4 h1 { text-align: center; text-transform: uppercase; font-size: 22px; letter-spacing: 3px; margin: 0 0 2px; }
.planilla-a4 .sub { text-align: center; font-size: 12px; letter-spacing: 1px; margin-bottom: 5px; }
.planilla-a4 .meta { font-size: 11px; margin: 1px 0; }
.planilla-a4 .plh { font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 2px; margin: 14px 0 6px; letter-spacing: 1px; }
.planilla-a4 table { width: 100%; border-collapse: collapse; }
.planilla-a4 td { border: 1px solid #000; padding: 4px 7px; font-size: 12px; }
.planilla-a4 td.num { text-align: right; font-weight: 600; white-space: nowrap; }
.planilla-a4 tr.total-row td { font-weight: 700; font-size: 13px; background: #f0f0f0; }
.planilla-a4 .plr { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 1px; border-bottom: 1px dotted #999; }
.planilla-a4 .plr.pt { font-weight: 700; border-bottom: 1px solid #000; }
.planilla-a4 .neto { text-align: center; font-size: 30px; font-weight: 800; border: 2px solid #000; padding: 10px 0; margin: 6px 0; }
.planilla-a4 .obs { font-size: 11px; border: 1px solid #000; padding: 6px; min-height: 26px; white-space: pre-wrap; }
.planilla-a4 .firma { margin-top: 40px; display: flex; justify-content: space-between; }
.planilla-a4 .firma span { width: 45%; border-top: 1px solid #000; padding-top: 5px; font-size: 11px; text-align: center; }

@media print {
    body { background: #fff !important; color: #000 !important; }
    body.ticket-print, body.a4-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body > * { display: none !important; }
    body > #impresion { display: block !important; }
    #impresion { position: absolute; left: 0; top: 0; width: 72mm; }
    body.ticket-print #impresion { color: #000 !important; }
    body.ticket-print #impresion * { color: #000 !important; border-color: #000 !important; font-weight: bold; }
    body.a4-print > #impresionA4 { display: block !important; }
    body.a4-print > #impresionA4 { position: absolute; left: 0; top: 0; width: 100%; }
    html, body { margin: 0; padding: 0; }
}