/* Estilos compartidos de etiquetas (index.html y propuestas.html).
   Colores por variables: --c1 fondo, --c2 patrón, --acc acento (nombre/grupo), --ink texto. */
:root{--c1:#e3212b;--c2:#1b1b1b;--acc:#e3212b;--ink:#1b1b1b;--ft:"Fredoka";--fn:"Baloo 2"}
.lbl-s,.lbl-b{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:var(--ft),"Fredoka",system-ui,sans-serif;color:var(--ink);background-color:var(--c1);position:relative;overflow:hidden}
.lbl-s::before,.lbl-b::before,.lbl-p::before{content:"";position:absolute;inset:0;background:var(--pat,none) 0 0/var(--pats,5mm) var(--pats,5mm);pointer-events:none;border-radius:inherit}
/* fondo con imagen de escena: sustituye al patrón y lleva un velo para que el texto se lea */
.hasimg{background-image:var(--bgimg);background-size:cover;background-position:center}
.hasimg::before{background:rgba(0,0,0,var(--veil,.25))}
/* .bleed en el contenedor: el dibujo puede sobresalir de la etiqueta */
.bleed .lbl-s,.bleed .lbl-b{overflow:visible}

/* patrones: los pinta labels.js en --pat ya con el color --c2 */
/* variantes suaves: patrón semitransparente */
.soft::before{opacity:.35}

/* ---------- geometría relativa: --sw/--sh y --bw/--bh son el tamaño; --u = 1mm a escala vertical, --v a escala horizontal ---------- */
.lbl-s{--u:calc(var(--sh,15mm)/15);--v:calc(var(--sw,50mm)/50);width:var(--sw,50mm);height:var(--sh,15mm);border-radius:calc(3.5*var(--u));border:calc(.35*var(--u)) solid #fff;outline:.15mm solid #ddd;font-size:calc(2.4*var(--u)*var(--ts,1))}
.lbl-s .char{position:absolute;left:calc(.8*var(--v));bottom:calc(.3*var(--u));height:calc(15.5*var(--u));max-width:calc(11.5*var(--v));object-fit:contain;object-position:bottom;filter:drop-shadow(0 .3mm .4mm rgba(0,0,0,.35));z-index:1;transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));transform-origin:bottom center}
.lbl-s .pill{position:absolute;left:calc(11.8*var(--v));top:calc(1.6*var(--u));width:calc(28*var(--v));height:calc(11.3*var(--u));background:#fff;border-radius:calc(2.6*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding-top:calc(.3*var(--u));z-index:1}
.lbl-s .pill .owner{font-size:calc(.68em*var(--fit,1));font-weight:500;color:#666;letter-spacing:.1pt}
.lbl-s .pill .name{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;color:var(--acc);font-size:calc(1em*var(--ns,1)*var(--fit,1));line-height:1.02;max-width:100%;overflow-wrap:anywhere;text-align:center;margin-top:calc(.6*var(--u));letter-spacing:-.15pt}
.lbl-s .grp{position:absolute;right:calc(1.4*var(--v));top:calc(3*var(--u));width:calc(8.3*var(--u));height:calc(8.3*var(--u));border-radius:50%;background:#fff;border:calc(.5*var(--u)) solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;font-size:1.03em;color:var(--acc);z-index:1}

.lbl-b{--u:calc(var(--bh,50mm)/50);--v:calc(var(--bw,90mm)/90);width:var(--bw,90mm);height:var(--bh,50mm);border-radius:calc(5*var(--u));border:calc(.4*var(--u)) solid #fff;outline:.15mm solid #ddd;font-size:calc(3.35*var(--u)*var(--ts,1))}
.lbl-b .char{position:absolute;left:calc(1.5*var(--v));bottom:0;height:calc(49*var(--u));max-width:calc(31*var(--v));object-fit:contain;object-position:bottom left;filter:drop-shadow(0 .4mm .6mm rgba(0,0,0,.35));z-index:1;transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));transform-origin:bottom left}
.lbl-b .card{position:absolute;left:calc(33*var(--v));top:calc(4*var(--u));right:calc(4*var(--v));bottom:calc(4*var(--u));background:#fff;border-radius:calc(4*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(2*var(--u)) calc(3*var(--v));line-height:1.05;z-index:1}
.lbl-b .subject{font-family:var(--ft),"Fredoka",sans-serif;font-weight:700;color:var(--acc);font-size:calc(1.8em*var(--fit,1));text-wrap:balance}
.lbl-b .subject.long{font-size:calc(1.48em*var(--fit,1))}
.lbl-b .name{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;color:var(--ink);font-size:calc(1em*var(--ns,1)*var(--fit,1));line-height:1.05;max-width:100%;overflow-wrap:anywhere;margin-top:calc(2.2*var(--u))}
.lbl-b .grp{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;color:var(--acc);font-size:calc(1.16em*var(--fit,1));margin-top:calc(.8*var(--u))}
.lbl-b.nameonly .name{font-size:calc(1.48em*var(--ns,1)*var(--fit,1));color:var(--acc);text-wrap:balance;margin-top:0}
.lbl-b.nameonly .grp{font-size:calc(1.48em*var(--fit,1));color:var(--ink);margin-top:calc(1.5*var(--u))}
.lbl-b .bug{position:absolute;right:calc(5*var(--v));bottom:calc(5.5*var(--u));width:calc(6*var(--u));height:calc(6*var(--u));z-index:2}

/* sin texto "pertenece a": nombre centrado y mayor */
.lbl-s .pill.noowner{padding-top:0}
.lbl-s .pill.noowner .name{margin-top:0;font-size:calc(1.18em*var(--ns,1)*var(--fit,1))}
.lbl-s.wide .pill.noowner .name{font-size:calc(.94em*var(--ns,1))}

/* imágenes anchas (dos personajes): más espacio al dibujo */
.lbl-s.wide .char{max-width:calc(19*var(--v));left:calc(.5*var(--v))}
.lbl-s.wide .pill{left:calc(19.5*var(--v));width:calc(20.5*var(--v))}
.lbl-s.wide .pill .name{font-size:calc(.82em*var(--ns,1))}
.lbl-b.wide .char{max-width:calc(46*var(--v));height:calc(47*var(--u))}
.lbl-b.wide .card{left:calc(47*var(--v))}
.lbl-b.wide .subject{font-size:1.48em}.lbl-b.wide .subject.long{font-size:1.27em}
.lbl-b.wide .name{font-size:calc(.9em*var(--ns,1))}.lbl-b.wide.nameonly .name{font-size:calc(1.27em*var(--ns,1))}

/* orden: delante de la tarjeta blanca o detrás */
.lbl-s .char.front,.lbl-b .char.front{z-index:2}
.lbl-s .char.back,.lbl-b .char.back{z-index:0}

/* ---------- plantilla póster: la escena ocupa toda la etiqueta ---------- */
.lbl-p{--u:calc(var(--bh,50mm)/50);--v:calc(var(--bw,90mm)/90);width:var(--bw,90mm);height:var(--bh,50mm);
  border-radius:calc(5*var(--u));border:calc(.4*var(--u)) solid #fff;outline:.15mm solid #ddd;
  position:relative;overflow:hidden;background-color:var(--c1);font-size:calc(3.35*var(--u)*var(--ts,1));
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.lbl-p .char{position:absolute;left:calc(1*var(--v));bottom:0;height:calc(50*var(--u));max-width:calc(34*var(--v));
  object-fit:contain;object-position:bottom left;z-index:1;filter:drop-shadow(0 .4mm 1mm rgba(0,0,0,.55));
  transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));transform-origin:bottom left}
.lbl-p .ptxt{position:absolute;right:calc(3*var(--v));top:50%;transform:translateY(-50%);z-index:2;
  width:calc(58*var(--v));display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1;
  padding:calc(2*var(--u)) calc(2*var(--v));border-radius:calc(4*var(--u));
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,0) 100%)}
.lbl-p .pname{font-family:var(--fn),"Baloo 2",cursive;font-weight:800;font-size:calc(2.1em*var(--ns,1)*var(--fit,1));color:#fff;
  text-wrap:balance;overflow-wrap:anywhere;
  -webkit-text-stroke:calc(.5*var(--u)) rgba(0,0,0,.55);paint-order:stroke fill;
  text-shadow:0 calc(.4*var(--u)) calc(.8*var(--u)) rgba(0,0,0,.6)}
