/* Estilos generales */
body {
    font-family: "Poppins", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F5F6F5;
    color: #1F2526;
}

/* Encabezado */
header {
    background-color: #F5F6F5; /* Blanco grisáceo de Spin Premia */
    color: #000000; /* Texto negro como en Spin Premia */
    padding: 20px; /* Igual que Spin Premia */
    font-family: "Montserrat", sans-serif; /* Fuente de Spin Premia */
    display: flex;
    flex-direction: column; /* Apila el logo y el contenido verticalmente */
    align-items: flex-start; /* Alinea el logo a la izquierda */
    border-bottom: 4px solid #FF6200; /* Borde inferior naranja, igual que Spin Premia */
}

.pdf-container {
    max-width: 800px; /* Ancho máximo del visor */
    margin: 0 auto; /* Centrar el contenedor */
    border: 1px solid #dee2e6; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evitar desbordes */
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    max-height: 2000px; /* Altura máxima del contenedor */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
}

#pdf-viewer {
    display: block; /* Asegurar que el iframe sea un bloque */
    border: none; /* Sin borde en el iframe */
    width: 100%; /* Asegurar que ocupe todo el ancho */
}

/* Contenedor para el texto y la barra de progreso */
.header-content {
    display: flex;
    flex-direction: column; /* Apila el texto y la barra de progreso verticalmente */
    align-items: center; /* Centra horizontalmente */
    width: 100%; /* Ocupa todo el ancho disponible */
}

/* Estilo para el logo */
.logo {
    width: 130px; /* Tamaño ajustado previamente */
    height: auto; /* Mantiene la proporción */
    margin-bottom: 10px; /* Reducimos el espacio entre el logo y el contenido */
}

/* Estilo para el título en el header */
.header-title {
    margin-bottom: 5px; /* Reducimos el espacio entre el título y la barra de progreso */
}

.header-title h1 {
    font-size: 18px; /* Tamaño ajustado previamente */
    font-weight: 600;
    color: #1F2526;
    margin: 0; /* Eliminamos márgenes para reducir espacio */
}

/* Contenedor principal */
main {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    min-height: calc(100vh - 140px); /* Ajustamos la altura para compensar el header y footer */
    padding: 20px;
    box-sizing: border-box;
}

/* Sección de términos (adaptada para el formulario) */
.terms-container {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centra el texto */
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.form-actions {
    display: flex;
    justify-content: space-between; /* Distribución para todos los formularios */
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0;
    padding: 0;
    gap: 20px; /* Espacio entre botones */
}

.form-actions button {
    width: 45%; /* Tamaño uniforme para todos los botones */
    padding: 10px 20px; /* Tamaño uniforme */
    cursor: pointer;
    border-radius: 5px;
    border: none; /* Asegura consistencia */
    font-weight: 600; /* Mantiene el peso de la fuente */
    max-width: 200px; /* Limita el ancho máximo */
}

#cancelar {
    background-color: #FF6200; /* Naranja en lugar de rojo */
    color: #FFFFFF;
}

#cancelar:hover {
    background-color: #E55A00; /* Hover naranja más oscuro */
}

button#aceptar, #aceptarTerminos {
    background-color: #003087; /* Azul original */
    color: #FFFFFF;
}

button#aceptar:hover, #aceptarTerminos:hover {
    background-color: #002366; /* Hover azul más oscuro */
}

button[type="submit"] {
    background-color: #003087; /* Azul original para Registrar */
    color: #FFFFFF;
}

button[type="submit"]:hover {
    background-color: #002366; /* Hover azul más oscuro */
}

.terms-container h1 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1F2526;
}

.terms-container h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #1F2526;
}

.terms-container p {
    font-size: 14px;
    color: #1F2526;
}

/* Estilos para el formulario */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

.terms-container label {
    font-size: 14px;
    margin-bottom: 5px;
    width: 100%;
    text-align: left;
    color: #1F2526;
}

.terms-container input[type="text"],
.terms-container input[type="email"],
.terms-container input[type="file"] {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    border: 1px solid #D3D3D3;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/* Checkbox y botón */
.consent {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.consent input {
    margin-right: 10px;
}

#datosRegistrados input[readonly] {
    background-color: #F0F0F0;
    border: 1px solid #D3D3D3;
    cursor: not-allowed;
    width: 100%;
    padding: 8px;
    margin: 5px 0;
}

button {
    padding: 10px 15px; /* Estilo básico para botones fuera de .form-actions */
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
}

button:hover {
    /* Este hover no afecta a #aceptar, #aceptarTerminos ni #cancelar porque tienen sus propios hover */
}

button:disabled {
    background-color: #CCCCCC;
    cursor: not-allowed;
}

/* Enlace de descarga */
#downloadLink {
    margin-top: 20px;
    text-align: center;
}

