/*
 * Login de Brincus sobre Keycloak.
 *
 * Reproduce el layout de dos columnas de brincus.com (formulario a la
 * izquierda sobre blanco, panel naranjo de marca a la derecha). Los colores
 * salen de las variables de brincus-com-*.webflow.css, no de la captura.
 *
 * Esta hoja es la UNICA que carga el theme: theme.properties reemplaza
 * `styles` y vacia `stylesCommon`, asi que PatternFly no llega y no hay que
 * ganarle por especificidad.
 */

:root {
    --bc-naranjo: #ff982c;          /* --naranjo-brincus */
    --bc-naranjo-claro: #ffb43f;
    --bc-naranjo-hondo: #df6e1c;    /* --naranjo-sobre */

    /* El boton usa el verde PRESIONADO de la paleta, no el de reposo.
       Medido: blanco sobre #1ac370 da 2,31:1 y no alcanza el minimo de 3:1
       para texto grande; sobre #09a358 da 3,29:1 y pasa. Es un color de la
       misma marca, un paso mas oscuro. */
    --bc-verde: #09a358;            /* --verde-presionado */
    --bc-verde-hover: #07894a;

    --bc-tinta: #2b2b38;
    --bc-gris: #555;                /* --gris-brincus */
    --bc-gris-suave: #7a7a86;
    --bc-borde: #d8d8e0;
    --bc-rojo: #e43264;             /* --rojo-brincus */
    --bc-blanco: #fff;

    --bc-fuente: sfprodisplay, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.bc-body {
    font-family: var(--bc-fuente);
    color: var(--bc-tinta);
    background: var(--bc-blanco);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ layout */

.bc-page {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.bc-panel {
    flex: 1 1 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    min-width: 0;
}

.bc-panel__inner {
    width: 100%;
    max-width: 420px;
}

/* Panel de marca. El diagonal se dibuja con gradientes en vez de un PNG:
   escala a cualquier alto sin recortes ni peso extra. */
.bc-aside {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background:
        linear-gradient(158deg,
            var(--bc-naranjo-claro) 0%,
            var(--bc-naranjo-claro) 26%,
            var(--bc-naranjo) 26%,
            var(--bc-naranjo) 68%,
            var(--bc-naranjo-hondo) 100%);
}

.bc-aside__inner {
    position: relative;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.bc-aside__title {
    margin: 0 0 16px;
    color: var(--bc-blanco);
    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(120, 50, 27, .28);
}

.bc-aside__text {
    margin: 0 auto 8px;
    max-width: 34ch;
    color: var(--bc-blanco);
    font-size: 16px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(120, 50, 27, .28);
}

.bc-aside__art {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 8px auto 0;
}

/* ------------------------------------------------------------- encabezados */

.bc-logo {
    display: inline-block;
    margin-bottom: 20px;
    line-height: 0;
}

.bc-logo img {
    width: 150px;
    height: auto;
}

.bc-header { margin-bottom: 24px; }

.bc-title {
    margin: 0;
    color: var(--bc-tinta);
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 600;
    line-height: 1.18;
}

.bc-required { color: var(--bc-rojo); }

.bc-required-note {
    margin-bottom: 8px;
    color: var(--bc-gris-suave);
    font-size: 13px;
}

/* Cuando Keycloak ya sabe quien intenta entrar, muestra el usuario y un
   enlace para empezar de nuevo. */
.bc-attempted {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.bc-attempted label {
    color: var(--bc-gris);
    font-size: 15px;
    font-weight: 600;
}

/* Es el unico contenido del `<a id="reset-login">` de template.ftl, o sea el
   texto visible del enlace, aunque el tag sea un span. Va en tinta por la misma
   regla de los enlaces pequenos que esta mas abajo, y a 13px la exigencia es la
   misma que a 14px: el verde de marca se queda en 3,29:1 y hacen falta 4,5:1.
   No entra en aquel selector fusionado solo porque este es de 13px. */
.bc-attempted__reset {
    color: var(--bc-tinta);
    font-size: 13px;
    text-decoration: underline;
}

/* ---------------------------------------------------------------- campos */

.bc-field { margin-bottom: 18px; }

.bc-label {
    display: block;
    margin-bottom: 6px;
    color: var(--bc-tinta);
    font-size: 14px;
    font-weight: 500;
}

.bc-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bc-borde);
    border-radius: 10px;
    background: var(--bc-blanco);
    color: var(--bc-tinta);
    font-family: inherit;
    font-size: 16px;   /* 16px evita el zoom automatico de iOS al enfocar */
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bc-input::placeholder { color: var(--bc-gris-suave); }

.bc-input:focus {
    outline: none;
    border-color: var(--bc-naranjo);
    box-shadow: 0 0 0 3px rgba(255, 152, 44, .25);
}

.bc-input[aria-invalid="true"] {
    border-color: var(--bc-rojo);
}

.bc-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(228, 50, 100, .22);
}

/* Grupo del campo de contrasena: input + boton del ojo. */
.bc-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.bc-input-group .bc-input { padding-right: 48px; }

.bc-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent;
    cursor: pointer;
    color: var(--bc-gris-suave);
}

.bc-eye:focus-visible {
    outline: 2px solid var(--bc-naranjo);
    outline-offset: -2px;
}

/* passwordVisibility.js alterna estas dos clases sobre el <i>. Sin PatternFly
   no existen fa-eye/fa-eye-slash, asi que el icono se dibuja aca. */
.bc-eye__icon {
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.bc-eye__icon--show {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a86' 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%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.bc-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='%237a7a86' 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%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.bc-error {
    display: block;
    margin-top: 6px;
    color: var(--bc-rojo);
    font-size: 13px;
    line-height: 1.4;
}

/* --------------------------------------------------------------- opciones */

.bc-settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#kc-form-options .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bc-gris);
    font-size: 14px;
    cursor: pointer;
}

#kc-form-options input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--bc-verde);
}

/* Ningun enlace de texto pequeno de esta hoja usa el verde de marca: a 13px y a
   14px #09a358 sobre blanco se queda en 3,29:1 y el texto pequeno pide 4,5:1;
   --bc-tinta da 13,95:1. El subrayado permanente los distingue sin depender del
   color, y el hover solo lo engrosa para no bajar el contraste.

   Los de 14px caen en esta regla:
   .bc-options-extra a es "Olvidaste tu clave?", que se dibuja por primera vez
   ahora con resetPasswordAllowed activo. .bc-link son "probar otra forma" y el
   cambio de organizacion: casi nunca se dibujan, pero dejarlos en verde tenia a
   la hoja argumentando contra una regla propia. .bc-signup a es el registro
   nativo, que hoy no se dibuja porque el realm declara registrationAllowed en
   false, pero kcSignUpClass=bc-signup esta mapeado en theme.properties: es
   superficie viva a un cambio de realm de distancia, y dejarla en verde era
   exactamente la contradiccion que las otras dos vinieron a cerrar.

   El cuarto, .bc-attempted__reset, es de 13px y por eso lleva su propia regla
   mas arriba, con el mismo color y el mismo subrayado. */
.bc-options-extra a,
.bc-signup a,
.bc-link {
    color: var(--bc-tinta);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

.bc-options-extra a:hover,
.bc-signup a:hover,
.bc-link:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------- botones */

.bc-btn {
    display: inline-block;
    padding: 13px 24px;
    border: 0;
    border-radius: 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.bc-btn--block {
    display: block;
    width: 100%;
}

.bc-btn--primary {
    background: var(--bc-verde);
    color: var(--bc-blanco);
}

.bc-btn--primary:hover { background: var(--bc-verde-hover); }

.bc-btn--primary:focus-visible {
    outline: 3px solid rgba(255, 152, 44, .6);
    outline-offset: 2px;
}

.bc-btn--secondary,
.bc-btn--default {
    background: rgba(0, 0, 0, .06);
    color: var(--bc-gris);
}

.bc-btn--secondary:hover,
.bc-btn--default:hover { background: rgba(0, 0, 0, .12); }

.bc-btn--disabled {
    opacity: .6;
    pointer-events: none;
}

#kc-form-buttons { margin-top: 22px; }

/* Salida para quien no tiene cuenta. Fila que envuelve sola en pantallas
   angostas, asi que no necesita media query propia. El margen va explicito:
   la hoja no resetea el <p> y si no, llegan los 16px del navegador. */
.bc-alta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 20px 0 0;
    color: var(--bc-gris);
    font-size: 14px;
    line-height: 1.5;
}

/* La frase ocupa una linea entera y los dos enlaces quedan siempre juntos
   debajo. Sin esto las tres piezas compiten por el mismo ancho util (viewport
   menos los 48px de padding) y la frase, que es la mas larga de lejos, deja
   sitio para un solo enlace: "Prueba gratis" cae sola a la linea de abajo. Pasa
   en el rango de telefono y no pasa en escritorio, donde sobra ancho, asi que
   revisarlo en el laptop no lo muestra nunca. */
.bc-alta > span { flex: 1 0 100%; }

/* Mismo trato y misma razon que los enlaces de arriba. El font-size no se
   repite: lo hereda de .bc-alta. */
.bc-alta__link {
    color: var(--bc-tinta);
    font-weight: 600;
    text-decoration: underline;
}

.bc-alta__link:hover { text-decoration-thickness: 2px; }

/* Deuda conocida: el foco naranjo no llega al 3:1 que WCAG 2.2 pide para el
   indicador. Son CUATRO reglas y NO comparten valor, asi que subir --bc-naranjo
   no las arregla todas: hay que tocarlas una por una.
     .bc-input:focus                 borde #ff982c sobre blanco -> 2,15:1; el
                                     halo rgba(255,152,44,.25) compone sobre
                                     blanco a #ffe5ca -> 1,21:1; y contra el
                                     borde en reposo #d8d8e0, que es lo que el
                                     ojo compara, el cambio de estado da 1,52:1
     .bc-alta__link:focus-visible    2px var(--bc-naranjo) = #ff982c -> 2,15:1
     .bc-eye:focus-visible           2px var(--bc-naranjo) = #ff982c -> 2,15:1
     .bc-btn--primary:focus-visible  3px rgba(255,152,44,.6), que compuesto
                                     sobre blanco queda en #ffc180 -> 1,59:1

   La del input es la peor de las cuatro y la que no se puede dejar afuera. Es la
   unica que ademas apaga el indicador nativo (`outline: none`), y la unica que
   se dibuja en TODOS los logins, sobre el RUT y sobre la clave. Las otras tres
   son un boton, un ojo y dos enlaces que casi nadie enfoca.

   Se deja igual aca a proposito: cambiar una sola deja la hoja inconsistente sin
   arreglar las otras. Corresponde subirlas a la vez, LAS CUATRO, en un cambio
   propio; a la del boton hay que sacarle ademas el alfa, y a la del input
   devolverle un indicador que no dependa solo del color del borde. */
.bc-alta__link:focus-visible {
    outline: 2px solid var(--bc-naranjo);
    outline-offset: 2px;
}

/* Pildora "Volver al inicio", igual que en la vista de recuperar clave. */
.bc-back {
    display: inline-block;
    margin-top: 26px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .08);
    color: var(--bc-gris);
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
}

.bc-back:hover { background: rgba(0, 0, 0, .14); }

/* ---------------------------------------------------------------- avisos */

.bc-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 4px solid var(--bc-gris-suave);
    background: #f3f3f6;
    font-size: 14px;
    line-height: 1.45;
}

