/* AnimeLab - CSS educativo */
/* Tip: abre este archivo para que los alumnos identifiquen variables, layout y media queries */

:root{
  --bg: #07111b;
  --card: #0c1424;
  --muted: #c9b27a;
  --accent: #FF6A00;
  --accent-2: #FFD700;
  --avatar-size: 140px;
  --glass: rgba(255,106,0,0.06);
  --radius: 12px;
  --max-width: 1000px;
  --gap: 1rem;
}

/* Light theme variables (cambiadas por JS) */
.light {
  --bg: #fff7ec;
  --card: #fffaf7;
  --muted: #6b5e3a;
  --accent: #FF6A00;
  --accent-2: #FFBF00;
  --glass: rgba(255,191,0,0.04);
}

* { box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(180deg,var(--bg), #071021 60%); color: #fff8e6; }

.container{ max-width:var(--max-width); margin:0 auto; padding:1rem; }

.site-header{ padding:0.6rem 0; background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); position:sticky; top:0; z-index:30; backdrop-filter: blur(6px); }
.site-header .container{ display:flex; align-items:center; gap:1rem; }
.logo{ margin:0; font-size:1.35rem; letter-spacing:1px; color:var(--accent-2); }

.main-nav{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.nav-toggle{ display:none; background:none; border:none; color:inherit; font-size:1.25rem; }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; }
.nav-link{ color:var(--muted); text-decoration:none; padding:0.4rem 0.6rem; border-radius:8px; }
.nav-link:hover{ color:var(--accent-2); background:var(--glass); }

/* Theme button */
.theme-btn{ margin-left:0.5rem; background:transparent; border:1px solid rgba(255,255,255,0.06); padding:0.4rem; border-radius:10px; cursor:pointer; }

/* Hero */
.hero{ padding:2rem 1rem; text-align:center; }
.hero h2{ margin:0 0 0.5rem 0; font-size:2rem; color:var(--accent-2); }
.quick-actions{ margin-top:1rem; display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }

/* Buttons */
.btn{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none; color:#fff; padding:0.6rem 0.9rem; border-radius:10px; cursor:pointer; }
.btn-outline{ background:transparent; border:1px solid rgba(255,255,255,0.08); color:var(--muted); padding:0.5rem 0.8rem; }
.btn:active{ transform:translateY(1px); }

/* Cards */
.cards h3{ color:var(--accent); }
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap); margin-top:1rem; }
.card{ background:linear-gradient(180deg,var(--card), rgba(0,0,0,0.1)); padding:1rem; border-radius:var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.35); text-align:center; }
.card{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.avatar{ height:90px; width:90px; margin:0 auto 0.6rem auto; border-radius:50%; box-shadow: inset 0 -8px 12px rgba(0,0,0,0.2); }
.character-img{ width:var(--avatar-size); height:var(--avatar-size); object-fit:cover; border-radius:8px; margin-bottom:0.6rem; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.avatar-1{ background: radial-gradient(circle at 30% 30%, #FFD700, #FF6A00); }
.avatar-2{ background: radial-gradient(circle at 20% 20%, #0B3D91, #062a5f); }
.avatar-3{ background: radial-gradient(circle at 30% 20%, #FF6A00, #CC3300); }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:0.8rem; margin-top:0.8rem; }
.thumb{ background:var(--card); padding:0.6rem; border-radius:10px; display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.thumb img{ max-width:100%; height:140px; object-fit:contain; border-radius:8px; }

/* Form */
.form{ display:grid; gap:0.6rem; max-width:520px; }
.form label{ display:block; color:var(--muted); font-size:0.95rem; }
.form input, .form textarea{ width:100%; padding:0.6rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit; }

/* Contador de palabras para textarea */
.word-counter{ font-size:0.85rem; color:var(--muted); margin-top:0.35rem; text-align:right; }
.word-counter.limit-reached{ color:#ffcccb; font-weight:600; }


/* Footer */
.site-footer{ padding:1rem 0; text-align:center; color:var(--muted); font-size:0.9rem; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.7); z-index:60; }
.lightbox img{ max-width:90%; max-height:80%; border-radius:12px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }

/* Perfil modal */
.profile-card{ background:linear-gradient(180deg,var(--card), rgba(0,0,0,0.08)); padding:1rem 1.2rem; border-radius:14px; width:min(720px,95%); max-height:85vh; overflow:auto; box-shadow:0 12px 36px rgba(0,0,0,0.6); position:relative; }
.profile-card h4{ margin-top:0; color:var(--accent-2); }
.profile-card .meta{ color:var(--muted); margin-bottom:0.6rem; }
.profile-card ul.curiosities{ margin:0.6rem 0 0 1rem; padding:0; }
.profile-card ul.curiosities li{ margin-bottom:0.45rem; line-height:1.35; }
.close-btn{ position:absolute; right:8px; top:8px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:inherit; padding:0.2rem 0.5rem; border-radius:8px; cursor:pointer; }

/* Estilos para modal 'Acerca de' (reusa profile-card) */
.about-card h4{ margin-top:0; }
.about-card h5{ margin-bottom:0.25rem; color:var(--accent); }
.about-card p{ color:var(--muted); line-height:1.45; }

/* Próximos Animes */
#proximos-animes h3{ color:var(--accent); margin-bottom:1rem; }
.anime-cards-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem; margin-top:1rem; }
.anime-card{ background:linear-gradient(180deg, var(--card), rgba(0,0,0,0.1)); border-radius:var(--radius); overflow:hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.anime-card:hover{ transform: translateY(-8px); box-shadow: 0 12px 28px rgba(255,106,0,0.3); }
.anime-poster{ width:100%; height:300px; object-fit:cover; display:block; }
.anime-details{ padding:1rem; }
.anime-details h4{ margin:0.5rem 0; color:var(--accent-2); font-size:1.1rem; }
.anime-details p{ margin:0.5rem 0 1rem 0; color:var(--muted); line-height:1.4; font-size:0.95rem; }
.btn-small{ padding:0.5rem 0.8rem; font-size:0.9rem; display:inline-block; }

/* Controles de música de fondo */
.music-controls{
  position:fixed;
  bottom:20px;
  right:20px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  padding:1rem;
  border-radius:12px;
  display:flex;
  gap:1rem;
  align-items:center;
  box-shadow: 0 8px 24px rgba(255,106,0,0.4);
  z-index:50;
}

.control-btn{
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:0.5rem 0.6rem;
  border-radius:8px;
  cursor:pointer;
  font-size:1.1rem;
  transition: all 0.3s ease;
}

.control-btn:hover{
  background:rgba(255,255,255,0.4);
  transform:scale(1.1);
}

.control-btn:active{
  transform:scale(0.95);
}

.volume-container{
  display:flex;
  gap:0.5rem;
  align-items:center;
}

.volume-slider{
  width:100px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.3);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}

.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.volume-slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  border:none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width:720px){
  .nav-list{ display:none; position:absolute; right:1rem; top:64px; background:var(--card); padding:0.6rem; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.35); flex-direction:column; }
  .nav-list.show{ display:flex; }
  .nav-toggle{ display:inline-block; }
  
  .music-controls{
    bottom:10px;
    right:10px;
    flex-direction:column;
    gap:0.6rem;
    padding:0.8rem;
  }
  
  .volume-container{
    flex-direction:column;
  }
  
  .volume-slider{
    width:80px;
  }
}