/* ==========================================================================
   Codfy — LOGIN a pantalla completa.

   Se carga SOLO en las cuatro pantallas que comparten `web.login_layout`
   (/web/login, /web/signup, /web/reset_password y /web/login_successful);
   el enlace vive dentro de la propia plantilla, igual que shop.css.

   OJO con los nombres de clase: esta hoja se carga DESPUÉS de style.css, así
   que cualquier clase repetida pisaría a la del sitio entero. Por eso todo lo
   propio va bajo el prefijo `cf-login`.

   El formulario de dentro es markup NATIVO de Odoo (Bootstrap): las reglas
   que lo visten se apoyan en sus clases (.form-control, .btn-primary,
   .list-group-item…). Donde hay un `!important` es porque Bootstrap lo usa
   primero — está anotado caso por caso.
   ========================================================================== */

/* El sitio reserva 72px arriba para el navbar fijo (`#wrapwrap > main` en
   style.css). Aquí no hay navbar, así que ese hueco sobra. La clase la cuelga
   `pageName` desde la plantilla. */
#wrapwrap.cf-login-page > main { padding-top: 0; }

/* La reserva permanente de barra de desplazamiento del <head> deja una franja
   blanca a la derecha en una pantalla que, por diseño, no hace scroll. Se
   desactiva solo aquí. El `:has` lleva un id dentro, así que gana de sobra a
   la regla `html, body` de la etiqueta <style> en línea. */
