/* =========================================================
   RESET GENERAL
   =========================================================
   * selecciona todos los elementos del documento.
   margin: 0;  -> elimina márgenes por defecto del navegador.
   padding: 0; -> elimina rellenos por defecto.
   box-sizing: border-box; -> hace que width y height incluyan padding y border.
   Esto facilita mucho el control del diseño.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   BODY
   =========================================================
   Aquí se define el estilo global de toda la página.
*/
body {
    /* Fuente principal del sitio */
    font-family: Arial, sans-serif;

    /* Fondo:
       - primera capa: degradado oscuro semitransparente
       - segunda capa: imagen de fondo
       - center/cover: centra y cubre toda la pantalla
       - no-repeat: evita repetición
       - fixed: deja el fondo fijo al hacer scroll
    */
    background:
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url("../img/fondo-registro.jpg") center/cover no-repeat fixed;

    /* Color base del texto */
    color: #ffffff;

    /* Altura mínima igual a toda la ventana */
    min-height: 100vh;

    /* Evita scroll horizontal accidental */
    overflow-x: hidden;

    /* Espacio interior general */
    padding: 24px;

    /* Se usa flex para organizar los elementos en columna */
    display: flex;

    /* Acomoda los elementos uno debajo del otro */
    flex-direction: column;

    /* Centra horizontalmente el contenedor principal */
    align-items: center;
}

/* =========================================================
   IMÁGENES
   =========================================================
   Regla general para cualquier imagen.
*/
img {
    /* Nunca superar el ancho disponible */
    max-width: 100%;

    /* Mantener proporción */
    height: auto;

    /* Evitar espacios raros de elementos inline */
    display: block;
}

/* =========================================================
   BOTÓN VOLVER
   =========================================================
   Se deja fijo en la esquina superior izquierda.
*/
.volver {
    /* Posición fija para que siempre se vea */
    position: fixed;

    /* Distancia desde arriba */
    top: 20px;

    /* Distancia desde la izquierda */
    left: 20px;

    /* Para que quede encima de otros elementos */
    z-index: 1000;

    /* Alto automático según contenido */
    width: auto;

    /* Espaciado interno */
    padding: 10px 16px;

    /* Sin borde por defecto */
    border: none;

    /* Bordes redondeados */
    border-radius: 10px;

    /* Fondo semitransparente tipo glass */
    background: rgba(53, 195, 187, 0.92);

    /* Color del texto */
    color: #ffffff;

    /* Texto un poco más grueso */
    font-weight: bold;

    /* Cursor de clic */
    cursor: pointer;

    /* Efecto blur detrás del botón */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Animación suave */
    transition: all 0.3s ease;
}

