@supports(display: grid ) {

  .grid-contenedor-body {
    display: grid;
    grid-template-columns: 12fr;
    grid-template-areas: "header"
                         "contenido";
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-body {
      grid-template-columns: 20px 1fr 20px;
      grid-template-areas: "header header header"
                           "left-panel contenido right-panel";
    }
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-body {
      grid-template-columns: 30px 1fr 30px;
    }
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-body {
      grid-template-columns: 1fr 1028px 1fr;
    }
  }

  .header {
    grid-area: header;
  }

  .contenido {
    grid-area: contenido;
  }

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

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

@supports(display: grid ) {

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

  @media screen and (min-width: 1200px) { 
    .grid-contenedor-franja-migas {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

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

  .left-panel-migas {
    grid-area: left-panel-migas;
  }

  .right-panel-migas {
    grid-area: right-panel-migas;
  }
}

@supports(display: grid ) {

  .grid-contenedor-icono-menu-contextual-migas {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "contenedor-migas";
  }

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

@supports(display: grid) {

  .grid-contenedor-icono-menu-contextual-migas-auxiliar { 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "contenedor-migas-auxiliar";
  }

  .contenedor-migas-auxiliar {
    grid-area: contenedor-migas-auxiliar;
  }
}

@supports(display: grid ) {

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

  @media screen and (min-width: 1200px) { 
    .grid-contenedor-opcion-seleccionada {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-opcion-seleccionada {
    grid-area: contenido-opcion-seleccionada;
  }

  .left-panel-opcion-seleccionada {
    grid-area: left-panel-opcion-seleccionada;
  }

  .right-panel-opcion-seleccionada {
    grid-area: right-panel-opcion-seleccionada;
  }
}

@supports(display: grid ) {

  .grid-contenedor-titulo-opcion-seleccionada-y-descripcion {
    display: grid;
    grid-template-columns: 80px auto;
    grid-template-areas: "titulo-opcion-seleccionada titulo-opcion-seleccionada"
                         "icono-opcion-seleccionada descripcion-opcion-seleccionada";
    grid-gap: 15px;
  }

  @media screen and (min-width: 576px) { 
    .grid-contenedor-titulo-opcion-seleccionada-y-descripcion {
      grid-template-areas: "titulo-opcion-seleccionada titulo-opcion-seleccionada"
                           "icono-opcion-seleccionada descripcion-opcion-seleccionada";
    }
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-titulo-opcion-seleccionada-y-descripcion {
      grid-template-columns: 100px auto;
      grid-gap: 26px;
    }
  }

  .icono-opcion-seleccionada {
    grid-area: icono-opcion-seleccionada;
  }

  .titulo-opcion-seleccionada {
    grid-area: titulo-opcion-seleccionada;
  }

  .explicacion-opcion-seleccionada { 
    grid-area: explicacion-opcion-seleccionada;
  }

  .descripcion-opcion-seleccionada {
    grid-area: descripcion-opcion-seleccionada;
  }
}

@supports(display: grid ) {

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

  @media screen and (min-width: 1200px) { 
    .grid-contenedor-franja-AJ {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-AJ {
    grid-area: contenido-franja-AJ;
  }

  .left-panel-franja-AJ {
    grid-area: left-panel-franja-AJ;
  }

  .right-panel-franja-AJ {
    grid-area: right-panel-franja-AJ;
  }
}

@supports(display: grid ) {

  .grid-contenedor-data-obra {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto;
    grid-template-areas: "entidad"
                         "logo-aj-visible"
                         "nombre-obra"
                         "isbn"
                         "actualizacion"
                         "control-versiones"
                         "creditos"
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-data-obra {
      display: grid;
      grid-row-gap: 10px;
      grid-column-gap: 1rem;
      grid-column-gap: 2rem;
      grid-template-columns: 2fr 2fr;
      grid-template-areas: "logo-aj-visible ."
                           "nombre-obra actualizacion"
                           "isbn control-versiones"
                           "creditos entidad";
    }
  }

  .logo-aj-visible {
    grid-area: logo-aj-visible;
  }

  .nombre-obra {
    grid-area: nombre-obra;
  }

  .actualizacion {
    grid-area: actualizacion;
  }

  .isbn {
    grid-area: isbn;
  }

  .control-versiones {
    grid-area: control-versiones;
  }

  .creditos {
    grid-area: creditos;
  }

  .entidad {
    grid-area: entidad;
  }
}

@media screen and (min-width: 768px) {
  .grid-contenedor-body {
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .contenido-migas {
    margin: 0 var(--margenHorizontalFranjaNormal) 0 var(--margenHorizontalFranjaNormal);
  }
}

@media screen and (min-width: 1200px) {
  .contenido-migas {
    margin: 0;
  }
}

@media screen and (min-width: 1440px) {
  .icono-menu-contextual-migas {
    margin-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .contenedor-icono-menu-contextual-migas {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .contenedor-icono-menu-contextual-migas-auxiliar {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .contenedor-titulo-opcion-seleccionada-y-descripcion {
    margin: 20px 30px 20px 30px;
  }
}

@media screen and (min-width: 1200px) { /* 1140px + 30px x 2 */
  .contenedor-titulo-opcion-seleccionada-y-descripcion {
    margin: 25px 0 25px 0;
  }
}

@media screen and (min-width: 768px) {
  .icono-opcion-seleccionada {
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 768px) {
  .icono-opcion-seleccionada img {
    width: 50px;
    height: 50px;
  }
}

@media screen and (min-width: 768px) {
  .icono-opcion-seleccionada-style {
    font-size: 40px;
  }
}

@media screen and (min-width: 576px) {
  .titulo-opcion-seleccionada {
    width: 90%;
  }
}

@media screen and (min-width: 768px) {
  .titulo-opcion-seleccionada {
    font-size: var(--letraTituloH1Normal);
  }
}

@media screen and (min-width: 576px) {
  .descripcion-opcion-seleccionada {
    width: 80%;
  }
}

@media screen and (min-width: 768px) {
  .descripcion-opcion-seleccionada p {
    font-size: var(--letraDescripcionOpcionSeleccionadaNormal);
    line-height: var(--letraLineHeightDescripcionOpcionSeleccionadaNormal);
  }
}

@media screen and (min-width: 768px) {
  .contenedor-data-obra {
    margin: 0 var(--margenHorizontalFranjaNormal) 0 var(--margenHorizontalFranjaNormal);
  }
}

@media screen and (min-width: 1200px) { 
  .contenedor-data-obra {
    margin: 0;
  }
}

@media screen and (min-width: 992px) {
  .logo-aj-visible {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding-top: 20px; 
  }
}

@media screen and (min-width: 768px) {
  .logo-aj-visible img {
    width: 95px;
    margin-left: -10px;
  }
}

@media screen and (min-width: 992px) {
  .nombre-obra {
    font-size: var(--letra16);
    line-height: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 992px) {
  .isbn {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 992px) {
  .actualizacion {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
  }
}

@media screen and (min-width: 992px) {
  .control-versiones {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
  }
}

@media screen and (min-width: 992px) {
  .creditos {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 992px) {
  .entidad {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    padding: 0 0 40px 0;
  }
}