html:has(#wrapwrap.cf-login-page),
body:has(#wrapwrap.cf-login-page) { scrollbar-gutter: auto; }

.cf-login {
    /* Tinta del logotipo: el azul de la marca cierra en este morado oscuro,
       que es el mismo del texto "Codfy" del logo. No está en style.css
       porque hasta ahora el sitio no lo usaba. */
    --cf-login-ink:   #0e0d32;
    --cf-login-line:  #dfe3ea;   /* borde de campos en reposo */
    --cf-login-soft:  #98a1b0;   /* textos de apoyo y placeholders */
    --cf-login-r:     14px;      /* radio único de campos y botones */
    --cf-login-h:     52px;      /* alto único de campos y botón principal */

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;          /* en móvil descuenta la barra del navegador */
    display: grid;
    /* El panel de marca manda un poco más que el formulario: el formulario
       tiene ancho máximo propio y el aire de sobra no le sirve de nada. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--cf-bg);
}

/* ==========================================================================
   VOLVER AL SITIO — única salida, porque esta pantalla no lleva navbar
   ========================================================================== */
.cf-login__back {
    position: absolute;
    z-index: 3;
    top: clamp(20px, 2.4vw, 34px);
    left: clamp(20px, 2.4vw, 34px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .78);
    transition: color .18s ease, transform .18s ease;
}
.cf-login__back:hover {
    color: var(--cf-on-primary);
    transform: translateX(-3px);
}

/* Flecha dibujada con dos bordes en vez de un icono: no depende de
   FontAwesome y hereda el color del enlace sola. */
.cf-login__backarrow {
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 1.5px 0 0 1.5px;
    transform: rotate(-45deg);
}

/* ==========================================================================
   PANEL DE MARCA (izquierda)
   ========================================================================== */
.cf-login__brand {
    position: relative;
    overflow: hidden;            /* recorta el arco, que sale de la caja */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(32px, 4vw, 64px);
    color: var(--cf-on-primary);
    background: linear-gradient(155deg,
                                var(--cf-primary) 0%,
                                var(--cf-primary-2) 46%,
                                var(--cf-login-ink) 100%);
}

/* Claridad extra en la esquina superior, para que el degradado no se lea
   plano detrás del logotipo. */
.cf-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 18% 8%,
                                rgba(255, 255, 255, .16), transparent 70%);
    pointer-events: none;
}

/* El cuarto de anillo del hero, a gran escala. `currentColor` con el color
   puesto aquí: así el blanco translúcido se ajusta en un solo sitio. */
.cf-login__arc {
    position: absolute;
    left: -20%;
    bottom: -30%;
    width: 84%;
    color: rgba(255, 255, 255, .085);
    pointer-events: none;
}

/* Las tres filas del panel van por encima del arco y del velo. */
.cf-login__brandtop,
.cf-login__brandmid,
.cf-login__brandfoot { position: relative; z-index: 1; }

/* El logotipo es a color y aquí cae sobre azul: se pasa a blanco con un
   filtro en vez de mantener un segundo archivo que habría que actualizar
   cada vez que cambie la marca. `brightness(0)` lo aplana a negro y
   `invert(1)` lo levanta a blanco puro. */
.cf-login__logo {
    display: block;
    width: auto;
    height: 34px;
    filter: brightness(0) invert(1);
}

/* Mismo tratamiento que los títulos del sitio: Altone Bold Oblique. */
.cf-login__claim {
    margin: 0 0 26px;
    font-size: clamp(28px, 2.7vw, 44px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.cf-login__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    max-width: 460px;
    font-size: clamp(14px, 1.05vw, 15.5px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
}
.cf-login__list li { position: relative; padding-left: 32px; }

/* Palomita en un disco, dibujada con pseudo-elementos: mismo motivo que la
   flecha de "Volver" — sin iconos externos y hereda el blanco del panel. */
.cf-login__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
}
.cf-login__list li::after {
    content: "";
    position: absolute;
    left: 6.5px;
    top: calc(.18em + 4.5px);
    width: 4px;
    height: 8px;
    border: solid var(--cf-on-primary);
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

.cf-login__brandfoot {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   COLUMNA DEL FORMULARIO (derecha)
   ========================================================================== */
.cf-login__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 56px);
}
.cf-login__box { width: 100%; max-width: 420px; }

/* El título va en SemiBold VERTICAL, no en la oblicua de los títulos del
   sitio: encabeza un formulario, y la itálica a este tamaño se lee peor
   justo donde el usuario tiene que fijarse. La oblicua se queda en el
   reclamo del panel, que sí es rótulo de marca. */
.cf-login__title {
    margin: 0 0 8px;
    font-size: clamp(26px, 2.1vw, 33px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cf-login-ink);
}
.cf-login__sub {
    margin: 0 0 32px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cf-muted);
}

/* ==========================================================================
   FORMULARIO NATIVO DE ODOO — reescritura visual sobre las clases Bootstrap
   ========================================================================== */

/* Bootstrap separa los grupos con `mb-3` (1rem !important). */
.cf-login .mb-3 { margin-bottom: 18px !important; }

.cf-login .form-label {
    align-items: center;
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .005em;
    color: var(--cf-login-ink);
}

.cf-login .form-control {
    width: 100%;
    height: var(--cf-login-h);
    padding: 0 16px;
    border: 1.5px solid var(--cf-login-line);
    border-radius: var(--cf-login-r);
    background: var(--cf-bg);
    font-family: var(--cf-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--cf-text);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cf-login .form-control::placeholder { color: var(--cf-login-soft); }
.cf-login .form-control:hover { border-color: #c9d0da; }
.cf-login .form-control:focus {
    outline: none;
    border-color: var(--cf-primary);
    box-shadow: 0 0 0 4px rgba(0, 83, 255, .14);
}

/* El campo de contraseña viene en un `.input-group` de Bootstrap: input y
   botón del ojo como hermanos en fila, con las esquinas partidas entre los
   dos. Aquí se convierte en UN solo campo con el botón encima, en absoluto.
   El !important del radio es inevitable: la regla de Bootstrap que cuadra
   las esquinas encadena cuatro `:not()` y pesa más que cualquier selector
   razonable de esta hoja. */
.cf-login .input-group {
    position: relative;
    display: block;
    margin-bottom: 0 !important;   /* Bootstrap trae `mb-1` */
}
.cf-login .input-group > .form-control {
    border-radius: var(--cf-login-r) !important;
    padding-right: 48px;           /* hueco del botón del ojo */
}
.cf-login .o_show_password {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;                    /* sobre el borde de foco del input */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: var(--cf-login-h);
    padding: 0;
    /* `.border` de Bootstrap declara el borde con !important. */
    border: 0 !important;
    border-radius: 0 var(--cf-login-r) var(--cf-login-r) 0;
    background: transparent;
    color: var(--cf-login-soft);
    transition: color .16s ease;
}
.cf-login .o_show_password:hover,
.cf-login .o_show_password:focus {
    background: transparent;
    color: var(--cf-primary);
}

/* Enlaces de texto: "Restablecer contraseña", "¿No tiene una cuenta?",
   "Usar otro usuario"… Todos llegan como `.btn.btn-link`. */
.cf-login .btn-link {
    padding: 0;
    border: 0;
    font-family: var(--cf-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cf-primary);
    text-decoration: none;
}
.cf-login .btn-link:hover {
    color: var(--cf-primary-2);
    text-decoration: underline;
}

/* Bloque de botones. Odoo lo trae con `d-grid` (display:grid !important),
   que aquí viene bien: el botón principal ocupa todo el ancho solo. */
.cf-login .oe_login_buttons {
    gap: 12px;
    padding-top: 24px !important;   /* Bootstrap: `pt-3` */
    margin-bottom: 0 !important;    /* Bootstrap: `mb-1` */
}
.cf-login .oe_login_buttons .btn-link { margin-top: 0 !important; }

.cf-login .btn-primary {
    height: var(--cf-login-h);
    padding: 0 20px;
    border: 0;
    border-radius: var(--cf-login-r);
    background: var(--cf-primary);
    color: var(--cf-on-primary);
    font-family: var(--cf-font);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(0, 83, 255, .22);
    transition: background-color .16s ease, transform .16s ease,
                box-shadow .16s ease;
}
.cf-login .btn-primary:hover {
    background: var(--cf-primary-2);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 83, 255, .28);
}
.cf-login .btn-primary:active { transform: translateY(0); }
.cf-login .btn-primary:focus-visible {
    outline: 3px solid rgba(0, 83, 255, .35);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Alternativas de acceso (llave de acceso de auth_passkey, OAuth si se
   activa). Odoo las mete en `.o_login_auth` con un `- o -` de separador.
   -------------------------------------------------------------------------- */
.cf-login .o_login_auth em {
    position: relative;
    display: block;
    margin: 26px 0 18px !important;   /* Bootstrap: `my-3` */
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cf-login-soft);
}
/* Las dos rayas del separador, a los lados del texto. */
.cf-login .o_login_auth em::before,
.cf-login .o_login_auth em::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 28px);
    height: 1px;
    background: var(--cf-login-line);
}
.cf-login .o_login_auth em::before { left: 0; }
.cf-login .o_login_auth em::after  { right: 0; }

