/* ==========================================================
   P6 · IDENTIDAD VISUAL COSTO SWEET
   Capa exclusivamente visual. No modifica lógica ni fórmulas.
   Referencia: crema + chocolate + caramelo + turquesa.
   ========================================================== */
:root{
  --cream:#FBF5EC;
  --cream-2:#F3E7D5;
  --cacao:#3B2314;
  --cacao-soft:#765A48;
  --raspberry:#37A7A7;
  --raspberry-deep:#278C8C;
  --caramel:#A65A1E;
  --line:#E5CFB4;
  --white:#FFFDF9;
  --header-bg:#FBF5EC;
  --header-fg:#3B2314;
  --header-fg-2:#765A48;
}
html[data-theme="dark"]{
  --cream:#1A0F0A;
  --cream-2:#2A170F;
  --cacao:#F8EAD7;
  --cacao-soft:#D6B894;
  --raspberry:#43B3B3;
  --raspberry-deep:#57C5C5;
  --caramel:#D17B35;
  --line:#5B3C2B;
  --white:#26150E;
  --header-bg:#1A0F0A;
  --header-fg:#F8EAD7;
  --header-fg-2:#D6B894;
}
body{font-family:'Poppins',sans-serif;background:var(--cream);}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--cacao);}
.btn, nav.tabs button, nav.subtabs button, input[type=text],input[type=number],input[type=email],input[type=password],select,.shape-picker-btn{font-family:'Poppins',sans-serif;}
header.hero{
  background:linear-gradient(180deg,var(--header-bg),var(--cream));
  color:var(--header-fg);
  padding:34px 24px 30px;
  border-bottom:1px solid var(--line);
}
header.hero .sprinkles{display:none;}
.hero-inner{padding-left:0;}
.eyebrow{font-family:'Poppins',sans-serif;color:var(--caramel);letter-spacing:.13em;font-weight:700;margin-bottom:9px;}
.eyebrow::before{background:var(--caramel);}
.eyebrow .brand-name{
  font-family:'Playfair Display',serif;
  font-size:.92rem;
  letter-spacing:.02em;
  color:var(--caramel);
  background:transparent;
  padding:0;
  border-radius:0;
}
header.hero h1{color:var(--cacao);font-size:clamp(1.8rem,4vw,2.6rem);}
header.hero p{color:var(--cacao-soft);font-family:'Poppins',sans-serif;}
nav.tabs{
  margin:-18px auto 0;
  border-color:var(--line);
  border-radius:18px;
  padding:6px;
  box-shadow:0 8px 22px rgba(59,35,20,.07);
  background:var(--white);
}
nav.tabs button{border-radius:13px;color:var(--cacao-soft);padding:12px 11px;}
nav.tabs button:hover{background:var(--cream-2);color:var(--cacao);}
nav.tabs button.active{background:var(--raspberry);color:#fff;box-shadow:0 3px 9px rgba(55,167,167,.20);}
nav.subtabs{background:var(--cream-2);border-color:var(--line);border-radius:16px;padding:5px;}
nav.subtabs button{border-radius:11px;color:var(--cacao-soft);}
nav.subtabs button.active{background:var(--raspberry);color:#fff;}
.card,.result-toggle,.result-breakdown-toggle{border-color:var(--line);border-radius:20px;background:var(--white);box-shadow:0 4px 14px rgba(59,35,20,.045);}
.card{padding:24px;}
.card-sub,label,.muted{color:var(--cacao-soft);}
.num-badge{background:var(--cream-2);color:var(--caramel);}
input[type=text],input[type=number],input[type=email],input[type=password],select,.shape-picker-btn{
  border-color:var(--line);border-radius:14px;background:var(--cream);color:var(--cacao);padding:11px 12px;
}
input:focus,select:focus{outline:2px solid var(--raspberry);background:var(--white);}
.btn{border-radius:14px;padding:11px 17px;}
.btn-primary{background:var(--raspberry);color:#fff;}
.btn-primary:hover{background:var(--raspberry-deep);}
.btn-ghost{background:var(--white);border-color:var(--line);color:var(--cacao);}
.btn-add{border-color:var(--line);border-radius:13px;color:var(--cacao-soft);}
.btn-add:hover{border-color:var(--raspberry);color:var(--raspberry-deep);}
.ing-card,.ing-block,.pill,.result-metric,.result-profit-item{border-color:var(--line);border-radius:16px;}
.ing-card{background:var(--cream);}
.ing-block,.result-profit-item{background:var(--white);}
.pill,.result-metric{background:var(--cream-2);}
.pill b,.ing-block .val,.row-total{color:var(--caramel);}
.result-hero-main{
  border-color:var(--raspberry);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(55,167,167,.15),rgba(243,231,213,.55));
}
.result-hero-main .rh-kicker{color:var(--raspberry-deep);}
.result-toggle{border-color:var(--raspberry);}
.result-toggle summary{background:linear-gradient(135deg,rgba(55,167,167,.13),rgba(243,231,213,.65));}
.result-toggle summary .chev{color:var(--raspberry);}
.result-breakdown-toggle>summary{background:var(--cream-2);}
table.rows th{color:var(--cacao-soft);border-bottom-color:var(--line);}
.shape-picker-group-title{color:var(--caramel);border-bottom-color:var(--caramel);}
.shape-picker-option.active{background:var(--raspberry);color:#fff;}
footer.note{color:var(--cacao-soft);}
@media(max-width:640px){
  header.hero{padding:27px 16px 36px;}
  nav.tabs{border-radius:16px;}
  .card{border-radius:18px;padding:18px 16px;}
  .btn{border-radius:14px;}
}

/* ===== P6.1 · Integración gráfica Costo Sweet (solo presentación) ===== */
.brand-visual{position:relative;z-index:1;display:grid;grid-template-columns:minmax(230px,420px) 1fr;gap:26px;align-items:center;max-width:1120px;margin:0 auto;}
.brand-visual-media{border-radius:24px;overflow:hidden;border:1px solid rgba(243,231,213,.24);background:rgba(255,255,255,.06);box-shadow:0 16px 36px rgba(24,12,5,.18);}
.brand-visual-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.brand-visual-copy{min-width:0;}
.brand-visual-copy .brand-kicker{font-family:'Poppins','Inter',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#37A7A7;margin-bottom:8px;}
.brand-visual-copy .brand-lockup{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:clamp(1.05rem,2.2vw,1.45rem);color:#F3E7D5;margin:0 0 10px;}
.brand-visual-copy .brand-lockup strong{color:#D97922;font-family:'Pacifico','Playfair Display',serif;font-weight:400;}
.brand-visual-copy .brand-slogan{font-family:'Poppins','Inter',sans-serif;font-size:.65rem;letter-spacing:.2em;font-weight:800;color:#37A7A7;margin-top:14px;}
body:not(.dark) header.hero .brand-visual-copy .brand-lockup{color:#3B2314;}
body:not(.dark) header.hero{background:linear-gradient(135deg,#F3E7D5 0%,#FFF9F1 56%,#E8F4F1 100%);color:#3B2314;}
body:not(.dark) header.hero .brand-visual-media{border-color:rgba(166,90,30,.18);box-shadow:0 14px 30px rgba(59,35,20,.12);}
@media(max-width:760px){header.hero{padding:24px 18px 22px}.brand-visual{grid-template-columns:1fr;gap:18px}.brand-visual-media{max-width:520px;margin:0 auto}.brand-visual-copy{text-align:center}.brand-visual-copy p{max-width:560px;margin-left:auto;margin-right:auto}.brand-visual-copy .brand-slogan{letter-spacing:.13em}}
@media(max-width:430px){.brand-visual-media{border-radius:18px}.brand-visual-copy .brand-slogan{font-size:.58rem}.brand-visual-copy h1{font-size:clamp(1.75rem,9vw,2.25rem)}}



/* ===== P6.2 · Identidad adaptativa claro/oscuro (solo presentación) ===== */
/* La identidad responde al atributo real que usa el selector de tema de la app. */
html:not([data-theme="dark"]) header.hero{
  background:linear-gradient(135deg,#F3E7D5 0%,#FFF9F1 56%,#E8F4F1 100%);
  color:#3B2314;
}
html:not([data-theme="dark"]) header.hero .brand-visual-copy .brand-lockup{
  color:#3B2314;
}
html:not([data-theme="dark"]) header.hero .brand-visual-copy .brand-lockup strong{
  color:#A65A1E;
}
html:not([data-theme="dark"]) header.hero .brand-visual-media{
  border-color:rgba(166,90,30,.18);
  box-shadow:0 14px 30px rgba(59,35,20,.12);
}

html[data-theme="dark"] header.hero{
  background:
    radial-gradient(circle at 80% 14%,rgba(55,167,167,.12),transparent 30%),
    radial-gradient(circle at 18% 12%,rgba(214,167,106,.10),transparent 34%),
    linear-gradient(145deg,#160C07 0%,#24140C 48%,#301A10 100%);
  color:#F8EFE3;
}
html[data-theme="dark"] header.hero .brand-visual-copy .brand-kicker{
  color:#57C4C2;
}
html[data-theme="dark"] header.hero .brand-visual-copy .brand-lockup{
  color:#FFF9F1;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 3px 12px rgba(0,0,0,.32);
}
html[data-theme="dark"] header.hero .brand-visual-copy .brand-lockup strong{
  color:#D97922;
  text-shadow:0 2px 10px rgba(217,121,34,.16);
}
html[data-theme="dark"] header.hero .brand-visual-copy h1{
  color:#FFF9F1;
}
html[data-theme="dark"] header.hero .brand-visual-copy p{
  color:#EADCCB;
}
html[data-theme="dark"] header.hero .brand-visual-copy .brand-slogan{
  color:#57C4C2;
}
html[data-theme="dark"] header.hero .brand-visual-media{
  border-color:rgba(243,231,213,.18);
  background:linear-gradient(145deg,rgba(255,249,241,.08),rgba(55,167,167,.04));
  box-shadow:0 16px 38px rgba(0,0,0,.34);
}
html[data-theme="dark"] header.hero .brand-visual-media img{
  filter:brightness(.90) saturate(1.04) contrast(1.04);
}

/* El nombre de marca se mantiene legible y consistente en celular. */
@media(max-width:760px){
  html[data-theme="dark"] header.hero .brand-visual-copy .brand-lockup{
    font-size:clamp(1.18rem,5.5vw,1.48rem);
  }
}


/* P6.3 · Encabezado contextual por sección. No altera cálculos ni estructura funcional. */
.brand-visual-media{transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;}
.brand-visual-media[data-section="inventario"]{border-color:rgba(55,167,167,.38);}
.brand-visual-media[data-section="datos"]{border-color:rgba(166,90,30,.30);}
.brand-visual-media[data-section="costos"]{border-color:rgba(214,167,106,.42);}
.brand-visual-media[data-section="recetas"]{border-color:rgba(55,167,167,.30);}
#dynamicHeroKicker,#dynamicHeroTitle,#dynamicHeroText{transition:color .18s ease,opacity .18s ease;}
html[data-theme="dark"] .brand-visual-copy .brand-lockup{color:#FFF8ED !important;}
html[data-theme="dark"] .brand-visual-copy .brand-lockup strong{color:#D97922 !important;}
html[data-theme="dark"] .brand-visual-copy .brand-slogan{color:#37A7A7 !important;}


/* ===== P6.3.2 · Imagen contextual real por sección =====
   Solo presentación visual. Las fórmulas y la lógica económica permanecen intactas. */
#dynamicHeroMedia #dynamicHeroArt{
  width:100%;
  height:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:opacity .18s ease, filter .22s ease, transform .22s ease;
}
#dynamicHeroMedia[data-section="inventario"] #dynamicHeroArt{
  object-position:center 42%;
}
#dynamicHeroMedia[data-section="datos"] #dynamicHeroArt{
  object-position:center 44%;
}
#dynamicHeroMedia[data-section="costos"] #dynamicHeroArt{
  object-position:center 43%;
}
#dynamicHeroMedia[data-section="recetas"] #dynamicHeroArt{
  object-position:center center;
}
html[data-theme="dark"] #dynamicHeroMedia #dynamicHeroArt{
  filter:brightness(.82) saturate(.92) contrast(1.04);
}
@media(max-width:760px){
  #dynamicHeroMedia[data-section="inventario"] #dynamicHeroArt{object-position:center 38%;}
  #dynamicHeroMedia[data-section="datos"] #dynamicHeroArt{object-position:center 42%;}
  #dynamicHeroMedia[data-section="costos"] #dynamicHeroArt{object-position:center 40%;}
}


/* ===== P6.3.4 · Moldes visuales ===== */
.mold-visual-card{
  display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:18px;align-items:center;
  padding:16px;margin:10px 0 16px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(243,231,213,.55));
}
.mold-visual-card img{width:100%;max-height:180px;object-fit:contain;border-radius:18px;display:block}
.mold-visual-card h3{margin:0 0 5px;font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--cacao)}
.mold-visual-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45}
.mold-visual-chip{display:inline-flex;margin-top:8px;padding:5px 10px;border-radius:999px;background:var(--cream-2);font-size:.72rem;font-weight:700;color:var(--caramel)}
.shape-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shape-picker-grid .shape-picker-group{display:contents}
.shape-picker-grid .shape-picker-group-title{grid-column:1/-1;margin-top:8px}
.shape-picker-option.visual-shape{
  min-height:148px;padding:10px;border:1px solid var(--line);background:var(--cream);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;
}
.shape-picker-option.visual-shape img{width:100%;height:88px;object-fit:contain;border-radius:12px;pointer-events:none}
.shape-picker-option.visual-shape .shape-name{font-weight:700;line-height:1.15;pointer-events:none}
.shape-picker-option.visual-shape.active{background:rgba(55,167,167,.10);color:var(--cacao);border:2px solid var(--turquoise)}
.shape-picker-option.visual-shape.no-photo{min-height:54px;justify-content:center}
.mold-selected-preview{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:-2px 0 14px;border-radius:16px;background:var(--cream-2)}
.mold-selected-preview img{width:82px;height:64px;object-fit:contain;border-radius:12px}
.mold-selected-preview b{display:block;color:var(--cacao)}
.mold-selected-preview span{font-size:.78rem;color:var(--muted)}
html[data-theme="dark"] .mold-visual-card,
html[data-theme="dark"] .shape-picker-option.visual-shape{background:rgba(255,255,255,.045)}
html[data-theme="dark"] .mold-selected-preview{background:rgba(255,255,255,.055)}
@media(max-width:600px){
  .mold-visual-card{grid-template-columns:1fr;text-align:center;padding:14px}
  .mold-visual-card img{height:150px}
  .shape-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shape-picker-option.visual-shape{min-height:132px}
  .shape-picker-option.visual-shape img{height:76px}
}


/* ===== P6.3.4 · Refinamiento visual de Moldes sin fondo ===== */
.mold-visual-card img,
.mold-selected-preview img,
.shape-picker-option.visual-shape img,
.mold-material-option img{
  background:transparent !important;
  border-radius:0 !important;
  filter:drop-shadow(0 8px 8px rgba(59,35,20,.10));
}
.mold-visual-card{
  background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(243,231,213,.30));
}
.mold-material-gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:0 0 14px;
}
.mold-material-option{
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.52);
  padding:8px 7px;cursor:pointer;min-height:116px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:5px;font:inherit;color:var(--cacao);
}
.mold-material-option img{width:100%;height:72px;object-fit:contain;pointer-events:none}
.mold-material-option span{font-size:.72rem;font-weight:700;text-align:center;line-height:1.15;pointer-events:none}
.mold-material-option.active{
  border:2px solid var(--turquoise);background:rgba(55,167,167,.08);
  box-shadow:0 0 0 2px rgba(55,167,167,.08);
}
html[data-theme="dark"] .mold-material-option{background:rgba(255,255,255,.045)}
@media(max-width:600px){
  .mold-material-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .mold-material-option{min-height:102px;padding:6px 4px}
  .mold-material-option img{height:60px}
  .mold-material-option span{font-size:.66rem}
}


/* ===== P6.3.4.1 · Preview del molde al elegir material ===== */
.mold-material-live-preview{
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;
  margin:8px 0 18px;padding:16px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(243,231,213,.36));
}
.mold-material-live-preview img{
  width:150px;height:120px;object-fit:contain;background:transparent!important;
  filter:drop-shadow(0 10px 10px rgba(59,35,20,.14));
}
.mold-material-live-preview .eyebrow{
  display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(55,167,167,.12);
  color:var(--turquoise);font-size:.72rem;font-weight:800;margin-bottom:6px;
}
.mold-material-live-preview h4{
  margin:0 0 4px;font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--cacao)
}
.mold-material-live-preview p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.45}
.mold-material-option img,.shape-picker-option.visual-shape img,
.mold-selected-preview img,.mold-visual-card img{
  image-rendering:auto;
  backface-visibility:hidden;
}
@media(max-width:600px){
  .mold-material-live-preview{grid-template-columns:110px 1fr;padding:12px;gap:12px}
  .mold-material-live-preview img{width:110px;height:92px}
}


