/* ============================================================
   leyendaTheme.css — Leyenda de la cabecera para financiApp
   Comportamiento: js/leyendaTheme.js

   Sustituye a la «Leyenda:» que colgaba al pie de cada listado.
   La leyenda al pie ocupa una franja permanente para algo que se
   consulta una vez y no se vuelve a mirar; aquí vive en un panel
   que se abre desde el botón «?» de la cabecera de la tabla.

   Markup:
     <div class="app-leyenda">
         <button type="button" class="app-leyenda-btn"
                 title="Qué significa cada icono">
             <i class="fa fa-question"></i>
         </button>
         <div class="app-leyenda-panel">
             <div class="app-leyenda-titulo">Acciones</div>
             <div class="app-leyenda-item">
                 <span class="usu-btn usu-btn-editar app-leyenda-ico">
                     <i class="fa fa-pencil"></i>
                 </span>Editar
             </div>
         </div>
     </div>

   El icono de cada ítem es el botón REAL de la fila (su propia
   clase) más .app-leyenda-ico, que solo le fija el tamaño y lo
   deja mudo: si cambia el color de una acción, la leyenda lo
   sigue sola. El panel se sale de la tarjeta, así que el
   contenedor del listado no puede llevar overflow:hidden.
   ============================================================ */

.app-leyenda {
    position: relative;
    display: inline-flex;
}

.app-leyenda-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe2ec;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}

.app-leyenda-btn:hover,
.app-leyenda-btn:focus,
.app-leyenda.abierta .app-leyenda-btn {
    border-color: var(--sgi-color);
    color: var(--sgi-color);
    background: var(--sgi-color-soft);
    outline: none;
}

.app-leyenda-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;                /* por encima de la tabla y del thead fijo */
    min-width: 236px;
    /* Un listado con muchas insignias no puede empujar el panel fuera de la
       pantalla: a partir de cierto alto, el propio panel se desplaza. */
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 26, 46, .16);
    /* Cerrado no ocupa foco ni clicks; la transición sale de la propia caja. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.app-leyenda.abierta .app-leyenda-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Piquito hacia el botón. Cuelga de la caja y no del panel: si el panel se
   desplaza por dentro, el piquito se queda donde está el botón. */
.app-leyenda.abierta::after {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    z-index: 1051;
    width: 9px;
    height: 9px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.app-leyenda-titulo {
    padding: 6px 10px 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a9b3c1;
}

/* Un panel puede llevar varios bloques (Acciones, Estado...); a
   partir del segundo, el título se separa con una línea. */
.app-leyenda-titulo + .app-leyenda-item { margin-bottom: 0; }
.app-leyenda-item + .app-leyenda-titulo {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #eef2f7;
}

.app-leyenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    color: #475569;
    white-space: nowrap;
}

.app-leyenda-item:hover { background: #f6f8fb; }

/* El icono conserva el aspecto del botón real de la fila; aquí
   solo se le fija el tamaño y se le quita la interacción. Los dos
   niveles de clase ganan a la regla de tamaño de la vista. */
.app-leyenda .app-leyenda-ico {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    line-height: 1;
    cursor: inherit;
    pointer-events: none;
    transform: none;
}

.app-leyenda .app-leyenda-ico i { font-size: 12px; }

/* Etiquetas de texto (RET, DET, «Sin mapear»): no son iconos, así
   que no se les impone el cuadrado. */
.app-leyenda .app-leyenda-tag {
    flex: 0 0 auto;
    margin: 0;
    cursor: inherit;
    pointer-events: none;
}

@media (max-width: 480px) {
    .app-leyenda-panel {
        min-width: 0;
        width: max-content;
        max-width: 78vw;
    }
    .app-leyenda-item { white-space: normal; }
}