.cf-login .list-group {
    display: grid;
    gap: 10px;
    border-radius: 0;
}
.cf-login .list-group-item {
    border: 1.5px solid var(--cf-login-line) !important;  /* Bootstrap fija
                       border-width por lados en el primero y el último */
    border-radius: var(--cf-login-r) !important;
    padding: 13px 16px;
    background: var(--cf-bg);
    color: var(--cf-login-ink);
    font-family: var(--cf-font);
    font-size: 14.5px;
    font-weight: 500;
    transition: border-color .16s ease, background-color .16s ease;
}
.cf-login .list-group-item:hover,
.cf-login .list-group-item:focus {
    border-color: var(--cf-primary) !important;
    background: rgba(0, 83, 255, .045);
}

/* --------------------------------------------------------------------------
   Selector de usuarios de Odoo 19 (componente owl `web.user_switch`): sale
   cuando el navegador recuerda sesiones anteriores, en lugar del formulario.
   -------------------------------------------------------------------------- */
.cf-login .o_user_switch { margin: 0 !important; }   /* Bootstrap: `my-4` */
.cf-login .o_user_switch > p {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cf-muted);
}
.cf-login .o_user_switch .list-group { margin: 0 0 18px !important; }
.cf-login .o_user_switch .o_avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 10px !important;   /* Bootstrap: `.rounded` */
}
.cf-login .o_user_switch .fa-times {
    color: var(--cf-login-soft);
    transition: color .16s ease;
}
.cf-login .o_user_switch .fa-times:hover { color: #b42318; }

/* --------------------------------------------------------------------------
   Avisos. Odoo los emite como alertas de Bootstrap.
   -------------------------------------------------------------------------- */
.cf-login .alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.cf-login .alert-danger  { background: #fdecec; color: #b42318; }
.cf-login .alert-success { background: #e8f6ef; color: #12734a; }

/* Los `oe_structure` son huecos de edición del constructor de sitios. Aquí
   no se usan y solo aportan alto en blanco. */
.cf-login .oe_structure:empty { display: none; }

/* ==========================================================================
   RESPONSIVO

   ≤1024px: una sola columna. El panel de marca se recoge a una banda
   superior — mantiene la identidad sin comerse la pantalla — y se quedan
   fuera la lista y el pie, que en esa banda ya no aportan.
   ========================================================================== */
@media (max-width: 1024px) {
    .cf-login {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .cf-login__brand {
        gap: 20px;
        /* 78px arriba: el enlace "Volver al sitio" va en absoluto y hay que
           dejarle su hueco para que no caiga sobre el logotipo. */
        padding: 78px clamp(22px, 6vw, 44px) 32px;
    }
    .cf-login__list,
    .cf-login__brandfoot { display: none; }
    .cf-login__claim { margin: 0; font-size: clamp(23px, 5.2vw, 32px); }
    .cf-login__logo { height: 30px; }

    /* El arco se muda a la derecha: en una banda ancha y baja, por la
       izquierda quedaría justo detrás del texto. */
    .cf-login__arc {
        left: auto;
        right: -12%;
        bottom: -55%;
        width: 58%;
    }

    /* Arriba y no centrado: con el teclado abierto en móvil, un formulario
       centrado se sale por debajo. */
    .cf-login__panel {
        align-items: flex-start;
        padding: 36px clamp(20px, 6vw, 40px) 56px;
    }
    .cf-login__box { max-width: 460px; margin: 0 auto; }
}

/* Tablet en vertical: la banda de marca ocupa poco y el formulario se
   quedaba pegado a ella con medio lienzo en blanco debajo. Aqui si se
   centra: el `flex-start` de arriba existe por el teclado del movil, y a
   partir de 601px de ancho con 700px de alto sobra sitio aunque se abra. */
@media (min-width: 601px) and (max-width: 1024px) and (min-height: 700px) {
    .cf-login__panel {
        align-items: center;
        padding-block: 40px;
    }
}

@media (max-width: 480px) {
    .cf-login { --cf-login-h: 50px; }
    .cf-login__brand { padding: 72px 22px 28px; }
    .cf-login__sub { margin-bottom: 26px; font-size: 14.5px; }
    .cf-login__back { font-size: 13.5px; }
}

/* Alturas de pantalla muy cortas (móvil apaisado): la banda de marca se
   queda solo con el logotipo para que el formulario quepa. */
@media (max-height: 560px) and (max-width: 1024px) {
    .cf-login__claim { display: none; }
    .cf-login__brand { padding: 66px clamp(22px, 6vw, 44px) 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-login *,
    .cf-login *::before,
    .cf-login *::after {
        transition: none !important;
    }
    .cf-login__back:hover      { transform: none; }
    .cf-login .btn-primary:hover { transform: none; }
}
