/*
 * Albarán de entrega (albaran.js). Copia del modelo que ya usaba la tienda:
 * título arriba a la derecha, logo y datos de la empresa, dirección de envío,
 * tabla CANTIDAD / PRODUCTO y las notas.
 *
 * La barra de arriba usa las variables de styles.css (claro y oscuro). La
 * hoja, no: es un papel, y tiene que verse blanca con letra negra igual en
 * pantalla, en modo oscuro y en el PDF. Todo va con prefijo alb-.
 */

#albaran {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: rgb(0 0 0 / .55);
}
.alb-barra {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.alb-fondo { flex: 1 1 auto; overflow: auto; padding: 1.2rem 1rem 2rem; }

/* ---------- La hoja A4 ---------- */
.alb-hoja {
  width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto;
  padding: 14mm 15mm 12mm; box-sizing: border-box;
  background: #fff; color: #111;
  font: 11pt/1.35 Arial, "Helvetica Neue", Helvetica, sans-serif;
  box-shadow: 0 6px 30px rgb(0 0 0 / .35);
}
.alb-titulo { margin: 0 0 9mm; text-align: right; font: 700 19pt/1.2 Arial, Helvetica, sans-serif; color: #111; letter-spacing: 0; }
.alb-cab { display: grid; grid-template-columns: 68mm 1fr; gap: 8mm; align-items: center; margin-bottom: 5mm; }
.alb-logo { width: 100%; height: auto; display: block; }
.alb-empresa h2 { margin: 0 0 3mm; font: 700 15pt/1.2 Arial, Helvetica, sans-serif; color: #111; letter-spacing: 0; }
.alb-empresa p { margin: 0 0 2.5mm; }
.alb-contacto { display: flex; gap: 22mm; flex-wrap: wrap; }
.alb-mail { color: #1155cc; text-decoration: underline; }

.alb-envio { margin: 0 0 4mm 2mm; }
.alb-envio h3 { margin: 0 0 3mm; font: 700 11.5pt/1.3 Arial, Helvetica, sans-serif; color: #555; }
.alb-envio p { margin: 0 0 2.5mm; font-size: 12pt; min-height: 1.2em; }

.alb-tabla { width: 100%; border-collapse: collapse; margin-bottom: 4mm; }
.alb-tabla th, .alb-tabla td { border: 1px solid #111; padding: 2mm 3mm; text-align: center; vertical-align: middle; }
.alb-tabla th { font-weight: 700; font-size: 12pt; padding-top: 5mm; }
.alb-tabla td.alb-cant { font-weight: 700; }
.alb-tabla .alb-cant { width: 28mm; }
.alb-tabla td.alb-prod { font-size: 12pt; color: #1f2a44; }
/* La columna de quitar no tiene borde: en el PDF ni existe. */
.alb-tabla .alb-quitar { width: 2.2rem; border: none; padding: 0 0 0 .3rem; }
.alb-quitar button { background: transparent; border: none; color: #888; padding: .2rem; display: inline-flex; }
.alb-quitar button:hover { color: #dc2626; filter: none; }
.alb-quitar .ico { width: 1rem; height: 1rem; }
#alb-linea { margin: -2mm 0 4mm; }

.alb-notas { text-align: center; }
.alb-notas p { margin: 0 0 3mm; font-size: 8pt; }
.alb-notas .alb-destacada { font-weight: 700; font-size: 10pt; margin-bottom: 4mm; }
.alb-notas .alb-destacada:last-of-type { font-size: 11pt; margin: 0 4mm 6mm; }
.alb-notas .alb-legal { font-size: 6.5pt; line-height: 1.3; margin: 0 2mm 3mm; }

/* Lo que se puede corregir: se nota al pasar por encima, no en el PDF. */
.alb-hoja [contenteditable] { outline: none; border-radius: 2px; }
.alb-hoja [contenteditable]:hover { background: #fff7d6; }
.alb-hoja [contenteditable]:focus { background: #fff2bf; box-shadow: 0 0 0 2px #f5c94d; }
.alb-hoja [contenteditable]:empty::before { content: attr(data-vacio); color: #aaa; }

/* ---------- Al imprimir / guardar como PDF ---------- */
@media print {
  @page { size: A4; margin: 0; }
  body.con-albaran > *:not(#albaran) { display: none !important; }
  body.con-albaran { background: #fff !important; }
  #albaran { position: static; background: none; display: block; }
  .alb-fondo { padding: 0; overflow: visible; }
  .alb-hoja { box-shadow: none; width: 210mm; min-height: 0; margin: 0; }
  .alb-pantalla { display: none !important; }
  .alb-hoja [contenteditable] { background: none !important; box-shadow: none !important; }
  .alb-hoja [contenteditable]:empty::before { content: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 640px) {
  .alb-fondo { padding: .6rem .3rem 1rem; }
  .alb-hoja { padding: 8mm 6mm; min-height: 0; }
  .alb-cab { grid-template-columns: 1fr; }
  .alb-logo { width: 55mm; }
}