/**
 * ============================================================================
 * Telat Auth - estilos de las pantallas de acceso
 *
 * Cubre app/Views/auth/login.php y app/Views/auth/error.php, que para el
 * usuario son la misma pantalla.
 *
 * POR QUE ESTE ARCHIVO EXISTE EN VEZ DE ENLAZAR EL TEMA DE LOS CLIENTES
 *
 * El aspecto imita el login de 'licencias'
 * (licencias/app/Views/layout/view_login.php), pero NO se cargan sus hojas de
 * estilo: bootstrap.min.css + theme.min.css + bootstrap-icons.min.css suman
 * ~1.1 MB y meterian tres dependencias en la unica pantalla que tiene que
 * seguir en pie cuando todo lo demas se cae. Ese aislamiento es la razon de
 * ser de este servicio.
 *
 * En vez de eso los valores estan copiados uno a uno del tema. Cada uno lleva
 * al lado el selector del que salio, para poder re-extraerlos el dia que la
 * paleta cambie: esto NO se entera solo.
 *
 * Los iconos van como SVG en linea en las vistas, no como fuente de iconos,
 * por lo mismo. La unica imagen que se pide desde aqui es el fondo, y la
 * pagina se ve bien sin el.
 * ============================================================================
 */

/* --- Paleta del tema de los clientes (theme.min.css) --------------------- */

:root {
    --primary:       #3384C6;                  /* --bs-primary */
    --accent:        #F05A28;                  /* el naranja del logo */
    --primary-hover: #2b70a8;                  /* --bs-btn-hover-bg de .btn-primary */
    --body:          #677788;                  /* --bs-body-color */
    --heading:       #1e2022;                  /* color de .form-label */
    --muted:         #8c98a4;                  /* .text-muted */
    --line:          rgba(231, 234, 243, .7);  /* --bs-card-border-color */
    --field-disabled: #f8fafd;                 /* .form-control:disabled */

    --warn-ink:   #93795c;                     /* .alert-warning */
    --warn-bg:    #fdf4eb;
    --warn-line:  #fcefe0;

    /**
     * Los tres tonos de cada estado salen del color base del tema con la misma
     * regla que aplica Bootstrap: la tinta es el 60% del RGB, el fondo un tinte
     * al 20% sobre blanco y el borde al 30%. Anotado para poder derivar un
     * estado nuevo sin tener que adivinar.
     */
    --danger-ink:  #8e2e48;                    /* .alert-danger, de --bs-danger #ed4c78 */
    --danger-bg:   #fbdbe4;
    --danger-line: #fac9d7;

    --ok-ink:   #007964;                       /* .alert-success, de --bs-success #00c9a7 */
    --ok-bg:    #ccf4ed;
    --ok-line:  #b3efe5;

    /* De --bs-orange. El icono usa el color base y no la tinta al 60%, que
       sale cafe: aqui se quiere que el aviso se vea naranja. */
    --orange:      #fd7e14;
    --orange-bg:   #ffe5d0;
    --orange-line: #fed8b9;
}

/* --- Estructura de pagina ------------------------------------------------ */

* {
    box-sizing: border-box;
}

/**
 * Inter nunca llega a cargarse en los clientes: el tema la declara en
 * --bs-body-font-family pero no trae @font-face ni enlace a Google Fonts, asi
 * que en la practica cae al sans-serif del sistema. Se replica igual, con la
 * misma cadena, para que las dos pantallas se vean identicas.
 */
body {
    margin: 0;
    min-height: 100vh;
    padding: 3rem 1.5rem;                      /* .container.py-5.py-sm-7 */
    font: 400 .875rem/1.5 Inter, sans-serif;   /* --bs-body-font-size / -weight / -line-height */
    color: var(--body);
    background: #fff url("../img/background.jpg") no-repeat center center;
}

.logo {
    display: block;
    width: 100px;
    margin: 0 auto 3rem;
}

.shell {
    max-width: 30rem;
    margin: 0 auto;
}

/* .card con el padding de .card-lg > .card-body */
.card {
    padding: 2.5rem;
    margin-bottom: 3rem;
    background: #fff;
    border: .0625rem solid var(--line);
    border-radius: .75rem;                     /* --bs-card-border-radius */
    box-shadow: 0 .375rem .75rem rgba(140, 152, 164, .075);
}

.foot {
    font-size: .8125rem;
    text-align: center;
}

.foot .brand {
    color: var(--primary);
}

/* --- Redes sociales en el pie -------------------------------------------- */

