/* ---------------------------------------------------------------------------
   Login del Authorization Server.

   Copia de la apariencia del login legacy de Retailbase (app-sso,
   WEB-INF/view/index.jsp). NO se copio css/style-min.css: son 216 KB con el CSS de
   toda la aplicacion (Bootstrap 3 completo + cientos de utilitarias) y esta pantalla
   usa una fraccion. Lo que sigue son los valores extraidos de ese archivo, escritos a
   mano y con la fuente anotada.

   Valores tomados de style-min.css:
     .bg-blue-login    -> linear-gradient(to bottom, #7653eb 0%, #4a61f9 100%)
     .bg-fondo-login   -> #f9f9f9
     .text-blue-dark   -> #586B81      (titulo "Iniciar Sesion")
     .bg-green         -> #24d763 + border-radius 50px   (boton Acceder)
     input             -> border 1px #ccc, height 33px, padding 2px 10px, radius 50px
     .error-input      -> border #fe7c7c
     .panel            -> #fff, radius 4px, box-shadow 0 1px 1px rgba(0,0,0,.05)
     .alert-danger     -> color #a94442, bg #f2dede, borde #ebccd1
     .text-blue        -> #0089CE      (enlace)
     .text-link-blue   -> hover rgba(18,83,218,.61) sobre blanco, radius 13px
     .icon-oculto      -> #9f9f9f, hover #1f56b6   (ojo de la contrasenia)
     body              -> font-family 'Roboto', helvetica, arial, sans-serif
     .bold / .light    -> font-weight 500 / 300
     .font-39 / .font-18 / .font-33 / .font-13

   Roboto llega en el legacy desde Google Fonts. Aca no se pide a ningun dominio
   externo (requisito: el AS se sirve solo), asi que queda en la pila de fuentes: si el
   dispositivo la tiene -- Android la tiene -- se usa; si no, cae a Helvetica/Arial,
   que es la misma pila de respaldo del legacy.
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background: #f9f9f9;
}

/* El sprite de <symbol> no se dibuja; solo aporta las definiciones. */
.sprite { display: none; }

.ic {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: none;
}

/* --- Estructura de dos columnas -------------------------------------------
   El legacy lo arma con .col-sm-6 + position:fixed. Aca es flex: mismo reparto
   50/50, sin los overflows de Bootstrap 3 y sin bloquear el scroll.
   -------------------------------------------------------------------------- */

.pagina {
    display: flex;
    min-height: 100vh;
}

