@supports(display: grid ) {
  .grid-contenedor-body {
    display: grid;
    min-height: 100%;
    grid-template-columns: 12fr;
    grid-template-areas: "header"
                         "contenido";
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: 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;
  }
}

@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) { 
    .grid-contenedor-franja-navegacion-visor {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  @media screen and (min-width: 1590px) { 
    .visor-wide .grid-contenedor-franja-navegacion-visor {
      grid-template-columns: 1fr minmax(1530px, 1600px) 1fr; 
    }
  }

  .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;
  }
}

@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;
  }
}

@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;
  }
}

@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) { 
    .grid-contenedor-franja-visor {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  @media screen and (min-width: 1590px) { 
    .visor-wide .grid-contenedor-franja-visor {
      grid-template-columns: 1fr minmax(1530px, 1600px) 1fr; 
    }
  }

  .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;
  }
}

@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);  
      grid-template-areas: "panel-botones panel-fondo-documento";
    }
  }

  @media screen and (min-width: 1590px) { 
    .visor-wide .grid-contenedor-contenido-visor {
      display: grid;
      grid-template-columns: var(--botonVisorNormalSize) auto minmax(1060px, 1080px); 
      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;
  }
}

@supports(display: grid ) {
  .grid-contenedor-panel-botones {
    display: grid;    
    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-busqueda"
                           "boton-indice";
      grid-column-gap: 0;
    }
  }
}

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

@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;
  }
}

@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;
  }
}

@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;
  }
}

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

@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;
  }
}

@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;
  }
}

@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;
  }
}

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

@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;
  }
}

@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;
  }
}

@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;
  }
}

@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;
  }
}

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

@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;
  }
}

@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;
  }
}

@supports(display: grid ) {
  .grid-contenedor-panel-lista-memoria-documentos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-documentos-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";
  }
}

@supports(display: grid ) {
  .grid-contenedor-panel-lista-memoria-actos-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-memoria-actos-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";
  }
}

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

@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;
  }
}

@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;
  }
}

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

@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;
  }
}

@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;
  }
}

@supports(display: grid ) {
  .grid-contenedor-panel-lista-modificaciones-normativas-visor {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "item-lista-modificaciones-normativas-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";
  }
}

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

@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;
  }
}

@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;
  }
}

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

}

@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;
  }
}

@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;
  }
}

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

@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;
  }
}

@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;
  }
}

@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";
  }
}

@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;
  }
}