@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
  --primary: #057721; /* Verde FEMPAL */
  --secondary: #198754; /* Verde */
  --tercer: #161616;
  --cuarto: #ffffff;
  --bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --card-shadow: 0 10px 30px rgba(0,0,0,0.1);
  --hover-scale: 1.05;
}

[data-theme="dark"] {
  --bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --card-bg: #495057;
  color: #fff;
}

body { background: var(--bg); font-family: 'Segoe UI', Tahoma, sans-serif; padding: 20px; }
.encabezado { max-width: 1200px; text-align: center; color: var(--tercer); font-weight: 500;}
.encabezado img h2 { max-width: 1200px; display: block; margin: auto; }
.contenedor { max-width: 1200px; display: block; margin: auto; text-align: center; }
h1, h2 { color: var(--primary); font-weight: 700; }
table, .tabla { margin: auto; width: 100%; max-width: 800px; }
.card-voto { transition: transform 0.3s, box-shadow 0.3s; margin: 15px 0; cursor: pointer; border: none; }
.card-voto:hover { transform: scale(var(--hover-scale)); box-shadow: var(--card-shadow); }
.card-voto input:checked + .card-img { border: 4px solid var(--secondary); border-radius: 10px; }
.card-img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; }
.progress { height: 8px; margin: 20px 0; }
.btn-votar { background: var(--primary); color: var(--cuarto); border: none; padding: 15px 50px; font-size: 1.2em; border-radius: 50px; }
#theme-toggle { position: fixed; top: 20px; right: 20px; background: var(--primary); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; }

@media (max-width: 768px) { body { padding: 10px; } .card-img { height: 150px; } }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.card-voto { animation: fadeIn 0.6s ease-out; }