.tabs-accordion{
    /* EDITABLE solo si el menú de pestañas es lateral */
    --tabs-vert-w: 30%; /* ancho del menú lateral */
    --tabs-num: 3;      /* número de opciones del menú */
    /* fin EDITABLE */
    details {
        overflow: hidden; /* prevent an odd blue outline in Safari. */
    }
    .details-content-wrap{
        display: grid; 
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s ease;
    }
    details[open] + .details-content-wrap {
        grid-template-rows: 1fr;
    }
    summary{
        display: block;  /* oculta el bullet triangular */
        cursor: pointer;
    }
    .details-content{
        overflow: hidden;
    }
}

/* Menú de pestañas salvo en mobile: */
.tabs-accordion.tabs-accordion-resp{
    @media (min-width: 768px){
        display: flex;
        flex-wrap: wrap;
        &.tabs-accordion-left{
            flex-direction: column;
        }
        .details-content-wrap {
            display: none;
            width: 100%;
            order: 99;
        }
        details[open]{
            pointer-events: none;
            & + .details-content-wrap {
                display: block;
            }
        }
        &.tabs-lateral{
            display: grid;
            grid-template-columns: var(--tabs-vert-w) 1fr;
            grid-template-rows: repeat(calc(var(--tabs-num) + 1), minmax(min-content, max-content)); /* Debe tener una fila más que el número de items */
            details{
                grid-column: 1;
            }
            .details-content-wrap{
                grid-column: 2;
                grid-row: 1 / -1;
            }
        }
        &.tabs-lateral-right{
            grid-template-columns: 1fr var(--tabs-vert-w);
            details{
                grid-column: 2;
            }
            .details-content-wrap{
                grid-column: 1;
            }
        }
    }
}

/* Menú de pestañas en mobile: (es el mismo css cambiando solo una clase del selector y el mediaquery) */
.tabs-accordion.tabs-accordion-resp.tabs-accordion-mobile-tabs{
    @media (max-width: 767px){
        display: flex;
        flex-wrap: wrap;
        &.tabs-accordion-left{
            flex-direction: column;
        }
        .details-content-wrap {
            display: none;
            width: 100%;
            order: 99;
        }
        details[open]{
            pointer-events: none;
            & + .details-content-wrap {
                display: block;
            }
        }
        &.tabs-lateral{
            display: grid;
            grid-template-columns: var(--tabs-vert-w) 1fr;
            grid-template-rows: repeat(calc(var(--tabs-num) + 1), minmax(min-content, max-content)); /* Debe tener una fila más que el número de items */
            details{
                grid-column: 1;
            }
            .details-content-wrap{
                grid-column: 2;
                grid-row: 1 / -1;
            }
        }
        &.tabs-lateral-right{
            grid-template-columns: 1fr var(--tabs-vert-w);
            details{
                grid-column: 2;
            }
            .details-content-wrap{
                grid-column: 1;
            }
        }
    }
}