/*-------------------------------- CONTAINER --------------------------------*/
.container {
    display: flex;
    margin: 1rem;
    flex-direction: row;
    justify-content: space-between;
}

/*---------------- ÍNDICE ----------------*/
.indice {
    width: 16vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0 5rem 0;
    position: sticky;
    top: 0;
    overflow-x: scroll;
}

.listaIndice {
    padding-left: 1rem;
    list-style-type: none;
}

.indice>div>a,
.indice>div>ul>li>a,
.linkIndice {
    color: var(--color-azul, #36c);
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration-line: none;
}

.listaIndice>li>a {
    font-size: .9rem;
}

/*---------------- CONTENIDO ----------------*/

.contenido {
    width: 80vw;
    display: flex;
    flex-direction: column;
    gap: 20vh;
}

/*Portada*/
.portada {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.descripcion>.nombreAtributo {
    padding: .25rem 0;
}

.grafico,
.coleccion,
.magazine,
.tablasGlobales,
.diagramas,
.view {
    display: flex;
    flex-direction: column;
}

/*Gráfico*/

/*Colección*/

/*Magazine*/
.magazine>.entidadView>.titulo {
    margin-bottom: 2rem;
}

/*Tablas Globales*/
/* .tablasGlobales { margin: 4rem 0; } */

/*Triggers*/
.trigger {
    margin-top: 5rem;
}

.tituloTrigger {
    margin-bottom: 1rem;
}

.descripcionTrigger {
    background-color: var(--color-descripcion);
    padding: .5rem 1rem;
    line-height: 1.25rem;
}

/*Diagramas*/
.diagramas {
    justify-content: left;
    margin: 4rem 0 2rem 0;
    background-color: var(--color-code);
    padding: 2rem;
}

.diagrama p.comment {
    margin-bottom: 2rem;
    font-style: italic;
    color: #808a92;
    font-size: 1rem;
    font-family: 'Victor Mono', 'Ubuntu Mono', monospace;
}

.diagramaGrafico,
.diagramaMagazine,
.diagramaExpo,
.vistasMagazine,
.triggersAutomaticos {
    margin-bottom: 4rem;
}

.vistasMagazine {}

/*--- ---*/
.diagramaGrafico {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(5, auto);
    grid-row-gap: .5rem;
    text-align: center;
    /* margin: 2rem 0 1rem 0; */
}

.diagramaGrafico :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1;
}

.diagramaGrafico :nth-child(2) {
    grid-column: 2/3;
    grid-row: 1;
}

.diagramaGrafico :nth-child(3) {
    grid-column: 3/4;
    grid-row: 1;
}

.diagramaGrafico :nth-child(4) {
    grid-column: 4/5;
    grid-row: 1;
}

.diagramaGrafico :nth-child(5) {
    grid-column: 5/6;
    grid-row: 1;
}

.diagramaGrafico :nth-child(6) {
    grid-column: 1/2;
    grid-row: 2;
}

.diagramaGrafico :nth-child(7) {
    grid-column: 1/2;
    grid-row: 3;
}

.diagramaGrafico :nth-child(8) {
    grid-column: 1/2;
    grid-row: 4;
}

.diagramaGrafico :nth-child(9) {
    grid-column: 1/2;
    grid-row: 5;
}

/*--- ---*/

.diagramaMagazine {
    display: grid;
    grid-template-columns: repeat(7, auto);
    grid-template-rows: repeat(5, auto);
    grid-row-gap: .5rem;
    text-align: center;
    /* margin: 2rem 0 1rem 0; */
}

.diagramaMagazine :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1;
}

.diagramaMagazine :nth-child(2) {
    grid-column: 2/3;
    grid-row: 1;
}

.diagramaMagazine :nth-child(3) {
    grid-column: 3/4;
    grid-row: 1;
}

.diagramaMagazine :nth-child(4) {
    grid-column: 4/5;
    grid-row: 1;
}

.diagramaMagazine :nth-child(5) {
    grid-column: 5/6;
    grid-row: 1;
}

.diagramaMagazine :nth-child(6) {
    grid-column: 6/7;
    grid-row: 1;
}

.diagramaMagazine :nth-child(7) {
    grid-column: 7/8;
    grid-row: 1;
}

.diagramaMagazine :nth-child(8) {
    grid-column: 7/8;
    grid-row: 2;
}

.diagramaMagazine :nth-child(9) {
    grid-column: 7/8;
    grid-row: 3;
}

.diagramaMagazine :nth-child(10) {
    grid-column: 7/8;
    grid-row: 4;
}

