/* styles.css - Estilos específicos del login, adaptados para responsividad */
html, body {
    height: 100%;
    overflow: hidden; /* Elimina scroll */
}
/* Estilos del encabezado principal */
h1 {
    font-size: 32px;
    color: #ffffff;
    background: linear-gradient(to right, #600000, #9D0000); /* Fondo degradado */
    padding: 15px;
    margin: 8% 0 0 0; /* Añade margen superior e inferior */
    text-align: center; /* Centra el texto */
    width: 100%; /* Ocupa todo el ancho */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Sombra mejorada */
    transition: box-shadow 0.3s ease; /* Transición suave */
}

h1:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.4); /* Efecto hover para mejora */
}

/* Estilos del contenedor principal */
.container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    border-radius: 18px;
    padding: 25px; /* Espaciado interno aumentado para mejor aire */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Sombra mejorada */
    margin: 20px auto; /* Centrado con menos margen inferior */
    max-width: 450px; /* Ancho ligeramente mayor para mejor composición */
    height: auto; /* Ajuste dinámico de altura */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.container:hover {
    transform: translateY(-5px); /* Efecto levitación en hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Sombra más profunda */
}

/* Estilos del grupo de entradas del formulario */
.input-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group label img {
    width: 28px; /* Tamaño ajustado como en tablets */
    height: auto;
    margin-right: 10px;
}

.input-group.password-group {
    position: relative; /* Para posicionar el ícono del ojo dentro del input */
}

.input-group input {
    border: 2px solid transparent; /* Ajusta el grosor del borde aquí */
    border-radius: 15px; /* Esquinas redondeadas como en tablets */
    padding: 8px 35px 8px 10px; /* Padding ajustado */
    height: 35px; /* Altura como en tablets */
    width: 100%;
    max-width: 350px; /* Ancho mejorado */
    background: linear-gradient(to right, #600000, #9D0000); /* Fondo degradado */
    color: #ffffff; /* Color del texto blanco para mejor contraste */
    font-size: 16px; /* Tamaño de la letra como en tablets */
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Sombra interna para profundidad */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones */
}

.input-group input:focus {
    border-color: #FFD700; /* Borde dorado en focus para mejora */
    box-shadow: 0 0 8px rgba(255,215,0,0.5); /* Resplandor en focus */
}

.input-group input::placeholder {
    color: hsla(0, 0%, 100%, 0.8); /* Color blanco del placeholder con algo de transparencia */
    opacity: 1; /* Asegura que el color del placeholder es visible */
    font-size: 16px; /* Tamaño del texto del placeholder como en tablets */
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.toggle-password img {
    width: 20px; /* Tamaño ajustado como en tablets */
    height: 20px;
}

/* Estilos del botón */
button {
    background: linear-gradient(to right, #600000, #9D0000); /* Fondo degradado */    
    color: #ffffff;
    border: none;
    border-radius: 15px; /* Bordes como en tablets */
    padding: 10px 40px; /* Padding más amplio para mejor apariencia */
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px; /* Espacio superior */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transiciones mejoradas */
    width: 100%;
    max-width: 350px; /* Ancho consistente */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra inicial */
}

button:hover {
    background: linear-gradient(to right, #9D0000, #600000); /* Inverso para hover */
    transform: scale(1.05); /* Aumentar tamaño ligeramente */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Sombra más profunda */
}

button:active {
    transform: scale(1.00); /* Restaurar tamaño original */
}

button:focus {
    outline: none; /* Sin borde de foco */
    box-shadow: 0 0 5px #FFD700; /* Sombra dorada */
}

/* Estilos de los enlaces */
.links {
    margin-top: 15px; /* Más espacio */
}

.links a {
    color: #6B1D27;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    font-size: 16px; /* Tamaño ajustado */
    transition: color 0.3s ease; /* Transición suave */
}

.links a:hover {
    color: #FFC107; /* Cambio a mostaza */
    text-decoration: underline;
}

.forgot-password {
    display: block;
    margin-bottom: 10px;
    font-weight: 550; /* Ajusta este valor para cambiar la intensidad de negrita */
}

/* Contenedor para soporte */
.support-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto; /* Cambiado a auto para evitar solapamiento */
    padding: 10px 20px;
    position: absolute;
    bottom: 10px;
    right: 0;
    z-index: 10;
}

.logosp {
    width: 21px; /* Tamaño del icono de usuario */
    height: 21px; /* Tamaño del icono de usuario */
    margin-right: 5px; /* Espacio a la derecha para separar del texto */
    font-size: 21px; /* Para emojis: tamaño del texto */
    line-height: 21px; /* Alineación vertical para emojis */
    display: inline-block; /* Para que se comporte como imagen */
}

.support {
    color: #6B1D27;
    text-decoration: none; /* Quita el subrayado */
    font-size: 18px;
    transition: color 0.3s ease; /* Transición suave para el color */
    font-weight: 550; /* Ajusta este valor para cambiar la intensidad de negrita */
}

.support:hover {
    color: #FFC107; /* Cambia a color mostaza cuando se pasa el cursor */
    text-decoration: none; /* Asegura que no tenga subrayado en hover */
}

nav ul li a:hover {
    color: #FFD700;
}

.caption a button:hover {
    background-color: #FFD700;
    transform: scale(1.05); /* Efecto de escala en hover */
}

/* RESPONSIVE - Tablets y móviles */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
        padding: 12px;
        margin: 25% 0 15px 0; /* Aumentar margen superior para separar de nav en tablets/mobile */
    }

    .container {
        padding: 15px;
        max-width: 90%;
        margin: 10px auto;
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra más refinada */
    }

    .input-group {
        margin-bottom: 15px;
    }

    .input-group label img {
        width: 28px;
        margin-right: 10px;
    }

    .input-group input {
        font-size: 16px;
        height: 35px; /* Grosor reducido y refinado para mobile */
        width: 100%;
        border-radius: 15px; /* Bordes más suaves */
        padding: 8px 35px 8px 10px; /* Ajuste padding para mejor tacto */
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Sombra interna para profundidad */
    }

    .input-group input::placeholder {
        font-size: 16px;
    }

    .toggle-password img {
        width: 20px;
        height: 20px;
    }

    button {
        font-size: 18px;
        padding: 10px 25px;
        border-radius: 15px; /* Bordes más suaves */
        width: 100%;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra para botón */
    }

    .links a {
        font-size: 14px;
    }

    .support-container {
        padding: 10px;
        bottom: 5px;
    }

    .logosp {
        width: 18px;
        height: 18px;
        margin-right: 4px;
        font-size: 18px; /* Ajuste para responsive */
        line-height: 18px;
    }

    .support {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 22px;
        padding: 10px;
        margin: 30% 0 20px 0; /* Mayor separación de nav en móviles pequeños */
    }

    .container {
        padding: 10px;
        max-width: 95%;
        margin: 5px auto;
        border-radius: 10px; /* Bordes aún más suaves */
    }

    .input-group {
        margin-bottom: 12px;
    }

    .input-group label img {
        width: 24px;
        margin-right: 8px;
    }

    .input-group input {
        font-size: 14px;
        height: 30px; /* Grosor optimizado, no grueso */
        padding: 6px 30px 6px 8px;
        border-radius: 12px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Sombra sutil */
    }

    .input-group input::placeholder {
        font-size: 14px;
    }

    .toggle-password img {
        width: 18px;
        height: 18px;
    }

    button {
        font-size: 16px;
        padding: 8px 20px;
        border-radius: 12px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    }

    .links a {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .support-container {
        padding: 5px;
        bottom: 0;
    }

    .logosp {
        width: 16px;
        height: 16px;
        margin-right: 3px;
        font-size: 16px; /* Ajuste para responsive */
        line-height: 16px;
    }

    .support {
        font-size: 14px;
    }
}

/* Estilos para el nuevo contenedor (similar a support-container, pero a la izquierda) */
.shortcut-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea a la izquierda */
    width: auto; /* Cambiado a auto para evitar solapamiento */
    padding: 10px 20px;
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 10;
}

.shortcut {
    color: #6B1D27;
    text-decoration: none; /* Quita el subrayado */
    font-size: 18px;
    transition: color 0.3s ease; /* Transición suave para el color */
    font-weight: 550; /* Ajusta este valor para cambiar la intensidad de negrita */
}

.shortcut:hover {
    color: #FFC107; /* Cambia a color mostaza cuando se pasa el cursor */
    text-decoration: none; /* Asegura que no tenga subrayado en hover */
}

/* Estilos mejorados para el modal (bonito, con colores del sitio, centrado y con iconos) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Fondo más oscuro para mejor contraste */
    padding-top: 100px; /* Espacio superior para centrar verticalmente */
    transition: opacity 0.3s ease; /* Transición suave al abrir */
}

