/* --- Importación de Fuente y Variables de Color --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --color-principal: #6a11cb;
    --color-secundario: #2575fc;
    --gradiente-principal: linear-gradient(90deg, var(--color-principal) 0%, var(--color-secundario) 100%);
    --color-fondo: #121218;
    --color-texto: #e0e0e0;
    --color-texto-secundario: #a0a0a0;
    --color-superficie: rgba(38, 38, 45, 0.6); /* Color para el efecto cristal */
    --color-borde: rgba(255, 255, 255, 0.1);
}


/* --- Estilos Generales y de Fondo --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-fondo);
    background-image: radial-gradient(circle at 10% 20%, rgba(106, 17, 203, 0.25), transparent 35%),
                      radial-gradient(circle at 90% 80%, rgba(37, 117, 252, 0.25), transparent 40%);
    margin: 0;
    padding: 40px 20px;
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box; /* Añadido para mejor control de tamaño */
}

.site-header {
    margin-bottom: 30px;
    text-align: center;
}

.logo {
    max-width: 220px; /* Logo más pequeño */
    height: auto;
}

/* --- Estilo Glassmorphism para el Contenedor del Formulario --- */
.form-container {
    background: var(--color-superficie);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-borde);
    width: 100%;
    max-width: 700px;
    box-sizing: border-box; /* Añadido para mejor control de tamaño */
}

/* --- Estilos de Pestañas --- */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 30px;
}

.tab-link {
    background: none; border: none; padding: 15px 20px;
    cursor: pointer; font-size: 16px; font-weight: 500;
    color: var(--color-texto-secundario); position: relative;
    transition: color 0.3s ease; border-bottom: 3px solid transparent;
    text-align: center; flex-grow: 1; /* Para que ocupen espacio equitativo */
}

.tab-link:hover { color: var(--color-texto); }

.tab-link.active {
    color: var(--color-texto);
    border-bottom: 3px solid var(--color-secundario);
}

.form-content { display: none; }
.form-content.active { display: block; }
h2 {
    text-align: center; margin-bottom: 25px;
    font-weight: 600; font-size: 24px; /* Tamaño de fuente base */
}

/* --- Estilos de Formularios --- */
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; margin-bottom: 8px;
    font-weight: 500; color: var(--color-texto-secundario);
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="password"], /* <-- AÑADIDO AQUÍ */
.form-group textarea {
    width: 100%; padding: 12px;
    border: 1px solid var(--color-borde); border-radius: 8px;
    box-sizing: border-box; background-color: rgba(0, 0, 0, 0.2);
    color: var(--color-texto);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.3);
}
.required { color: #ff4d4d; font-weight: bold; margin-left: 3px; }

/* --- Estilos para el Input de Archivo Personalizado --- */
.file-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    height: 44px; /* Altura consistente con otros inputs */
    transition: border-color 0.3s, box-shadow 0.3s;
}
.file-input-wrapper:focus-within {
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.3);
}
.file-input-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Oculta el input original */
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.file-custom-button {
    background-image: var(--gradiente-principal);
    color: white;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 500;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-position 0.3s ease;
    flex-shrink: 0; /* Evita que el botón se encoja */
}
.file-input-wrapper:hover .file-custom-button {
    background-position: right center;
}
.file-name-display {
    padding: 0 15px;
    color: var(--color-texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Para nombres de archivo largos */
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    line-height: 44px; /* Centra verticalmente el texto */
}

/* --- Estilos para previsualización de archivos --- */
.preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.preview-item { position: relative; width: 100px; height: 100px; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-borde); }
.delete-btn {
    position: absolute; top: -8px; right: -8px; background: #ff4d4d;
    color: white; border: 2px solid var(--color-fondo); border-radius: 50%;
    width: 24px; height: 24px; cursor: pointer; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: transform 0.2s;
}
.delete-btn:hover { transform: scale(1.1); }

/* --- Botón de Enviar --- */
button[type="submit"] {
    width: 100%; padding: 15px; border: none; border-radius: 8px;
    font-size: 18px; font-weight: 600; color: white; cursor: pointer;
    transition: all 0.3s ease;
}
button[type="submit"]:disabled {
    background-color: #333; color: #777; cursor: not-allowed;
}
button[type="submit"]:not(:disabled) {
    background-image: var(--gradiente-principal);
    background-size: 200% auto;
    box-shadow: 0 4px 15px 0 rgba(80, 50, 200, 0.4);
}
button[type="submit"]:not(:disabled):hover {
    background-position: right center; transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(80, 50, 200, 0.5);
}

/* --- Pantalla de Carga --- */
.loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
.loader { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; perspective: 780px; }
.text { font-size: 20px; font-weight: 700; color: #cecece; z-index: 10; }
.load-inner { position: absolute; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; }
.load-inner.load-one { left: 0%; top: 0%; border-bottom: 3px solid #5c5edc; animation: rotate1 1.15s linear infinite; }
.load-inner.load-two { right: 0%; top: 0%; border-right: 3px solid #9147ff; animation: rotate2 1.15s 0.1s linear infinite; }
.load-inner.load-three { right: 0%; bottom: 0%; border-top: 3px solid #3b82f6; animation: rotate3 1.15s 0.15s linear infinite; }
@keyframes rotate1 { 0% {transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);} 100% {transform: rotateX(45deg) rotateY(-45deg) rotateZ(360deg);}}
@keyframes rotate2 { 0% {transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);} 100% {transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg);}}
@keyframes rotate3 { 0% {transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);} 100% {transform: rotateX(-60deg) rotateY(0deg) rotateZ(360deg);}}

/* --- Notificación de Éxito --- */
.success-notification {
    position: fixed; top: 20px; right: 20px;
    background: linear-gradient(90deg, #1d976c, #93f9b9); color: #000;
    font-weight: 500; padding: 15px 25px; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 1001;
    opacity: 0; visibility: hidden; transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.success-notification.show {
    opacity: 1; visibility: visible; transform: translateX(0);
}


/* --- Diseño Responsivo para Móviles y Tablets --- */
@media (max-width: 768px) {
    body {
        padding: 20px 15px; /* Menos espacio a los lados */
    }
    .form-container {
        padding: 25px 20px; /* Menos espacio interno en el formulario */
    }
    h2 {
        font-size: 20px; /* Título un poco más pequeño */
    }
    .tab-link {
        font-size: 14px; /* Texto de pestañas más pequeño */
        padding: 12px 5px;
    }
    .preview-item {
        width: 80px; /* Vistas previas de imagen más pequeñas */
        height: 80px;
    }
    .success-notification {
        width: calc(100% - 30px); /* Ocupa casi todo el ancho */
        top: 15px;
        left: 15px;
        right: 15px;
        transform: translateY(-200%); /* Cambia la animación para que aparezca desde arriba */
    }
    .success-notification.show {
        transform: translateY(0);
    }
}