/* ====== Estilos Generales ====== */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ====== Estilos para index.php ====== */
.index-page {
    background-color: #e3f2fd;
}

/* Contenedor para centrar el logo y el título */
.index-page .pleca {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}


.index-page .ascensia {
    width: 100%; /* Ocupa el 100% del ancho de la pantalla en móviles */
    max-width: 120px; /* Ancho máximo para pantallas grandes */
    height: auto;
    margin: 0 auto 20px; /* Añade un margen inferior de 20px para separar de .logo */
    display: block; /* Asegura que el elemento sea bloque para centrado correcto */

}

.index-page .logo {
    width: 100%; /* Ocupa el 100% del ancho de la pantalla en móviles */
    max-width: 480px; /* Ancho máximo para pantallas grandes */
    height: auto; /* Ajusta la altura automáticamente según el ancho */
    margin: 0 auto; /* Centra el logo horizontalmente */
}



.index-page .titulo {
    width: 500px; /* Ancho fijo */
    height: auto; /* Ajusta la altura automáticamente */
    margin-top: 10px; /* Margen superior */
    /*font-family: 'RockOnShadowed', sans-serif; /* Aplica la fuente */
    font-size: 2em; /* Tamaño de fuente */
    font-weight: bold; /* Fuente en negrita */
    color: #5e1c18; /* Color del texto */
    text-align: center; /* Alineación central del texto */
    padding: 10px; /* Espaciado interno para mejor apariencia */
    border-radius: 5px; /* Opcional: bordes redondeados */
}

