@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.page { display: none; opacity: 0; transition: opacity 250ms ease; }
.page.visible { display: block; animation: fadeIn 250ms ease forwards; opacity:1; }
.menu-btn { color: white; padding: 8px 12px; font-weight:600; transition: all 200ms ease; }
.menu-btn:hover { text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.card { background: white; }
.card-muslo { font-size:22px; opacity:0.4; transform-origin:center center; transition: transform 120ms ease, opacity 120ms ease; cursor:pointer; }
.card-muslo.active { opacity:1; transform: scale(1.45); }
.rating-label { font-weight:600; margin-top:6px; margin-bottom:6px; color:#065f46; }
body { background-color: white; }
body.dark { background-color: #0b1220; color: #e6eef8; }
body.dark .card { background-color: #0f1724; }
body.dark .text-green-700 { color: #86efac !important; }
.dark .bg-white { background-color: #0f1724 !important; }
.modal-open { overflow: hidden; }

/* Responsive utilities */
@media (max-width: 640px) {
  body { font-size: 14px; }
  .menu-btn { padding: 6px 8px; font-weight: 500; }
  .card { border-radius: 8px; }
}

@media (max-width: 480px) {
  .menu-btn { padding: 4px 6px; font-weight: 500; font-size: 0.85rem; }
  body { font-size: 13px; }
}

/* Hero shared background and overlay to make header+nav appear as one */
.hero { position: relative; }
.hero::before {

	border-color: transparent;
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	/*background: rgba(0,0,0,0.28);*/
	pointer-events: none;
	z-index: 0;
}
.hero header, .hero nav { position: relative; z-index: 1; }

/* Make nav visually join header when sticky: subtle translucent background + blur */
.hero nav.sticky {
	background: transparent;
	/*background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));*/
	/*backdrop-filter: blur(6px);*/
}

/* Small tweak for user-actions spacing so header and nav sit flush */
#user-actions { margin-top: 0; }

/* Drumstick rating (muslos) */
.drum { display: inline-block; margin-right: 3px; font-size: 1rem; line-height: 1; }
.drum.empty { opacity: 0.25; }
.drum.full { opacity: 1; }

.rating-text { font-size: 0.95rem; color: #065f46; margin-left: 6px; font-weight: 600; }

/* Detail image fade-in */
#detailImage { opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 320ms ease; }
#detailImage.loaded { opacity: 1; transform: translateY(0); }

/* Slightly larger drumsticks on detail view */
.page .drum { font-size: 1.25rem; margin-right: 4px; }

/* Styles for muslo image fallback and sizing */
.card-muslo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* reserve fixed width so scaled icon doesn't overlap adjacent icons */
	width: 44px;
	flex: 0 0 44px;
	margin-right: 10px;
	margin-top: 10px;
	box-sizing: content-box;
}
.card-muslo .muslo-img, .muslo-img-inline {
	width: 18px; height: 18px; display: block; opacity: 0.45; transition: transform 120ms ease, opacity 120ms ease;
}
.card-muslo.active { z-index: 0.3; }
.card-muslo.active .muslo-img, .card-muslo.active .muslo-img-inline { opacity: 1; transform: scale(1.45); }
.card-muslo:hover .muslo-img { transform: scale(1.25); }

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
  main {
    padding: 1rem;
  }
  
  section {
    margin-bottom: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

@media (max-width: 480px) {
  main {
    padding: 0.75rem;
  }
  
  .relative {
    overflow: hidden;
  }
  
  button {
    min-height: 44px; /* Touch target size recommendation */
  }
  
  input[type="file"] {
    padding: 0.5rem;
  }
}
/* Estilos para botones de calificación con muslodos */
.rating-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  opacity: 0.5;
  transition: all 200ms ease;
}

.rating-button:hover {
  opacity: 0.8;
  transform: scale(1.15);
}

.rating-button.active-rating {
  opacity: 1;
}

.rating-button img {
  width: 30px;
  height: 30px;
  display: block;
}

@media (max-width: 640px) {
  .rating-button img {
    width: 26px;
    height: 26px;
  }
}