/* =====================================================================
   vidrio-celular.css — LA APP EN CELULAR

   Lo que pide «IT Tool AI · App alternativa», paginas 6 a 9: entrar,
   mapa, leccion y el chat de Chispa. La idea de las cuatro es la
   misma: barras negras, una franja de color que da el contexto, y los
   paneles oscuros con manchas de color por debajo para que el vidrio
   se note.

   Lo de escritorio esta en vidrio-mapa.css y vidrio-leccion.css, cada
   uno con su consulta de medios; aqui no se pisa nada de aquello.
   ===================================================================== */

/* =====================================================================
   1. ENTRAR  (pagina 6)
   Arriba una franja roja con el logo en su baldosa de vidrio y la
   marca; abajo, fondo negro con manchas de color y la ficha del
   formulario en vidrio oscuro.
   ===================================================================== */
/* Con #homeInner y no .home-inner a proposito: el lienzo del mapa
   pinta su cuadricula y sus figuras con un selector de identificador, y
   en la pantalla de entrar se colaban encima del negro. */
body.portada-entrar #homeInner{
  padding: 0 0 34px;
  background-color: var(--tinta);
  background-image:
    radial-gradient(circle at 112% 46%, #8b97fd 0 150px, transparent 151px),
    radial-gradient(circle at -14% 88%, #00c07a 0 140px, transparent 141px),
    radial-gradient(circle at 104% 96%, #ff5454 0 120px, transparent 121px);
  background-repeat: no-repeat;
}
body.portada-entrar #homeInner > *:not(.adornos){ max-width: none; margin: 0 }
/* Los adornos que flotan son del mapa; aqui sobran y quedan como
   motas sueltas sobre el negro. */
body.portada-entrar .adornos{ display: none }

body.portada-entrar .acceso{
  max-width: none; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* --- la franja roja de arriba --- */
.acceso-cima{
  padding: 34px 20px 30px; text-align: center; position: relative;
  border-bottom: 3px solid var(--tinta);
  background-color: #ff5454;
  background-image:
    radial-gradient(circle at -6% -18%, #ffdf2b 0 95px, transparent 96px),
    radial-gradient(circle at 104% 72%, #8b97fd 0 110px, transparent 111px),
    var(--cuadricula-sobre-color);
  background-size: auto, auto, 24px 24px, 24px 24px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
.acceso-cima > *{ position: relative; z-index: 1 }
/* El logo en su baldosa de vidrio, que sobre el rojo se tine de rosa:
   eso es exactamente lo que hace el vidrio y es lo que se ve en el
   documento. */
.acceso-cima .bv-logo{
  width: 112px; height: 112px; padding: 16px; border-radius: 28px;
  background: rgba(255,255,255,.42); border: 3px solid var(--tinta);
  box-shadow: var(--brillo-superior), var(--sombra-dura-grande);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .acceso-cima .bv-logo{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
/* Crema sobre rojo da 3.14. Como texto normal no pasa; a partir de
   24px cuenta como texto grande y el minimo baja a 3.0. De ahi los
   26px, que son un tamano minimo y no una eleccion estetica. */
.acceso-cima .acceso-mano{
  margin: 18px 0 2px; font-size: 26px; color: var(--crema);
}
.acceso-cima h2{ margin: 0; font-size: clamp(30px, 8.5vw, 40px); color: var(--tinta) }

/* --- la ficha del formulario, en vidrio oscuro --- */
.acceso-ficha{
  margin: 26px 16px 0; padding: 22px 18px 20px; text-align: center;
  /* Negro casi opaco como RESPALDO: es lo que ve quien tenga un
     navegador que no sabe desenfocar. Por debajo pasan manchas de
     color fuertes y sin desenfoque el crema quedaria a su merced. */
  background: rgba(22,22,29,.80);
  border: 1.5px solid var(--borde-vidrio-oscuro); border-radius: 24px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  color: var(--crema);
}
/* Donde SI se puede desenfocar, la ficha se vuelve mucho mas
   transparente y los circulos se ven pasar por debajo. Lo que hace que
   siga leyendose no es el negro, es el brightness: el filtro OSCURECE
   lo que hay detras en vez de taparlo, asi que el color sigue ahi pero
   apagado. Sobre la mancha lila, que es la peor, el crema queda en 9.6
   de contraste y el texto de ejemplo de los campos en 5.2; con solo
   bajar la opacidad, sin el brightness, se quedaba en 1.5. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .acceso-ficha{
    background: rgba(22,22,29,.30);
    -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(.55);
    backdrop-filter: blur(22px) saturate(1.5) brightness(.55);
  }
}
.acceso-ficha .acceso-sub2{ font-size: 17px; color: #ffdf2b; margin: 0 0 6px }
.acceso-ficha .acceso-sub { font-size: 13.5px; color: #cfcfd8; margin: 0 0 18px }

/* «Continuar con Google» en crema, que es el unico boton claro. */
.acceso-ficha .btn.google{
  width: 100%; justify-content: center;
  background: var(--crema); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura);
  font-weight: 800;
}
.acceso-ficha .acceso-o{ color: #a6a6b2 }
.acceso-ficha .acceso-o::before{ background: rgba(255,255,255,.22) }
.acceso-ficha .acceso-o span{ background: none }

/* Los campos: oscuros y translucidos, con su etiqueta encima. */
/* Los campos se escriben con el selector de atributo porque asi esta
   la regla de vidrio-app.css —.acceso input[type=email]— y con solo
   .bv-input pesaba menos y seguia ganando la clara.

   Hueco oscuro y no blanco al 7%: encima de la mancha lila el gris del
   texto de ejemplo se quedaba en 3.88 de contraste. Con el hueco en
   negro al 38% sube a 6.1. */
.acceso-ficha input[type="email"],
.acceso-ficha input[type="password"],
.acceso-ficha input[type="text"],
.acceso-ficha .bv-input{
  background: rgba(0,0,0,.38); color: var(--crema);
  border: 1.5px solid var(--borde-vidrio-oscuro); border-radius: 15px;
  box-shadow: none; text-align: left;
}
.acceso-ficha .bv-input::placeholder{ color: #9a9aa6 }
.acceso-ficha .bv-input:focus{ outline: 3px solid #8b97fd; outline-offset: 2px; border-color: transparent }

.acceso-ficha .bv-go{
  background: #ff5454; color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 16px;
  box-shadow: var(--brillo-boton), var(--sombra-dura);
}
.acceso-ficha .acceso-pie{ color: #cfcfd8 }
.acceso-ficha .acceso-pie a{ color: #ffdf2b; text-decoration: underline }
.acceso-ficha .acceso-pie a#acOlvide{ color: var(--crema) }
.acceso-ficha .consent{ color: #cfcfd8; text-align: left }
.acceso-ficha .consent b{ color: var(--crema) }
.acceso-ficha .acceso-error{
  background: rgba(255,84,84,.18); border: 1.5px solid #ff8f8f; color: #ffd7d7;
}

/* ---------------------------------------------------------------------
   ENTRAR ES UNA PANTALLA APARTE, EN TODOS LOS TAMANOS

   La pantalla de acceso se pinta dentro de #homeInner, o sea dentro
   del mapa, y en escritorio eso hacia que saliera CON el mapa: la
   barra lateral con Mapa, Taller y Cursos, la ficha del perfil con el
   nivel y los XP, y «El recorrido» a la derecha. Nada de eso existe
   todavia para quien aun no ha entrado.

   Aqui se apaga todo el armazon del mapa mientras body lleva
   .acceso-abierto. La pinta de la portada —franja roja arriba y ficha
   sobre negro— va aparte, con .portada-entrar, porque las otras
   pantallas de acceso (el rol, el consentimiento, elegir perfil) son
   tarjetas sobre crema y con el negro quedaban en tinta sobre tinta.
   --------------------------------------------------------------------- */
body.acceso-abierto #ladoNav,
body.acceso-abierto #homeRuta,
body.acceso-abierto #homeBanda,
body.acceso-abierto #homeHdr,
body.acceso-abierto #mapaTabs{ display: none !important }

body.acceso-abierto[data-modo="mapa"] #home{
  display: block; grid-template-columns: none; grid-template-areas: none;
}
body.acceso-abierto #homeCuerpo{ display: block; height: 100% }
body.portada-entrar #homeInner{ height: 100% }

/* De tablet para arriba la misma idea, solo que con mas aire y la
   ficha centrada: la franja cruza entera y el formulario no se estira
   a lo ancho de la pantalla. */
@media (min-width: 760px){
  .acceso-cima{ padding: 54px 20px 46px }
  .acceso-cima .bv-logo{ width: 128px; height: 128px; border-radius: 32px }
  .acceso-cima .acceso-mano{ margin-top: 22px; font-size: 30px }
  .acceso-cima h2{ font-size: 46px }
  .acceso-ficha{ max-width: 460px; margin: 34px auto 0; padding: 26px 24px 24px }
  /* Las manchas de color estaban puestas para 390px y en una pantalla
     ancha se quedaban fuera de cuadro: el negro quedaba muerto y la
     ficha de vidrio no tenia nada que recoger. */
  /* Las manchas se meten hacia el centro para que pasen POR DEBAJO de
     la ficha: si se quedan en los bordes, el vidrio no tiene nada que
     recoger justo donde se mira. */
  body.portada-entrar #homeInner{
    background-image:
      radial-gradient(circle at 33% 72%, #8b97fd 0 235px, transparent 236px),
      radial-gradient(circle at 71% 34%, #00c07a 0 205px, transparent 206px),
      radial-gradient(circle at 54% 116%, #ff5454 0 195px, transparent 196px);
  }
}


/* =====================================================================
   2. EL MAPA  (pagina 7)
   Barra negra arriba con el perfil y los tres chips; franja roja con
   el nivel que toca, su barra de progreso y el boton de continuar;
   lienzo con el camino; y abajo una barra negra de pestanas.
   ===================================================================== */
@media (max-width: 999px){

  /* EL MAPA TIENE QUE PODER DESPLAZARSE.

     #homeInner lleva flex:1 y overflow:auto desde siempre, pero eso
     solo sirve si su padre es una caja flexible con altura. Al meterlo
     dentro de #homeCuerpo —para poder sacar la cabecera y la franja
     roja— se quedo dentro de un bloque sin altura: crecia hasta el
     tamano del contenido, el sobrante se iba a #home, que recorta, y
     no habia nada que desplazar en ninguna parte. */
  body[data-modo="mapa"] #homeCuerpo{
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
  }

  /* --- la barra de arriba, negra --- */
  #homeHdr{
    background: var(--tinta); border-bottom: 3px solid var(--tinta);
    gap: 10px; padding: 10px 14px;
  }
  /* El perfil deja de ser una pildora crema: en el diseno es el avatar
     y el nombre sueltos sobre el negro. */
  #homeHdr .perfil-chip{
    background: none; border: 0; box-shadow: none; padding: 0; gap: 10px;
  }
  #homeHdr .perfil-chip > span:first-child{
    width: 42px; height: 42px; border: 2px solid var(--tinta);
    background: #8b97fd; color: var(--tinta);
  }
  #homeHdr .pc-txt b{ font: 900 15px/1.1 var(--f-titulo); text-transform: uppercase; color: var(--crema) }
  #homeHdr .pc-txt small{ color: #b9b9c4 }
  #homeHdr .xp-wrap{ display: none }        /* su sitio lo ocupa la franja */
  .hdr-chips{ display: flex; gap: 6px; margin-left: auto }
  .hdr-chips > *{
    display: flex; align-items: center; gap: 5px;
    padding: 6px 11px; border: 2px solid var(--tinta); border-radius: 999px;
    font: 900 13px/1 var(--f-texto); color: var(--tinta);
    box-shadow: var(--brillo-boton);
  }
  .hdr-chips .ico{ width: 14px; height: 14px }
  #homeHdr #btnCambiarPerfil{ color: var(--crema) }

  /* --- la franja roja --- */
  #homeBanda{
    display: block; flex: none; padding: 16px 16px 18px;
    border-bottom: 3px solid var(--tinta);
    background-color: #ff5454;
    background-image:
      radial-gradient(circle at 104% -6%, #ffdf2b 0 105px, transparent 106px),
      var(--cuadricula-sobre-color);
    background-size: auto, 24px 24px, 24px 24px;
    background-repeat: no-repeat, repeat, repeat;
  }
  .banda-etiqueta{
    display: inline-block; margin-bottom: 8px; padding: 5px 12px;
    background: var(--crema); border: 2px solid var(--tinta); border-radius: 999px;
    font: 900 10.5px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinta); box-shadow: 0 2px 0 var(--tinta);
  }
  .banda-txt h2{
    margin: 0 0 12px; font: 900 27px/1.05 var(--f-titulo);
    text-transform: uppercase; color: var(--tinta); letter-spacing: -.01em;
  }
  /* Crema sobre rojo da 3.14: pasa como texto grande, de 24px para
     arriba. Por eso el .9em, que aqui son 24.3px. */
  .banda-txt h2 .mano{
    display: inline; margin-left: .2em;
    font-family: var(--f-mano); font-weight: 400; font-size: .9em;
    text-transform: none; letter-spacing: 0; color: var(--crema);
  }
  .banda-txt p{ display: none }             /* el subtitulo no cabe */

  .banda-barra{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
  .bb-pista{
    flex: 1; height: 16px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.55); border: 2px solid var(--tinta);
  }
  .bb-pista i{ display: block; height: 100%; background: #ffdf2b; transition: width .5s }
  .banda-barra b{ font: 900 14px/1 var(--f-texto); color: var(--tinta) }

  .banda-panel{
    background: none; border: 0; box-shadow: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .banda-panel::before{ display: none }
  .banda-chips{ display: none }             /* ya estan en la barra de arriba */
  .banda-seguir{
    width: 100%; padding: 15px; border: 2px solid var(--tinta); border-radius: 18px;
    background: var(--tinta); color: var(--crema); cursor: pointer;
    font: 900 17px/1 var(--f-texto); display: flex; align-items: center;
    justify-content: center; gap: 9px; box-shadow: var(--sombra-dura);
  }
  .banda-seguir .ico{ width: 18px; height: 18px }
  .banda-seguir[disabled]{ opacity: .55 }

  /* En celular el lienzo tambien ensena solo la unidad que toca: la
     franja de arriba ya dice cual es, y asi el camino no es una lista
     de doce tramos. Las cabeceras de unidad sobran por lo mismo. */
  #homeInner .unidad{ display: none }
  #homeInner .unidad.enCanvas{ display: block; margin: 0; padding: 18px 0 40px }
  #homeInner .uni-head{ display: none }
  #homeInner .mapa-pie, #homeInner .taller-cerrado, #homeInner .graduado,
  #homeInner .mapa-colegio{ display: none }

  /* --- el camino y los nodos --- */
  .camino{ gap: 30px; padding-top: 10px; position: relative }
  .camino::before{ display: none }          /* la recta vertical sobra */
  .camino-linea{
    position: absolute; left: 0; top: 0; pointer-events: none;
    color: var(--tinta); opacity: .78; z-index: 0;
  }
  #homeInner .unidad.enCanvas .nodo{ position: relative; z-index: 1; overflow: visible }
  #homeInner .unidad.enCanvas .nodo.ahora .nodo-ic::before{
    content: ""; position: absolute; inset: -13px; border-radius: 50%;
    background: #ffd3d3; z-index: -1;
  }
  /* La etiqueta, al lado del nodo. Los de la derecha la sacan a la
     izquierda para no salirse de la pantalla. */
  .nodo-eti{
    position: absolute; left: calc(50% + 44px); top: 50%; translate: 0 -50%;
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    background: var(--crema); border: 2px solid var(--tinta);
    border-radius: 999px; padding: 5px 12px;
    box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  }
  .nodo[style*="--off:1"] .nodo-eti{ left: auto; right: calc(50% + 44px) }
  .nodo-nom{ max-width: 150px; overflow: hidden; text-overflow: ellipsis }
  .nodo-est{ color: #e0a500 }
  /* La del nodo que toca es una tarjeta negra. */
  .nodo-eti.eti-ahora{
    flex-direction: column; align-items: flex-start; gap: 2px;
    white-space: normal; width: 190px;
    background: var(--tinta); border-radius: 18px; padding: 11px 13px;
    box-shadow: var(--sombra-dura);
  }
  .eti-num{ font: 900 10.5px/1 var(--f-texto); letter-spacing: .08em;
            text-transform: uppercase; color: #ffdf2b }
  .eti-tit{ font: 800 14px/1.25 var(--f-texto); color: var(--crema); white-space: normal }
  .eti-sub{ font-size: 11.5px; color: #b9b9c4 }

  /* --- la barra de pestanas de abajo, negra --- */
  #mapaTabs{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; gap: 4px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--tinta); border: 0; border-top: 3px solid var(--tinta);
    border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .mapatab{
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 4px; border: 2px solid transparent; border-radius: 16px;
    background: none; color: var(--crema); cursor: pointer;
    font: 800 11.5px/1 var(--f-texto);
  }
  .mt-ic{
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 2px solid var(--tinta); border-radius: 12px; color: var(--tinta);
    box-shadow: var(--brillo-boton);
  }
  .mt-ic .ico{ width: 18px; height: 18px }
  /* La pestana en la que estas: rectangulo rojo que envuelve icono y
     nombre, no solo una pildora detras del texto. */
  .mapatab.activa{
    background: #ff5454; color: var(--tinta); border-color: var(--tinta);
    box-shadow: var(--brillo-boton), 0 3px 0 rgba(0,0,0,.5);
  }
  .mapatab.activa .mt-ic{ background: var(--crema); box-shadow: none }
  #home .home-inner{ padding-bottom: 118px }
}

/* En la pantalla de entrar no hay mapa que recorrer: las pestanas
   sobran y ademas tapan el formulario. */
body.acceso-abierto #mapaTabs,
body.acceso-abierto #homeBanda{ display: none !important }


/* =====================================================================
   3. EL CHAT DE CHISPA  (pagina 9)
   Cabecera amarilla con el avatar lila y la cuenta de preguntas; cuerpo
   negro con manchas de color; lo que escribe el nino en rojo y lo que
   contesta Chispa en vidrio oscuro.
   ===================================================================== */
@media (max-width: 819px){
  /* El chat ocupa la pantalla entera, como en el documento: antes se
     abria dentro del area de la leccion y le quedaba encima la barra
     negra del paso, que ahi no pinta nada. */
  #tutorPanel{
    position: fixed; inset: 0; width: auto; z-index: 96;
    background: var(--tinta);
    border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: hidden;              /* fixed ya sirve de bloque contenedor */
  }
  /* Las manchas de color que se ven detras de las burbujas. */
  #tutorPanel::before{
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(circle at 96% 32%, #ff5454 0 130px, transparent 131px),
      radial-gradient(circle at -12% 62%, #8b97fd 0 120px, transparent 121px),
      radial-gradient(circle at 78% 86%, #00c07a 0 100px, transparent 101px);
    filter: blur(2px); opacity: .62;
  }
  #tutorPanel > *{ position: relative; z-index: 1 }

  .tutor-head{
    background: #ffdf2b; border-bottom: 3px solid var(--tinta);
    padding: 12px 14px; gap: 12px; align-items: center;
  }
  .tutor-av{
    width: 46px; height: 46px; flex: none; display: grid; place-items: center;
    background: #8b97fd; color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 50%;
    box-shadow: var(--brillo-boton);
  }
  .tutor-av .ico{ width: 24px; height: 24px }
  .tutor-head > div b{ font: 900 21px/1 var(--f-titulo); color: var(--tinta) }
  .tutor-head > div small{ font-size: 12.5px; color: var(--tinta); opacity: .8 }
  .tutor-head .icon-btn{
    background: var(--tinta); color: var(--crema);
    border: 2px solid var(--tinta); border-radius: 12px;
    width: 38px; height: 38px; display: grid; place-items: center;
  }
  .tutor-head .icon-btn .ico{ width: 18px; height: 18px; color: var(--crema) }

  .tutor-msgs{ padding: 16px 14px }
  /* Lo que escribe el nino: rojo solido a la derecha. */
  .tmsg.yo{
    background: #ff5454; color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 18px;
    border-bottom-right-radius: 6px;
    box-shadow: var(--brillo-boton); font-weight: 700;
  }
  /* Lo que contesta Chispa: vidrio oscuro a la izquierda. */
  .tmsg.bot{
    /* Vidrio oscuro PROPIO, no el token claro: debajo pasan manchas de
       color fuertes y con blanco al 9% el texto quedaba a su merced. */
    background: rgba(22,22,29,.66); color: var(--crema);
    border: 1.5px solid var(--borde-vidrio-oscuro); border-radius: 18px;
    border-bottom-left-radius: 6px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .tmsg.bot{
      -webkit-backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
      backdrop-filter: blur(var(--blur-vidrio)) saturate(1.6);
    }
  }
  .tmsg.bot b, .tmsg.bot strong{ color: #ffdf2b }
  .tmsg.bot code{ background: rgba(0,0,0,.45); color: #a7b2ff }
  .tmsg .pensando{ color: #b9b9c4 }

  /* Las sugerencias: la primera en vidrio con borde claro y la de
     «ver mi circuito» en verde, como en el documento. */
  .tutor-rapidos{ padding: 0 14px 10px; gap: 8px; flex-wrap: wrap }
  .tutor-rapido{
    background: rgba(22,22,29,.66); color: var(--crema);
    border: 2px solid var(--crema); border-radius: 999px;
    padding: 9px 15px; font: 800 13px/1 var(--f-texto);
  }
  .tutor-rapido:last-child{ background: #00c07a; color: var(--tinta); border-color: var(--tinta) }
  /* Al tocarlos se ponian en tinta sobre tinta y no se leia que decian:
     learn.css le pone color:var(--txt) al :hover, que viene del diseno
     de fondo claro. Aqui el chip es oscuro, asi que la letra se queda
     en crema y lo que cambia es el fondo. */
  /* Aclarar el fondo no vale: por debajo pasan manchas de color y
     sobre la verde el crema se queda en 3.81, por debajo de la norma.
     Se oscurece en vez de aclarar, y lo que marca el toque es el
     borde y el hundido. */
  .tutor-rapido:hover,
  .tutor-rapido:focus-visible,
  .tutor-rapido:active{
    background: rgba(22,22,29,.88); color: var(--crema); border-color: var(--crema);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
  }
  .tutor-rapido:last-child:hover,
  .tutor-rapido:last-child:focus-visible,
  .tutor-rapido:last-child:active{
    background: #00d98a; color: var(--tinta); border-color: var(--tinta);
  }

  /* La caja de escribir: vidrio oscuro con el boton de enviar rojo. */
  #tutorForm{
    margin: 0 14px calc(14px + env(safe-area-inset-bottom));
    padding: 7px 7px 7px 16px;
    background: rgba(22,22,29,.70);
    border: 1.5px solid var(--borde-vidrio-oscuro); border-radius: 999px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3);
  }
  #tutorInput{ color: var(--crema) }
  #tutorInput::placeholder{ color: #9a9aa6 }
  #tutorForm button[type="submit"]{
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    background: #ff5454; color: var(--tinta);
    border: 2px solid var(--tinta); box-shadow: var(--brillo-boton);
  }
  #tutorForm button[type="submit"] .ico{ width: 20px; height: 20px }
  .tutor-aviso{ background: rgba(255,223,43,.16); color: #ffdf2b; border-color: #ffdf2b }
}


/* =====================================================================
   4. LA LECCION  (pagina 8)
   Barra negra con el boton de volver en rojo, las barritas de los pasos
   y lo que da la leccion en amarillo; debajo, la franja lila con el
   paso y el titulo; y la paleta como una tira horizontal de pildoras.
   ===================================================================== */
.mp-xp{ display: none }
/* El titulo dentro de la ventanita del paso es cosa del celular: en
   escritorio ya esta en la pildora de la barra de arriba. */
.vp-tit{ display: none }

@media (max-width: 819px){
  /* --- la barra de arriba --- */
  body[data-modo="leccion"] #topbar .brand,
  body[data-modo="leccion"] #topbar .menu-wrap,
  body[data-modo="leccion"] #topbar #btnPalette,
  body[data-modo="leccion"] #topbar #btnTutorLibre,
  /* «Codigo» sale de la barra: la pestana de abajo hace lo mismo, y en
     390px cuatro cosas y las barritas de los pasos no caben. */
  body[data-modo="leccion"] #topbar #btnCode{ display: none }
  /* El separador elastico de la barra se comia todo el hueco y las
     barritas de los pasos se quedaban en 6px. */
  body[data-modo="leccion"] #topbar .spacer{ display: none }
  body[data-modo="leccion"] #topbar{ gap: 8px; padding: 9px 12px }
  /* «Simular» se queda, pero compacto. */
  body[data-modo="leccion"] #topbar #btnRun{ flex: none; padding: 11px 14px }
  body[data-modo="leccion"] #topbar #btnRun .lbl{ display: none }

  #topbar > .mp-head{
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* «Salir» pasa a ser un cuadrado rojo con la flecha, sin la palabra:
     en 390px la palabra se come el sitio de las barritas. */
  #topbar > .mp-head .mp-salir{
    width: 46px; height: 46px; flex: none; padding: 0;
    display: grid; place-items: center; font-size: 0;
    background: #ff5454; color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 14px;
    box-shadow: var(--brillo-boton), var(--sombra-dura);
  }
  #topbar > .mp-head .mp-salir .ico{ width: 20px; height: 20px }
  #topbar > .mp-head .mp-cerrar{ display: none }   /* se cierra tocando fuera */
  #topbar > .mp-head .mp-tit{ flex: 1; min-width: 0 }
  #topbar > .mp-head .mp-tit b{ display: none }    /* el titulo va en la franja lila */
  #topbar > .mp-head .mp-pasos{ margin: 0; gap: 5px; min-width: 70px }
  #topbar > .mp-head .mp-pasos i{
    height: 9px; border-radius: 5px; border: 2px solid var(--tinta);
    background: #4a4a57;
  }
  #topbar > .mp-head .mp-pasos i.ok { background: #00c07a }
  #topbar > .mp-head .mp-pasos i.now{ background: #00c07a }
  #topbar > .mp-head .mp-xp{
    display: inline-block; flex: none; padding: 9px 14px;
    background: #ffdf2b; color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 999px;
    font: 900 14px/1 var(--f-texto);
    box-shadow: var(--brillo-boton), var(--sombra-dura);
  }

  /* --- la franja lila del paso --- */
  /* La ventanita flotante pasa a ser una franja pegada a lo alto del
     lienzo, de lado a lado, que es como esta en el documento. */
  body[data-modo="leccion"] .vpaso:not(.min){
    left: 0; right: 0; top: 0; width: auto;
    border: 0; border-bottom: 3px solid var(--tinta); border-radius: 0;
    background: #8b97fd; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 12px 16px 14px;
  }
  .vpaso .vp-top{ margin-bottom: 2px }
  .vpaso .vp-num{
    font: 900 11px/1 var(--f-texto); letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinta);
  }
  .vpaso .vp-tit{
    display: block; margin-bottom: 4px;
    font: 900 20px/1.1 var(--f-titulo); color: var(--tinta);
  }
  .vpaso .vp-txt{ color: var(--tinta); font-weight: 600 }
  .vpaso .vp-min{ color: var(--tinta) }
  .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);
  }
  /* El lienzo arranca por debajo de la franja. */
  body[data-modo="leccion"] #stage #canvas{ padding-top: 0 }

  /* --- la paleta, tira horizontal de pildoras --- */
  /* En el documento los componentes son una fila de pastillas encima
     del lienzo, no una lista en un cajon. La lista es plana: titulos de
     categoria y piezas mezclados, asi que los titulos se esconden y
     cada pieza se queda en una pastilla con su dibujo y su nombre. */
  body[data-modo="leccion"] #palette .palette-list{
    display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 12px;
    scrollbar-width: none;
  }
  body[data-modo="leccion"] #palette .palette-list::-webkit-scrollbar{ display: none }
  body[data-modo="leccion"] #palette .cat-title{ display: none }
  body[data-modo="leccion"] #palette .pal-item{
    flex: none; width: auto; display: flex; flex-direction: row;
    align-items: center; gap: 8px; padding: 9px 15px 9px 11px;
    border: 2px solid var(--tinta); border-radius: 999px;
    background: var(--crema); box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  }
  body[data-modo="leccion"] #palette .pal-item .ds{ display: none }
  body[data-modo="leccion"] #palette .pal-item .nm{
    font: 800 13.5px/1 var(--f-texto); color: var(--tinta); white-space: nowrap;
  }
  body[data-modo="leccion"] #palette .pal-item svg{ width: 26px; height: 22px; flex: none }
  body[data-modo="leccion"] #paletteSearch{ display: none }
}


/* =====================================================================
   5. LA LECCION EN CELULAR, UNA SOLA PAGINA
   El documento no parte la leccion en pestanas: es una pagina que se
   desplaza con la franja del paso, el lienzo, los componentes y el
   codigo, y los dos botones abajo del todo.

   El cambio de vistas de siempre (body[data-view]) se queda para el
   taller libre; aqui se desactiva y se ensena todo a la vez.
   ===================================================================== */
#piePaso{ display: none }

@media (max-width: 819px){
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #layout{
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    padding-bottom: 86px;                 /* el pie no tapa el codigo */
    background: var(--tinta);
  }
  /* El orden del documento: lienzo, componentes, codigo. En el marcado
     la columna de la izquierda va primera. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #stage    { order: 1 }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #leftCol  { order: 2 }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #codePanel{ order: 3 }

  /* El lienzo deja de ocupar toda la pantalla y pasa a ser una banda. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #stage{
    flex: none; height: 46vh; min-height: 300px; position: relative;
  }

  /* La columna de la izquierda deja de ser un cajon y se queda con lo
     que el documento ensena: los botones de ayuda y la tira de
     componentes. La mision escrita ya esta en la franja lila. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #leftCol{
    /* relative y no static: las figuras de detras van absolutas contra
       la columna. */
    position: relative; transform: none; width: auto; flex: none;
    box-shadow: none; border-right: 0; background: var(--bg2);
    border-bottom: 3px solid var(--tinta);
  }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #leftCol.open{ transform: none }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #missionPanel{ flex: none; border-bottom: 0 }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .mp-body{ display: none }
  /* Con el relleno de abajo en 0, la ultima fila de botones quedaba
     pegada al borde del panel y la sombra dura (3px hacia abajo) la
     tapaba la seccion de los componentes: parecian cortados. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .mp-acciones{
    padding: 12px 12px 15px; border-top: 0;
  }
  /* Dos columnas, no cuatro: con cuatro «Repasar» se cortaba. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .mp-sec{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
  }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .mp-sec .btn{ width: 100%; justify-content: center }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #palette{
    flex: none; max-height: none; padding-bottom: 4px;
  }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #palette > .panel-head{ display: none }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #capaPanel{ display: none !important }

  /* El panel de codigo deja de taparlo todo y se pone en su sitio. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #codePanel{
    position: static; inset: auto; width: auto; flex: none;
    min-height: 340px; display: flex;
  }
  /* Y deja de depender de que pestana estuviera elegida. */
  body[data-modo="leccion"]:not([data-tarjetas="1"])[data-view="circuit"] #codePanel{ display: flex }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #codePanel .serial-view[hidden]{ display: none !important }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #btnCloseCode{ display: none }
  /* La cabecera del panel, amarilla y con su rotulo del documento. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #codePanel .panel-head{
    background: #ffdf2b; border-bottom: 3px solid var(--tinta);
  }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #codeTitle{ color: var(--tinta) }

  /* EL DEDO TIENE QUE PODER DESPLAZAR LA PAGINA SOBRE EL LIENZO.

     #canvas lleva touch-action:none porque el circuito necesita el
     gesto entero para arrastrar piezas y tirar cables. Antes daba
     igual: el lienzo ocupaba la pantalla y no habia nada que
     desplazar. Ahora ocupa 46vh en mitad de una pagina que SI se
     desplaza, asi que se tragaba el gesto y parecia que el scroll no
     funcionaba.

     La regla se parte en dos: el lienzo deja pasar el desplazamiento
     vertical, y lo que hay DENTRO del viewport —las piezas, los pines,
     los cables— se queda con el gesto entero. El navegador se queda
     con el valor mas restrictivo de la cadena, asi que arrastrar una
     pieza sigue funcionando y deslizar sobre el fondo desplaza. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #canvas{ touch-action: pan-y }
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #canvas #viewport{ touch-action: none }

  /* Las pestanas de abajo sobran: ya no hay vistas que cambiar. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #mobileTabs{ display: none !important }

  /* --- el pie con los dos botones --- */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) #piePaso{
    display: flex; gap: 10px; position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--tinta); border-top: 3px solid var(--tinta);
  }
  #piePaso .btn{
    flex: 1; justify-content: center; padding: 15px;
    border: 2px solid var(--tinta); border-radius: 18px;
    font: 900 16px/1 var(--f-texto); color: var(--tinta);
    box-shadow: var(--brillo-boton), var(--sombra-dura);
  }
  #piePaso #btnRun      { background: #00c07a }
  #piePaso #btnComprobar{ background: #ff5454 }
  #piePaso #btnRun .lbl{ display: inline }
  /* Las herramientas flotantes se suben, que el pie no las tape. */
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .float-tools,
  body[data-modo="leccion"]:not([data-tarjetas="1"]) .float-zoom{ bottom: 8px }
}


/* =====================================================================
   6. LA BARRA DE ABAJO DEL TALLER  (Misión · Circuito · Código · Serie)
   Pildora flotante de vidrio, y cada pestana con su color: el cuadrito
   del icono siempre, y el relleno entero cuando es la que estas
   mirando. Antes era una banda gris con el texto en azul.

   En la leccion esta barra ya no sale (la leccion es una sola pagina);
   la que se ve aqui es la del taller libre.
   ===================================================================== */
@media (max-width: 819px){
  /* El alto que #layout reserva tiene que contar los margenes de la
     pildora, o la barra se come el ultimo trozo del lienzo. */
  :root{ --mtabs-h: 78px }

  #mobileTabs{
    height: auto; margin: 0 12px 10px;
    padding: 7px; gap: 6px;
    background: var(--vidrio-claro-fuerte);
    border: 2px solid var(--tinta); border-top: 2px solid var(--tinta);
    border-radius: 22px;
    box-shadow: var(--brillo-superior), var(--sombra-dura);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    #mobileTabs{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
  }

  /* Cada pestana trae su color en una variable y de ahi lo toman el
     cuadrito y el relleno. Asi el color se declara una sola vez. */
  #mobileTabs .mtab[data-view="mision"] { --ct: #8b97fd }
  #mobileTabs .mtab[data-view="circuit"]{ --ct: #ff5454 }
  #mobileTabs .mtab[data-view="code"]   { --ct: #ffdf2b }
  #mobileTabs .mtab[data-view="serial"] { --ct: #00c07a }

  #mobileTabs .mtab{
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 7px 4px; border: 2px solid transparent; border-radius: 16px;
    background: none; color: var(--tinta); cursor: pointer;
    font: 800 11px/1 var(--f-texto);
  }
  #mobileTabs .mtab span:last-child{ font-size: 11px }
  #mobileTabs .mt-ic{
    width: 32px; height: 32px; display: grid; place-items: center;
    background: var(--ct); color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 11px;
    box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  }
  #mobileTabs .mt-ic .ico{ width: 17px; height: 17px }
  #mobileTabs .mtab.active{
    background: var(--ct); color: var(--tinta); border-color: var(--tinta);
    box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  }
  #mobileTabs .mtab.active .mt-ic{ background: var(--crema); box-shadow: none }

  /* Figuras detras del lienzo tambien en celular: sin ellas ni la barra
     ni la columna de mision tienen nada que desenfocar. */
  #stage::before{
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(circle at 92% 8%,   #ff5454 0 110px, transparent 111px),
      radial-gradient(circle at -12% 72%, #00c07a 0 105px, transparent 106px),
      radial-gradient(circle at 104% 92%, #ffdf2b 0 95px,  transparent 96px);
    opacity: .3;
  }
  #stage > #canvas{ position: relative; z-index: 0; background: transparent }
}

/* La etiqueta de la banda es un boton: abre la lista de las 12 unidades.
   Hereda el aspecto de la pastilla; aqui solo se quitan los adornos que
   pone el navegador a los botones y se coloca la flechita. */
.banda-etiqueta{
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-texto); text-align: left;
  transition: transform .12s;
}
.banda-etiqueta:hover{ transform: translateY(-1px) }
.banda-etiqueta:active{ transform: translateY(1px); box-shadow: none }
.banda-etiqueta:focus-visible{ outline: 3px solid var(--tinta); outline-offset: 3px }
.banda-etiqueta .ico{ width: 13px; height: 13px; flex: none }