/* Pantalla de login — identidad institucional CETPRO SHADAY (solo navy/blanco,
   Fraunces + Manrope). Estructura de 2 columnas inspirada en un layout de
   referencia externo (21st.dev/sign-in), recreada con Bootstrap 5 + CSS
   propio y adaptada a la paleta ya usada en Assets/css/public/home.css. */

:root {
    --navy: #0A1533;
    --navy-light: #14204a;
    --white: #ffffff;
    --gray-text: #4a4f5c;
}

html,
body {
    height: 100%;
}

/* Degradado casi imperceptible (tonos gris-azulado muy claros, inspirados en
   el navy del sistema pero aclarados al extremo) que se anima muy lento para
   dar sensacion de vida sin distraer de la lectura. Cubre TODA la pantalla
   (el body), no solo la columna del formulario */
.cetpro-login-body {
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    color: var(--gray-text);
    overflow-x: hidden;
    background: linear-gradient(120deg, #ffffff, #f4f6fa, #ffffff, #e8ecf3);
    background-size: 300% 300%;
    animation: cetproDegradadoSutil 18s ease infinite;
}

@keyframes cetproDegradadoSutil {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cetpro-login-body {
        animation: none;
    }
}

/* La clase "login-content" se mantiene en el wrapper solo como gancho para el
   JS de flip ya existente ($('.login-content [data-toggle="flip"]')); se
   anula aqui su layout heredado (flex-column centrado de main.css) para que
   no interfiera con la grilla de Bootstrap de este nuevo diseño */
.login-content.cetpro-login-wrapper {
    display: block;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.cetpro-login-wrapper>.row {
    min-height: 100vh;
    position: relative;
}

/* --- Columna del formulario --- */
.cetpro-login-form-col {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 24px;
}

.cetpro-login-form-inner {
    width: 100%;
    max-width: 420px;
}

.cetpro-login-logo {
    margin-bottom: 36px;
}

.cetpro-login-logo-img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
}

.cetpro-login-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: var(--navy);
    font-size: 2.1rem;
    margin-bottom: 0.35rem;
}

.cetpro-login-title-sm {
    font-size: 1.5rem;
}

.cetpro-login-subtitle {
    color: var(--gray-text);
    font-size: 0.98rem;
    margin-bottom: 1.75rem;
}

.cetpro-login-box .form-label {
    font-weight: 600;
    color: var(--navy);
    font-size: 0.9rem;
}

.cetpro-input {
    padding: 0.65rem 0.9rem;
    border: 1px solid #d9dce3;
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
}

.cetpro-input:focus {
    border-color: var(--navy-light);
    box-shadow: 0 0 0 0.2rem rgba(10, 21, 51, 0.15);
}

/* Icono a la izquierda, dentro del recuadro del input (misma pieza visual:
   fondo blanco, sin borde grueso entre el icono y el campo de texto) */
.cetpro-input-icon {
    background-color: var(--white);
    border: 1px solid #d9dce3;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: var(--gray-text);
    padding: 0.65rem 0.9rem;
}

.cetpro-username-group .cetpro-input {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cetpro-password-group .cetpro-input {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.cetpro-toggle-password {
    border: 1px solid #d9dce3;
    border-left: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--white);
    color: var(--gray-text);
}

.cetpro-toggle-password:hover {
    color: var(--navy);
}

.cetpro-login-utility .form-check-label {
    font-size: 0.92rem;
    color: var(--gray-text);
}

.cetpro-link-accent {
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.cetpro-link-accent:hover {
    color: var(--navy-light);
    text-decoration: underline;
}

.cetpro-btn-submit {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    font-weight: 700;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.cetpro-btn-submit:hover {
    background-color: var(--navy-light);
    border-color: var(--navy-light);
    color: var(--white);
    transform: translateY(-1px);
}

.cetpro-login-back a {
    color: var(--gray-text);
    font-size: 0.9rem;
    text-decoration: none;
}

.cetpro-login-back a:hover {
    color: var(--navy);
}

.cetpro-login-help {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.88rem;
    color: var(--gray-text);
}

.cetpro-login-help a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
}

.cetpro-login-help a:hover {
    color: var(--navy-light);
    text-decoration: underline;
}

/* Iconos de redes sociales (SVG inline con los logos oficiales actuales de
   cada marca): un solo tono navy (sin colores de marca), con espaciado
   uniforme y un leve efecto hover, centrados en la columna */
.cetpro-login-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 1.25rem;
}

.cetpro-login-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    opacity: 0.75;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.cetpro-login-social a svg {
    width: 19px;
    height: 19px;
}

.cetpro-login-social a:hover {
    color: var(--navy-light);
    opacity: 1;
    transform: scale(1.15);
}

/* Flip entre login y "olvidaste tu contraseña" (mismo mecanismo ya usado,
   solo restilizado) */
.cetpro-login-box {
    position: relative;
}

.cetpro-login-box .forget-form {
    display: none;
}

.cetpro-login-box.flipped .login-form {
    display: none;
}

.cetpro-login-box.flipped .forget-form {
    display: block;
}

/* --- Columna de identidad institucional --- */
/* Foto real de la sede del CETPRO (Assets/img/sede-cetpro-shaday.jpg) cubriendo
   todo el panel, con un degradado navy semi-transparente encima para que el
   texto blanco de la tarjeta flotante siga siendo legible sobre la foto */
/* La columna en si solo se encarga de ocupar el 50% de la fila (layout);
   el margen/redondeo/foto de fondo van en el div interno .cetpro-login-image-inner
   para no afectar el ancho flex de la columna (un margin en el propio item flex
   suma al ancho de la linea y puede hacer que la fila haga wrap y las columnas
   se apilen incluso en pantallas grandes) */
.cetpro-login-image-col {
    height: 100vh;
    min-height: 100vh;
}

.cetpro-login-image-inner {
    position: relative;
    height: calc(100vh - 32px);
    width: 100%;
    margin: 16px 16px 16px 0;
    padding: 48px;
    border-radius: 22px;
    background-image: linear-gradient(180deg, rgba(10, 21, 51, 0.35) 0%, rgba(10, 21, 51, 0.55) 55%, rgba(10, 21, 51, 0.85) 100%),
        url('../../../img/sede-cetpro-shaday.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cetpro-login-quote-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 2rem;
    max-width: 440px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.cetpro-quote-mark {
    font-family: 'Fraunces', serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--white);
    margin-bottom: 0.25rem;
}

.cetpro-quote-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.cetpro-quote-author {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 0;
}

/* Shadito: se posiciona sobre el borde entre el formulario y la foto (misma
   costura de las 2 columnas), con una animacion sutil de "flote" para que se
   sienta viva sin distraer del formulario. z-index por encima de ambas
   columnas para que quede recortando visualmente ambos paneles */
.cetpro-login-mascota {
    position: absolute;
    left: 44.6%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: clamp(160px, 15vw, 260px);
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 18px 30px rgba(10, 21, 51, 0.35));
    pointer-events: none;
}

@keyframes cetproShaditoFlote {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-2deg);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-10px) rotate(2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cetpro-login-mascota {
        animation: none;
    }
}

@media (max-width: 1200px) {
    .cetpro-login-mascota {
        width: clamp(130px, 13vw, 200px);
    }
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .cetpro-login-form-col {
        min-height: 100vh;
        padding: 32px 20px;
    }

    .cetpro-login-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 420px) {
    .cetpro-login-logo-img {
        max-width: 220px;
    }

    .cetpro-login-title {
        font-size: 1.6rem;
    }
}