/* Variables globales (colores iniciales) */
:root {
  --color-title: #FF4C61;
  --color-important: #E69E4E;
  --color-text-button: #8C5A32;
  --color-links: #9BA30F;
  --color-bg: #D0D0D0;
  --color-button-text: #FFFFFF;
  --color-footer: #724A1F;

  /* Colores por matiz */
  --c-felicidad:     #FF4C61;
  --c-calma:         #4C6EFF;
  --c-motivacion:    #FFD24C;
  --c-estres:        #E64C4C;
  --c-ansiedad:      #D94F70;
  --c-energia:       #9BA30F;
  --c-concentracion: #5A9A8C;
  --c-creatividad:   #8C5A32;
}

/* Reset y tipografía */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  min-height: 100vh;
  font-family: 'IM Fell English', serif;
  background-color: var(--color-bg);
  color: var(--color-text-button);
}

.contenido-central {
  grid-column: 2;  /* Columna del centro */
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  z-index: 1;
  position: relative;
}

/* Header */
header {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin-bottom: 2rem;
}
header h1 {
  color: var(--color-title);
  font-size: 2.5rem;
  animation: palpitar 2s infinite ease-in-out;
}

.header__nav {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.nav__list {
  list-style-type: disc;              
  list-style-position: inside;
  display: flex;                     
  gap: 2rem;                          
  justify-content: center;           
  align-items: center;               
  padding: 0;
  margin: 0;
}


.nav__item {
  font-family: 'IM Fell English', serif;
}

.nav__link {
  color: var(--c-energia);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.nav__link:hover {
  color: var(--color-title);
}

main {
  flex-grow: 1;
}

main, header {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Selector y traductor */
.selector select {
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  border: none;
  border-radius: 1rem;
  background-color: var(--color-text-button);
  color: var(--color-button-text);
  font-size: 1rem;
  cursor: pointer;
}
#google_translate_element {
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.06);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  margin-bottom: 1rem;
  display: inline-flex;
}

/* Grid para etiquetas y barras */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.75rem;
  width: 100%;
  max-width: 800px;
  justify-items: center;
  margin-bottom: 2rem;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Ocultar radios */
input[type="radio"] {
  display: none;
}

/* Estilos de las etiquetas */
label {
  font-weight: bold;
  color: var(--color-important);
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--color-important);
  border-radius: 1.5rem;
  font-size: 0.95rem;
  transition: background 0.3s;
  animation: palpitarBoton 4s infinite ease-in-out;
}
input[type="radio"]:checked + label {
  background-color: var(--color-important);
  color: var(--color-button-text);
}

.bar {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  width: 80%;
  height: 0%;
  transition: height 1s ease-in-out;
  border-radius: 0.5rem 0.5rem 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  color: white;
  opacity: 0;
  min-height: 14px;
  padding-top: 2px;
  box-sizing: border-box;
}

/* Colores */
.bar.felicidad .bar-fill    { background-color: var(--c-felicidad); }
.bar.calma .bar-fill        { background-color: var(--c-calma); }
.bar.motivacion .bar-fill   { background-color: var(--c-motivacion); }
.bar.estres .bar-fill       { background-color: var(--c-estres); }
.bar.ansiedad .bar-fill     { background-color: var(--c-ansiedad); }
.bar.energia .bar-fill      { background-color: var(--c-energia); }

.bar.concentracion .bar-fill { background-color: var(--c-concentracion); }
.bar.creatividad .bar-fill  { background-color: var(--c-creatividad); }

/* Botón compartir */
.share-btn {
  margin: 2rem 0 1rem;
  padding: 0.75rem 2rem;
  background-color: var(--color-text-button);
  color: var(--color-button-text);
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  font-family: inherit;
}

/* Footer */
footer {
  text-align: center;
  color: var(--color-footer);
  font-size: 0.9rem;
  line-height: 1.4;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto 0; 
}

footer a {
  color: var(--color-footer);
  text-decoration: underline;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 1rem;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: var(--color-bg);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  font-family: inherit;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  border: 2px solid var(--color-important);
}
.modal-content h2 {
  margin-bottom: 1rem;
  color: var(--color-footer);
}
.share-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.share-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--color-text-button);
}
.share-bar-fill {
  height: 1rem;
  border-radius: 0.5rem;
  flex-grow: 1;
  margin-left: 0.5rem;
}

 /* evita scroll cuando el modal está abierto */
.no-scroll { overflow: hidden; }

/* Visually-hidden helper si quieres un label accesible sin mostrarlo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Animaciones */
@keyframes palpitar {
  0%,100% { transform: scale(1) }
  50%     { transform: scale(1.03) }
}
@keyframes palpitarBoton {
  0%,100% { transform: scale(1) }
  50%     { transform: scale(1.03) }
}

/* Responsive */
@media (max-width: 768px) {
  .chart-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 480px) {
  .chart-grid { grid-template-columns: repeat(2,1fr); }
}

/* Paneles laterales decorativos */
.panel-lateral {
  background-size: contain;
  background-position: center;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  height: 100%;
  min-height: 100vh;
}

.panel-izquierda {
  grid-column: 1;
  background-image: url("multiverso-curioso.jpg");
}

.panel-derecha {
  grid-column: 3;
  background-image: url("espectro-emocional.jpg");
}

.modal {
  z-index: 1000; 
}
main, header {
  width: 100%;
  z-index: 1;
  position: relative;
}


@media screen and (max-width: 850px) {
  .panel-lateral {
    display: none;
  }
}