/*
 * Estilos personalizados en CSS puro para el modal de registro/inicio de sesión de Cittapet.
 * Cada sección está documentada en español para facilitar el mantenimiento.
 */

 #cittapet-signup-static-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem 0;
}

#cittapet-modal-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#cittapet-modal-content {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 10px 32px 0 rgba(0,0,0,0.15);
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    position: relative;
}

#cittapet-modal-content-register {
    align-self: flex-start;
    margin-top: 1rem;
    text-align: right;
}

#cittapet-modal-content-prueba {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    width: 100%;
}


/* Fondo del modal */
#cittapet-modal-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}
 
/* Títulos y textos */
#cittapet-bienvenida {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}
#cittapet-bienvenida span {
    font-weight: 700;
    color: #e53945;
    width: 100%;
    text-align: left;
}
#cittapet-login-title {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    width: 100%;    
    margin-left: 0;
}
#cittapet-no-account {
    font-size: 0.95rem;
    color: #6b7280;
 }
 
#cittapet-signup-link {
    color: #e53945 !important; /* Forzar el color rojo */
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.95rem;
    cursor: pointer;
}

#cittapet-modal-content-google-auth {
    display: flex;
    justify-content: center;
    width: 100%;
}

#cittapet-divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1rem;
}

#cittapet-divider-line {
    flex: 0.75;
    height: 2px;
    background-color: #e5e5e5;
    opacity: 0.75;
}

/* Icono de Google */
#cittapet-google-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

/* Formulario de inicio de sesión */
#cittapet-signin-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: transparent !important; /* Forzar fondo transparente */
    padding-bottom: 1rem;
}
#cittapet-signin-form label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    background: none !important; /* Asegurar que las etiquetas no tengan fondo */
}

/* Inputs */
#cittapet-signin-form input[type="text"],
#cittapet-signin-form input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

#cittapet-signin-form input[type="text"]:focus,
#cittapet-signin-form input[type="password"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Contenedor del password */
#cittapet-username,
#cittapet-password {
    width: 100%;
    border: 1.5px solid #60a5fa;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
#cittapet-password {
    border-color: #d1d5db;
}
#cittapet-username:focus,
#cittapet-password:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px #60a5fa33;
}

#cittapet-password-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* Contenedor de input de contraseña con botón de visibilidad */
#cittapet-password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#cittapet-toggle-password {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 10px;
}

.cittapet-toggle-before-password {
    top: 50%;
    transform: translateY(-50%);
}

.cittapet-toggle-after-password {
    top: 20%;
    transform: translateY(-13%);
    color: red;
}

.cittapet-eye-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.2s ease;
}

.cittapet-eye-icon.hide {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

#cittapet-modal-content-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
    gap: 0.75rem;
    padding: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
}
/* Enlaces */
#cittapet-forgot-password,
#cittapet-signup-link {
    color: #e53945 !important;
    text-decoration: none;
    font-size: 0.9rem;
}

#cittapet-forgot-password:hover,
#cittapet-signup-link:hover {
    text-decoration: underline;
}

#cittapet-forgot-password {
    display: block;
    text-align: right;
}

/* Botón Iniciar sesión */

#cittapet-signin-btn-v2-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#cittapet-signin-btn-v2 {
    width: 70%;
    background: #e53945;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    /* padding: 1.1rem 0; */
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 4px 16px 0 rgba(229,57,69,0.15);
    transition: background 0.2s;
    cursor: pointer;
}
#cittapet-signin-btn-v2:hover {
    background: #c62836;
}

/* Sección de registro */
#cittapet-modal-content-register {
    text-align: left;
    margin-left: 2rem;
}

#cittapet-no-account {
    color: #7f8c8d;
    margin-bottom: 0.5rem;
}

/* Estados de carga */
.cittapet-loading {
    opacity: 0.6;
    pointer-events: none;
}

.cittapet-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #3498db;
    border-radius: 50%;
    border-top-color: transparent;
    animation: cittapet-spin 1s linear infinite;
}

@keyframes cittapet-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 480px) {
    #cittapet-signup-static-container {
        margin: 0.5rem;
        padding: 0.5rem;
    }

    #cittapet-modal-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
    }

    #cittapet-modal-content {
        padding: 1rem;
        max-width: 98vw;
        border-radius: 1rem;
    }

    #cittapet-login-title {
        font-size: 2.75rem;
        margin-bottom: 0.5rem;
        word-break: break-word;
    }

    #cittapet-bienvenida {
        font-size: 1rem;
        margin-bottom: 0.3rem;
    }

    /* Google button styles moved to google-auth.css - removed to prevent conflicts */

    #cittapet-signin-form {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    #cittapet-signin-form label {
        font-size: 0.95rem;
    }

    #cittapet-signin-btn-v2 {
        width: 100%;
        font-size: 1rem;
        padding: 0.8rem 0;
    }

    #cittapet-modal-content-register {
        margin-left: 0;
        margin-top: 0.5rem;
        font-size: 0.75rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 0.2rem;
        margin-bottom: 1rem;
    }

    #cittapet-no-account {
        margin-bottom: 0 !important;
    }
 
}

/*
 * Archivo de estilos adicional para el modal de Cittapet.
 * Agrega aquí estilos personalizados si es necesario.
 */