.lbl-p .pgrp{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;font-size:calc(1.6em*var(--fit,1));color:#fff;
  margin-top:calc(1.4*var(--u));-webkit-text-stroke:calc(.45*var(--u)) rgba(0,0,0,.6);paint-order:stroke fill;
  text-shadow:0 calc(.3*var(--u)) calc(.6*var(--u)) rgba(0,0,0,.6)}
.lbl-p .psub{position:absolute;left:50%;top:calc(2.4*var(--u));transform:translateX(-50%);z-index:2;
  font-family:var(--ft),"Fredoka",sans-serif;font-weight:700;font-size:1.05em;color:#fff;letter-spacing:.4pt;
  background:rgba(0,0,0,.45);padding:calc(.7*var(--u)) calc(2.4*var(--v));border-radius:999px}
.lbl-p.wide .char{max-width:calc(48*var(--v))}
.lbl-p.wide .ptxt{width:calc(44*var(--v))}

/* logo de la serie en el póster (arriba a la izquierda) */
.lbl-p .plogo{position:absolute;left:calc(3*var(--v));top:calc(2.5*var(--u));z-index:3;max-width:calc(30*var(--v));max-height:calc(11*var(--u));object-fit:contain;
  filter:drop-shadow(0 0 calc(.6*var(--u)) rgba(0,0,0,.7))}