.index-page .container {
    margin-top: 30px; /* Asegura que todo el contenido esté más abajo */
    width: 100%;
    min-height: calc(100vh - 80px); /* Altura de la pantalla menos la pleca */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Fondo de la página debajo de la pleca */
.index-page {
    background: url('Tiki.png') no-repeat center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* Título en la tabla */
.index-page h1 {
    font-size: 2em;
    text-align: center;
    background: linear-gradient(135deg, #ff6f61, #d32f2f); /* Aplicar el degradado */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el fondo */
    color: transparent; /* Hace el texto transparente en navegadores modernos */
    margin-top: 20px;
}

/* Tabla de resultados */
.index-page table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin: 20px auto; /* Esto centrará la tabla y le da un margen superior */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.index-page th, .index-page td {
    padding: 12px 20px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

.index-page th {
    background-color: rgba(0, 128, 0, 0.8);
    color: white;
    font-size: 1.1em;
}

.index-page td {
    font-size: 1em;
    font-weight: bold;
}

.index-page tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.8);
}

.index-page tr:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Contenedor para la imagen */
.imagen-glucot {
    margin-top: 20px; /* Espacio superior entre la tabla de resultados y la imagen */
    text-align: center; /* Centra el contenedor horizontalmente */
}

/* Imagen dentro del contenedor */
.imagen-glucot img {
    width: 100%; /* Hace la imagen responsiva */
    max-width: 300px; /* Ajusta el ancho máximo para pantallas grandes */
    height: auto; /* Mantén las proporciones de la imagen */
    border-radius: 8px; /* Opcional: bordes redondeados */
    }


/* Contenedor de los resultados */
.resultados {
    display: flex;
    flex-wrap: wrap; /* Permite que los recuadros se acomoden en varias filas si es necesario */
    justify-content: center; /* Centra los recuadros horizontalmente */
    gap: 20px; /* Espaciado entre los recuadros */
    margin-top: 20px;
}

/* Estilo para cada recuadro */
.recuadro {
    background-color: #5e1c18; /* Fondo del recuadro */
    color: #ffffff; /* Texto blanco */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto */
    width: 200px; /* Ancho fijo de cada recuadro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
}

/* Título del lugar */
.recuadro h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Nombre de la región */
.recuadro p {
    font-size: 1.2em;
    margin: 0;
} 



/* ====== Estilos para registrar_voto.html ====== */
.registrar-voto-page {
    background: url('Tiki2.png') no-repeat center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* Contenedor para centrar el logo y el título */
.registrar-voto-page .centrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}


.registrar-voto-page .ascensia {
    width: 100%; /* Ocupa el 100% del ancho de la pantalla en móviles */
    max-width: 120px; /* Ancho máximo para pantallas grandes */
    height: auto;
    margin: 0 auto 20px; /* Añade un margen inferior de 20px para separar de .logo */
}



.registrar-voto-page .logo {
    width: 100%; /* Ocupa el 100% del ancho de la pantalla en móviles */
    max-width: 480px; /* Ancho máximo para pantallas grandes */
    height: auto;
    margin: 0 auto; /* Centra el logo horizontalmente */
}

.registrar-voto-page .titulo {
    width: 500px; /* Ancho fijo */
    height: auto; /* Ajusta la altura automáticamente */
    margin-top: 10px; /* Margen superior */
    /*font-family: 'RockOnShadowed', sans-serif; /* Aplica la fuente */
    font-size: 2em; /* Tamaño de fuente */
    font-weight: bold; /* Fuente en negrita */
    color: #5e1c18; /* Color del texto */
    text-align: center; /* Alineación central del texto */
    padding: 10px; /* Espaciado interno para mejor apariencia */
    border-radius: 5px; /* Opcional: bordes redondeados */
}



/* Título de votación */
.registrar-voto-page h1 {
    color: #d32f2f;
    font-size: 2em;
}

/* Botones de votación */
.registrar-voto-page .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.registrar-voto-page .voto-btn {
    flex: 1 1 45%;
    min-width: 120px;
    padding: 15px 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    /* background: linear-gradient(135deg, #7d3430, #5e1c18);*/
    background: #5e1c18;
    /*background: linear-gradient(135deg, #ff6f61, #d32f2f);*/  
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
}

.registrar-voto-page .voto-btn:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #ff9900, #ffcc33);
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.4);
}

/* Icono de árbol en los botones */
.registrar-voto-page .voto-btn::before {
    content: "🎭"; /* Máscara de carnaval */
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 1.5em;
}

/* Mensaje de confirmación */
.mensaje-confirmacion {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #d4edda;
    padding: 10px 20px; /* Añade un poco más de padding lateral para el centro */
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;
    max-width: 550px; /* Ancho mayor para centrar mejor el texto */
    text-align: center;
    position: relative;
}

/* Asegura que el mensaje de texto esté centrado */
.mensaje-confirmacion span {
    flex-grow: 1;
    text-align: center;
}

/* Ajusta el botón de cerrar (X) */
.cerrar-mensaje {
    background: transparent;
    border: none;
    font-size: 1.2em;
    color: #155724; /* Cambia el color de la "X" a verde oscuro */
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 10px; /* Alinea la X a la derecha */
}

.imagen-gluco {
    margin-top: 20px; /* Espacio superior entre los botones y la imagen */
    text-align: center; /* Centra la imagen horizontalmente */
}

.imagen-gluco img {
    width: 100%; /* Asegura que la imagen sea responsiva */
    max-width: 300px; /* Ancho máximo para pantallas grandes */
    height: auto; /* Mantén las proporciones de la imagen */
    border-radius: 8px; /* Opcional: redondea los bordes de la imagen */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Opcional: agrega sombra para destacar */
}


/* ====== Responsividad ====== */
@media (max-width: 768px) {
    .index-page .logo {
        width: 70%;
    }

    .registrar-voto-page .logo {
        width: 60%; /* Ajusta el logo para pantallas medianas (tablets) */
    }

    .index-page table {
        width: 95%;
    }

    .registrar-voto-page .voto-btn {
        flex: 1 1 45%;
    }
}
    
@media (max-width: 480px) {
    .index-page .logo {
        width: 70%;
    }

    .registrar-voto-page .logo {
        width: 60%; /* Ocupa el 100% del ancho en dispositivos móviles */
    }

    .registrar-voto-page .voto-btn {
        flex: 1 1 100%;
    }
}

@font-face {
    font-family: 'RockOnShadowed'; /* Nombre personalizado de la fuente */
    src: url('./fonts/Typoster ROCK-ON Shadowed Demo.otf') format('opentype'); /* Ruta a la fuente */
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 768px) {
    .registrar-voto-page .ascensia {
        margin: 0 auto 10px; /* Menor espacio en pantallas más pequeñas */
    }


.resultados {
    flex-direction: column; /* Cambia la dirección de los recuadros a vertical */
    align-items: center; /* Centra los recuadros */

}
.recuadro {
    width: 90%; /* Asegura que los recuadros ocupen casi todo el ancho de la pantalla */
}
}