main {margin:10vh auto;}









@media (max-width:400px){
main{width:90%;}
}

@media (min-width:401px) and (max-width:768px){
main{width:90%; }
}


@media (min-width:769px) and (max-width:992px){
main{width:90%; }
}



@media (min-width:993px) and (max-width:1340px){
main{width:80%;  grid-template-columns: 2fr 1fr; }
}


@media (min-width:1341px) and (max-width:1920px){
main{width:75%;  grid-template-columns: 2fr 1fr; }
}

@media (min-width:1921px) and (max-width:2560px){
main{width:65%;  grid-template-columns: 2fr 1fr; }
}

@media (min-width:2561px) and (max-width:3840px){
main{width:60%;  grid-template-columns: 2fr 1fr; }
}

@media (min-width:3841px){
main{width:55%;  grid-template-columns: 2fr 1fr; }
}














.contenido {max-width: 100%;}
.content ol, .content ul {margin:0 2rem 3rem;}
.contenido a{text-decoration:underline; font-weight: bold; }
.contenido h2{margin-top:calc(2.5rem + 2vw);}
header ul {list-style-type: none; padding-bottom:2rem; padding-left:0;}
header li {display:inline; margin-right:2rem;}

code{display:inline-block;color:#0f2f3f; padding-top:1rem; font-weight: bold;}
pre {
  position: relative;
  padding: 0 0 1rem 0;
  border: 1px solid #bbb;
  background: #0c0c0c;
  border-radius: 6px;
  margin: 1rem 0 2rem 0;
  color: #fff;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  tab-size: 2;

  white-space: pre;
  overflow-x: auto;              /* scroll horizontal del código */
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

pre strong {
  position: sticky;
  top: 0;        /* se queda arriba si hubiese scroll vertical */
  left: 0;       /* se queda pegado a la izquierda aunque haya scroll horizontal */
  z-index: 1;    /* para que quede por encima del código */
  
  display: block;
  padding: 0.5rem 1rem;
  background: #2f2f2f;
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-weight: bold;
}



/* Asegura bloque y apilado correcto */
pre > code{ display:block; position: relative; z-index: 0; }


/* En pantallas pequeñas: límite de altura + scroll vertical */
@media (max-width: 768px) {
  pre {
    max-height: 60vh;
    overflow-y: auto;    /* si el bloque supera 60% de la altura de la pantalla */
  }
}

pre code{padding:0rem 2rem 2rem 2rem; display:inline-block;}
pre em {font-style: normal;}
pre span {color:#0f2f3f;}
mark {background:transparent; color:#006DA3; font-weight: bold;}


.comentario,
.selector,
.propiedad,
.propiedades,
.clase,
.identificador,
.valor,
.rojo,
.verde,
.azul,
.morado,
.naranja,
.amarillo {font-family:consolas,'SCTO grotesk', serif; font-size: 1rem;}


.comentario {color:#FFDAB3;}
.selector{color:lime; }
.propiedad, .propiedades{ color:#ffbb00;}
.clase{ color:#FF7EE2;}
.identificador { color:#FFFF80;}
.valor{color:#77BEF0;}
/**** CELDAS CÓDIGO **/


.copy p {font-size: 0.9rem;}
.reference {margin-top:1.5rem; display:inline-block;}
.fas {margin-right:1rem;}

.color-clase1, .rojo     { color: #ff6b6b; }   /* brillante, contraste alto */
.color-clase2, .verde    { color: #9be564; }   /* verde lima, se lee muy bien */
.color-clase3, .azul     { color: #4dabf7; }   /* azul claro, contrastado */
.color-clase4, .morado   { color: #b794f6; }   /* violeta suave pero legible */
.color-semantica, .color-clase5, .naranja  { color: #f78c6c; }   /* naranja vivo */
.color-clase6, .amarillo { color: #ffd166; }   /* amarillo cálido, no quema */

.texto-color{color:#fff;}