.diagramaMagazine :nth-child(11) {
    grid-column: 7/8;
    grid-row: 5;
}

.diagramaExpo {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat( 2, auto);
    grid-row-gap: .5rem;
    text-align: center;
    /* margin: 2rem 0 1rem 0; */
}

.diagramaExpo :nth-child(1) { grid-column: 1/2; grid-row: 1; }
.diagramaExpo :nth-child(2) { grid-column: 2/3; grid-row: 1; }
.diagramaExpo :nth-child(3) { grid-column: 3/4; grid-row: 1; }
.diagramaExpo :nth-child(4) { grid-column: 4/5; grid-row: 1; }
.diagramaExpo :nth-child(5) { grid-column: 5/6; grid-row: 1; }

.diagramaExpo :nth-child(6) { grid-column: 4/5; grid-row: 2; }
.diagramaExpo :nth-child(7) { grid-column: 5/6; grid-row: 2; }
/* .diagramaMagazine :nth-child(8) { grid-column: 7/8; grid-row: 2; }
.diagramaMagazine :nth-child(9) { grid-column: 7/8; grid-row: 3; }
.diagramaMagazine :nth-child(10) { grid-column: 7/8; grid-row: 4; }
.diagramaMagazine :nth-child(11) { grid-column: 7/8; grid-row: 5; } */

/*--- ---*/
.triggersAutomaticos {
    display: grid;
    grid-template-columns: 35% auto;
    grid-template-rows: repeat(3, auto);
    grid-row-gap: .5rem;
    text-align: left;
}

.triggersAutomaticos :nth-child(1) {
    grid-column: 1/2;
    grid-row: 1;
}

.triggersAutomaticos :nth-child(2) {
    grid-column: 2/3;
    grid-row: 1;
}

.triggersAutomaticos :nth-child(3) {
    grid-column: 2/3;
    grid-row: 2;
}

.triggersAutomaticos :nth-child(4) {
    grid-column: 2/3;
    grid-row: 3;
}

/*---------------- GENERALES ----------------*/

/*---- ESTILOS DE TÍTULOS SEPARADORES ----*/
.titulosSeparadores {
    width: 100%;
    text-align: center;
    /* border-top: 1px var(--color-gris) solid; */
    margin-top: 3rem;
    font-style: italic;
}

/*---- ESTILOS DE VIEW ----*/

/*---- ENTIDADES MAESTRAS, INTERMEDIAS, LOCALES & GLOBALES ----*/

.entidadMaestra {
    margin: 0 0 3rem 0;
}

.entidadIntermedia,
.entidadLocal,
.entidadView {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.entidadGlobal {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/*---- ESTILOS DE INFORMACIÓN ----*/
.relacion {
    font-style: italic;
    font-size: .8rem;
}

.titulo {
    padding-bottom: .5rem;
}

.entidadMaestra>.titulo {
    border-bottom: 1px var(--color-gris) solid;
}

.definicion {
    background-color: var(--color-descripcion);
    padding: .5rem 1rem;
    line-height: 1.25rem;
    width: 80vw;
}

/*---- ESTILOS DE ATRIBUTOS ----*/
.atributos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0;
    line-height: 1.25rem;
}

.nombreAtributo {
    font-weight: 800;
    letter-spacing: 1px;
}

.listaDesordenada {
    padding-left: 4rem;
    list-style-type: none;
}

/*---- ESTILOS DE TABLE ----*/
.tabla {
    width: 100%;
    margin: 0 0 1rem 0;
}

.tablaValores {
    min-width: 30%;
    margin-top: 1rem;
}

.nombreTabla,
.cabeceraAtributo {
    text-align: center;
    font-weight: 500;
}

.nombreTabla>th {
    font-size: .9rem;
    background-color: var(--color-blanco);
    color: var(--color-negro);
}

.cabeceraAtributo {
    background-color: var(--color-gris);

}

th,
td {
    padding: .5rem;
    font-size: .8rem;
    border: var(--color-blanco) solid 1px;
    text-align: center;
}

.filaAtributo td:first-child {
    /* text-align: left; */
    font-weight: 600;
}

/*---- ESTILOS DE CODE ----*/

pre {
    background-color: var(--color-code);
    width: 80vw;
    margin: 0 0 2rem 0;
    padding: 2rem;
    overflow: hidden;
}

code {}
/*---- ESTILOS DE NOTAS ----*/

.notas {
    font-size: .8rem;
}



.diagramaVistaMagazine {
    width: calc(80vw - 4rem);
    padding: 0;
    margin: 0;
    overflow: visible;
}