/* Efecto hover del botón volver */
.volver:hover {
    /* Cambia levemente el color */
    background: rgba(45, 183, 176, 0.95);

    /* Lo sube apenas */
    transform: translateY(-1px);
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   =========================================================
   Tarjeta del formulario.
*/
.contenedor {
    /* Ocupar todo el ancho posible */
    width: 100%;

    /* Máximo ancho para que no se vea gigante */
    max-width: 460px;

    /* Separación superior e inferior */
    margin: 70px auto 30px auto;

    /* Fondo glass semitransparente */
    background: rgba(255, 255, 255, 0.14);

    /* Desenfoque del fondo detrás */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Espaciado interno */
    padding: 30px 24px;

    /* Bordes redondeados */
    border-radius: 22px;

    /* Sombra para dar profundidad */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

    /* Borde suave translúcido */
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* =========================================================
   LOGO
   =========================================================
   Logo dentro del contenedor.
*/
.logo {
    /* Ancho controlado */
    width: 95px;

    /* Centrado horizontal */
    margin: 0 auto 10px auto;
}

/* =========================================================
   TÍTULO PRINCIPAL
   =========================================================
*/
h1 {
    /* Centra el texto */
    text-align: center;

    /* Separación inferior */
    margin-bottom: 22px;

    /* Tamaño del título */
    font-size: 2.2rem;

    /* Color blanco */
    color: #ffffff;
}

/* =========================================================
   FORMULARIO
   =========================================================
   Se organiza verticalmente.
*/
form {
    /* Flex para apilar elementos */
    display: flex;

    /* Columna vertical */
    flex-direction: column;

    /* Espacio entre elementos */
    gap: 12px;
}

/* =========================================================
   LABELS
   =========================================================
   Etiquetas de cada campo.
*/
label {
    /* Texto seminegrita */
    font-weight: 700;

    /* Margen superior suave */
    margin-top: 4px;

    /* Color blanco */
    color: #ffffff;

    /* Tamaño de fuente */
    font-size: 0.95rem;
}

/* =========================================================
   INPUTS, SELECT Y BOTONES GENERALES
   =========================================================
   Se excluye el checkbox para no dañarlo visualmente.
*/
input:not([type="checkbox"]),
select,
button {
    /* Ocupar todo el ancho */
    width: 100%;

    /* Espaciado interno */
    padding: 13px 14px;

    /* Forma redondeada */
    border-radius: 999px;

    /* Borde suave */
    border: 1px solid rgba(255, 255, 255, 0.35);

    /* Fondo claro */
    background: rgba(255, 255, 255, 0.90);

    /* Color del texto */
    color: #333333;

    /* Tamaño del texto */
    font-size: 1rem;

    /* Transición suave */
    transition: 0.25s ease;
}

/* =========================================================
   FOCUS EN CAMPOS
   =========================================================
   Efecto visual cuando el usuario escribe.
*/
input:not([type="checkbox"]):focus,
select:focus {
    /* Quita el borde azul por defecto */
    outline: none;

    /* Resalta con color principal */
    border-color: #35c3bb;

    /* Sombra externa de enfoque */
    box-shadow: 0 0 0 4px rgba(53, 195, 187, 0.18);

    /* Fondo más blanco */
    background: rgba(255, 255, 255, 0.98);
}

/* =========================================================
   PLACEHOLDERS
   =========================================================
*/
input::placeholder {
    /* Gris suave */
    color: #8b8b8b;

    /* Tamaño ligeramente menor */
    font-size: 0.95rem;
}

/* =========================================================
   BLOQUE TELÉFONO
   =========================================================
   Organiza código país + teléfono en una sola fila.
*/
.telefono {
    /* Flex horizontal */
    display: flex;

    /* Espacio entre elementos */
    gap: 10px;

    /* Ocupar todo el ancho */
    width: 100%;
}

/* Select de código país */
.telefono select {
    /* Ancho del prefijo */
    width: 32%;
}

/* Input del número */
.telefono input {
    /* Ancho del número */
    width: 68%;
}

/* =========================================================
   AYUDA CONTRASEÑA
   =========================================================
*/
.ayuda-password {
    /* Mostrar como bloque */
    display: block;

    /* Ajuste fino de separación */
    margin-top: -4px;
    margin-bottom: 6px;

    /* Color blanco */
    color: #ffffff;

    /* Tamaño más pequeño */
    font-size: 0.9rem;

    /* Altura entre líneas */
    line-height: 1.5;

    /* Ligera transparencia */
    opacity: 0.95;
}

/* =========================================================
   BLOQUE DE POLÍTICAS
   =========================================================
*/
.bloque-politicas {
    /* Separación superior */
    margin-top: 12px;

    /* Separación inferior */
    margin-bottom: 10px;
}

/* =========================================================
   CONTENEDOR DEL CHECKBOX + TEXTO
   =========================================================
   Uso flex porque aquí queda más estable que grid.
*/
.check-politicas {
    /* Organiza checkbox y texto lado a lado */
    display: flex;

    /* Alineación arriba */
    align-items: flex-start;

    /* Espacio entre checkbox y texto */
    gap: 10px;

    /* Cursor clickeable */
    cursor: pointer;

    /* Tamaño del texto */
    font-size: 0.95rem;

    /* Altura de línea cómoda */
    line-height: 1.5;

    /* Color blanco */
    color: #ffffff;

    /* Ancho total */
    width: 100%;

    /* Peso normal aquí para no verse tan pesado */
    font-weight: 400;
}

/* =========================================================
   CHECKBOX REAL
   =========================================================
   Aquí se controla específicamente el checkbox.
*/
.check-politicas input[type="checkbox"] {
    /* Ancho fijo */
    width: 18px !important;

    /* Alto fijo */
    height: 18px !important;

    /* Asegura que no se encoja */
    min-width: 18px;

    /* Ajuste fino vertical */
    margin-top: 3px;

    /* Sin padding */
    padding: 0;

    /* Sin borde extra */
    border: none;

    /* Sin sombra */
    box-shadow: none;

    /* Color del check en navegadores compatibles */
    accent-color: #35c3bb;

    /* Mantiene apariencia nativa */
    appearance: auto;
    -webkit-appearance: checkbox;

    /* Fondo transparente */
    background: transparent;
}

/* =========================================================
   TEXTO DE POLÍTICAS
   =========================================================
*/
.texto-politicas {
    /* Mostrar como bloque */
    display: block;

    /* Color blanco */
    color: #ffffff;

    /* Un poco más grueso que el normal */
    font-weight: 600;
}

/* =========================================================
   ENLACES DE POLÍTICAS
   =========================================================
*/
.texto-politicas a {
    /* Color morado visible */
    color: #7c4dff;

    /* Negrita */
    font-weight: 700;

    /* Subrayado */
    text-decoration: underline;

    /* Separación del subrayado */
    text-underline-offset: 2px;
}

/* Hover de los links */
.texto-politicas a:hover {
    /* Morado más claro */
    color: #9b6cff;
}

/* =========================================================
   BOTÓN PRINCIPAL DE REGISTRO
   =========================================================
*/
.boton,
button[type="submit"] {
    /* Fondo degradado turquesa */
    background: linear-gradient(135deg, #35c3bb, #2db7b0);

    /* Texto blanco */
    color: #ffffff;

    /* Sin borde */
    border: none;

    /* Cursor clic */
    cursor: pointer;

    /* Negrita */
    font-weight: bold;

    /* Separación arriba */
    margin-top: 8px;

    /* Bordes completamente redondos */
    border-radius: 999px;
}

/* Hover del botón submit */
.boton:hover,
button[type="submit"]:hover {
    /* Movimiento suave */
    transform: translateY(-1px);

    /* Sombra turquesa */
    box-shadow: 0 8px 18px rgba(53, 195, 187, 0.24);
}

/* =========================================================
   TOAST
   =========================================================
   Mensaje flotante superior.
*/
.toast {
    /* Posición fija */
    position: fixed;

    /* Arriba */
    top: 20px;

    /* Centrado horizontal */
    left: 50%;

    /* Centrado exacto */
    transform: translateX(-50%);

    /* Espaciado interno */
    padding: 14px 28px;

    /* Bordes redondeados */
    border-radius: 12px;

    /* Grosor del texto */
    font-weight: 600;

    /* Texto blanco */
    color: white;

    /* Fondo verde por defecto */
    background: #28a745;

    /* Sombra */
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

    /* Empieza oculto */
    opacity: 0;

    /* Animación */
    transition: all 0.35s ease;

    /* Queda por encima de todo */
    z-index: 9999;

    /* Máximo ancho */
    max-width: 92%;

    /* Texto centrado */
    text-align: center;
}

/* Variante de error */
.toast.error {
    /* Fondo rojo */
    background: #dc3545;
}

/* Estado visible */
.toast.mostrar {
    /* Se vuelve visible */
    opacity: 1;

    /* Baja un poco para dar efecto */
    top: 40px;
}

/* =========================================================
   RESPONSIVE TABLET
   =========================================================
*/
@media (max-width: 768px) {
    .contenedor {
        /* Reduce padding en pantallas medianas */
        padding: 24px 18px;
    }

    h1 {
        /* Reduce tamaño del título */
        font-size: 1.9rem;
    }

    .logo {
        /* Logo un poco más pequeño */
        width: 88px;
    }
}

/* =========================================================
   RESPONSIVE MÓVIL
   =========================================================
*/
@media (max-width: 480px) {
    body {
        /* Menor padding en celular */
        padding: 12px;
    }

    .volver {
        /* Ajusta posición del botón volver */
        top: 12px;
        left: 12px;

        /* Reduce padding */
        padding: 9px 14px;

        /* Tamaño un poco menor */
        font-size: 0.92rem;
    }

    .contenedor {
        /* Menos margen superior */
        margin: 58px auto 20px auto;

        /* Menor padding */
        padding: 20px 14px;

        /* Bordes menos grandes */
        border-radius: 16px;

        /* En móvil ocupa todo el ancho disponible */
        max-width: 100%;
    }

    h1 {
        /* Título más pequeño */
        font-size: 1.6rem;
    }

    .logo {
        /* Logo reducido */
        width: 82px;
    }

    .telefono {
        /* Mantiene fila horizontal */
        flex-direction: row;

        /* Menor separación */
        gap: 8px;
    }

    .telefono select {
        /* Más espacio para prefijo */
        width: 36%;
    }

    .telefono input {
        /* Espacio restante para número */
        width: 64%;
    }

    input:not([type="checkbox"]),
    select,
    button {
        /* Reduce tipografía */
        font-size: 0.96rem;

        /* Reduce padding */
        padding: 12px;
    }

    .check-politicas {
        /* Texto un poco más pequeño */
        font-size: 0.92rem;
    }

    .check-politicas input[type="checkbox"] {
        /* Checkbox ligeramente menor */
        width: 17px !important;
        height: 17px !important;
        min-width: 17px;
    }

    .toast {
        /* Toast más compacto */
        padding: 12px 16px;

        /* Texto un poco menor */
        font-size: 0.95rem;
    }
}
input:invalid,
select:invalid {
    border-color: #dc3545;
}

input:focus:invalid,
select:focus:invalid {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.18);
}