/* --- Paleta Sugerida (Basada en la imagen) --- */
/* Fondo: Degradado de morado oscuro a púrpura (similar a #2a0a38 a #4e1a6d) */
/* Título Principal: Naranja/Dorado (#FFD700 a #FFA500) */
/* Botones/Acentos: Degradado de rosa a púrpura (#e91e63 a #8a2be2) */
/* Texto General: Blanco (#FFFFFF) o Blanco grisáceo (#E0E0E0) */
/* Cards de Glassmorphism: Fondo oscuro semi-transparente, borde sutil */

/* --- Estilos Globales --- */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    /* Fondo degradado */
    background: linear-gradient(135deg, #2a0a38 0%, #4e1a6d 100%); /* Degradado morado/púrpura oscuro */
    color: #E0E0E0; /* Texto claro */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa toda la altura de la vista */
}

.container {
    max-width: 900px; /* Ancho un poco mayor para el diseño de 2 columnas */
    width: 90%;
    margin: 0 auto;
    background-color: transparent; /* Fondo transparente para que se vea el degradado del body */
    border-radius: 20px;
    padding: 30px;
    box-shadow: none; /* Eliminar sombra del contenedor principal */
}

header {
    text-align: center;
    padding-bottom: 25px;
    border-bottom: none; /* Eliminar borde inferior */
    position: relative;
}

#header-icon {
    font-size: 4em; /* Trofeo grande */
    color: #FFD700; /* Dorado */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Resplandor dorado */
    margin-bottom: 10px;
}

/* --- BLOQUE CORREGIDO PARA FIREFOX --- */
header h1 {
    font-size: 2.8em; 
    /* El degradado de fondo */
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); 
    
    /* Para Chrome/Brave/Safari (Webkit) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Para Firefox y el estándar */
    background-clip: text;
    color: transparent; 
    
    margin: 0;
    font-weight: bold;
    letter-spacing: 1px;
}
/* --- FIN DEL BLOQUE CORREGIDO --- */


.subtitle {
    font-size: 1.1em;
    color: #d1d1d1;
    margin-top: 5px;
}

/* --- Contenedor de Votación (Página principal) --- */
#poll-container {
    display: flex;
    justify-content: center; /* Centrar las cards */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px; /* Mayor separación entre cards */
    margin-top: 40px;
}

/* --- BLOQUE CORREGIDO PARA SAFARI/FIREFOX --- */
.participant-card {
    flex-basis: 350px; /* Tamaño fijo para las cards, se ajustará con wrap */
    flex-grow: 0; /* No crecerán para mantener el tamaño */
    text-align: center;
    padding: 30px;
    border-radius: 15px;
    
    /* Efecto Glassmorphism */
    background: rgba(255, 255, 255, 0.05); /* Fondo semi-transparente */
    
    /* Para Safari */
    -webkit-backdrop-filter: blur(10px); 
    
    /* Estándar (Firefox, Chrome, Brave) */
    backdrop-filter: blur(10px); 
    
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    transition: transform 0.2s ease-in-out;
}
/* --- FIN DEL BLOQUE CORREGIDO --- */

.participant-card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
}

/* Círculo del icono del participante */
.participant-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em; /* Tamaño del icono dentro del círculo */
    color: #FFF; /* Color blanco para el icono */
    /* Degradado en el círculo */
    background: linear-gradient(45deg, #e91e63 0%, #8a2be2 100%); /* Rosa a Púrpura */
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.5); /* Sombra para el círculo */
}

.participant-card h2 {
    font-size: 1.8em;
    margin-top: 15px;
    margin-bottom: 25px;
    color: #FFFFFF; /* Nombre del participante en blanco */
    min-height: 1.5em; /* Asegura espacio si el nombre es corto */
}