/* ===== P6.3.4.2 · Material sin imágenes; renders sólo para Forma ===== */
.mold-material-gallery,
.mold-material-live-preview,
.mold-visual-card{
  display:none !important;
}
#moldShapePreviewA,#moldShapePreviewB{
  margin-top:10px;
}
.shape-picker-option.visual-shape img,
.mold-selected-preview img{
  object-fit:contain;
  background:transparent !important;
  filter:drop-shadow(0 7px 7px rgba(59,35,20,.10));
}


/* ===== P6.3.4.3 · Renders limpios HD ===== */
.shape-picker-option.visual-shape img,
.mold-selected-preview img{
  image-rendering:auto !important;
  object-fit:contain !important;
  background:transparent !important;
  filter:drop-shadow(0 8px 10px rgba(59,35,20,.12));
  transform:translateZ(0);
}
.shape-picker-option.visual-shape img{
  height:104px !important;
}
.mold-selected-preview img{
  width:96px !important;
  height:78px !important;
}


/* ===== P6.3.4.4 · Corrección visual de renders en Moldes ===== */
.shape-picker-option.visual-shape{
  overflow:hidden;
}
.shape-picker-option.visual-shape img{
  width:100% !important;
  height:112px !important;
  object-fit:contain !important;
  background:transparent !important;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.16)) !important;
}
.mold-selected-preview img{
  width:110px !important;
  height:84px !important;
  object-fit:contain !important;
  background:transparent !important;
}
@media(max-width:600px){
  .shape-picker-option.visual-shape img{height:96px !important;}
}