.bc-alert--error {
    border-left-color: var(--bc-rojo);
    background: #fdeef2;
    color: #8d1236;
}

.bc-alert--warning {
    border-left-color: #f6b844;
    background: #fdf5e6;
    color: #7a5310;
}

.bc-alert--success {
    border-left-color: var(--bc-verde);
    background: #e9f8f0;
    color: #0a5c34;
}

.bc-alert--info {
    border-left-color: #396bd3;
    background: #edf2fd;
    color: #1d3f86;
}

.bc-alert__icon { display: none; }

/* DEV-626 — guía de recuperación junto a "Olvidaste tu clave?" tras un login
   fallido. Mismos tonos que .bc-alert--warning (no se inventa paleta nueva);
   estructura propia (icono + título + párrafo con link) porque .bc-alert es
   de una sola línea y sin icono, y este bloque necesita ambos. */
.bc-guia-clave {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #f6b844;
    border-radius: 10px;
    background: #fdf5e6;
    color: #7a5310;
    font-size: 14px;
    line-height: 1.45;
}

.bc-guia-clave__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6e1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.bc-guia-clave__texto p { margin: 2px 0 0; }

.bc-guia-clave__texto a {
    color: #7a5310;
    font-weight: 600;
    text-decoration: underline;
}

.bc-guia-clave__texto a:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------- registro, idioma y sociales */