/* Columna izquierda: panel morado (.bg-blue-login del legacy) */
.promo {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #fff;
    background: #7653eb;
    background: linear-gradient(to bottom, #7653eb 0%, #4a61f9 100%);
}

.promo-caja {
    width: 100%;
    max-width: 560px;
}

.promo-img {
    display: block;
    width: 70%;                 /* .width-70 del legacy */
    max-width: 400px;
    height: auto;
    margin-bottom: 20px;
}

.promo-titulo {
    margin: 0 0 15px;
    font-size: 39px;            /* .font-39 */
    font-weight: 500;           /* .bold */
    line-height: 120%;          /* .line-height-120 */
}

.promo-bajada {
    margin: 0;
    font-size: 18px;            /* .font-18 */
    font-weight: 300;           /* .light */
    line-height: 170%;          /* .line-height-170 */
}

/* Columna derecha: el formulario (.bg-fondo-login del legacy) */
.acceso {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El bloque va centrado, pero con mas aire abajo que arriba: eso lo sube ~50px
       respecto del centro optico y lo deja a la altura del titulo del panel morado. */
    padding: 30px 30px 130px;   /* .padding-row + desplazamiento hacia arriba */
    background: #f9f9f9;
}

.acceso-caja {
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.logo {
    display: block;
    width: 55%;
    max-width: 200px;           /* .width-30 sobre la columna del legacy */
    height: auto;
    margin: 0 auto;
}

.titulo {
    margin: 45px 0 20px;
    font-size: 33px;            /* .font-33 */
    font-weight: 500;           /* .bold */
    color: #586B81;             /* .text-blue-dark */
}

/* --- Tarjeta del formulario (.panel del legacy) ---------------------------- */

.tarjeta {
    max-width: 380px;           /* ~ .col-lg-6 .col-lg-offset-3 del legacy */
    margin: 0 auto;
    padding: 20px;              /* .padding-left-20 .padding-right-20 */
    text-align: left;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

label {
    display: block;
    margin: 10px 0 5px;
    font-size: 14px;
    font-weight: 500;           /* .bold */
    color: #333;
}

.req { color: #333; }

.campo {
    position: relative;
    margin-bottom: 4px;
}

input {
    width: 100%;
    height: 33px;
    padding: 2px 10px;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;        /* las pildoras del legacy */
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder { color: #9f9f9f; }

/* El borde marca el campo activo siempre; el anillo grueso se reserva para
   :focus-visible, o sea teclado, que es donde hace falta y donde el legacy no lo tiene. */
input:focus {
    border-color: #1f56b6;
    outline: none;
}

input:focus-visible {
    outline: 2px solid #1f56b6;
    outline-offset: 1px;
}

/* Boton del ojo. Lo inserta login.js; sin JS no existe.
   Geometria y colores de .icon-oculto del legacy. */
.campo-clave input { padding-right: 38px; }

.ojo {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    padding: 2px;
    font-size: 16px;
    color: #9f9f9f;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.ojo:hover { color: #1f56b6; }

.ojo:focus-visible {
    outline: 2px solid #1f56b6;
    outline-offset: 1px;
}

/* --- Boton Acceder (.btn .bg-green .text-white del legacy) ----------------- */

.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                  /* .margin-right-10 del icono */
    width: 100%;
    margin: 15px 0 10px;        /* .top-15 .bottom-10 */
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
    background: #24d763;
    border: 1px solid transparent;
    border-radius: 50px;
    cursor: pointer;
}

.boton:hover { background: #1fbd57; }

.boton:focus-visible {
    outline: 2px solid #1f56b6;
    outline-offset: 2px;
}

/* --- Alertas (.alert-danger de Bootstrap 3, tal como las usa el legacy) ----- */

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 5px;                   /* .margin-right-5 del icono */
    margin: 0 0 10px;           /* .bottom-10 */
    padding: 10px;              /* .padding-top-10 .padding-bottom-10 */
    font-size: 13px;            /* .font-13 */
    line-height: 170%;          /* .line-height-170 */
    border: 1px solid;
    border-radius: 4px;         /* .border-radius-4 */
}

.alerta .ic { margin-top: 0.35em; }

.alerta-error {
    color: #a94442;
    background: #f2dede;
    border-color: #ebccd1;
}

.alerta-ok {
    color: #2f6f43;
    background: #e6f7ec;
    border-color: #bfe3cd;
}

/* --- Enlace de recuperacion (.text-blue .text-link-blue del legacy) -------- */

.olvido { margin: 15px 0 0; }

.enlace {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 6px;
    font-size: 14px;
    color: #0089CE;
    text-decoration: underline;
    border-radius: 13px;
}

.enlace:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(18, 83, 218, .61);
    transition: ease-in-out .3s;
}

.enlace:focus-visible {
    outline: 2px solid #1f56b6;
    outline-offset: 2px;
}

/* --- Responsivo ------------------------------------------------------------
   El corte es el del legacy: .hidden-xs de Bootstrap 3 esconde el panel morado
   bajo 768px. En telefono queda solo el formulario, que es como se ve hoy desde
   el POS.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .promo-titulo { font-size: 30px; }
    .promo-bajada { font-size: 16px; }
    .promo-img { width: 100%; }     /* .width-100-md */
}

@media (max-width: 767px) {
    .promo { display: none; }
    .acceso {
        flex: 1 1 100%;
        align-items: flex-start;
        padding: 20px 15px 40px;
    }
    .logo { width: 50%; }           /* .width-50-xs */
    .titulo { margin: 25px 0 15px; font-size: 28px; }
    .tarjeta { max-width: none; }

    /* 16px es el minimo que evita que Safari de iOS haga zoom al enfocar un campo.
       El legacy deja 14px y por eso la pantalla "salta" en telefono. */
    input { height: 40px; font-size: 16px; }
    .boton { padding: 10px 12px; font-size: 16px; }
}

@media (max-height: 620px) and (min-width: 768px) {
    .pagina { min-height: 0; }
    .promo, .acceso { padding-top: 30px; padding-bottom: 30px; }
}