/* =========================================================================
   UX compartida de los paneles web (empresa y plataforma).

   Dos componentes, ambos descriptos en docs/22-ayuda-y-alta-rapida.md:
   - Alta rápida de FKs: el mini botón "+" en la línea del label de un select.
   - Ayuda contextual: el botón flotante "?" y el contenido de su modal.

   Usa los tokens que ya definen las dos bases (--yp, --line); si alguna falta,
   los fallbacks de abajo mantienen el componente legible.
   ========================================================================= */

/* ---------- Alta rápida: el botón "+" en la línea del label ---------- */
.field__label-row {
    display: flex;
    align-items: center;
    /* Pegado al label y no a la derecha del campo: acá los forms son de ancho
       completo y el "+" alineado al borde quedaba lejísimos de su select. */
    gap: .5rem;
    margin-bottom: .35rem;
}

.field__label-row .form-label {
    margin-bottom: 0;
}

.alta-rapida-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    flex-shrink: 0;
    font-size: .8rem;
    line-height: 1;
    color: var(--ink, #1A1614);
    background-color: transparent;
    border: 1px solid var(--line, #efe7e1);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.alta-rapida-btn:hover {
    background-color: rgba(255, 90, 44, .1);
    border-color: var(--yp, #FF5A2C);
    color: var(--yp, #FF5A2C);
}

.alta-rapida-btn:focus-visible {
    outline: 2px solid var(--yp, #FF5A2C);
    outline-offset: 2px;
}

/* La explicación del modelo, arriba del form del modal */
.ar-descripcion {
    color: #6B615C;
    font-size: .875rem;
}

.ar-descripcion:empty {
    display: none;
}

/* ---------- FAB de ayuda contextual ---------- */
.fab-ayuda {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    /* `--alto-cookies` la mide el banner de cookies de panel_empresa/base.html;
       sin esto el FAB queda tapado justamente donde el banner ocupa el pie. */
    bottom: calc(1rem + var(--alto-cookies, 0px) + env(safe-area-inset-bottom, 0px));
    /* Sobre el contenido y el sidebar, debajo del backdrop de los modales (1050):
       con el modal de ayuda abierto el FAB no tiene que asomar. Con el banner de
       cookies (1090) no compite porque el `bottom` de arriba lo esquiva. */
    z-index: 1030;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line, #efe7e1);
    border-radius: 50%;
    background: #fff;
    color: #6B615C;
    font-size: 1.15rem;
    box-shadow: 0 6px 18px rgba(26, 22, 20, .16);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fab-ayuda:hover {
    background: var(--yp, #FF5A2C);
    border-color: var(--yp, #FF5A2C);
    color: #fff;
    box-shadow: 0 10px 24px rgba(26, 22, 20, .22);
    transform: translateY(-2px);
}

.fab-ayuda:focus-visible {
    outline: 2px solid var(--yp, #FF5A2C);
    outline-offset: 2px;
}

.fab-ayuda:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .fab-ayuda {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }
}

/* El toggle del pie del menú es un <button>: que no herede el look del navegador */
.ayuda-toggle {
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

/* ---------- Contenido del modal de ayuda ---------- */
.ayuda__seccion {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a7f78;
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}

.ayuda__seccion:first-child {
    margin-top: 0;
}

.ayuda__pasos {
    padding-left: 1.15rem;
    margin-bottom: 0;
}

.ayuda__pasos li {
    margin-bottom: .4rem;
}

.ayuda__tips {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.ayuda__tips li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: .4rem;
    color: #6B615C;
}

.ayuda__tips .bi-lightbulb {
    color: #E0A800;
    flex-shrink: 0;
}