.bc-signup,
.bc-info {
    margin-top: 18px;
    color: var(--bc-gris);
    font-size: 14px;
}

/* El color de `.bc-signup a` sale de la regla de enlaces pequenos, mas arriba.
   Aca solo iba el verde, y esta regla es POSTERIOR y de la misma especificidad,
   asi que dejarla se lo habria ganado. */

.bc-locale {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 14px;
}

.bc-locale__dropdown { position: relative; }

.bc-locale__dropdown > button {
    border: 1px solid var(--bc-borde);
    border-radius: 20px;
    padding: 5px 14px;
    background: var(--bc-blanco);
    color: var(--bc-gris);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.bc-locale__list {
    position: absolute;
    right: 0;
    z-index: 10;
    min-width: 150px;
    margin: 6px 0 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid var(--bc-borde);
    border-radius: 10px;
    background: var(--bc-blanco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.bc-locale__list[aria-expanded="false"] { display: none; }

.bc-locale__link {
    display: block;
    padding: 7px 14px;
    color: var(--bc-gris);
    text-decoration: none;
}

.bc-locale__link:hover { background: #f3f3f6; }

.bc-social { margin-top: 24px; }

.bc-social hr {
    border: 0;
    border-top: 1px solid var(--bc-borde);
    margin: 0 0 18px;
}

.bc-social h2 {
    margin: 0 0 12px;
    color: var(--bc-gris);
    font-size: 14px;
    font-weight: 600;
}

.bc-social__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.bc-social__list--grid { grid-template-columns: repeat(2, 1fr); }

.bc-social__list a { display: block; }

/* Keycloak inyecta su pie de pagina; en este layout no aporta nada. */
#kc-footer,
.login-pf-page-footer { display: none; }

/* ----------------------------------------------------------- adaptativo */

@media (max-width: 900px) {
    .bc-page { flex-direction: column; }

    /* El panel de marca es decorativo (aria-hidden): en pantallas angostas
       compite con el formulario, asi que se retira. */
    .bc-aside { display: none; }

    .bc-panel {
        flex: 1 1 auto;
        align-items: flex-start;
        padding: 40px 24px;
    }

    .bc-panel__inner { max-width: 480px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}