/* ===== P6.3.4.5 · Selección clara + preview grande en Medidas ===== */
.shape-picker-option.visual-shape{
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.shape-picker-option.visual-shape.active{
  border:2px solid var(--turquoise) !important;
  background:rgba(55,167,167,.10) !important;
  box-shadow:0 0 0 3px rgba(55,167,167,.10) !important;
}
.shape-picker-option.visual-shape.active::after{
  content:"✓";
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--turquoise);
  color:white;
  font-weight:900;
  font-size:15px;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.shape-picker-option.visual-shape.active .shape-name{
  color:var(--turquoise);
}
.mold-measures-preview{
  display:grid;
  grid-template-columns:minmax(180px,260px) 1fr;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(243,231,213,.38));
}
.mold-measures-preview img{
  width:100%;
  height:210px;
  object-fit:contain;
  background:transparent !important;
  filter:drop-shadow(0 12px 12px rgba(59,35,20,.14));
}
.mold-measures-preview .mold-measures-label{
  display:inline-flex;
  padding:5px 10px;
  margin-bottom:7px;
  border-radius:999px;
  background:rgba(55,167,167,.12);
  color:var(--turquoise);
  font-size:.72rem;
  font-weight:800;
}
.mold-measures-preview h3{
  margin:0 0 6px;
  font-family:'Playfair Display',serif;
  color:var(--cacao);
  font-size:1.35rem;
}
.mold-measures-preview p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}
html[data-theme="dark"] .mold-measures-preview{
  background:rgba(255,255,255,.045);
}
@media(max-width:640px){
  .mold-measures-preview{
    grid-template-columns:1fr;
    text-align:center;
    padding:14px;
  }
  .mold-measures-preview img{
    height:180px;
  }
}


