/* ICBF requiere que la franja-migas y la franja-navegacion-visor estén por fuera del header, */
/* como parte de grid-contenedor-contenido                                                    */

/* grid-contenedor-body */

@supports(display: grid ) {

  .grid-contenedor-body {
    display: grid;
    min-height: 100%;
    grid-template-columns: 12fr;
    grid-template-areas: "header"
                         "contenido";
    /* Incluye: header y main */
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: contenido;
  }

}

/* -> grid-contenedor-body */


/* grid-contenedor-contenido */

@supports(display: grid ) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-migas"
                         "franja-navegacion-visor"
                         "franja-visor";
  }

  .franja-migas {
    grid-area: franja-migas;
  }

  .franja-navegacion-visor {
    grid-area: franja-navegacion-visor;
  }

  .franja-visor {
    grid-area: franja-visor;
  }
}

/* -> grid-contenedor-contenido */


/* El comportamiento de grid-contenedor-franja-navegacion-visor debe ser el mismo de la grid del visor,    */
/* es decir, el mismo de grid-contenedor-contenido-visor                                                   */


/* grid-contenedor-franja-navegacion-visor */

@supports(display: grid ) {

  .grid-contenedor-franja-navegacion-visor {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-navegacion-visor contenido-franja-navegacion-visor right-panel-franja-navegacion-visor";
  }

  @media screen and (min-width: 1200px) { /* (30px + 1140px + 30px), 30px es el margin-left y margin-right de contenido-visor <- queda fijo el ancho de contenido-visor */
    .grid-contenedor-franja-navegacion-visor {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  @media screen and (min-width: 1590px) { /* (30px + 120px + 350px + 20px + 1020px + 20px + 30px ), 30px es el margin-left y margin-right de contenido-visor */
    .visor-wide .grid-contenedor-franja-navegacion-visor {
      grid-template-columns: 1fr minmax(1530px, 1600px) 1fr; /* <- queda variable el ancho de contenido-visor:           */
                                                             /*    Mínimo: 120px + 350px + 20px + 1020px + 20px = 1530px */
                                                             /*                            --------------------          */
                                                             /*                                   1060px                 */
                                                             /*    Máximo: 120px + 400px + 30px + 1020px + 30px = 1600px */
                                                             /*                            --------------------          */
                                                             /*                                   1080px                 */
                                                             /*    20px y 30px son el margen de panel-fondo-documento    */
    }
  }

  .contenido-franja-navegacion-visor {
    grid-area: contenido-franja-navegacion-visor;
  }

  .left-panel-franja-navegacion-visor {
    grid-area: left-panel-franja-navegacion-visor;
  }

  .right-panel-franja-navegacion-visor {
    grid-area: right-panel-franja-navegacion-visor;
  }
}

/* -> grid-contenedor-franja-navegacion-visor */


/* grid-contenedor-navegacion-visor */

@supports(display: grid ) {

  .grid-contenedor-navegacion-visor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "panel-titulo-documento panel-titulo-documento"
                         "panel-boton-anotaciones panel-botones-acciones";
    grid-row-gap: 15px;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-navegacion-visor {
      grid-template-columns: 1fr auto auto;
      grid-template-areas: "panel-titulo-documento panel-boton-anotaciones panel-botones-acciones";
      grid-row-gap: 0;
    }
  }

  .panel-titulo-documento {
    grid-area: panel-titulo-documento;
  }

  .panel-boton-anotaciones {
    grid-area: panel-boton-anotaciones;
  }

  .panel-botones-acciones {
    grid-area: panel-botones-acciones;
  }
}

/* -> grid-contenedor-navegacion-visor */


/* grid-contenedor-panel-botones-acciones */

@supports(display: grid ) {

  .grid-contenedor-panel-botones-acciones {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "panel-boton-suin panel-boton-download-sencillo"; 
  }

  @media screen and (min-width: 576px) {
    .grid-contenedor-panel-botones-acciones {
      grid-column-gap: 10px; 
    }
  }

  .panel-boton-suin {
    grid-area: panel-boton-suin;
  }

  .panel-boton-download-sencillo {
    grid-area: panel-boton-download-sencillo;
  }
}

/* -> grid-contenedor-panel-botones-acciones */

/* -> grid-contenedor-panel-botones-acciones */


/* La estructura del visor es la siguiente:                                                                 */
/*                                                                                                          */
/* <div class="franja-visor visor-wide">                                                                    */
/* 	<div class="contenedor-franja-visor">                                                                   */
/* 		<div class="grid-contenedor-franja-visor">                                                            */
/* 			<div class="left-panel-contenido-visor"></div>                                                      */
/* 			<div class="contenido-visor"> <- container de panel-fondo-documento                                 */
/* 				<div class="contenedor-contenido-visor">                                                          */
/* 					<div class="grid-contenedor-contenido-visor">                                                   */
/* 						<div class="panel-botones">                                                                   */
/* 						</div>                                                                                        */
/* 						<div class="panel-auxiliar">                                                                  */
/* 						</div>                                                                                        */
/* 						<div class="panel-fondo-documento">                                                           */
/* 							<div class="panel-documento">                                                               */
/* 							</div>                                                                                      */
/* 						</div>                                                                                        */
/* 					</div>                                                                                          */
/* 				</div>                                                                                            */
/* 			</div>                                                                                              */
/* 			<div class="right-panel-contenido-visor"></div>                                                     */
/* 		</div>                                                                                                */
/* 	</div>                                                                                                  */
/* </div>                                                                                                   */

/* panel-fondo-documento maneja 2 versiones: 1) Cuando el container tiene 1140px, 2) Cuando el container    */
/* puede tener más de 1530px (120px + 350px + 1020px + 20px * 2) de ancho. La version 2) maneja la class    */
/* "visor-wide" acompañando la class "franja-visor".                                                        */

/* El ancho máximo normal de contenido-visor y de grid-contenedor-contenido-visor es 1140px                 */
/* Para la class "visor-wide" el ancho máximo de contenido-visor es:                                        */
/* 120px + 400px + 1020px + 30px * 2 = 1600px, en consecuencia, este es el ancho máximo de la columna       */
/* correspondiente en grid-contenedor-contenido-visor -> minmax(1530px, 1600px). 30px es el margen de       */
/* panel-fondo-documento a partir de 1920px                                                                 */

/* La columna de botones a la izquierda está visible para anchos a partir de 768px y tiene ancho de 120px.  */
/* El ancho normal de panel-documento cuando el container es de 1140px es entonces:                         */
/* 1140px - 120px = 1020px (letter size).                                                                   */
/* El ancho mínimo del panel-auxiliar es de 350px, con un máximo de 400px, así, entonces, el panel-auxiliar */
/* puede aparecer para anchos a partir de: 30px + 120px + 350px + 20px + 1020px + 20px + 30px = 1590px,     */
/* siempre y cuando contenido-visor lo admita. 20px es el margen de panel-fondo-documento para resolución   */
/* entre 1590px y 1920px.                                                                                   */
/* Para efectos de diseño del visor AJ, únicamente estará visible el panel-auxiliar si contenido-visor      */
/* tiene ancho superior a 1530px + 30px * 2 de margin-left y margin-right, es decir: 1590px de width de la  */
/* ventana. Para este efecto se dispondrá de la class "visor-wide"                                          */


/* grid-contenedor-franja-visor */

@supports(display: grid ) {

  .grid-contenedor-franja-visor {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr;
    grid-template-areas: "left-panel-contenido-visor contenido-visor right-panel-contenido-visor";
  }

  @media screen and (min-width: 1200px) { /* (30px + 1140px + 30px), 30px es el margin-left y margin-right de contenido-visor <- queda fijo el ancho de contenido-visor */
    .grid-contenedor-franja-visor {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  @media screen and (min-width: 1590px) { /* (30px + 120px + 350px + 20px + 1020px + 20px + 30px ), 30px es el margin-left y margin-right de contenido-visor */
    .visor-wide .grid-contenedor-franja-visor {
      grid-template-columns: 1fr minmax(1530px, 1600px) 1fr; /* <- queda variable el ancho de contenido-visor:           */
                                                             /*    Mínimo: 120px + 350px + 20px + 1020px + 20px = 1530px */
                                                             /*                            --------------------          */
                                                             /*                                   1060px                 */
                                                             /*    Máximo: 120px + 400px + 30px + 1020px + 30px = 1600px */
                                                             /*                            --------------------          */
                                                             /*                                   1080px                 */
                                                             /*    20px y 30px son el margen de panel-fondo-documento    */
    }
  }

  .contenido-visor {
    grid-area: contenido-visor;
  }

  .left-panel-contenido-visor {
    grid-area: left-panel-contenido-visor;
  }

  .right-panel-contenido-visor {
    grid-area: right-panel-contenido-visor;
  }
}

/* -> grid-contenedor-franja-visor */


/* Para el visor normal grid-contenedor-contenido-visor, con ancho máximo de 1140px, incluye: panel-botones y */
/* panel-fondo-documento; ambos paneles comparten el ancho máximo.                                            */
/* Para la class "visor-wide", con ancho máximo de 1660px, grid-contenedor-contenido-visor incluye:           */
/* panel-botones, panel-auxiliar y panel-fondo-documento                                                      */

@supports(display: grid ) {

  .grid-contenedor-contenido-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "panel-botones"
                         "panel-fondo-documento";
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-contenido-visor {
      display: grid;
      grid-template-columns: var(--botonVisorNormalSize) minmax(597px, 1020px);  /* <- queda variable el ancho de panel-fondo-documento:     */
                                                                                 /*    Mínimo: 20px + 1020px + 20px = 1060px                 */
                                                                                 /*    Máximo: 30px + 1020px + 30px = 1080px                 */
                                                                                 /*    20px y 30px son el margen de panel-fondo-documento    */
                                                                                 /*    768px - 120px - 20px * 2 - 1px * 3 = 597px */
      grid-template-areas: "panel-botones panel-fondo-documento";
    }
  }

  @media screen and (min-width: 1590px) { /* 30px + 120px + 350px + 20px + 1020px + 20px + 30px = 1590px */
    .visor-wide .grid-contenedor-contenido-visor {
      display: grid;
      grid-template-columns: var(--botonVisorNormalSize) auto minmax(1060px, 1080px); /* <- queda variable el ancho de panel-fondo-documento:     */
                                                                                      /*    Mínimo: 20px + 1020px + 20px = 1060px                 */
                                                                                      /*    Máximo: 30px + 1020px + 30px = 1080px                 */
                                                                                      /*    20px y 30px son el margen de panel-fondo-documento    */
      grid-template-areas: "panel-botones panel-auxiliar panel-fondo-documento";
    }
  }

  .panel-botones {
    grid-area: panel-botones;
  }

  .panel-auxiliar {
    grid-area: panel-auxiliar;
  }

  .panel-fondo-documento {
    grid-area: panel-fondo-documento;
  }

}

/* -> grid-contenedor-contenido-visor */





/* grid-contenedor-panel-botones */

@supports(display: grid ) {

  .grid-contenedor-panel-botones {
    display: grid;
    /* grid-template-columns: auto auto auto auto auto auto auto auto auto; */
    /* grid-template-areas: "boton-datos boton-busqueda boton-indice boton-memoria boton-desarrollos boton-modificaciones-visor boton-concordancias-visor boton-notificaciones boton-actos-tramite"; */
    grid-template-columns: var(--botonVisorSmallSize) var(--botonVisorSmallSize);
    grid-template-areas: "boton-busqueda boton-indice";
    grid-column-gap: 10px;
  }

  .boton-datos {
    grid-area: boton-datos;
  }

  .boton-busqueda {
    grid-area: boton-busqueda;
  }

  .boton-indice {
    grid-area: boton-indice;
  }

  .boton-memoria {
    grid-area: boton-memoria;
  }

  .boton-desarrollos {
    grid-area: boton-desarrollos;
  }

  .boton-modificaciones-visor {
    grid-area: boton-modificaciones-visor;
  }

  .boton-concordancias-visor {
    grid-area: boton-concordancias-visor;
  }

  .boton-notificaciones {
    grid-area: boton-notificaciones;
  }

  .boton-actos-tramite {
    grid-area: boton-actos-tramite;
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-panel-botones {
      display: grid;
      grid-template-columns: auto;
      grid-template-areas: /* "boton-datos" */
                           "boton-busqueda"
                           "boton-indice"
                           /* "boton-memoria" */
                           /* "boton-desarrollos" */
                           /* "boton-modificaciones-visor" */
                           /* "boton-concordancias-visor" */
                           /* "boton-notificaciones" */
                           /* "boton-actos-tramite" */;
      grid-column-gap: 0;
    }

  }

}

/* -> grid-contenedor-panel-botones */


/* grid-contenedor-panel-botones-modales */

@supports(display: grid ) {

  .grid-contenedor-panel-botones-modales {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

}

/* -> grid-contenedor-panel-botones-modales */


/* grid-contenedor-boton-modal */

@supports(display: grid ) {

  .grid-contenedor-boton-modal {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 62px 1fr 56px;
    grid-template-areas: "imagen-boton-modal titulo-boton-modal ver-mas-boton-modal";
  }

  .imagen-boton-modal {
    grid-area: imagen-boton-modal;
  }

  .titulo-boton-modal {
    grid-area: titulo-boton-modal;
  }

  .ver-mas-boton-modal {
    grid-area: ver-mas-boton-modal;
  }

}

/* -> grid-contenedor-opcion-nueva */


/* grid-contenedor-panel-datos */

@supports(display: grid ) {

  .grid-contenedor-panel-datos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-datos"
                         "descripcion-panel-datos"
                         "panel-datos-visor";
    grid-gap: 20px;
  }

  .titulo-panel-datos {
    grid-area: titulo-panel-datos;
  }

  .descripcion-panel-datos {
    grid-area: descripcion-panel-datos;
  }

  .panel-datos-visor {
    grid-area: panel-datos-visor;
  }
}

/* -> grid-contenedor-panel-datos */


/* grid-contenedor-panel-datos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-datos-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-datos-visor"
                         "panel-lista-datos-visor";
  }

  .titulo-datos-visor {
    grid-area: titulo-datos-visor;
  }

  .panel-lista-datos-visor {
    grid-area: panel-lista-datos-visor;
  }
}

/* -> grid-contenedor-panel-datos-visor */


/* grid-contenedor-panel-lista-datos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-datos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-datos-visor";
  }

}

/* -> grid-contenedor-panel-lista-datos-visor */


/* grid-contenedor-panel-busqueda */

@supports(display: grid ) {

  .grid-contenedor-panel-busqueda {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-busqueda"
                         "descripcion-panel-busqueda"
                         "panel-casilla-busqueda-visor"
                         "panel-resultados-visor";
    grid-gap: 20px;
  }

  .titulo-panel-busqueda {
    grid-area: titulo-panel-busqueda;
  }

  .descripcion-panel-busqueda {
    grid-area: descripcion-panel-busqueda;
  }

  .panel-casilla-busqueda-visor {
    grid-area: panel-casilla-busqueda-visor;
  }

  .panel-resultados-visor {
    grid-area: panel-resultados-visor;
  }
}

/* -> grid-contenedor-panel-busqueda */


/* grid-contenedor-panel-texto-a-buscar */

@supports(display: grid ) {

  .grid-contenedor-panel-texto-a-buscar {
    display: grid;
    grid-template-columns: auto 50px 50px;
    grid-template-areas: "input-casilla-busqueda-visor boton-buscar-texto-visor boton-nueva-busqueda-visor";
  }

  .input-casilla-busqueda-visor {
    grid-area: input-casilla-busqueda-visor;
  }

  .boton-buscar-texto-visor {
    grid-area: boton-buscar-texto-visor;
  }

  .boton-nueva-busqueda-visor {
    grid-area: boton-nueva-busqueda-visor;
  }
}

/* -> grid-contenedor-panel-texto-a-buscar */


/* grid-contenedor-panel-resultados-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-resultados-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-resultados-visor"
                         "panel-lista-resultados-visor";
  }

  .titulo-resultados-visor {
    grid-area: titulo-resultados-visor;
  }

  .panel-lista-resultados-visor {
    grid-area: panel-lista-resultados-visor;
  }
}

/* -> grid-contenedor-panel-resultados-visor */


/* grid-contenedor-panel-lista-resultados-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-resultados-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-resultados-visor";
  }

}

/* -> grid-contenedor-panel-lista-resultados-visor */


/* grid-contenedor-panel-indice */

@supports(display: grid ) {

  .grid-contenedor-panel-indice {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-indice"
                         "descripcion-panel-indice"
                         "panel-casilla-busqueda-articulo-visor"
                         "panel-casilla-busqueda-indice-visor"
                         "panel-indice-visor";
    grid-gap: 20px;
  }

  .titulo-panel-indice {
    grid-area: titulo-panel-indice;
  }

  .descripcion-panel-indice {
    grid-area: descripcion-panel-indice;
  }

  .panel-casilla-busqueda-indice-visor {
    grid-area: panel-casilla-busqueda-indice-visor;
  }

  .panel-casilla-busqueda-articulo-visor {
    grid-area: panel-casilla-busqueda-articulo-visor;
  }

  .panel-indice-visor {
    grid-area: panel-indice-visor;
  }
}

/* -> grid-contenedor-panel-indice */


/* grid-contenedor-panel-casilla-busqueda-indice-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-busqueda-indice-visor {
    display: grid;
    grid-template-columns: auto 50px 50px;
    grid-template-areas: "input-casilla-busqueda-indice-visor boton-buscar-texto-indice-visor boton-nueva-busqueda-indice-visor";
  }

  .input-casilla-busqueda-indice-visor {
    grid-area: input-casilla-busqueda-indice-visor;
  }

  .boton-buscar-texto-indice-visor {
    grid-area: boton-buscar-texto-indice-visor;
  }

  .boton-nueva-busqueda-indice-visor {
    grid-area: boton-nueva-busqueda-indice-visor;
  }
}

/* -> grid-contenedor-panel-casilla-busqueda-indice-visor */


/* grid-contenedor-panel-casilla-busqueda-articulo-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-casilla-busqueda-articulo-visor {
    display: grid;
    grid-template-columns: auto 50px;
    grid-template-areas: "input-casilla-busqueda-articulo-visor boton-buscar-articulo-visor";
  }

  .input-casilla-busqueda-articulo-visor {
    grid-area: input-casilla-busqueda-articulo-visor;
  }

  .boton-buscar-articulo-visor {
    grid-area: boton-buscar-articulo-visor;
  }
}

/* -> grid-contenedor-panel-casilla-busqueda-articulo-visor */


/* grid-contenedor-panel-indice-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-indice-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-indice-visor"
                         "panel-lista-indice-visor";
  }

  .titulo-indice-visor {
    grid-area: titulo-indice-visor;
  }

  .panel-lista-indice-visor {
    grid-area: panel-lista-indice-visor;
  }
}

/* -> grid-contenedor-panel-indice-visor */


/* grid-contenedor-panel-lista-indice-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-indice-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-indice-visor";
  }

}

/* -> grid-contenedor-panel-lista-indice-visor */


/* grid-contenedor-panel-memoria */

@supports(display: grid ) {

  .grid-contenedor-panel-memoria {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-memoria"
                         "descripcion-panel-memoria"
                         "panel-memoria-visor";
    grid-gap: 20px;
  }

  .titulo-panel-memoria {
    grid-area: titulo-panel-memoria;
  }

  .descripcion-panel-memoria {
    grid-area: descripcion-panel-memoria;
  }

  .panel-memoria-visor {
    grid-area: panel-memoria-visor;
  }
}

/* -> grid-contenedor-panel-memoria */


/* grid-contenedor-panel-memoria-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-memoria-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-memoria-documentos-visor"
                         "panel-lista-memoria-documentos-visor"
                         "titulo-memoria-abogacia-visor"
                         "panel-lista-memoria-abogacia-visor"
                         "titulo-memoria-actos-visor"
                         "panel-lista-memoria-actos-visor"
                         "titulo-memoria-videos-visor"
                         "panel-lista-memoria-videos-visor"
                         "titulo-memoria-original-visor"
                         "panel-lista-memoria-original-visor";
  }

  .titulo-memoria-documentos-visor {
    grid-area: titulo-memoria-documentos-visor;
  }

  .panel-lista-memoria-documentos-visor {
    grid-area: panel-lista-memoria-documentos-visor;
  }

  .titulo-memoria-abogacia-visor {
    grid-area: titulo-memoria-abogacia-visor;
  }

  .panel-lista-memoria-abogacia-visor {
    grid-area: panel-lista-memoria-abogacia-visor;
  }


  .titulo-memoria-actos-visor {
    grid-area: titulo-memoria-actos-visor;
  }

  .panel-lista-memoria-actos-visor {
    grid-area: panel-lista-memoria-actos-visor;
  }

  .titulo-memoria-videos-visor {
    grid-area: titulo-memoria-videos-visor;
  }

  .panel-lista-memoria-videos-visor {
    grid-area: panel-lista-memoria-videos-visor;
  }

  .titulo-memoria-original-visor {
    grid-area: titulo-memoria-original-visor;
  }

  .panel-lista-memoria-original-visor {
    grid-area: panel-lista-memoria-original-visor;
  }
}

/* -> grid-contenedor-panel-memoria-visor */


/* .grid-contenedor-panel-lista-memoria-documentos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-memoria-documentos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-documentos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-memoria-documentos-visor */


/* .grid-contenedor-panel-lista-memoria-abogacia-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-memoria-abogacia-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-abogacia-visor";
  }

}

/* -> .grid-contenedor-panel-lista-memoria-abogacia-visor */


/* .grid-contenedor-panel-lista-memoria-actos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-memoria-actos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-actos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-memoria-actos-visor */


/* .grid-contenedor-panel-lista-memoria-videos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-memoria-videos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-videos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-memoria-videos-visor */


/* .grid-contenedor-panel-lista-memoria-original-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-memoria-original-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-original-visor";
  }

}

/* -> .grid-contenedor-panel-lista-memoria-original-visor */


/* grid-contenedor-panel-desarrollos */

@supports(display: grid ) {

  .grid-contenedor-panel-desarrollos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-desarrollos"
                         "descripcion-panel-desarrollos"
                         "panel-desarrollos-visor";
    grid-gap: 20px;
  }

  .titulo-panel-desarrollos {
    grid-area: titulo-panel-desarrollos;
  }

  .descripcion-panel-desarrollos {
    grid-area: descripcion-panel-desarrollos;
  }

  .panel-desarrollos-visor {
    grid-area: panel-desarrollos-visor;
  }
}

/* -> grid-contenedor-panel-desarrollos */


/* grid-contenedor-panel-desarrollos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-desarrollos-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-desarrollos-actos-visor"
                         "panel-lista-desarrollos-actos-visor";
  }

  .titulo-desarrollos-actos-visor {
    grid-area: titulo-desarrollos-actos-visor;
  }

  .panel-lista-desarrollos-actos-visor {
    grid-area: panel-lista-desarrollos-actos-visor;
  }
}

/* -> grid-contenedor-panel-desarrollos-visor */


/* .grid-contenedor-panel-lista-desarrollos-actos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-desarrollos-actos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-desarrollos-actos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-desarrollos-actos-visor */


/* grid-contenedor-panel-modificaciones */

@supports(display: grid ) {

  .grid-contenedor-panel-modificaciones {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-modificaciones"
                         "descripcion-panel-modificaciones"
                         "panel-modificaciones-visor";
    grid-gap: 20px;
  }

  .titulo-panel-modificaciones {
    grid-area: titulo-panel-modificaciones;
  }

  .descripcion-panel-modificaciones {
    grid-area: descripcion-panel-modificaciones;
  }

  .panel-modificaciones-visor {
    grid-area: panel-modificaciones-visor;
  }
}

/* -> grid-contenedor-panel-modificaciones */


/* grid-contenedor-panel-modificaciones-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-modificaciones-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-modificaciones-normativas-visor"
                         "panel-lista-modificaciones-normativas-visor"
                         "titulo-modificaciones-jurisprudenciales-visor"
                         "panel-lista-modificaciones-jurisprudenciales-visor"
                         "titulo-modificaciones-doctrinales-visor"
                         "panel-lista-modificaciones-doctrinales-visor";
  }

  .titulo-modificaciones-normativas-visor {
    grid-area: titulo-modificaciones-normativas-visor;
  }

  .panel-lista-modificaciones-normativas-visor {
    grid-area: panel-lista-modificaciones-normativas-visor;
  }

  .titulo-modificaciones-jurisprudenciales-visor {
    grid-area: titulo-modificaciones-jurisprudenciales-visor;
  }

  .panel-lista-modificaciones-jurisprudenciales-visor {
    grid-area: panel-lista-modificaciones-jurisprudenciales-visor;
  }

  .titulo-modificaciones-doctrinales-visor {
    grid-area: titulo-modificaciones-doctrinales-visor;
  }

  .panel-lista-modificaciones-doctrinales-visor {
    grid-area: panel-lista-modificaciones-doctrinales-visor;
  }

}

/* -> grid-contenedor-panel-modificaciones-visor */


/* grid-contenedor-panel-lista-modificaciones-normativas-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-modificaciones-normativas-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-modificaciones-normativas-visor";
  }

}

/* -> grid-contenedor-panel-lista-modificaciones-normativas-visor */


/* grid-contenedor-panel-lista-modificaciones-jurisprudenciales-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-modificaciones-jurisprudenciales-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-modificaciones-jurisprudenciales-visor";
  }

}

/* -> grid-contenedor-panel-lista-modificaciones-jurisprudenciales-visor */


/* grid-contenedor-panel-lista-modificaciones-doctrinales-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-modificaciones-doctrinales-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-modificaciones-doctrinales-visor";
  }

}

/* -> grid-contenedor-panel-lista-modificaciones-doctrinales-visor */


/* grid-contenedor-panel-concordancias */

@supports(display: grid ) {

  .grid-contenedor-panel-concordancias {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-concordancias"
                         "descripcion-panel-concordancias"
                         "panel-concordancias-visor";
    grid-gap: 20px;
  }

  .titulo-panel-concordancias {
    grid-area: titulo-panel-concordancias;
  }

  .descripcion-panel-concordancias {
    grid-area: descripcion-panel-concordancias;
  }

  .panel-concordancias-visor {
    grid-area: panel-concordancias-visor;
  }
}

/* -> grid-contenedor-panel-concordancias */


/* grid-contenedor-panel-concordancias-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-concordancias-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-concordancias-constitucion-visor"
                         "panel-lista-concordancias-constitucion-visor"
                         "titulo-concordancias-leyes-visor"
                         "panel-lista-concordancias-leyes-visor"
                         "titulo-concordancias-decretos-leyes-visor"
                         "panel-lista-concordancias-decretos-leyes-visor"
                         "titulo-concordancias-decretos-visor"
                         "panel-lista-concordancias-decretos-visor"
                         "titulo-concordancias-acuerdos-visor"
                         "panel-lista-concordancias-acuerdos-visor"
                         "titulo-concordancias-resoluciones-visor"
                         "panel-lista-concordancias-resoluciones-visor"
                         "titulo-concordancias-circulares-visor"
                         "panel-lista-concordancias-circulares-visor"
                         "titulo-concordancias-conceptos-visor"
                         "panel-lista-concordancias-conceptos-visor";
  }

  .titulo-concordancias-constitucion-visor {
    grid-area: titulo-concordancias-constitucion-visor;
  }

  .panel-lista-concordancias-constitucion-visor {
    grid-area: panel-lista-concordancias-constitucion-visor;
  }

  .titulo-concordancias-leyes-visor {
    grid-area: titulo-concordancias-leyes-visor;
  }

  .panel-lista-concordancias-leyes-visor {
    grid-area: panel-lista-concordancias-leyes-visor;
  }

  .titulo-concordancias-decretos-leyes-visor {
    grid-area: titulo-concordancias-decretos-leyes-visor;
  }

  .panel-lista-concordancias-decretos-leyes-visor {
    grid-area: panel-lista-concordancias-decretos-leyes-visor;
  }

  .titulo-concordancias-decretos-visor {
    grid-area: titulo-concordancias-decretos-visor;
  }

  .panel-lista-concordancias-decretos-visor {
    grid-area: panel-lista-concordancias-decretos-visor;
  }

  .titulo-concordancias-acuerdos-visor {
    grid-area: titulo-concordancias-acuerdos-visor;
  }

  .panel-lista-concordancias-acuerdos-visor {
    grid-area: panel-lista-concordancias-acuerdos-visor;
  }

  .titulo-concordancias-resoluciones-visor {
    grid-area: titulo-concordancias-resoluciones-visor;
  }

  .panel-lista-concordancias-resoluciones-visor {
    grid-area: panel-lista-concordancias-resoluciones-visor;
  }

  .titulo-concordancias-circulares-visor {
    grid-area: titulo-concordancias-circulares-visor;
  }

  .panel-lista-concordancias-circulares-visor {
    grid-area: panel-lista-concordancias-circulares-visor;
  }

  .titulo-concordancias-conceptos-visor {
    grid-area: titulo-concordancias-conceptos-visor;
  }

  .panel-lista-concordancias-conceptos-visor {
    grid-area: panel-lista-concordancias-conceptos-visor;
  }

}

/* -> grid-contenedor-panel-concordancias-visor */


/* grid-contenedor-panel-lista-concordancias-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-concordancias-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-concordancias-visor";
  }

}

/* -> grid-contenedor-panel-lista-concordancias-visor */


/* grid-contenedor-panel-notificaciones */

@supports(display: grid ) {

  .grid-contenedor-panel-notificaciones {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-notificaciones"
                         "descripcion-panel-notificaciones"
                         "panel-notificaciones-visor";
    grid-gap: 20px;
  }

  .titulo-panel-notificaciones {
    grid-area: titulo-panel-notificaciones;
  }

  .descripcion-panel-notificaciones {
    grid-area: descripcion-panel-notificaciones;
  }

  .panel-notificaciones-visor {
    grid-area: panel-notificaciones-visor;
  }
}

/* -> grid-contenedor-panel-notificaciones */


/* grid-contenedor-panel-notificaciones-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-notificaciones-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-notificaciones-actos-visor"
                         "panel-lista-notificaciones-actos-visor";
  }

  .titulo-notificaciones-actos-visor {
    grid-area: titulo-notificaciones-actos-visor;
  }

  .panel-lista-notificaciones-actos-visor {
    grid-area: panel-lista-notificaciones-actos-visor;
  }
}

/* -> grid-contenedor-panel-notificaciones-visor */


/* .grid-contenedor-panel-lista-notificaciones-actos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-notificaciones-actos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-notificaciones-actos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-notificaciones-actos-visor */


/* grid-contenedor-panel-actos-tramite */

@supports(display: grid ) {

  .grid-contenedor-panel-actos-tramite {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-panel-actos-tramite"
                         "descripcion-panel-actos-tramite"
                         "panel-actos-tramite-visor";
    grid-gap: 20px;
  }

  .titulo-panel-actos-tramite {
    grid-area: titulo-panel-actos-tramite;
  }

  .descripcion-panel-actos-tramite {
    grid-area: descripcion-panel-actos-tramite;
  }

  .panel-actos-tramite-visor {
    grid-area: panel-actos-tramite-visor;
  }
}

/* -> grid-contenedor-panel-actos-tramite */


/* grid-contenedor-panel-actos-tramite-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-actos-tramite-visor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulo-actos-tramite-actos-visor"
                         "panel-lista-actos-tramite-actos-visor";
  }

  .titulo-actos-tramite-actos-visor {
    grid-area: titulo-actos-tramite-actos-visor;
  }

  .panel-lista-actos-tramite-actos-visor {
    grid-area: panel-lista-actos-tramite-actos-visor;
  }
}

/* -> grid-contenedor-panel-actos-tramite-visor */


/* .grid-contenedor-panel-lista-actos-tramite-actos-visor */

@supports(display: grid ) {

  .grid-contenedor-panel-lista-actos-tramite-actos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-actos-tramite-actos-visor";
  }

}

/* -> .grid-contenedor-panel-lista-actos-tramite-actos-visor */


/* grid-contenedor-panel-lateral-modal */

@supports(display: grid ) {

  .grid-contenedor-panel-lateral-modal {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "boton-cerrar-panel-modal"
                         "contenido-panel-lateral-modal";
  }

  .boton-cerrar-panel-modal {
    grid-area: boton-cerrar-panel-modal;
  }

  .contenido-panel-lateral-modal {
    grid-area: contenido-panel-lateral-modal;
  }
}

/* -> grid-contenedor-panel-lateral-modal */