/* Global styles for GWS Frontend */
html, body { height: 100%; }
#root { height: 100%; }
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden; /* Evita scroll horizontal, permite scroll vertical */
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Additional styles will be handled by Tailwind CSS */

/* Flip-card animation for Consumption Cards */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  /* Mantener relación 945x1418 pero un poco más pequeño */
  width: 700px;            /* ancho reducido */
  aspect-ratio: 945 / 1418;
  height: auto;            /* calculado por aspect-ratio */
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-face.back {
  transform: rotateY(180deg);
}

/* Responsivo: en pantallas pequeñas, ajustar manteniendo proporción 945x1418 */
@media (max-width: 1024px) {
  .flip-card {
    width: 100%;
    aspect-ratio: 945 / 1418;
    height: auto; /* se calcula por aspect-ratio */
  }
}