/* =============================================================================
   SELECCIÓN DE EMPRESA Y PANTALLAS DE DISPOSITIVO
   -----------------------------------------------------------------------------
   Comparte el fondo y la tarjeta con el login, pero en una columna sola: acá no
   hay panel de novedades porque la persona ya está adentro y viene a hacer una
   cosa concreta.

   Ni un color literal. Todo sale de las variables de tokens.css, que es lo que
   hace que estas pantallas sigan el tema claro/oscuro sin una línea extra.
   ============================================================================= */

.st-elegir {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--st-surface);
}

.st-elegir__card {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-5);
    padding: 32px;
    border: 1px solid var(--st-border);
    border-radius: calc(var(--st-border-radius) * 2);
    background-color: var(--st-surface-raised);
    box-shadow: var(--st-shadow-md);
}

/* Las pantallas de dispositivo son un mensaje, no una lista: a 520 px el texto
   queda en renglones demasiado largos para leerse cómodo. */
.st-elegir__card--angosta {
    max-width: 420px;
    text-align: center;
    align-items: center;
}

.st-elegir__cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.st-elegir__logo {
    height: 40px;
    width: auto;
    align-self: flex-start;
    margin-bottom: var(--st-space-3);
}

.st-elegir__bajada,
.st-elegir__parrafo {
    margin: 0;
    color: var(--st-text-muted);
}

.st-elegir__buscar { margin-bottom: calc(var(--st-space-2) * -1); }

/* ---- Lista ---------------------------------------------------------------
   max-height + scroll propio: con cincuenta empresas la tarjeta crecería más
   que la pantalla y el botón de cerrar sesión quedaría fuera de alcance.
   El tope está en vh para que en un portátil chico se vean menos filas pero
   siempre quede visible lo de abajo.                                        */
.st-elegir__lista {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
    max-height: 46vh;
    overflow-y: auto;
    margin: 0;

    /* Aire a la derecha para que la barra de desplazamiento no se monte sobre
       la flecha de las filas. */
    padding-right: var(--st-space-2);
}

/* ---- Fila ----------------------------------------------------------------
   Es un <button type="submit">, así que hay que apagar el aspecto de botón del
   navegador. Se deja como una fila que reacciona al puntero.                */
.st-elegir__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "ruc    flecha"
        "nombre flecha";
    align-items: center;
    gap: 0 var(--st-space-4);

    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-border-radius);
    background-color: var(--st-surface-raised);
    color: var(--st-text);
    font-family: var(--st-font-ui);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--st-transition),
                border-color var(--st-transition);
}

.st-elegir__item:hover {
    background-color: var(--st-surface-hover);
    border-color: var(--st-border-strong);
}

/* El turquesa significa interacción en todo el sistema, así que la fila activa
   lo usa en el borde y no como relleno: rellenar la deja pareciendo elegida de
   forma permanente. */
.st-elegir__item:focus-visible {
    outline: none;
    border-color: var(--st-accent);
    box-shadow: 0 0 0 var(--st-focus-halo-spread) var(--st-focus-halo);
}

.st-elegir__item:active { background-color: var(--st-surface-active); }

/* Cifras tabulares: los RUC se comparan de un vistazo cuando los dígitos
   ocupan todos el mismo ancho, y el cero barrado evita confundirlo con O. */
.st-elegir__ruc {
    grid-area: ruc;
    font-size: var(--st-fs-base);
    font-weight: var(--st-fw-semibold);
    color: var(--st-text-heading);
    font-variant-numeric: var(--st-numeric-features);
}

.st-elegir__nombre {
    grid-area: nombre;
    font-size: var(--st-fs-sm);
    color: var(--st-text-muted);

    /* Las razones sociales son largas y no aportan nada partidas en dos
       renglones: se recortan y el nombre completo queda en el title del DOM. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-elegir__flecha {
    grid-area: flecha;
    color: var(--st-icon);
}

.st-elegir__item:hover .st-elegir__flecha { color: var(--st-accent); }

/* Mientras se entra a una empresa. La fila elegida se queda nítida y el resto se
   atenúa: le confirma a la persona cuál tocó, que es la duda real cuando la lista
   tiene cuarenta razones sociales parecidas. */
.st-elegir__lista.is-enviando { pointer-events: none; }

.st-elegir__lista.is-enviando .st-elegir__item {
    opacity: .4;
    transition: opacity var(--st-transition);
}

.st-elegir__lista.is-enviando .st-elegir__item:focus {
    opacity: 1;
    border-color: var(--st-accent);
}

.st-elegir__sin-resultados {
    margin: 0;
    padding: var(--st-space-5) 0;
    text-align: center;
    font-size: var(--st-fs-sm);
    color: var(--st-text-muted);
}

/* ---- Estado vacío -------------------------------------------------------- */
.st-elegir__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--st-space-3);
    padding: 32px 16px;
    text-align: center;
    color: var(--st-text-muted);
}

