/* app/musculos.css — namespaced con prefijo mm- para no chocar con styles.css */

.mm-root{
  --mm-green:#20FF78;
  --mm-bg:#1c1d1f;
  --mm-outline:#bdbdbd;
  --mm-region-fill:#d9d9d9;
  --mm-region-hover:#efefef;
  --mm-separator:#1c1d1f;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 10px;
  background:var(--mm-bg);
  border-radius:16px;
  color:#EFF3EC;
  font-family:"Barlow",system-ui,sans-serif;
}
.mm-modo-lectura{ padding:6px; border-radius:12px; }

.mm-stage{
  position:relative;
  width:100%;
  max-width:320px;
  aspect-ratio:1000/2000;
  perspective:1200px;
}

.mm-cara{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.4,.2,.2,1), opacity .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mm-svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.mm-base{
  fill:none;
  stroke:var(--mm-outline);
  stroke-width:2;
  stroke-linejoin:round;
  opacity:.9;
}

.mm-region{
  cursor:pointer;
}
.mm-region:focus{ outline:none; }
.mm-region:focus-visible .mm-shape{
  stroke:#EFF3EC;
  stroke-width:5;
}

.mm-shape{
  fill:var(--mm-region-fill);
  stroke:var(--mm-separator);
  stroke-width:4;
  stroke-linejoin:round;
  transition:fill .25s ease, filter .25s ease;
}

.mm-region:hover .mm-shape{
  fill:var(--mm-region-hover);
}

.mm-region.mm-activo .mm-shape{
  fill:var(--mm-green);
  filter:var(--mm-glow, none);
}
.mm-modo-lectura .mm-region:hover .mm-shape{ fill:var(--mm-region-fill); }

@keyframes mm-pulse{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}
.mm-region.mm-pulso .mm-shape{
  transform-box:fill-box;
  transform-origin:center;
  animation:mm-pulse .45s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .mm-region.mm-pulso .mm-shape{ animation:none; }
}

/* --- Rotación frontal/trasera --- */
.mm-stage[data-vista="frontal"] .mm-cara-frontal{ transform:rotateY(0deg); opacity:1; z-index:2; }
.mm-stage[data-vista="frontal"] .mm-cara-trasera{ transform:rotateY(180deg); opacity:0; z-index:1; pointer-events:none; }
.mm-stage[data-vista="trasera"] .mm-cara-trasera{ transform:rotateY(0deg); opacity:1; z-index:2; }
.mm-stage[data-vista="trasera"] .mm-cara-frontal{ transform:rotateY(-180deg); opacity:0; z-index:1; pointer-events:none; }

/* --- Modo "ambas" (pasado explícitamente por JS): lado a lado, sin animación 3D --- */
.mm-root.mm-ambas .mm-stage{ max-width:560px; }
.mm-stage[data-vista="ambas"]{ display:flex; gap:14px; }
.mm-stage[data-vista="ambas"] .mm-cara{
  position:static;
  width:50%;
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

@media (prefers-reduced-motion: reduce){
  .mm-cara{ transition:opacity .2s linear; }
}

/* --- Desktop: frontal y trasera lado a lado automáticamente (modo selección) ---
   En mobile (por debajo de 640px) se mantiene una sola vista con flip 3D + botón girar. */
@media (min-width:640px){
  .mm-modo-seleccion .mm-stage{
    max-width:560px;
    display:flex;
    gap:18px;
    perspective:none;
  }
  .mm-modo-seleccion .mm-cara{
    position:static;
    width:50%;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transition:none;
  }
  .mm-modo-seleccion .mm-girar{ display:none; }
}

.mm-girar{
  font-family:"Exo 2",sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#EFF3EC;
  background:#121815;
  border:1px solid #1f2924;
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.mm-girar:hover{ border-color:var(--mm-green); color:var(--mm-green); }
.mm-girar:focus-visible{ outline:2px solid var(--mm-green); outline-offset:2px; }

/* --- Modo lectura: componente pequeño, sin botón girar, sin cursor pointer --- */
.mm-modo-lectura .mm-region{ cursor:default; }
.mm-modo-lectura{ width:120px; }
.mm-modo-lectura .mm-stage{ width:120px; max-width:120px; }

/* --- Chips de zonas (usadas por la demo / onboarding) --- */
.mm-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:4px;
}
.mm-chip{
  font-family:"Barlow",sans-serif;
  font-size:13px;
  font-weight:600;
  color:#8a978f;
  background:#121815;
  border:1px solid #1f2924;
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  transition:all .2s ease;
}
.mm-chip[aria-pressed="true"]{
  color:#000;
  background:#20FF78;
  border-color:#20FF78;
}
.mm-chip:focus-visible{ outline:2px solid #20FF78; outline-offset:2px; }