.redes {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.redes a {
    display: block;
    line-height: 0;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease;
}

.redes a:hover,
.redes a:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

.redes img {
    display: block;
    width: 30px;
    height: 30px;
}

/* Sin animacion para quien la pidio apagada en su sistema. */
@media (prefers-reduced-motion: reduce) {
    .redes a {
        transition: none;
    }

    .redes a:hover,
    .redes a:focus-visible {
        transform: none;
    }
}

/* --- Encabezado del formulario ------------------------------------------- */

.head {
    margin-bottom: 3rem;
    text-align: center;
}

/* .display-5.text-primary */
.head h1 {
    margin: 0;
    font-size: calc(1.275rem + .3vw);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary);
}

@media (min-width: 1200px) {
    .head h1 {
        font-size: 1.5rem;
    }
}

.head p {
    margin: .5rem 0 0;
}

/* El alta del segundo factor es la pantalla mas alta: con el hueco completo
   sobre el QR no cabe en una laptop. */
.head--tight {
    margin-bottom: 1.5rem;
}

/* --- Aviso de error del intento anterior (.alert-warning) ---------------- */

.alert {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .75rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border: .0625rem solid var(--warn-line);
    border-radius: .5rem;
}

.alert svg {
    flex: 0 0 auto;
    margin-top: .15rem;
}

/* Variante en verde, para confirmar sin alarmar: la usa el aviso de "se envio
   el correo" de auth/forgot.php, que no es un error. */
.alert--ok {
    color: var(--ok-ink);
    background: var(--ok-bg);
    border-color: var(--ok-line);
}

/* --- Campos (.form-label + .form-control.form-control-lg) ---------------- */

.field {
    margin-bottom: 1.5rem;
}

label {
    display: flex;
    gap: .35rem;
    align-items: center;
    margin-bottom: .5rem;
    font-size: .875rem;
    color: var(--heading);
}

