@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("/fonts/static/OpenSans_Condensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans Condensed";
  src: url("/fonts/static/OpenSans_Condensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/static/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Lora";
  src: url("/fonts/static/Lora-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@page {
  size: A4;
  margin: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  margin: 0;
  background-color: #e9ecef;
  color: #235c9a;
  font-family: "Open Sans", sans-serif;
}

p,
h1 {
  margin: 0;
}

.barra-etiquetas {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 20px;
  background-color: #ffffff;
  box-shadow: 0 8px 28px rgba(35, 92, 154, 0.1);
  font-size: 14px;
}
.barra-etiquetas__volver {
  margin-right: auto;
  color: #235c9a;
  font-weight: 600;
  text-decoration: none;
}
.barra-etiquetas__volver:hover {
  text-decoration: underline;
}
.barra-etiquetas label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.barra-etiquetas input,
.barra-etiquetas select {
  padding: 4px 6px;
  border: 1px solid #ced4da;
  border-radius: 12px;
  font: inherit;
  font-weight: 400;
}
.barra-etiquetas input[type=number] {
  width: 70px;
}
.barra-etiquetas select {
  max-width: 330px;
}
.barra-etiquetas__boton {
  padding: 7px 18px;
  border: 0;
  border-radius: 12px;
  background-color: #235c9a;
  color: #ffffff;
  font: 600 15px "Open Sans", sans-serif;
  cursor: pointer;
}
.barra-etiquetas__boton:hover {
  background-color: #1b4a7d;
}
.barra-etiquetas__boton--secundario {
  border: 1px solid #235c9a;
  background-color: #ffffff;
  color: #235c9a;
}
.barra-etiquetas__boton--secundario:hover {
  background-color: #eef3f9;
}
.barra-etiquetas__ayuda {
  flex-basis: 100%;
  color: #6c757d;
  font-size: 12px;
}
.barra-etiquetas__aviso {
  flex-basis: 100%;
  color: #842029;
  font-size: 12px;
}

.hojas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0 40px;
}

.hoja {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2mm;
  width: 210mm;
  height: 297mm;
  padding: 8mm;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 8px 28px rgba(35, 92, 154, 0.1);
}

.etiqueta {
  display: grid;
  grid-template-columns: 1fr calc(38mm * var(--e, 1));
  gap: calc(2.5mm * var(--e, 1));
  width: var(--ancho);
  height: var(--alto);
  padding: calc(2.6mm * var(--e, 1)) calc(2.8mm * var(--e, 1));
  overflow: hidden;
  border: calc(0.45mm * var(--e, 1)) solid #235c9a;
  border-radius: calc(3mm * var(--e, 1));
  background-color: #ffffff;
  break-inside: avoid;
}
.etiqueta__principal {
  display: flex;
  flex-direction: column;
  gap: calc(1.2mm * var(--e, 1));
  min-width: 0;
  min-height: 0;
}
.etiqueta__nombre {
  overflow: hidden;
  font: 600 calc(13pt * var(--e, 1))/1.1 "Lora", serif;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta__texto {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  color: #333333;
  font: 400 calc(calc(7.2pt * var(--e, 1)) * var(--ajuste, 1))/1.25 "Open Sans Condensed", "Open Sans", sans-serif;
}
.etiqueta__texto strong {
  color: #235c9a;
}
.etiqueta__texto p + p {
  margin-top: calc(0.6mm * var(--e, 1));
}
.etiqueta__texto--no-entra {
  outline: 1px dashed #dc3545;
}
.etiqueta__alergenos {
  color: #235c9a;
  font-weight: 700;
}
.etiqueta__alergenos span {
  font-weight: 400;
}
.etiqueta__conservacion {
  display: flex;
  align-items: center;
  gap: calc(1mm * var(--e, 1));
  font: 600 calc(7pt * var(--e, 1))/1.2 "Open Sans", sans-serif;
}
.etiqueta__conservacion svg {
  flex: none;
  width: calc(3.6mm * var(--e, 1));
  height: calc(3.6mm * var(--e, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.etiqueta__datos {
  display: grid;
  grid-template-rows: 1.2fr 1fr;
  overflow: hidden;
  border-radius: calc(2mm * var(--e, 1));
  background-color: #eef3f9;
}
.etiqueta__dato {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(0.8mm * var(--e, 1)) calc(2.2mm * var(--e, 1));
}
.etiqueta__dato span {
  font: 600 calc(5.6pt * var(--e, 1))/1.1 "Open Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.etiqueta__dato strong {
  font: 700 calc(11pt * var(--e, 1))/1.2 "Open Sans", sans-serif;
  white-space: nowrap;
}
.etiqueta__dato--lote {
  border-bottom: calc(0.3mm * var(--e, 1)) solid #ffffff;
}
.etiqueta__dato--lote strong {
  font-size: calc(15pt * var(--e, 1));
  letter-spacing: 0.04em;
}
.etiqueta--compacta {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: calc(1.6mm * var(--e, 1));
  padding: calc(2.2mm * var(--e, 1)) calc(2.4mm * var(--e, 1));
  border-radius: calc(2.5mm * var(--e, 1));
}
.etiqueta--compacta .etiqueta__principal {
  gap: calc(0.9mm * var(--e, 1));
}
.etiqueta--compacta .etiqueta__nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: calc(11pt * var(--e, 1));
  white-space: normal;
}
.etiqueta--compacta .etiqueta__texto {
  font-size: calc(calc(6.6pt * var(--e, 1)) * var(--ajuste, 1));
}
.etiqueta--compacta .etiqueta__conservacion {
  font-size: calc(6.3pt * var(--e, 1));
}
.etiqueta--compacta .etiqueta__conservacion svg {
  width: calc(3mm * var(--e, 1));
  height: calc(3mm * var(--e, 1));
}
.etiqueta--compacta .etiqueta__datos {
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto;
}
.etiqueta--compacta .etiqueta__dato {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: calc(1.4mm * var(--e, 1));
  padding: calc(1mm * var(--e, 1)) calc(2mm * var(--e, 1));
}
.etiqueta--compacta .etiqueta__dato span {
  font-size: calc(5pt * var(--e, 1));
}
.etiqueta--compacta .etiqueta__dato strong {
  font-size: calc(9pt * var(--e, 1));
}
.etiqueta--compacta .etiqueta__dato--lote {
  border-right: calc(0.3mm * var(--e, 1)) solid #ffffff;
  border-bottom: 0;
}
.etiqueta--compacta .etiqueta__dato--lote strong {
  font-size: calc(10.5pt * var(--e, 1));
}

@media print {
  body {
    background: none;
  }
  .barra-etiquetas {
    display: none;
  }
  .hojas {
    display: block;
    padding: 0;
  }
  .hoja {
    box-shadow: none;
    break-after: page;
  }
  .hoja:last-child {
    break-after: auto;
  }
  .etiqueta__texto--no-entra {
    outline: 0;
  }
}
.barra-etiquetas__lote {
  width: 130px;
}

.barra-etiquetas__medida {
  color: #6c757d;
}