/* Botones de Votar */
.vote-btn {
    display: inline-block;
    padding: 15px 35px; /* Más padding */
    border: none;
    border-radius: 10px; /* Bordes más redondeados */
    font-size: 1.2em; /* Texto más grande */
    font-weight: bold;
    cursor: pointer;
    color: white;
    /* Degradado para el botón */
    background: linear-gradient(90deg, #e91e63 0%, #8a2be2 100%); /* Rosa a Púrpura */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.vote-btn:hover {
    transform: translateY(-3px); /* Mayor levantamiento al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    opacity: 0.9;
}

/* --- Mensajes de Estado --- */
.message-container {
    text-align: center;
    margin-top: 30px;
    font-size: 1.2em;
}
.message-inactive { 
    color: #e0e0e0; /* Gris claro */
    font-weight: normal;
}
.message-success { 
    color: #05C7F2; /* Azul cian brillante */
    font-weight: bold; 
    text-shadow: 0 0 5px rgba(5, 199, 242, 0.5);
}
.message-error { 
    color: #ea4335; /* Rojo para errores */
    font-weight: bold; 
    text-shadow: 0 0 5px rgba(234, 67, 53, 0.5);
}

/* --- Footer y Link Admin --- */
footer {
    text-align: center;
    margin-top: 60px; /* Más margen para separar */
    padding-top: 0; /* No hay borde superior */
    border-top: none;
}

.admin-link {
    display: inline-flex; /* Permite alinear icono y texto */
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
    background: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente para el botón */
    
    /* Para Safari */
    -webkit-backdrop-filter: blur(5px);
    
    /* Estándar */
    backdrop-filter: blur(5px);
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 20px;
    color: #d1d1d1;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.admin-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.admin-link i {
    font-size: 1.1em;
    color: #d1d1d1;
    transition: color 0.3s ease;
}
.admin-link:hover i {
    color: #FFFFFF;
}


/* --- ESTILOS DEL PANEL DE ADMIN --- */
.admin-container {
    max-width: 600px;
    background: rgba(255, 255, 255, 0.05); /* Fondo semi-transparente */
    
    /* Para Safari */
    -webkit-backdrop-filter: blur(8px);
    
    /* Estándar */
    backdrop-filter: blur(8px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: #E0E0E0; /* Texto claro */
}

.admin-container header h1 {
    font-size: 2em;
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    
    /* Para Chrome/Brave/Safari (Webkit) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Para Firefox y el estándar */
    background-clip: text;
    color: transparent; 
    
    border-bottom: none;
    padding-bottom: 0;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-form label {
    font-weight: bold;
    color: #d1d1d1; /* Etiquetas en gris claro */
    margin-bottom: -5px;
}

.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form select {
    padding: 12px; /* Más padding */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 1.05em;
    color: #FFFFFF; /* Texto en blanco */
    background-color: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Elimina el estilo nativo del select */
}
/* Estilo para la flecha del select */
.admin-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px;
    padding-right: 40px; /* Asegura espacio para la flecha */
}


.admin-form button {
    background: linear-gradient(90deg, #e91e63 0%, #8a2be2 100%); /* Degradado de botón */
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.admin-form button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.admin-form button.btn-save {
    background: linear-gradient(90deg, #05C7F2 0%, #1F82BF 100%); /* Degradado azul para guardar */
    color: white;
}
.admin-form button.btn-save:hover {
    background: linear-gradient(90deg, #1F82BF 0%, #0F41A6 100%);
}

/* Conteo de Votos en Admin */
.vote-counts h3 {
    margin-bottom: 15px;
}
.vote-counts p {
    font-size: 1.2em;
    margin: 8px 0;
    color: #E0E0E0; /* Texto claro */
    display: flex; 
    align-items: center;
}
.vote-counts .fa-icon-display { /* Iconos en el admin */
    margin-right: 10px; 
    font-size: 1.3em; /* Icono un poco más grande en el admin */
    line-height: 1;
    color: #FFD700; /* Color dorado para los iconos en el admin */
    width: 25px; /* Ancho fijo para alinear */
    text-align: center;
}
.vote-counts strong {
    color: #FFFFFF; /* Nombres en blanco */
    margin-right: 5px; 
}

/* Controles de Admin */
.admin-controls { display: flex; gap: 15px; margin-top: 15px; }
.admin-controls button {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.admin-controls button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.admin-controls button.btn-active,
.admin-controls button.btn-danger {
    /* Degradado rojo */
    background: linear-gradient(90deg, #d93025 0%, #b0261d 100%); 
    border: none;
    color: white;
}
.admin-controls button.btn-danger:hover,
.admin-controls button.btn-active:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2); /* Divisor más sutil */
    margin: 30px 0;
}

.logout-link {
    display: block;
    margin-top: 25px;
    text-align: center;
    color: #d1d1d1; /* Enlace gris claro */
    text-decoration: underline;
}
.logout-link:hover {
    color: #FFFFFF;
}

/* --- DISEÑO RESPONSIVO (MÓVIL) --- */
@media (max-width: 768px) { /* Ajustar para que las cards no queden demasiado pequeñas */
    .container {
        padding: 20px 15px;
        width: 95%;
    }
    header h1 {
        font-size: 2.2em;
    }
    #header-icon {
        font-size: 3.5em;
    }
    #poll-container {
        flex-direction: column; /* Apila a los participantes */
        align-items: center; /* Centra las cards apiladas */
        gap: 25px;
    }
    .participant-card {
        flex-basis: 100%; /* Ocupa todo el ancho */
        width: 100%;
        max-width: 400px; /* Limitar el ancho en móviles */
        padding: 25px;
    }
    .participant-icon-circle {
        width: 80px;
        height: 80px;
        font-size: 3em;
    }
    .participant-card h2 {
        font-size: 1.6em;
    }
    .vote-btn {
        padding: 12px 25px;
        font-size: 1.1em;
    }
    .admin-controls {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.8em;
    }
    #header-icon {
        font-size: 3em;
    }
    .admin-container {
        padding: 20px 15px;
    }
}