/* =====================================================================
   DONDE ESTA LA LINEA ENTRE CELULAR Y ESCRITORIO

   820px. De ahi para arriba manda la distribucion de escritorio: las
   tres columnas, no la pagina que se desplaza. Antes la linea estaba
   en 1000px y eso dejaba a CUALQUIER tablet con la pantalla de
   telefono, incluso de lado.

   Entre 820 y 999 las tres columnas caben pero justas, asi que las de
   los lados se estrechan y el panel de codigo se puede cerrar con la
   X para recuperar el lienzo.
   ===================================================================== */
@media (min-width: 820px) and (max-width: 999px){
  #leftCol  { width: 216px }
  #codePanel{ width: 300px }
  /* Los cuatro botones de ayuda, en dos columnas: en una fila de 216px
     «Repasar» se sale. */
  .mp-sec{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
  .mp-sec .btn{ width: 100%; padding: 9px 6px; font-size: 12px }
  .mp-acciones .btn.primary{ padding: 11px }
  /* Lo mismo que en celular: sin relleno abajo, la sombra de la ultima
     fila se la come la lista de componentes. */
  .mp-acciones{ padding-bottom: 14px }
  /* En 300px no caben el rotulo y las cuatro pestanas: la cabecera se
     desbordaba y «Serie» se quedaba fuera. El rotulo es lo
     prescindible, que para eso estan las pestanas. Y la X sobra: el
     boton «Codigo» de la barra de arriba ya abre y cierra el panel, y
     es por donde se recupera el lienzo. */
  #codeTitle{ display: none }
  #codePanel .panel-head{ gap: 6px; padding: 8px 9px }
  #codePanel .tabs-mini{ margin-left: 0; flex: 1; justify-content: center }
  #codePanel .tabs-mini .mini{ padding: 5px 7px; font-size: 11px }
  /* La tira del paso, mas corta: en la barra hay menos sitio. */
  #topbar > .mp-head{ max-width: 330px }
  #topbar > .mp-head .mp-pasos{ width: 110px }
}

/* =====================================================================
   vidrio-leccion.css — LA LECCION EN ESCRITORIO

   Lo que falta para que la pantalla de leccion sea la del PDF «App en
   escritorio · alternativa», pagina 4: el panel de codigo oscuro con
   el editor en vidrio, la pestana en la que estas en pildora negra, y
   figuras de color detras del lienzo para que el vidrio se note.

   El celular no entra aqui: ahi el codigo ya se abre como cajon de
   vidrio oscuro, que es lo que pide el documento escrito.
   ===================================================================== */

@media (min-width: 820px){

  /* --- 0. La tira del paso, en la barra de arriba -------------------- */
  /* Pildora de vidrio con «Salir», el titulo de la leccion y las
     barritas de los pasos, igual que en el documento. Antes esto vivia
     en lo alto de la columna izquierda, sobre blanco y sin vidrio. */
  #topbar > .mp-head{
    flex: 1; min-width: 0; max-width: 560px;
    display: flex; align-items: center; gap: 12px;
    margin: 0 8px; padding: 7px 14px;
    /* El vidrio fuerte, no el claro: ahora la barra es negra, y con el
       45% el titulo de tinta se quedaba en 4.49 de contraste, justo por
       debajo de la norma. Con el 60% sube a 7.0. */
    background: var(--vidrio-claro-fuerte);
    border: 2px solid var(--tinta); border-radius: 18px;
    box-shadow: var(--brillo-superior), var(--sombra-dura);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    #topbar > .mp-head{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
  }
  #topbar > .mp-head .mp-salir{
    background: var(--crema); color: var(--rojo-texto);
    border: 2px solid var(--tinta); border-radius: 12px;
    box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  }
  #topbar > .mp-head .mp-cerrar{ display: none }
  #topbar > .mp-head .mp-tit{ display: flex; align-items: center; gap: 12px }
  #topbar > .mp-head .mp-tit b{
    font-size: 14px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; color: var(--tinta);
  }
  #topbar > .mp-head .mp-pasos{ margin: 0; flex: none; width: 190px; gap: 5px }
  #topbar > .mp-head .mp-pasos i{
    height: 7px; border-radius: 4px; border: 1.5px solid var(--tinta);
    background: rgba(255,255,255,.55);
  }
  #topbar > .mp-head .mp-pasos i.ok { background: #00c07a }
  #topbar > .mp-head .mp-pasos i.now{ background: #8b97fd }
  /* En la barra ya no hace falta el borde de separacion que tenia
     cuando era lo alto de una columna. */
  #topbar > .mp-head{ border-bottom-width: 2px }
  /* Con la tira puesta, el nombre del proyecto del taller sobra. */
  body[data-modo="leccion"] #projectName{ display: none }

  /* --- 1. El panel de codigo, negro ---------------------------------- */
  #codePanel{ background: var(--tinta) }
  #codePanel .panel-head{ background: #ffdf2b; border-bottom: 3px solid var(--tinta) }

  /* El editor va dentro de una tarjeta de vidrio oscuro con aire
     alrededor: en el diseno es una tarjeta, no el panel entero. */
  #codePanel .editor-wrap,
  #codePanel #bloquesView,
  #codePanel #diagramaView,
  #codePanel .serial-out{
    margin: 12px; border-radius: 16px;
    background: var(--vidrio-oscuro);
    border: 1.5px solid var(--borde-vidrio-oscuro);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  }
  /* El editor se desplaza por dentro (.editor-scroll), asi que aqui se
     recorta y ya esta. */
  #codePanel .editor-wrap{ overflow: hidden }
  /* Estos tres SI crecen hacia abajo. Antes llevaban «overflow: hidden»
     —estaba puesto para redondear la esquina de la tarjeta— y con eso
     todo lo que pasara del alto del panel quedaba inalcanzable: con la
     pila de piezas llena no se podia llegar al boton de «anadir una
     pieza». Recortar la esquina ya lo hace el border-radius; para eso
     basta con que el overflow no sea «visible». */
  #codePanel #bloquesView,
  #codePanel #diagramaView,
  #codePanel .serial-out{ overflow: auto }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    #codePanel .editor-wrap,
    #codePanel #bloquesView,
    #codePanel #diagramaView,
    #codePanel .serial-out{
      -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
    }
  }
  #codePanel #editor, #codePanel .highlight{ background: transparent; color: #f2f2ee }
  #codePanel .gutter{ background: transparent; color: #9a9aa6 }
  #codePanel .serial-out{ color: #e8e8ef }
  #codePanel .serial-out .sys{ color: #9a9aa6 }
  #codePanel .serial-out .tx { color: #a7b2ff }
  #codePanel .serial-out .err{ color: #ff8f8f }

  /* El pie: «listo» sobre negro pide gris claro, no gris oscuro. */
  #codePanel .editor-bar{ background: transparent; border-top: 0; padding: 0 12px 12px }
  #codePanel #editorStatus{ color: #b9b9c4 }
  #codePanel .serial-in{ background: transparent; border-top: 0; padding: 0 12px 12px }
  #codePanel .serial-in input{
    background: rgba(255,255,255,.08); color: var(--crema);
    border-color: var(--borde-vidrio-oscuro);
  }
  #codePanel .serial-in input::placeholder{ color: #9a9aa6 }
  /* Los dos botones del pie, en sus colores del diseno. */
  #codePanel #btnVerify  { background: #00c07a; color: var(--tinta); border-color: var(--tinta) }
  #codePanel #btnSnippets{ background: var(--crema); color: var(--tinta); border-color: var(--tinta) }

  /* --- 1b. Los bloques, dentro del panel oscuro ---------------------- */
  /* El editor de bloques esta pensado para fondo claro: los titulos,
     el «anade una pieza» y los textos sueltos van en tinta. Sobre el
     panel negro eso es negro sobre negro y no se lee nada. Aqui se le
     da la vuelta: lo estructural en crema, y las piezas siguen siendo
     pegatinas solidas encima del vidrio oscuro. */
  #codePanel #bloquesView{
    background-color: var(--vidrio-oscuro);
    background-image: radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
  }
  #codePanel .bl-tit{ color: var(--crema) }
  #codePanel .bl-tit small{ color: #b9b9c4 }
  #codePanel .bl-grupo > b{ color: #b9b9c4 }
  #codePanel .bl-mas{
    border-color: var(--borde-vidrio-oscuro); color: #d2d2db;
    background: rgba(255,255,255,.05);
  }
  #codePanel .bl-mas:hover{
    border-color: var(--crema); color: var(--tinta); background: var(--crema);
  }
  /* La pieza, pegatina entera: cuerpo crema y cabecera de color. */
  #codePanel .bl-pieza{ background: var(--crema); box-shadow: 0 3px 0 rgba(0,0,0,.5) }
  #codePanel .bl-dentro{ color: var(--tinta) }

  /* Los resplandores de color del panel negro. En el diseno se ven a
     traves del vidrio del editor, que es lo que hace que parezca
     vidrio de verdad y no un recuadro gris. */
  #codePanel{ position: relative; overflow: hidden }
  #codePanel::before{
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(circle at 108% 38%, #ff5454 0 150px, transparent 151px),
      radial-gradient(circle at -8% 82%,  #8b97fd 0 140px, transparent 141px),
      radial-gradient(circle at 96% 104%, #ffdf2b 0 110px, transparent 111px);
    filter: blur(26px); opacity: .55;
  }
  #codePanel > *{ position: relative; z-index: 1 }

  /* --- 1c. El diagrama y el monitor serie, en el panel oscuro -------- */
  /* Mismo problema que los bloques: las dos vistas estan pensadas para
     fondo claro y todo lo estructural va en tinta, o sea negro sobre
     negro. Las cajas blancas se leian; lo demas, no. */
  #codePanel .dg-cab b{ color: var(--crema) }
  #codePanel .dg-cab small{ color: #b9b9c4 }
  #codePanel .dg-cab{ border-bottom-color: var(--borde-vidrio-oscuro) }
  #codePanel .dg-vacio, #codePanel .dg-nada{ color: #b9b9c4 }
  #codePanel .dg-rama{ color: #b9b9c4 }
  /* Las flechas que unen los pasos, en crema: son el hilo que se sigue
     para leer el diagrama y eran lo mas invisible de todo. */
  #codePanel .dg-flecha{ background: var(--crema) }
  #codePanel .dg-flecha::after{ border-top-color: var(--crema) }
  #codePanel .dg-caja{ box-shadow: 0 3px 0 rgba(0,0,0,.5) }

  /* El monitor serie: fondo del panel, texto claro. */
  #codePanel .serial-out{ background: transparent; color: #e8e8ef }
  #codePanel .serial-out .sys{ color: #9a9aa6 }
  #codePanel .serial-out .tx { color: #a7b2ff }
  #codePanel .serial-out .err{ color: #ff8f8f }
  #codePanel .serial-in{ border-top-color: var(--borde-vidrio-oscuro) }
  #codePanel .serial-in input{
    background: rgba(255,255,255,.08); color: var(--crema);
    border: 1.5px solid var(--borde-vidrio-oscuro); border-radius: 12px;
  }
  #codePanel .serial-in input::placeholder{ color: #9a9aa6 }
  #codePanel .serial-in .btn{ background: var(--crema); color: var(--tinta); border-color: var(--tinta) }

  /* --- 2. Las pestanas ----------------------------------------------- */
  /* Sobre la cabecera amarilla van dentro de una capsula crema, y la
     pestana en la que estas es una pildora negra. Antes la activa era
     crema sobre amarillo y apenas se distinguia de las demas. */
  #codePanel .tabs-mini{
    background: var(--crema); border: 2px solid var(--tinta);
    border-radius: 999px; padding: 3px; gap: 2px;
    box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  }
  #codePanel .tabs-mini .mini{
    border-radius: 999px; padding: 5px 13px; border: 2px solid transparent;
    background: none; color: var(--tinta); font-weight: 800;
  }
  #codePanel .tabs-mini .mini:hover{ background: rgba(22,22,29,.10) }
  #codePanel .tabs-mini .mini.active{
    background: var(--tinta); color: var(--crema);
    border-color: var(--tinta); box-shadow: 0 2px 0 rgba(0,0,0,.35);
  }

  /* El boton de la ventanita del paso va en negro, como en el diseno:
     el rojo esta reservado para «Comprobar», que es la accion que de
     verdad decide algo. */
  .vpaso .vp-sig{
    background: var(--tinta); color: var(--crema);
    border: 2px solid var(--tinta); border-radius: 14px;
    box-shadow: 0 3px 0 rgba(0,0,0,.45);
  }

  /* --- 3. Las figuras detras del lienzo ------------------------------ */
  /* Sin ellas el vidrio no se ve: desenfocar crema da crema. Van en un
     pseudoelemento del lienzo, por debajo del SVG del circuito. */
  #stage::before{
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(circle at 58% -14%, #ff5454 0 118px, transparent 119px),
      radial-gradient(circle at -6% 108%, #00c07a 0 110px, transparent 111px),
      radial-gradient(circle at 104% 88%, #ffdf2b 0 100px, transparent 101px),
      radial-gradient(circle at 101% 16%, #8b97fd 0 78px,  transparent 79px);
    /* Flojas y pegadas a los bordes: el circuito manda, esto solo le da
       al vidrio algo que desenfocar. */
    opacity: .34;
  }
  /* Solo el SVG del circuito se levanta por encima de las figuras. Si
     se le pone position a TODOS los hijos del lienzo, las ventanas
     flotantes (el paso, las herramientas, el zoom) pierden su
     position:absolute y se van al final de la pagina. */
  #stage > #canvas{ position: relative; z-index: 0; background: transparent }
  #stage > #canvas #gridBg{ opacity: .6 }
}

/* ---------------------------------------------------------------------
   MENOS TRANSPARENCIA
   El fondo ya sale opaco por el token; falta quitar el desenfoque.
   --------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce){
  #codePanel .editor-wrap,
  #codePanel #bloquesView,
  #codePanel #diagramaView,
  #codePanel .serial-out{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  #stage::before{ display: none }
}