/* Ayuda compacta de atajos del explorador. */

.shortcuts-help {
    position: fixed;
    z-index: 32000;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(18, 35, 46, 0.28);
    backdrop-filter: blur(5px);
}


.shortcuts-help.hidden {
    display: none;
}


.shortcuts-help-card {
    width: min(94vw, 560px);
    max-height: min(88dvh, 720px);

    color: var(--text);
    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 24px 70px
        rgba(20, 48, 65, 0.28);
}


.shortcuts-help-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 14px;

    background: #f3f9fc;
    border-bottom: 1px solid var(--border);
}


.shortcuts-help-card header button {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--text-soft);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;

    font-size: 19px;
    cursor: pointer;
}


.shortcuts-help-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;

    max-height: calc(88dvh - 62px);
    overflow: auto;

    background: var(--border);
}


.shortcuts-help-row {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 12px;

    background: #ffffff;
}


.shortcuts-help-row kbd {
    min-width: 118px;
    flex: 0 0 118px;

    padding: 5px 7px;

    color: #315c76;
    background: #eef7fc;
    border: 1px solid #cfe3ef;
    border-bottom-width: 2px;
    border-radius: 7px;

    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}


.shortcuts-help-row span {
    min-width: 0;

    color: var(--text-soft);
    font-size: 12px;
}


@media screen and (max-width: 760px) {
    .shortcuts-help-list {
        grid-template-columns: 1fr;
    }


    .shortcuts-help-row kbd {
        min-width: 112px;
        flex-basis: 112px;
    }
}