/* Generado por web/generar_montador.py desde configurador/avatar.html.
   NO editar a mano: se regenera. */
.pk-montador{background:var(--ground); color:var(--texto); font-family:var(--pk-texto); font-size:16px; line-height:1.55}
.pk-montador{
  --tinta:#185A76; --tinta-2:#0F3E52; --fucsia:#EE5C86; --fucsia-fuerte:#D6336C; --mostaza:#E5A83C;
  --turquesa:#3FA9A0; --turquesa-texto:#2A7C74;
  --ground:#F1F6F6; --panel:#FFFFFF; --stage:#FCF7EC;
  --linea:#D3E0E2; --texto:#12313D; --suave:#4E6B75; --tenue:#5C7A84;
  --sombra:0 1px 2px rgba(18,49,61,.05), 0 8px 24px -12px rgba(18,49,61,.18);
  --r:14px; --h-barra:150px;
}
.pk-montador *{box-sizing:border-box}
.pk-montador, .pk-montador{margin:0}
.pk-montador{
  background:var(--ground); color:var(--texto);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.pk-montador h1, .pk-montador h2, .pk-montador h3{font-family:"Trebuchet MS","Avenir Next","Segoe UI",system-ui,sans-serif}
.pk-montador :where(button, .pk-montador input, .pk-montador summary, .pk-montador a):focus-visible{outline:3px solid var(--fucsia); outline-offset:2px}
.pk-montador .wrap{max-width:1180px; margin:0 auto; padding:24px 18px calc(var(--h-barra) + 24px)}
.pk-montador .top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px}
.pk-montador .marca{font-family:"Trebuchet MS",system-ui,sans-serif; font-size:1.45rem; font-weight:700; letter-spacing:-.02em; color:var(--tinta)}
.pk-montador .marca span{color:var(--fucsia)}
.pk-montador .claim{color:var(--suave); font-size:.95rem; flex:1 1 260px; min-width:200px}
.pk-montador .tema{
  font:inherit; font-size:.82rem; cursor:pointer; color:var(--suave); background:var(--panel);
  border:1px solid var(--linea); border-radius:999px; padding:8px 14px; min-height:40px;
}
.pk-montador .tema:hover{border-color:var(--tenue); color:var(--texto)}
.pk-montador .hr{height:1px; background:var(--linea); margin:18px 0 20px; border:0}
.pk-montador .tabs{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap}
.pk-montador .tab{
  flex:1 1 200px; text-align:left; font:inherit; color:inherit; min-height:44px;
  background:var(--panel); border:2px solid var(--fucsia); border-radius:12px; padding:10px 14px;
  box-shadow:var(--sombra);
}
.pk-montador .tab b{display:block; font-family:"Trebuchet MS",system-ui,sans-serif; font-size:1rem}
.pk-montador .tab small{display:block; color:var(--suave); font-size:.78rem}
.pk-montador .tab .tic{color:var(--turquesa); font-weight:700}
.pk-montador .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:24px; align-items:start}
.pk-montador .panel{background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:20px; box-shadow:var(--sombra)}
.pk-montador .grupo{margin-bottom:24px}
.pk-montador .grupo:last-child{margin-bottom:0}
.pk-montador .grupo > h2, .pk-montador .campo > label{
  margin:0 0 9px; font-size:.78rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--suave); display:block;
}
.pk-montador .grupo > h2 em{
  font-style:normal; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--suave); font-size:.9em; margin-left:8px;
}
.pk-montador .nota{color:var(--suave); font-size:.83rem; margin:8px 0 0}
.pk-montador .nota b{color:var(--texto)}
.pk-montador .campo{margin-bottom:24px}
.pk-montador input[type=text], .pk-montador input[type=number]{
  font:inherit; color:inherit; background:var(--ground); border:1px solid var(--linea);
  border-radius:10px; padding:11px 12px; width:100%; max-width:340px; min-height:44px;
}
.pk-montador input[type=number]{max-width:120px; font-variant-numeric:tabular-nums}
.pk-montador input[type=text]:focus, .pk-montador input[type=number]:focus{outline:2px solid var(--tinta); outline-offset:1px}
.pk-montador .chips{display:flex; flex-wrap:wrap; gap:8px}
.pk-montador .chip{
  cursor:pointer; font:inherit; font-size:.88rem; color:inherit; background:var(--ground);
  border:2px solid var(--linea); border-radius:999px; padding:8px 15px; min-height:40px;
  display:inline-flex; align-items:center; gap:9px;
  transition:border-color .12s, background .12s;
}
.pk-montador .chip:hover{border-color:var(--tenue)}
.pk-montador .chip[aria-checked="true"]{border-color:var(--fucsia-fuerte); border-width:3px; background:color-mix(in srgb, var(--fucsia-fuerte) 14%, transparent); font-weight:700}
.pk-montador .nota-uniforme{
  display:flex; gap:11px; align-items:flex-start; margin:26px 0 0;
  padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--ground);
}
.pk-montador .nota-uniforme i{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; margin-top:2px;
  background:repeating-linear-gradient(45deg,#F0C33C 0 5px,#FFFFFF 5px 10px);
  box-shadow:0 0 0 1px var(--linea);
}
.pk-montador .colores{display:flex; flex-wrap:wrap; gap:10px}
.pk-montador .color{
  cursor:pointer; padding:4px; background:none; border:0; display:grid; gap:6px; justify-items:center;
  width:84px; color:var(--suave); font:inherit;
}
.pk-montador .color i{
  display:block; width:54px; height:54px; border-radius:50%;
  border:3px solid transparent; box-shadow:0 0 0 1px var(--linea);
  transition:transform .12s;
}
.pk-montador .color:hover i{transform:scale(1.06)}
.pk-montador .color[aria-checked="true"] i{border-color:var(--fucsia-fuerte); transform:scale(1.06)}
.pk-montador .color[aria-checked="true"]{color:var(--texto); font-weight:700}
.pk-montador .color span{font-size:.73rem; line-height:1.2; text-align:center}
.pk-montador .color-txt{display:flex; flex-direction:column; align-items:center; gap:1px}
.pk-montador .aviso-chip{font-weight:400; color:var(--suave); font-size:.68rem; line-height:1.2}
.pk-montador .color[aria-checked="true"] .aviso-chip{color:inherit}
.pk-montador .minis{display:flex; flex-wrap:wrap; gap:10px}
.pk-montador .mini{
  cursor:pointer; padding:4px; background:none; border:0; display:grid; gap:6px; justify-items:center;
  width:84px; color:var(--suave); font:inherit;
}
.pk-montador .mini i{
  display:block; width:54px; height:54px; border-radius:50%; background-color:var(--stage);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:3px solid transparent; box-shadow:0 0 0 1px var(--linea);
  transition:transform .12s;
}
.pk-montador .mini:hover i{transform:scale(1.05)}
.pk-montador .mini[aria-checked="true"] i, .pk-montador .mini[aria-pressed="true"] i{border-color:var(--fucsia-fuerte); transform:scale(1.05)}
.pk-montador .mini[aria-checked="true"], .pk-montador .mini[aria-pressed="true"]{color:var(--texto); font-weight:700}
.pk-montador .mini span{font-size:.73rem; line-height:1.2; text-align:center}
.pk-montador .previa{position:sticky; top:14px}
.pk-montador .escena{
  background:var(--stage); border:1px solid var(--linea); border-radius:var(--r);
  padding:14px; box-shadow:var(--sombra);
}
.pk-montador .marco{position:relative; border-radius:10px; overflow:hidden; background:var(--stage)}
.pk-montador .marco img{display:block; width:100%; height:auto}
.pk-montador .badge{
  position:absolute; left:8px; top:8px; right:8px; font-size:.76rem; font-weight:700;
  line-height:1.3; padding:7px 11px; border-radius:999px; text-align:center;
  background:rgba(255,255,255,.92); color:#12313D; box-shadow:0 2px 10px -4px rgba(0,0,0,.5);
}
.pk-montador .badge.exacta{background:color-mix(in srgb, var(--turquesa) 88%, #fff); color:#06282a}
.pk-montador [hidden]{display:none!important}
.pk-montador .nombre-avatar{
  text-align:center; font-family:"Trebuchet MS",system-ui,sans-serif; font-weight:700;
  font-size:1.5rem; color:var(--tinta); margin:12px 0 2px; min-height:1.3em; word-break:break-word;
}
.pk-montador .sub-previa{text-align:center; color:var(--suave); font-size:.83rem}
.pk-montador .combos{text-align:left; color:var(--suave); font-size:.78rem; font-variant-numeric:tabular-nums; margin:14px 0 0}
.pk-montador .prod{margin-top:20px}
.pk-montador .prod summary{
  cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--suave); padding:6px 0;
}
.pk-montador .prod h4{margin:14px 0 6px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); font-weight:700}
.pk-montador pre{
  margin:0; background:var(--ground); border:1px solid var(--linea); border-radius:10px;
  padding:12px; font-size:.8rem; line-height:1.5; overflow-x:auto; white-space:pre; color:var(--texto);
  font-family:ui-monospace,"Cascadia Mono","Consolas",monospace;
}
.pk-montador .copiar{
  margin-top:10px; font:inherit; font-size:.85rem; cursor:pointer; min-height:40px;
  border:1px solid var(--turquesa-texto); color:var(--turquesa-texto); background:transparent;
  border-radius:999px; padding:8px 16px;
}
.pk-montador .copiar:hover{background:color-mix(in srgb, var(--turquesa) 12%, transparent)}
.pk-montador .barra{position:fixed; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--linea); box-shadow:0 -6px 24px -14px rgba(0,0,0,.5); z-index:8}
.pk-montador .barra-in{max-width:1180px; margin:0 auto; padding:11px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pk-montador .precio{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.pk-montador .precio .desc{flex-basis:100%; color:var(--suave); font-size:.75rem; line-height:1.3}
.pk-montador .precio .n{font-family:"Trebuchet MS",system-ui,sans-serif; font-weight:700; font-size:1.6rem; font-variant-numeric:tabular-nums; color:var(--tinta)}
.pk-montador .precio .u{color:var(--suave); font-size:.8rem}
.pk-montador .candado{color:var(--suave); font-size:.84rem; flex:1 1 220px; min-width:180px}
.pk-montador .candado.aviso{color:var(--texto)}
.pk-montador .btn2{
  font:inherit; font-weight:700; cursor:pointer; min-height:44px;
  border:2px solid var(--tinta); color:var(--tinta); background:transparent;
  border-radius:999px; padding:10px 20px;
}
.pk-montador .btn2:hover:not(:disabled){background:color-mix(in srgb, var(--tinta) 10%, transparent)}
.pk-montador .btn2:disabled{opacity:.45; cursor:not-allowed}
.pk-montador .btn-guardar-panel{display:block; margin:18px 0 0}
.pk-montador .cta{
  font:inherit; font-weight:700; cursor:pointer; border:0; border-radius:999px; min-height:44px;
  padding:12px 24px; background:var(--fucsia-fuerte); color:#fff; font-size:1rem; transition:filter .15s;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pk-montador .cta:hover:not(:disabled){filter:brightness(1.07)}
.pk-montador .cta:disabled{background:var(--linea); color:var(--tenue); cursor:not-allowed}
.pk-montador .cta:focus-visible{outline:3px solid var(--tinta)}
.pk-montador .aviso-ia{margin:10px 2px 0; color:var(--suave); font-size:.78rem; text-align:center; line-height:1.35}
@media (max-width:900px){
.pk-montador .grid{grid-template-columns:1fr}
.pk-montador .previa{order:-1; position:static}
.pk-montador .escena{border-radius:0 0 var(--r) var(--r); padding:10px}
.pk-montador .marco img{max-height:38vh; width:auto; max-width:100%; height:auto; margin:0 auto}
.pk-montador .marco{display:grid; place-items:center}
.pk-montador .nombre-avatar{font-size:1.25rem; margin:8px 0 0}
.pk-montador .precio .desc{display:none}
.pk-montador .cta{width:100%}
.pk-montador .barra-in{position:relative}
.pk-montador .candado{
    order:-1; flex:1 1 100%; position:absolute; left:0; right:0; bottom:100%;
    background:var(--panel); border-top:1px solid var(--linea);
    padding:7px 14px; margin:0; text-align:center; font-size:.8rem;
  }
}
@media (prefers-reduced-motion:reduce){
.pk-montador *{transition:none!important}}

/* ---- colores de marca ProtaKids (mandan sobre la paleta del configurador) ---- */
.pk-montador{
  --tinta:var(--pk-tinta); --tinta-2:var(--pk-tinta-2);
  --fucsia:var(--pk-coral-cta); --fucsia-fuerte:var(--pk-coral-sombra);
  --mostaza:var(--pk-dorado); --turquesa:var(--pk-cielo); --turquesa-texto:var(--pk-tinta-2);
  --ground:transparent; --panel:#fff; --stage:#fff;
  --linea:var(--pk-crema-2); --texto:var(--pk-tinta);
  --suave:var(--pk-tinta-2); --tenue:#7d9aa0;
  --r:var(--pk-r-tarjeta); --sombra:var(--pk-sombra-suave);
}
.pk-montador h1,.pk-montador h2,.pk-montador h3{font-family:var(--pk-display)}
.pk-montador .badge:empty{display:none}
.pk-montador .wrap{max-width:var(--pk-ancho); padding-left:22px; padding-right:22px}
.pk-montador .cta:not(:disabled){background:var(--pk-coral-cta); color:var(--pk-crema)}
.pk-montador .cta{font-family:var(--pk-display); box-shadow:0 5px 0 var(--pk-coral-sombra)}
.pk-montador .cta:active{transform:translateY(3px); box-shadow:0 2px 0 var(--pk-coral-sombra)}

@media (max-width:900px){ .pk-montador{--h-barra:190px} }