.st-elegir__vacio .st-icon { color: var(--st-icon); }

/* ---- Pie ------------------------------------------------------------------ */
.st-elegir__pie {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--st-border);
    padding-top: var(--st-space-5);
    margin: 0;
}

.st-elegir__salir {
    display: inline-flex;
    align-items: center;
    gap: var(--st-space-2);
    padding: 6px 10px;
    border: none;
    border-radius: var(--st-border-radius-sm);
    background: none;
    color: var(--st-text-muted);
    font-family: var(--st-font-ui);
    font-size: var(--st-fs-sm);
    cursor: pointer;
    transition: color var(--st-transition), background-color var(--st-transition);
}

.st-elegir__salir:hover {
    color: var(--st-danger);
    background-color: var(--st-danger-soft);
}

.st-elegir__salir:focus-visible {
    outline: var(--st-focus-outline);
    outline-offset: 2px;
}

/* ---- Barra de sesión del layout ------------------------------------------
   Empresa a la izquierda, usuario y salir a la derecha. La empresa se destaca
   más que el nombre de la persona: en un sistema multiempresa, equivocarse de
   base es un error caro y el dato tiene que estar siempre a la vista.        */
.st-barra-sesion {
    display: flex;
    align-items: center;
    gap: var(--st-space-4);
    font-family: var(--st-font-ui);
    font-size: var(--st-fs-sm);
}

.st-barra-sesion form { margin: 0; }

.st-barra-sesion__empresa {
    font-weight: var(--st-fw-semibold);
    color: var(--st-text-heading);

    /* Las razones sociales son largas y esta barra no puede crecer. */
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-barra-sesion__cambiar {
    color: var(--st-accent);
    text-decoration: none;
}

.st-barra-sesion__cambiar:hover { text-decoration: underline; }

.st-barra-sesion__usuario { color: var(--st-text-muted); }

@media (max-width: 640px) {
    /* En un teléfono la barra no alcanza para todo. Se conserva la empresa, que
       es el dato que evita el error caro, y se oculta el nombre propio: la
       persona ya sabe quién es. */
    .st-barra-sesion__usuario { display: none; }
    .st-barra-sesion__empresa { max-width: 18ch; }
}

/* ---- Icono grande de estado ----------------------------------------------
   Cápsula redonda detrás del icono en las pantallas de dispositivo. El tinte
   suave —no el color pleno— porque el icono ya lleva el color y dos superficies
   saturadas juntas gritan más de lo que el mensaje amerita.                  */
.st-aviso-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
}

.st-aviso-grande--info { background-color: var(--st-info-soft); color: var(--st-info); }
.st-aviso-grande--success { background-color: var(--st-success-soft); color: var(--st-success); }
.st-aviso-grande--danger { background-color: var(--st-danger-soft); color: var(--st-danger); }

/* La rueda de carga gira; con prefers-reduced-motion la animación se detiene
   sola porque --st-transition pasa a 0, así que acá se apaga explícitamente. */
.st-aviso-grande--info .st-icon { animation: st-girar 1.1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .st-aviso-grande--info .st-icon { animation: none; }
}

@keyframes st-girar {
    to { transform: rotate(360deg); }
}

/* ---- Esqueleto de fila ---------------------------------------------------- */
.st-hueso--fila {
    height: 54px;
    border-radius: var(--st-border-radius);
}

/* ---- Móvil ----------------------------------------------------------------
   La tarjeta pasa a ocupar la pantalla entera: en un teléfono, una tarjeta
   flotando con márgenes desperdicia el único espacio que hay.               */
@media (max-width: 640px) {
    .st-elegir { padding: 0; align-items: stretch; }

    .st-elegir__card {
        max-width: none;
        min-height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 28px 22px;
        justify-content: flex-start;
    }

    .st-elegir__lista { max-height: none; }
}