.modal-content {
    background-color: #ffffff; /* Fondo blanco como el container */
    margin: auto; /* Centrado horizontal */
    padding: 0; /* Sin padding externo, lo manejamos internamente */
    border-radius: 18px; /* Bordes redondeados como el container */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Sombra profunda */
    width: 80%;
    max-width: 500px;
    text-align: center;
    overflow: hidden; /* Para que los bordes no se salgan */
    transition: transform 0.3s ease; /* Animación al aparecer */
}

.modal-content h2 {
    background: linear-gradient(to right, #600000, #9D0000); /* Degradado rojo como botones */
    color: #ffffff; /* Texto blanco */
    margin: 0;
    padding: 15px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.modal-content h2 span {
    margin-right: 10px; /* Espacio para el emoji */
    font-size: 24px; /* Tamaño mayor para el emoji */
}

.modal-content p {
    padding: 20px;
    font-size: 16px;
    color: #6B1D27; /* Color de texto como enlaces */
    margin: 0;
}

.modal-content a {
    display: inline-block;
    background: linear-gradient(to right, #600000, #9D0000); /* Botón con degradado */
    color: #ffffff;
    border: none;
    border-radius: 15px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 0 20px 0; /* Espacio inferior */
    text-decoration: none;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.modal-content a:hover {
    background: linear-gradient(to right, #9D0000, #600000); /* Hover inverso */
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #ffffff; /* Blanco para contrastar con header rojo */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #FFD700; /* Dorado en hover */
    text-decoration: none;
}

/* Ajustes responsive para el shortcut-container y modal */
@media (max-width: 768px) {
    .shortcut-container {
        padding: 10px;
        bottom: 5px;
    }

    .shortcut {
        font-size: 16px;
    }

    .modal {
        padding-top: 50px;
    }

    .modal-content {
        width: 90%;
    }

    .modal-content h2 {
        font-size: 18px;
        padding: 12px;
    }

    .modal-content p {
        font-size: 14px;
        padding: 15px;
    }

    .modal-content a {
        font-size: 14px;
        padding: 8px 25px;
    }
}

@media (max-width: 480px) {
    .shortcut-container {
        padding: 5px;
        bottom: 0;
    }

    .shortcut {
        font-size: 14px;
    }

    .modal-content {
        width: 95%;
        padding: 0;
    }

    .modal-content h2 {
        font-size: 16px;
        padding: 10px;
    }

    .modal-content p {
        font-size: 12px;
        padding: 10px;
    }

    .modal-content a {
        font-size: 12px;
        padding: 6px 20px;
        margin-bottom: 15px;
    }

    .close {
        font-size: 24px;
        top: 5px;
        right: 10px;
    }
}