.lbl-p .plogo~.psub{left:auto;right:calc(3*var(--v));transform:none}
/* nombre con degradado de la paleta y contorno claro, como en las etiquetas comerciales */
.lbl-p .ptxt.grad .pname{color:transparent;-webkit-text-stroke:0;
  background:linear-gradient(95deg,var(--acc) 0%,var(--c1) 45%,var(--c2) 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 .35mm #fff) drop-shadow(0 0 .35mm #fff) drop-shadow(0 .5mm .7mm rgba(0,0,0,.75));text-shadow:none}

/* ---------- sticker redondo (--rd = diámetro) ---------- */
.lbl-r{--u:calc(var(--rd,40mm)/40);--v:var(--u);width:var(--rd,40mm);height:var(--rd,40mm);border-radius:50%;
  border:calc(.5*var(--u)) solid #fff;outline:.15mm solid #ddd;position:relative;overflow:hidden;background-color:var(--c1);
  font-size:calc(2.6*var(--u)*var(--ts,1));-webkit-print-color-adjust:exact;print-color-adjust:exact}
.lbl-r::before{border-radius:50%}
.lbl-r .char{position:absolute;left:50%;top:calc(2.5*var(--u));height:calc(27*var(--u));max-width:calc(30*var(--u));object-fit:contain;object-position:bottom center;
  z-index:1;filter:drop-shadow(0 .3mm .5mm rgba(0,0,0,.4));transform:translateX(-50%) translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));transform-origin:bottom center}
.lbl-r .rband{position:absolute;left:0;right:0;bottom:0;height:calc(13.5*var(--u));background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(1.5*var(--u)) calc(4*var(--u)) calc(.5*var(--u));line-height:1;text-align:center}
.lbl-r .rband .name{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;color:var(--acc);font-size:calc(1em*var(--ns,1)*var(--fit,1));max-width:100%;overflow-wrap:anywhere}
.lbl-r .rband .grp{font-family:var(--fn),"Baloo 2",sans-serif;font-weight:800;color:var(--ink);font-size:calc(.95em*var(--fit,1));margin-top:calc(.6*var(--u))}
.lbl-r .rlogo{position:absolute;left:50%;transform:translateX(-50%);top:calc(1.2*var(--u));z-index:3;max-width:calc(20*var(--u));max-height:calc(5*var(--u));object-fit:contain;filter:drop-shadow(0 0 .4mm rgba(0,0,0,.6))}
.lbl-r .char.front{z-index:3}.lbl-r .char.back{z-index:0}