.container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 24px;
            text-align: center;
        }

        /* Estilos del grupo de formulario */
        .form-grupo {
            margin-bottom: 16px;
        }

        .form-grupo label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #374151;
        }

        /* Contenedor relativo para posicionar el icono absolutamente */
        .input-container {
            position: relative;
        }

        .input-container input {
            width: 100%;
            padding: 10px 40px 10px 12px; /* Espacio para el icono a la derecha */
            border: 2px solid #d1d5db;
            border-radius: 8px;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }

        .input-container input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
        }

        /* ------------------ ESTILOS DE VALIDACIÓN ------------------ */

        /* BORDES DE FEEDBACK */
        .input-container input.success-border {
            border-color: #10b981 !important; /* Verde */
        }

        .input-container input.error-border {
            border-color: #ef4444 !important; /* Rojo */
        }

        /* MENSAJES DE FEEDBACK */
        .feedback-message {
            margin-top: 4px;
            font-size: 0.875rem;
            min-height: 20px; /* Para evitar CLS al cargar el mensaje */
        }

        .feedback-message.success-text {
            color: #10b981; /* Verde */
        }

        .feedback-message.error-text {
            color: #ef4444; /* Rojo */
        }

        /* ICONOS DE VALIDACIÓN */
        .validation-icon {
            position: absolute;
            right: 10px; /* Posiciona el icono dentro del input-container */
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            pointer-events: none; /* Asegura que el icono no interfiera con el click en el input */
        }

        .validation-icon-email {
            position: absolute;
            right: 10px; /* Posiciona el icono dentro del input-container */
            top: 70%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            pointer-events: none; /* Asegura que el icono no interfiera con el click en el input */
        }

        .validation-icon-svg {
            width: 100%;
            height: 100%;
        }

        /* SPINNER DE CARGA (LOADING) */
        .spinner {
            animation: rotate 1.5s linear infinite;
        }

        .spinner .path {
            stroke: #3b82f6; /* Azul */
            stroke-linecap: round;
            animation: dash 1.5s ease-in-out infinite;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 150;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -35;
            }
            100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -124;
            }
        }


/* ------------------------------------------- */
/* Estilos para el Icono y Feedback en Línea */
/* ------------------------------------------- */

/* 1. Contenedor del input para permitir el posicionamiento absoluto del icono */
.form-grupo .input-container {
    position: relative;
    width: 100%;
}

/* 2. Posicionamiento y TAMAÑO FIJO del icono dentro del input-container */
/* Usamos !important para anular posibles reglas CSS de estilos_portada.css */
/*
.validation-icon-email {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important; /* Ajuste para pegarlo más al borde derecho */
    transform: translateY(-50%) !important;
    width: 24px !important; /* TAMAÑO PEQUEÑO FORZADO */
    height: 24px !important; /* TAMAÑO PEQUEÑO FORZADO */
    pointer-events: none; 
    z-index: 10; /* Aseguramos que esté por encima de otros elementos */
}*/

/* 3. Estilos de los iconos (SVGs) - CRÍTICO: HACER QUE EL SVG SE AJUSTE AL 100% DEL CONTENEDOR */
.validation-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 4. Estilos de borde para el input */
#nombre_usuario.success-border {
    border: 2px solid green;
}

#nombre_usuario.error-border {
    border: 2px solid red;
}

/* 5. Estilos para el mensaje de feedback */
.feedback-message {
    margin-top: 5px;
    font-size: 0.9em;
    padding-left: 2px;
    min-height: 18px; 
}

.feedback-message.success-text {
    color: green;
}

.feedback-message.error-text {
    color: red;
    font-weight: bold;
}

/* 6. Estilo del spinner de carga */
.spinner {
    animation: rotate 2s linear infinite;
    z-index: 2;
    width: 20px;
    height: 20px;
}

.spinner .path {
    stroke: #888;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}