/* ===== P6.3.5 · ALÉRGENOS Y ETIQUETADO BÁSICO ===== */
.allergen-box{border:1px solid var(--line);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--cream) 70%,transparent);margin-top:10px}
.allergen-title{font-weight:800;color:var(--cacao);margin-bottom:8px}
.allergen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}
.allergen-check{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:.9rem;cursor:pointer}
.allergen-check input{width:18px;height:18px;margin:0;accent-color:var(--raspberry)}
.allergen-summary{font-size:.82rem;color:var(--cacao-soft);margin-top:4px;line-height:1.35}
.allergen-summary.has-allergen{color:#B42318;font-weight:800}
.allergen-alert{color:#B42318;font-weight:800;background:#FFF1F0;border:1px solid #FDA29B;border-radius:10px;padding:8px 10px;line-height:1.4}
.allergen-alert-inline{color:#B42318!important;font-weight:800!important}
.label-allergens.has-allergen{color:#B42318!important;font-weight:900!important}
@media print{
  .allergen-alert,.allergen-alert-inline,.label-allergens.has-allergen{
    color:#B42318!important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .allergen-alert{background:#FFF1F0!important;border-color:#FDA29B!important}
}
.inv-allergen-edit{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.inv-allergen-edit summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--raspberry-deep)}
.product-info-preview{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card);margin-top:12px}
.product-info-preview h3{margin:0 0 8px;font-size:1rem}
.product-info-preview p{margin:5px 0;font-size:.9rem;line-height:1.45}
.label-warning{font-size:.82rem;color:var(--cacao-soft);margin-top:8px}
#printAreaLabel{display:none}
@media print{
  #printAreaLabel.active-print, #printAreaLabel.active-print *{visibility:visible}
  #printAreaLabel.active-print{display:block!important;position:absolute;top:0;left:0;width:100%;padding:20px;background:#fff;color:#1a1a1a}
  #printAreaLabel .label-card{border:1.5px solid #222;border-radius:12px;padding:18px;max-width:700px;margin:0 auto;font-family:Arial,sans-serif;color:#111}
  #printAreaLabel h1{font-size:24px;margin:0 0 6px}
  #printAreaLabel h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 5px}
  #printAreaLabel p{font-size:13px;line-height:1.45;margin:4px 0}
  #printAreaLabel .label-allergens{font-weight:800;font-size:14px}
}

/* Etiqueta de despacho/entrega (nueva, no existía en el original) — mismo
   patrón que #printAreaLabel de arriba, con la regla visibility:visible
   incluida desde el día uno (la que faltaba y causaba que la etiqueta de
   producto no imprimiera nada). Bloque separado a propósito: no se toca ni
   una línea de la regla de #printAreaLabel de arriba. */
#printAreaDispatch{display:none}
@media print{
  #printAreaDispatch.active-print, #printAreaDispatch.active-print *{visibility:visible}
  #printAreaDispatch.active-print{display:block!important;position:absolute;top:0;left:0;width:100%;padding:20px;background:#fff;color:#1a1a1a}
  #printAreaDispatch .label-card{border:1.5px solid #222;border-radius:12px;padding:18px;max-width:700px;margin:0 auto;font-family:Arial,sans-serif;color:#111}
  #printAreaDispatch h1{font-size:24px;margin:0 0 6px}
  #printAreaDispatch h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 5px}
  #printAreaDispatch p{font-size:13px;line-height:1.45;margin:4px 0}
}

/* Etiquetas de producto repetidas (Entrega 2, Eventos/Mayorista/Combo — a
   pedido y confirmado por el usuario): un pedido tiene varios productos
   distintos, así que "etiqueta de producto" ahí genera UNA etiqueta POR
   CADA producto de la orden, en el mismo trabajo de impresión (como
   imprimir varias veces) — a diferencia de #printAreaLabel arriba, que es
   de un solo producto (el que está cargado en pantalla) y no cambia.
   Bloque aparte, mismo motivo que #printAreaDispatch: no toca ni una línea
   de las reglas de arriba. .label-card se repite tal cual (mismo aspecto
   visual que la etiqueta de un solo producto) — page-break-after separa
   cada etiqueta en su propia página al imprimir. */
#printAreaMultiLabel{display:none}
@media print{
  #printAreaMultiLabel.active-print, #printAreaMultiLabel.active-print *{visibility:visible}
  #printAreaMultiLabel.active-print{display:block!important;position:absolute;top:0;left:0;width:100%;padding:20px;background:#fff;color:#1a1a1a}
  #printAreaMultiLabel .label-card{border:1.5px solid #222;border-radius:12px;padding:18px;max-width:700px;margin:0 auto 20px;font-family:Arial,sans-serif;color:#111;page-break-after:always}
  #printAreaMultiLabel .label-card:last-child{page-break-after:auto}
  #printAreaMultiLabel h1{font-size:24px;margin:0 0 6px}
  #printAreaMultiLabel h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 5px}
  #printAreaMultiLabel p{font-size:13px;line-height:1.45;margin:4px 0}
  #printAreaMultiLabel .label-allergens{font-weight:800;font-size:14px}
}
@media(max-width:640px){.allergen-grid{grid-template-columns:1fr 1fr}.allergen-check{font-size:.82rem;padding:7px}}