/* ==========================================================================
   ESTILOS DE AUTENTICACIÓN / CUENTAS (LOGIN, RESET PASSWORD, ETC.)
   Plantilla base: templates/account/base_account.html
   ========================================================================== */

/* Fondo general de la vista de login con degradado del Hero y forma decorativa de la landing */
body.login {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(135deg, #00a884 0%, #007c66 50%, #005b4d 100%) !important;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Decoración original de la landing (bl-shape.png) */
body.login::after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    background-image: url("../../images/saasio/bl-shape.6cea421a89bb.png");
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
}

/* ==========================================================================
   Animación de olas del Hero de la Landing (.waveAnimation)
   ========================================================================== */
@keyframes move_wave_left {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.waveWrapper {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
}

.bgTop {
    z-index: 15;
    opacity: 0.5;
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}

.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    transform-origin: center bottom;
    will-change: transform;
}

/* Primera ola visible (fija y estática en la parte superior del conjunto) */
.waveTop {
    width: 100% !important;
    background-size: 100% 110px !important;
    background-repeat: repeat-x !important;
    background-position: center bottom !important;
    animation: none !important;
    transform: none !important;
}

.waveMiddle {
    background-size: 1920px 125px;
    animation: move_wave_left 11s linear infinite;
}

/* Reactivada con animación fluida */
.waveBottom {
    background-size: 1920px 120px;
    animation: move_wave_left 18s linear infinite;
}

/* ==========================================================================
   Contenedor y tarjeta de login (Glassmorphism)
   ========================================================================== */
.auth-wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 440px;
    padding: 30px 16px;
    margin: auto;
}

.brand-header {
    text-align: center;
    margin-bottom: 24px;
}

.brand-header img {
    max-height: 52px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}

body.contrast-image .login-container {
    background: rgba(0, 48, 40, 0.55) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    padding: 38px 32px !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    color: #ffffff !important;
}

body.contrast-image .login-container .title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Campos de entrada / inputs */
body.login .login-container input,
body.login .login-container input.form-control {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    height: 48px !important;
    padding: 10px 42px 10px 16px !important;
    font-size: 14px !important;
    transition: all 0.25s ease !important;
}

body.login .login-container input::placeholder,
body.login .login-container input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

body.login .login-container input:focus,
body.login .login-container input.form-control:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.35) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    outline: none !important;
}

/* Evitar que el autocompletado pinte el texto de negro o fondo blanco */
body.login .login-container input:-webkit-autofill,
body.login .login-container input:-webkit-autofill:hover,
body.login .login-container input:-webkit-autofill:focus,
body.login .login-container input:-webkit-autofill:active,
body.login .login-container input.form-control:-webkit-autofill,
body.login .login-container input.form-control:-webkit-autofill:hover,
body.login .login-container input.form-control:-webkit-autofill:focus,
body.login .login-container input.form-control:-webkit-autofill:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 77, 64, 0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(0, 77, 64, 0.95) inset !important;
    border: 1px solid rgba(45, 212, 191, 0.45) !important;
    transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s !important;
    caret-color: #ffffff !important;
}

/* Compatibilidad estándar para navegadores modernos */
body.login .login-container input:autofill {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(0, 77, 64, 0.95) inset !important;
}

/* Iconos de los inputs con z-index para que no queden tapados */
body.login .login-container .with-icon-over-input {
    position: relative !important;
}

body.login .login-container .with-icon-over-input>.fa,
body.login .login-container .with-icon-over-input>.fas,
body.login .login-container .with-icon-over-input>i {
    position: absolute !important;
    right: 15px !important;
    top: 16px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.2s ease !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Botón para mostrar / ocultar contraseña
   ========================================================================== */
.btn-toggle-password {
    position: absolute !important;
    right: 8px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    z-index: 10 !important;
}

.btn-toggle-password:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.btn-toggle-password:active {
    transform: scale(0.92) !important;
}

.btn-toggle-password i {
    position: static !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.btn-toggle-password:hover i {
    color: #ffffff !important;
}

/* ==========================================================================
   Botones principales y enlaces
   ========================================================================== */
body.contrast-image .login-container .btn-success,
body.contrast-image .login-container .btn {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 48px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #007c66 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.contrast-image .login-container .btn-success:hover,
body.contrast-image .login-container .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.35) !important;
    background: #2dd4bf !important;
    color: #004d40 !important;
}

/* ==========================================================================
   Checkbox estilizado y limpio (sin artefactos de selección)
   ========================================================================== */
body.login .login-container .checkbox {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: auto !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    position: static !important;
}

body.login .login-container .checkbox label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    cursor: pointer !important;
    user-select: none !important;
    outline: none !important;
}

body.login .login-container .checkbox input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    accent-color: #2dd4bf !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    outline: none !important;
}

body.contrast-image .login-container a,
body.contrast-image .login-container .secondaryAction {
    color: #99f6e4 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.contrast-image .login-container a:hover,
body.contrast-image .login-container .secondaryAction:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}