/* Armonización de la página de login con la identidad visual de TarjaDoc.
 *
 * Sin build step: este archivo se carga después del CSS del vendor (NobleUI)
 * y sobrescribe puntualmente el layout auth del theme para traerlo a la paleta
 * de la landing (acento azul petróleo #0b4f6c, tinta negra sobre blanco, halos
 * #dcebf2/#cfe3ec, radios y sombras suaves). No se editan los archivos del
 * vendor: todo el arreglo vive aquí.
 */

:root {
    --tj-accent: #0b4f6c;
    --tj-accent-deep: #08344a;
    --tj-accent-soft: rgba(11, 79, 108, 0.10);
    --tj-radius: 0.25rem;
    --tj-radius-lg: 0.5rem;
    --tj-radius-xl: 1rem;
    --tj-shadow-soft: 0 24px 60px -24px rgba(8, 52, 74, 0.35);
}

/* Fondo de página: el gris plano del theme se reemplaza por el motivo de marca
   (hero-bg.svg) con un velo claro encima para mantener la zona del formulario
   en blanco y legible. */
.main-wrapper {
    background-color: #eef4f7;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.75) 55%, #f4f8fa 100%),
        radial-gradient(46rem 30rem at 12% 0%, rgba(11, 79, 108, 0.08), transparent 60%),
        radial-gradient(46rem 30rem at 88% 100%, rgba(207, 227, 236, 0.55), transparent 60%),
        url("/static/img/hero-bg.svg");
    background-size: cover;
    background-position: center;
}

/* Panel lateral: reemplaza el placeholder de placehold.co por la imagen de
   marca ad-hoc, cubriendo todo el alto de la tarjeta. */
.auth-page .auth-side-wrapper {
    background-image: url("/static/img/auth-side-bg.svg");
    background-size: cover;
    background-position: center;
    min-height: 460px;
}

/* Tarjeta: radio y sombra propios, con recorte para que el panel lateral
   respete el redondeado de la tarjeta. */
.auth-page .card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--tj-radius-xl);
    box-shadow: var(--tj-shadow-soft);
    overflow: hidden;
}

/* Logo real: alineado a la izquierda, con la altura de marca y blend para que
   el fondo blanco del PNG desaparezca sobre el formulario. */
.auth-form-wrapper .auth-logo {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.auth-form-wrapper .auth-logo img {
    display: block;
    height: 46px;
    width: auto;
    mix-blend-mode: multiply;
}

/* Jerarquía: título del formulario en tinta, subtítulo en gris. */
.auth-form-wrapper h5 {
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Foco de los inputs alineado al acento de la paleta. */
.auth-page .form-control:focus {
    border-color: var(--tj-accent);
    box-shadow: 0 0 0 0.25rem var(--tj-accent-soft);
}

/* Botón primario alineado a la paleta (acento → acento profundo). */
.auth-page .btn-primary {
    --bs-btn-bg: var(--tj-accent);
    --bs-btn-border-color: var(--tj-accent);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--tj-accent-deep);
    --bs-btn-hover-border-color: var(--tj-accent-deep);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--tj-accent-deep);
    --bs-btn-active-border-color: var(--tj-accent-deep);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--tj-accent);
    --bs-btn-disabled-border-color: var(--tj-accent);
    --bs-btn-focus-shadow-rgb: 11, 79, 108;
}