/* small page-level reset and use the font as a fallback for non-Tailwind areas */
html,body, #app { height: 100%; }
body { font-family: 'Encode Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

svg{
    max-width: 100%;
    max-height: 100%;
}

.avatar-stage {
  position: relative;
  overflow: hidden;
}

.avatar-zoom {
  position: absolute;
  inset: 0;
  /* zoom global de la composicion (cabeza + jersey); el transform lo pone zoomStyle */
}

.avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: center top;
}

.avatar-shadow-circles {
  z-index: 0;
  overflow: visible;
}

.avatar-shadow-circle {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(14px);
  mix-blend-mode: multiply;
}

.avatar-shadow-head {
  left: 22%;
  top: 7%;
  width: 56%;
  height: 56%;
  opacity: 0.58;
}

.avatar-shadow-neck {
  left: 30%;
  top: 37%;
  width: 40%;
  height: 28%;
  opacity: 0.48;
}

.avatar-shadow-jersey {
  left: 18%;
  top: 50%;
  width: 64%;
  height: 37%;
  opacity: 0.42;
}

.avatar-arms {
  z-index: 1;
  transform: translateY(56%) scale(0.92);
}

.avatar-arms svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-jersey {
  z-index: 2;
  transform: translateY(56%) scale(0.92);
}

.avatar-jersey svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-head {
  z-index: 3;
  /* el transform (escala/posicion) lo aplica headLayerStyle en JS (HEAD_FIT) */
  object-position: center bottom;
  transform: var(--head-transform-base);
  will-change: transform;
}

.avatar-head.is-tilting {
  animation: headTilt 900ms cubic-bezier(.34, .02, .2, 1) both;
}

.avatar-thumb {
  display: block;
  object-position: center bottom;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.75), rgba(255,255,255,0.18) 45%, rgba(0,0,0,0.08));
}

@keyframes headTilt {
  0% {
    transform: var(--head-transform-base) rotate(0deg);
  }
  28% {
    transform: var(--head-transform-base) rotate(-3.2deg);
  }
  62% {
    transform: var(--head-transform-base) rotate(2.8deg);
  }
  100% {
    transform: var(--head-transform-base) rotate(0deg);
  }
}

.avatar-bg-thumb {
  display: block;
  border-radius: 0.55rem;
}

.avatar-bg-image-thumb {
  display: block;
  border-radius: 0.55rem;
}

.jersey-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.75), rgba(255,255,255,0.18) 45%, rgba(0,0,0,0.08));
  border-radius: 0.55rem;
}

.jersey-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jersey-body-row {
  scrollbar-width: thin;
  padding: 0.25rem 0 0.5rem;
}

.jersey-body-row .btnPart {
  flex: 0 0 5rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.jersey-pattern-dot {
  display: block;
  border: 3px solid rgba(17,24,39,0.22);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.88);
}

.btnPart:has(.jersey-pattern-dot) {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 999px !important;
}

.partsContainer {
  scrollbar-width: thin;
}



svg [class^="color-"] {
  transition: fill 0.3s;
}

/* Default values (can be changed later in JS or Vue) */
:root {
  --color-skin: #FFD1A0;
  --color-eyes: #9D4B0E;
  --color-nose: #FF8000;
  --color-hair: #4D4946;
  --color-frame: #BB00FF;
  --color-glass: #95FF00;
  --color-clothes: #00A1FF;
  --color-clothes2: #7FD0FF;
  --color-bg1: #D000FF;
  --color-bg2: #00FFDD;
  --color-chs1: #FF6B35;
  --color-chs2: #004E89;
}

/* Use CSS variables inside the SVG */
.color-skin     { fill: var(--color-skin); }
.color-eyes     { fill: var(--color-eyes); }
.color-nose     { fill: var(--color-nose); }
.color-hair     { fill: var(--color-hair); }
.color-frame    { fill: var(--color-frame); }
.color-glass    { fill: var(--color-glass); fill-opacity: 1 !important; }
.color-clothes  { fill: var(--color-clothes); }
.color-clothes2 { fill: var(--color-clothes2); }
.color-bg1 { stop-color: var(--color-bg1); }
.color-bg2 { stop-color: var(--color-bg2); }
.color-chs1 { stop-color: var(--color-chs1); }
.color-chs2 { stop-color: var(--color-chs2); }


button .w-16 svg { width: 64px; height: 64px; display:block; }

#navigation {
  justify-content: center;
  scrollbar-width: thin;
}


.colorPartBox{
    display: flex;
    border-radius: 2rem;
    padding-left: 6px;
    background: white;
    border: 2px solid #000;
}

input[type='color'] {
  padding: 0;
  width: 150%;
  height: 150%;
  margin: -25%;
}

.pcr-app { z-index: 9999 !important; }
.pickr .pcr-button{ 
    width:2.8rem !important;
    height:2.8rem !important;
    overflow: hidden;
    border:2px solid #000;
    border-radius:3rem !important;

}



@media(max-height: 680px) {
    .avatarpreview{
        max-width: 260px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .partsContainer{
        max-height: 180px !important;
    }
    .btnCategory{
        max-width: 40px !important;
        max-height: 40px !important;
    }
}



@media(max-height: 480px) {
    .avatarpreview{
        max-width: 200px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .partsContainer{
        max-height: 140px !important;
    }
    .btnCategory{
        max-width: 40px !important;
        max-height: 40px !important;
    }
}



@keyframes btnAppear {
    0%{transform:scale(0.5); opacity:0;}
    100%{transform:scale(1); opacity:1;}
}




.btnCategory {
  --i: 0; /* default index */
  flex: 0 0 4rem;
  width: 4rem !important;
  height: 4rem !important;
  min-height: 4rem !important;
  border-radius: 30% !important;
  border-width: 3px !important;
  overflow: hidden;
  transform:scale(0.5);
  opacity: 0;
  animation: btnAppear 0.5s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
}

.btnCategory img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.btnPart {
  --i: 0; /* default index */
  transform:scale(0.5);
  opacity: 0;
  animation: btnAppear 0.5s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.01s);
}

.large-items-grid .btnPart {
  animation: none;
  transform: scale(1);
  opacity: 1;
}