/*
    Pantalla de acceso de las tres plataformas (clientes, empresa y admin).

    Es un diseño propio, no del tema Angle: por eso todo cuelga de .bp-login y
    no se apoya en ninguna clase de Bootstrap. El tema sigue cargado en estas
    paginas para los iconos, asi que las reglas de aqui se escriben para no
    depender de el ni chocar con el.

    Lo unico que cambia entre plataformas es el color del panel y los textos.
    El color entra por la variable --bp-login-panel, que pone cada sitio.
*/

.bp-login {
    /* Un solo sistema de color para toda la pantalla. */
    --bp-ink: #1a1a1a;
    --bp-muted: #6b6b6b;
    --bp-line: #d5d5d5;
    --bp-rule: #1a1a1a;
    --bp-surface: #f0f0f0;
    --bp-field: #ffffff;
    --bp-accent: #f2c218;      /* el dorado de marca del boton */
    --bp-link: #c0301a;        /* rojo de marca, con contraste suficiente sobre el gris */

    /* Fallback: cada pagina lo sobrescribe con el suyo. */
    --bp-login-panel: #1a1a1a;

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;        /* dvh y no vh: en iOS la barra de direcciones mueve el alto */
    margin: 0;
    background: var(--bp-surface);
    color: var(--bp-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------- panel de marca */

.bp-login__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem clamp(2rem, 5vw, 5.5rem);
    background: var(--bp-login-panel);
    color: #ffffff;
}

.bp-login__eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 2.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* La rayita del mockup. Es decoracion, no contenido: fuera del lector de pantalla. */
.bp-login__eyebrow::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: currentColor;
}

.bp-login__headline {
    margin: 0 0 2.5rem;
    font-size: clamp(2.75rem, 5.2vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.bp-login__headline span {
    display: block;
}

.bp-login__intro {
    max-width: 13rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------- formulario */

.bp-login__side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.bp-login__form {
    width: 100%;
    max-width: 25.5rem;
}

.bp-login__logo {
    display: block;
    width: 12.5rem;
    height: auto;
    margin-bottom: 2.75rem;
}

.bp-login__rule {
    height: 1px;
    margin: 0 0 1.5rem;
    background: var(--bp-rule);
}

.bp-login__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.75rem;
}

.bp-login__heading h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bp-login__platform {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bp-muted);
}

.bp-login__field {
    margin-bottom: 1.25rem;
}

/* Etiqueta siempre encima del campo: el marcador de posicion no es una etiqueta. */
.bp-login__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bp-muted);
}

.bp-login__control {
    display: flex;
    align-items: stretch;
    background: var(--bp-field);
    border: 1px solid var(--bp-line);
}

/* El recuadro del icono, separado del campo por una linea, como en el diseño. */
.bp-login__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    flex: 0 0 3rem;
    border-right: 1px solid var(--bp-line);
    color: var(--bp-ink);
}

.bp-login__control input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--bp-ink);
}

.bp-login__control input::placeholder {
    color: #767676;   /* pasa el contraste minimo sobre blanco */
}

.bp-login__control input:focus {
    outline: 0;
}

/* El foco se pinta en el recuadro entero, que es lo que se ve. */
.bp-login__control:focus-within {
    border-color: var(--bp-ink);
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.18);
}

.bp-login__reveal {
    flex: 0 0 auto;
    padding: 0 1rem;
    border: 0;
    border-left: 1px solid var(--bp-line);
    background: transparent;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bp-muted);
    cursor: pointer;
}

.bp-login__reveal:hover,
.bp-login__reveal:focus-visible {
    color: var(--bp-ink);
}

/* ------------------------------------------------------------ recordar y ayuda */

.bp-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    font-size: 0.85rem;
}

.bp-login__remember {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.bp-login__remember input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--bp-ink);
}

.bp-login__link {
    color: var(--bp-link);
    text-decoration: none;
}

.bp-login__link:hover,
.bp-login__link:focus-visible {
    text-decoration: underline;
}

/* ------------------------------------------------------------------- boton */

.bp-login__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.15rem 1.25rem;
    border: 0;
    background: var(--bp-accent);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bp-ink);      /* tinta oscura sobre dorado: contraste de sobra */
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.bp-login__submit:hover {
    background: #e0b110;
}

.bp-login__submit:active {
    transform: translateY(1px);
}

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

.bp-login__error {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--bp-link);
    background: #fdecea;
    font-size: 0.85rem;
    color: #8d2113;   /* mas oscuro que el enlace: es texto corrido sobre un fondo claro */
}

.bp-login__legal {
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bp-line);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--bp-muted);
}

.bp-login__legal p {
    margin: 0 0 0.6rem;
}

.bp-login__legal p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------- movil */

@media (max-width: 56rem) {
    .bp-login {
        grid-template-columns: 1fr;   /* una sola columna, el panel arriba */
    }

    .bp-login__panel {
        padding: 3rem 1.5rem;
    }

    .bp-login__headline {
        font-size: clamp(2.25rem, 11vw, 3rem);
        margin-bottom: 1.5rem;
    }

    .bp-login__intro {
        max-width: 28rem;
    }

    .bp-login__side {
        padding: 2.5rem 1.5rem 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-login__submit {
        transition: none;
    }

    .bp-login__submit:active {
        transform: none;
    }
}

/* ------------------------------------------- segundo paso del acceso */

/*
    La pantalla del codigo no lleva panel de marca: no hay titular que contar a
    medio acceso. Se centra la columna y se deja respirar.
*/
.bp-login--challenge {
    grid-template-columns: 1fr;
}

.bp-login__hint {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bp-muted);
}

/* El codigo se teclea de un tiron: holgado y en monoespaciada se lee mejor. */
.bp-login--challenge .bp-login__control input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.3em;
}