/* public/style.css - Estilo Soft UI / Neumórfico Final */
/* public/style.css - Estilos para el Modal de Confirmación */

/* Modal (Fondo oscuro) */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000; /* Asegura que esté sobre todo lo demás */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    padding: 20px;
}

/* Contenido del Modal (La tarjeta blanca/gris) */
.modal-content {
    background-color: var(--color-bg-medium-gray); /* Fondo suave de la tarjeta */
    margin: auto;
    padding: 30px;
    border-radius: var(--border-radius-base);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px; /* Ancho máximo estándar para un pop-up */
    text-align: center;
    box-shadow: var(--shadow-light); /* Efecto neumórfico */
}

/* Título del Modal */
.modal-title {
    color: var(--color-text-dark);
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Texto del cuerpo del Modal */
.modal-body-text {
    color: var(--color-text-dim);
    margin-bottom: 15px;
    line-height: 1.4;
    font-size: 15px;
}

/* Botón/Enlace del Modal (Utiliza el estilo Morado Motorola) */
.modal-button-link {
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    font-weight: 700;
    
    /* Colores del botón Morado Motorola */
    background: linear-gradient(135deg, var(--color-accent-purple-motorola-light) 0%, var(--color-accent-purple-motorola-dark) 100%); 
    color: white; 
    border-radius: var(--border-radius-base);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    margin-top: 20px;
    transition: background 0.2s;
}

.modal-button-link:hover {
    background: linear-gradient(135deg, var(--color-accent-purple-motorola-dark) 0%, var(--color-accent-purple-motorola-light) 100%);
}
/* Estilos para el nuevo header morado de registro (ahora como un gran botón) */
.registration-header-card {
    background-color: var(--color-accent-purple-motorola); /* Morado de Motorola */
    color: white; /* Texto blanco */
    padding: 30px 20px; /* ✅ Ajuste el padding para que se parezca más al botón */
    border-radius: var(--border-radius-base); /* Orillas redondeadas */
    text-align: center; /* Centrar el contenido */
    margin-bottom: 35px; /* Espacio debajo de esta tarjeta para el primer form-card */
    box-shadow: var(--shadow-light); /* Para que tenga el efecto elevado */
    /* ✅ Considera añadir altura mínima si el texto es muy corto para mantener la proporción de botón */
    /* min-height: 80px; */ 
    display: flex; /* ✅ Usar flexbox para centrar verticalmente si se desea */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Ajustamos los títulos dentro de esta tarjeta para que sean blancos y se vean bien */
.registration-header-card h1 {
    color: white; 
    margin-top: 0;
    margin-bottom: 8px; /* ✅ Más ajustado entre título y subtítulo */
    font-size: 28px; 
    font-weight: 700; /* Asegurar que es bold */
    text-align: center; 
}

.registration-header-card .subtitulo {
    color: rgba(255, 255, 255, 0.9); /* ✅ Un poco más opaco para el subtítulo */
    margin-bottom: 0; 
    font-size: 16px; 
    text-align: center; 
}

/* ... (resto de tus estilos) ... */
:root {
    /* ... (otras variables de color) ... */
    --color-accent-green: #90EE90; 
    --color-accent-green-light: #B4EEB4; /* Tono más claro para degradado verde */
    --color-accent-green-dark: #7ACD7A;  /* Tono más oscuro para degradado verde */
    --color-accent-red-motorola: #E53935; /* ✅ Rojo vibrante de Motorola */
    --color-accent-purple-motorola: #5D3FD3; /* Morado de Botón Principal */
    --color-accent-purple-motorola-light: #7D6BEB; /* Tono más claro para degradado morado */
    --color-accent-purple-motorola-dark: #4A32A6; /* Tono más oscuro para degradado morado */

    /* ... (resto de tus variables) ... */

    /* Sombras y Radios */
    --shadow-light: -6px -6px 12px rgba(255, 255, 255, 0.9), 
                    6px 6px 12px rgba(0, 0, 0, 0.1); 
    --shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, 0.08), 
                    inset -3px -3px 7px rgba(255, 255, 255, 0.7); 
    --border-radius-base: 18px; 
}

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    background-color: var(--color-bg-light-gray); 
    margin: 0;
    min-height: 100vh;
    color: var(--color-text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* Ocultamos la capa de fondo */
.background-layer { display: none; }

/* -------------------------------------------------- */
/* CONTENEDOR PRINCIPAL (ESTRUCTURA DE APLICACIÓN) */
/* -------------------------------------------------- */
.registro-container {
    display: block; 
    width: 100%;
    max-width: 500px; 
    min-height: 100vh; 
    background-color: var(--color-bg-light-gray); 
    box-shadow: none; 
    border-radius: 0; 
}

/* HEADER INTEGRADO (Parte superior con logo y slogans) */
.app-header-integrated {
    background-color: var(--color-bg-light-gray);
    width: 100%;
    padding: 40px 20px 30px; /* ✅ Más aire arriba y abajo del logo */
    display: block; 
    text-align: center; 
    color: var(--color-text-dark); 
}
.app-header-integrated img {
    width: 200px; /* ✅ Logo grande */
    margin-bottom: 20px; 
    margin-top: 20px; 
    filter: none; 
}
.app-header-integrated h2.app-title {
    font-size: 28px; 
    color: var(--color-text-dark);
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}
.app-header-integrated p.app-accent {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-accent-red-motorola); /* ✅ Aplicamos el nuevo color rojo */
    margin-top: 10px;
}
.app-header-integrated p.app-slogan { 
    font-size: 16px;
    color: var(--color-text-dim);
    margin-bottom: 5px;
}


/* SECCIÓN DEL FORMULARIO (Cuerpo principal) */
.form-section-full {
    background-color: var(--color-bg-light-gray); 
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Estilo para las tarjetas (Cards) - Neumórfico */
.form-card {
    background-color: var(--color-bg-medium-gray);
    padding: 20px;
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-light); 
    margin-bottom: 35px; /* ✅ Más espacio entre tarjetas */
}
.form-card:active {
    box-shadow: var(--shadow-inset); 
}

/* TÍTULOS Y SUBTÍTULOS */
h1 {
    font-size: 24px;
    color: var(--color-text-dark); 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: left;
}
.subtitulo {
    color: var(--color-text-dim);
    margin-bottom: 25px;
    font-size: 15px;
    text-align: left;
}
h3 { /* Títulos dentro de tarjetas (Ej: Identificación y Contacto) */
    color: var(--color-text-dark);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px; /* ✅ Más espacio después del título de sección */
    text-align: left;
}
label {
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 10px; /* ✅ Más espacio entre label e input */
    font-size: 15px;
    display: block;
    text-align: left;
}

/* INPUTS y SELECTS (Estilo Neumórfico Inset) */
input[type="text"], input[type="email"], select, input[type="date"], input[type="file"] {
    width: 100%;
    padding: 14px 15px; 
    border: none;
    background-color: var(--color-bg-light-gray); 
    color: var(--color-text-dark);
    border-radius: 10px; 
    box-sizing: border-box;
    box-shadow: var(--shadow-inset); /* Sombra interna para efecto hundido */
    margin-bottom: 25px; /* ✅ Más espacio después del input */
    transition: all 0.2s ease-in-out;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, input[type="date"]:focus, input[type="file"]:focus {
    background-color: var(--color-bg-light-gray);
    box-shadow: var(--shadow-inset);
    outline: none;
}

/* BOTONES (Morado Motorola Elevado) */
button {
    width: 100%;
    padding: 18px; 
    /* Cambiamos el color de fondo sólido por un degradado */
    background: linear-gradient(135deg, var(--color-accent-purple-motorola-light) 0%, var(--color-accent-purple-motorola-dark) 100%); /* ✅ Degradado */
    color: white; 
    font-weight: 700;
    border: none;
    border-radius: var(--border-radius-base); 
    margin-top: 30px;
    box-shadow: var(--shadow-light); 
    transition: all 0.3s ease; /* ✅ Transición más suave para el hover */
    cursor: pointer;
}
button:hover {
    /* Para el hover, podemos invertir el degradado o usar uno ligeramente diferente */
    background: linear-gradient(135deg, var(--color-accent-purple-motorola-dark) 0%, var(--color-accent-purple-motorola-light) 100%); /* ✅ Degradado inverso o más oscuro en hover */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada en hover */
    transform: translateY(-2px); /* Un sutil efecto de elevación al hacer hover */
}

/* Otros elementos */
.checkbox-row {
    margin-top: 10px;
    margin-bottom: 0;
}
.error { background-color: #f2dede; color: var(--color-error); border: 1px solid #ebccd1; }
.success { background-color: #dff0d8; color: var(--color-success); border: 1px solid #d6e9c6; }


/* -------------------------------------------------- */
/* MEDIA QUERIES (Responsividad) */
/* -------------------------------------------------- */
@media (min-width: 769px) {
    .registro-container {
        min-height: auto; 
        max-width: 600px;
        border-radius: var(--border-radius-base);
        box-shadow: var(--shadow-light);
    }
    /* Ocultar el header integrado en desktop si es una sola tarjeta */
    .app-header-integrated {
        padding-top: 60px;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--color-border-subtle);
    }
    .form-section-full {
        padding: 40px;
    }
}