/* Enlace de términos y condiciones */
.terms-link {
    margin: 20px 0;
}

.terms-link a {
    color: #003087;
    text-decoration: underline;
    font-size: 14px;
}

.terms-link a:hover {
    color: #00D4B4;
}

#downloadLink a {
    color: #003087;
    text-decoration: underline;
}

#downloadLink a:hover {
    color: #00D4B4;
}

/* Footer */
footer {
    background-color: #003A44; /* Verde-azul oscuro (cerceta) de Spin Premia */
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    position: relative;
    border-top: 4px solid #FF6200; /* Borde superior naranja */
}

/* Estilo para el botón de la página principal */
.btn {
    background-color: #FF6200; /* Naranja igual que los bordes */
    color: #FFFFFF;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-weight: 600;
}

.btn:hover {
    background-color: #E55A00; /* Naranja más oscuro para el hover, igual que los íconos */
}

/* Media Queries para Responsividad */
@media (max-width: 600px) {
    header {
        align-items: center; /* Centra todo en pantallas pequeñas */
    }

    .header-content {
        width: 100%; /* Ocupa todo el ancho */
        align-items: center; /* Centra el contenido */
    }

    .terms-container {
        padding: 15px;
        max-width: 100%;
    }

    .terms-container h1 {
        font-size: 16px; /* Tamaño ajustado previamente */
    }

    .terms-container h3 {
        font-size: 14px;
    }

    .terms-container p {
        font-size: 12px;
    }

    .terms-container label {
        font-size: 12px;
    }

    .terms-container input[type="text"],
    .terms-container input[type="email"],
    .terms-container input[type="file"] {
        max-width: 100%;
    }

    button {
        max-width: 100%;
    }

    .logo {
        width: 100px; /* Tamaño ajustado previamente */
    }

    .header-title h1 {
        font-size: 16px; /* Tamaño ajustado para pantallas pequeñas */
    }
}

/* Estilos para la nueva barra de progreso */
.progress-container {
    width: 100%;
    max-width: 400px;
    margin: 10px auto; /* Centra horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos hijos */
}

.progress-steps {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.step-container {
    display: flex;
    align-items: center;
    width: 33.33%;
    justify-content: space-between;
}

.step-circle {
    width: 40px;
    height: 40px;
    background-color: #D3D3D3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1F2526;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.step-circle.active {
    background-color: #00D4B4;
    color: #FFFFFF;
}

.step-line {
    flex-grow: 1;
    height: 5px;
    background-color: #D3D3D3;
    transition: background-color 0.3s ease;
}

.step-line.active {
    background-color: #00D4B4;
}

.step-labels {
    display: flex;
    justify-content: space-between;
    max-width: 400px;
    width: 100%;
    margin: 5px auto 0;
    font-size: 14px;
    color: #1F2526;
    text-align: center;
}

.step-labels span {
    width: 33.33%;
}

/* Estilos para íconos de redes sociales en el footer */
.social-icons {
    margin-top: 15px; /* Espacio entre el texto y los íconos */
    padding-bottom: 15px; /* Espacio al final del footer */
}

.social-icons a {
    color: #FFFFFF; /* Íconos blancos */
    font-size: 24px; /* Tamaño del ícono dentro del círculo */
    background-color: #FF6200; /* Naranja exacto de Spin Premia */
    width: 44px; /* Tamaño total del círculo */
    height: 44px; /* Tamaño total del círculo */
    display: inline-flex; /* Centra el ícono dentro del círculo */
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Hace el fondo circular */
    margin: 0 10px; /* Espaciado horizontal entre íconos */
    text-decoration: none;
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.social-icons a:hover {
    background-color: #E55A00; /* Naranja más oscuro al pasar el mouse */
}

/* Estilos para la página de registro exitoso */
.contenedor-exito {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    margin: 20px auto; /* Centra el contenedor con un margen superior e inferior */
}

.contenedor-exito h1 {
    font-family: "Montserrat", sans-serif; /* Igual que los encabezados en Spin Premia */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1F2526;
}

.contenedor-exito p {
    font-family: "Poppins", sans-serif; /* Igual que el cuerpo de texto en Spin Premia */
    font-size: 14px;
    color: #1F2526;
}

/* Estilos para el div de términos aceptados en cargaDeArchivos.html */
#terminos-aceptados {
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #D3D3D3; /* Cambié #ccc a #D3D3D3 para consistencia con otros bordes */
    padding: 10px;
    background-color: #F9F9F9;
    font-size: 14px;
    width: 100%;
    max-width: 400px; /* Igual que los inputs para alineación */
    box-sizing: border-box;
    white-space: pre-wrap; /* Para respetar saltos de línea en el texto */
}