input[type="text"],
input[type="email"],
input[type="password"] {
    display: block;
    width: 100%;
    min-height: calc(1.5em + 1.625rem);        /* .form-control-lg */
    padding: .75rem 1rem;
    font: inherit;
    color: var(--heading);
    background: #fff;
    border: .0625rem solid var(--line);
    border-radius: .3125rem;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input::placeholder {
    color: var(--muted);
    opacity: 1;
}

input:focus {
    outline: 0;
    border-color: rgba(140, 152, 164, .25);
    box-shadow: 0 0 1rem 0 rgba(140, 152, 164, .25);
}

/* .input-group-merge: el boton del ojo va dentro del recuadro del input. */
.merge {
    position: relative;
}

.merge input {
    padding-right: 3rem;
}

.merge button {
    position: absolute;
    top: .0625rem;
    right: .0625rem;
    bottom: .0625rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 0 .3125rem .3125rem 0;
    cursor: pointer;
}

.merge button:hover {
    color: var(--body);
}

/* Ojo abierto / tachado: se alterna con el atributo hidden. Hace falta la regla
   porque el hidden del navegador solo aplica a elementos HTML, no a SVG. */
.merge button svg[hidden] {
    display: none;
}

/* --- Boton de envio (.btn.btn-primary.btn-lg en .d-grid) ----------------- */

.submit {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    font: inherit;
    color: #fff;
    background: var(--primary);
    border: .0625rem solid var(--primary);
    border-radius: .3125rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.submit:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Varias pantallas usan .submit en un enlace ("Activar", "Ya los guarde"):
   sin esto sale subrayado y alineado a la izquierda. */
a.submit {
    text-align: center;
    text-decoration: none;
}

/* --- Boton de regreso (.btn.btn-white.btn-lg) ---------------------------- */

/* Debajo del de envio y del mismo ancho, pero en blanco: se ve como salida
   sin competir con la accion principal. */
.back {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
    padding: .75rem 1rem;
    font: inherit;
    color: var(--body);
    text-decoration: none;
    background: #fff;
    border: .0625rem solid var(--line);
    border-radius: .3125rem;
    transition: color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.back:hover {
    color: var(--primary);
    box-shadow: 0 3px 6px -2px rgba(140, 152, 164, .25);
}

.back svg {
    transition: transform .15s ease-in-out;
}

.back:hover svg {
    transform: translateX(-.2rem);
}

/* La salida es la tercera opcion de la pantalla y la menos probable: se ofrece
   sin borde para que no compita con "Usar otra cuenta", que si lo tiene. */
.back--quiet {
    margin-top: .25rem;
    color: var(--muted);
    background: none;
    border-color: transparent;
    cursor: pointer;
}

.back--quiet:hover {
    box-shadow: none;
}

/* El icono de salir apunta hacia afuera: se mueve al reves que el de volver. */
.back--quiet:hover svg {
    transform: translateX(.2rem);
}

/* --- Selector de cuenta (auth/choose.php) -------------------------------- */

/* La cuenta entera es el boton: es la accion principal de la pantalla, asi
   que se lleva el borde de color al pasar y la flecha. */
.account {
    display: flex;
    gap: .875rem;
    align-items: center;
    width: 100%;
    padding: .875rem 1rem;
    font: inherit;
    color: var(--body);
    text-align: left;
    background: #fff;
    border: .0625rem solid var(--line);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.account:hover,
.account:focus-visible {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 1rem 0 rgba(140, 152, 164, .25);
}

.avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
}

.who {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.who__name {
    font-weight: 600;
    color: var(--heading);
}

.who__sub {
    overflow: hidden;
    font-size: .8125rem;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account .go {
    flex: 0 0 auto;
    color: var(--muted);
    transition: color .15s ease-in-out, transform .15s ease-in-out;
}

.account:hover .go {
    color: var(--primary);
    transform: translateX(.2rem);
}

/* Solo para lectores de pantalla. */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Destino del authorize pendiente ------------------------------------- */

/* Banner con el proyecto al que se va a entrar. Va debajo del subtitulo de la
   pantalla porque el login es el mismo para todos y esto es lo unico que dice a
   donde se va. Los colores son los de Telat: el azul de la pantalla y el naranja
   del logo (--accent). */
.destino {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1.5rem 0 0;
    padding: 1rem 1.125rem;
    text-align: left;
    background: #fff;
    border: .0625rem solid var(--line);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem -.75rem rgba(30, 32, 34, .2);
}

/* Disco azul con degradado y un resplandor debajo, como los del lanzador de
   sistemas. Con icono lleva el glifo en blanco; sin el, las iniciales. */
.destino__ficha {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), #5aa9e6);
    border-radius: 50%;
    box-shadow: 0 .5rem 1rem -.375rem var(--primary);
}

.destino__svg {
    width: 1.625rem;
    height: 1.625rem;
}

.destino__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.destino__etiqueta {
    font-size: .75rem;
    color: var(--body);
}

.destino__nombre {
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sesiones abiertas en otros sistemas (auth/logout_choice.php) --------- */

/* La misma ficha del banner de destino, en fila y mas chica: aqui son varias. */
.abiertas {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    border: .0625rem solid var(--line);
    border-radius: .75rem;
}

.abiertas__item {
    display: flex;
    gap: .875rem;
    align-items: center;
    padding: .75rem 1rem;
    text-align: left;
}

.abiertas__item + .abiertas__item {
    border-top: .0625rem solid var(--line);
}

.abiertas__ficha {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .9375rem;
    box-shadow: none;
}

.abiertas__ficha .destino__svg {
    width: 1.25rem;
    height: 1.25rem;
}

.abiertas__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.abiertas__nombre {
    overflow: hidden;
    font-weight: 600;
    color: var(--heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abiertas__sub {
    font-size: .8125rem;
    color: var(--muted);
}

/* Es un boton y no un enlace: .back no trae cursor. */
.abiertas__solo {
    cursor: pointer;
}

.abiertas__solo:hover svg {
    transform: none;
}

.dest {
    margin: 1.5rem 0 0;
    font-size: .8125rem;
    color: var(--muted);
    text-align: center;
}

.dest strong {
    color: var(--body);
    font-weight: 600;
}

/* --- Pantallas de aviso: error de /sso/authorize y sesion iniciada ------- */

/**
 * Las dos son la misma tarjeta centrada con un disco de color arriba; solo
 * cambia el estado que anuncian, asi que comparten todo menos la paleta del
 * disco. Un tercer estado se agrega repitiendo el .badge con sus tokens.
 */
.card--error,
.card--session {
    text-align: center;
}

.card--error .badge,
.card--session .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border: .0625rem solid;
    border-radius: 50%;
}

.card--error .badge {
    color: var(--danger-ink);
    background: var(--danger-bg);
    border-color: var(--danger-line);
}

.card--session .badge {
    color: var(--ok-ink);
    background: var(--ok-bg);
    border-color: var(--ok-line);
}

.card--error h1,
.card--session h1 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;                        /* .display-6 */
    font-weight: 600;
    line-height: 1.2;
    color: var(--heading);
}

.card--error p,
.card--session p {
    margin: 0;
}

/* --- Pantalla de sesion iniciada ----------------------------------------- */

/* El correo, bajo el nombre: identifica la cuenta sin competir con el. */
.card--session .sub {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--muted);
}

/**
 * Separado por una linea porque cambia de tema: arriba se dice QUIEN eres,
 * aqui QUE puedes hacer. Sin ella las tres frases se leen como una sola.
 */
.card--session .note {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: .0625rem solid var(--line);
}

/* El logout reusa .submit, pero es un enlace y no un boton. */
.card--session .submit {
    margin-top: 1.5rem;
    text-align: center;
    text-decoration: none;
}

/* El codigo tecnico: lo lee quien esta configurando un cliente nuevo. */
.card--error code {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .25rem .5rem;
    font-size: .8125rem;
    color: var(--muted);
    background: var(--field-disabled);
    border-radius: .3125rem;
}

/* --- Seguridad de la cuenta (auth/security.php) -------------------------- */

.head small {
    font-size: .8125rem;
    color: var(--muted);
}

/* El estado del factor: disco de color + texto. Verde activo, naranja
   inactivo: sin segundo factor es algo a atender, no un estado neutro. */
.status {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: .0625rem solid var(--line);
    border-radius: .5rem;
}

.status > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.status strong {
    color: var(--heading);
    font-weight: 600;
}

.status__badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: .0625rem solid;
    border-radius: 50%;
}

.status--on .status__badge {
    color: var(--ok-ink);
    background: var(--ok-bg);
    border-color: var(--ok-line);
}

.status--off .status__badge {
    color: var(--orange);
    background: var(--orange-bg);
    border-color: var(--orange-line);
}

.chip {
    align-self: flex-start;
    padding: .1rem .5rem;
    font-size: .75rem;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border: .0625rem solid var(--warn-line);
    border-radius: 1rem;
}

/* Cada accion sobre el factor activo, separada por una linea. */
.section {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: .0625rem solid var(--line);
}

.section h2 {
    margin: 0 0 .35rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--heading);
}

.section p {
    margin: 0 0 .75rem;
}

.section .warn {
    color: var(--danger-ink);
}

/* Campo de codigo y boton en una fila; en pantallas angostas se apilan. */
.inline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* El input se lleva casi todo el ancho de la fila; el boton crece solo cuando
   baja a su propia linea en pantallas angostas, y entonces la ocupa entera. */
.inline input {
    flex: 999 1 9rem;
    min-width: 0;
    min-height: 0;
    padding: .55rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    text-align: center;
}

.btn {
    flex: 1 0 auto;
    padding: .55rem 1rem;
    font: inherit;
    color: var(--primary);
    background: #fff;
    border: .0625rem solid var(--primary);
    border-radius: .3125rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.btn:hover {
    color: #fff;
    background: var(--primary);
}

.btn--danger {
    color: var(--danger-ink);
    border-color: var(--danger-line);
}

.btn--danger:hover {
    background: var(--danger-ink);
    border-color: var(--danger-ink);
}

/* "Continuar a ..." arriba de todo: tras entrar con un codigo de respaldo es
   la salida hacia la aplicacion, y no debe quedar al fondo de la pagina. */
.submit--top {
    margin-bottom: 1.5rem;
}

/* --- Segundo factor ------------------------------------------------------ */

/* El QR llega como SVG en linea desde la libreria, sin ancho propio util: se
   fija aqui para que no dependa de lo que traiga el render. */
.qr {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}

.qr svg {
    width: 200px;
    height: 200px;
    display: block;
}

/* La clave se teclea a mano en otro dispositivo, asi que se separa en bloques
   legibles y se deja seleccionable de un golpe. */
.secret {
    display: inline-block;
    margin-top: .35rem;
    padding: .35rem .5rem;
    background: var(--field-disabled);
    border: 1px solid var(--line);
    border-radius: .3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    letter-spacing: .08em;
    word-break: break-all;
    user-select: all;
}

/* Dos columnas: son ocho codigos y en una sola fila por linea la pantalla se
   alarga de mas. */
.codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem .75rem;
    margin: 0 0 1rem;
    padding: .75rem;
    list-style: none;
    background: var(--field-disabled);
    border: 1px solid var(--line);
    border-radius: .3rem;
}

/* "Descargar codigos" reutiliza el boton blanco de regreso, pero va entre la
   lista y "Ya los guarde", y la flecha baja en vez de ir a la izquierda. */
.download {
    margin: 0 0 1rem;
}

.download:hover svg {
    transform: translateY(.15rem);
}

.codes li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .05em;
    text-align: center;
    user-select: all;
}