/* =====================================================================
   vidrio-mapa.css — EL MAPA EN ESCRITORIO

   Lo que pide el PDF «App en escritorio · alternativa»: barra lateral
   negra, franja roja con el nivel que toca, lienzo con el camino y una
   columna «El recorrido».

   Todo vive dentro de una sola consulta de medios. Por debajo de
   1100px las tres zonas nuevas se ocultan y el mapa es el de siempre:
   la cabecera roja arriba y las unidades una tras otra. Asi el celular
   no se entera de nada de esto.
   ===================================================================== */
/* La barra lateral y la columna del recorrido son de escritorio. La
   franja roja NO: en celular tambien sale, con otra forma (ver
   vidrio-celular.css). */
#ladoNav, #homeRuta{ display: none }

/* ---------------------------------------------------------------------
   LA BARRA DE PESTANAS DEL CELULAR
   Flotante, de vidrio, separada del borde. La pestana en la que estas
   va en pildora roja; las otras llevan su icono en un cuadrito de
   color. En escritorio su sitio lo ocupa la barra lateral negra.
   --------------------------------------------------------------------- */
#mapaTabs{
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  display: flex; gap: 6px; padding: 7px;
  background: var(--vidrio-claro-fuerte);
  border: 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)){
  #mapaTabs{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
.mapatab{
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: 2px solid transparent; border-radius: 16px;
  background: none; color: var(--tinta); cursor: pointer;
  font: 800 11px/1 var(--f-texto);
}
.mt-ic{
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--tinta); border-radius: 11px; color: var(--tinta);
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}
.mt-ic .ico{ width: 17px; height: 17px }
.mapatab.activa{
  background: #ff5454; border-color: var(--tinta); border-radius: 999px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
}
.mapatab.activa .mt-ic{ background: var(--crema); box-shadow: none }
/* El mapa necesita sitio abajo para que la barra no tape el ultimo nodo. */
#home .home-inner{ padding-bottom: 104px }

@media (min-width: 1000px){

  /* La regla que manda sobre #home es  body[data-modo="mapa"] #home,
     que pone display:flex. Hay que igualarle el peso o no se aplica. */
  body[data-modo="mapa"] #home{
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "lado banda  banda"
      "lado cuerpo ruta";
  }
  #homeBanda{ grid-area: banda }
  #homeCuerpo{ grid-area: cuerpo; display: flex; flex-direction: column; min-width: 0; overflow: hidden }
  #mapaTabs{ display: none }                /* su sitio lo ocupa la barra lateral */
  #homeHdr{ display: none }                 /* su sitio lo ocupan la ficha
                                               del perfil y la franja roja */

  /* --- 1. La barra lateral ----------------------------------------- */
  #ladoNav{
    grid-area: lado; display: flex; flex-direction: column;
    background: var(--tinta); color: var(--crema);
    padding: 18px 14px 16px; overflow: hidden; position: relative;
  }
  /* Una figura de color detras, para que la ficha de vidrio de abajo
     tenga algo que desenfocar: sobre negro liso no se nota. */
  #ladoNav::before{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(circle at -18% 62%, #8b97fd 0 120px, transparent 121px),
      radial-gradient(circle at 112% 92%, #ff5454 0 110px, transparent 111px);
    opacity: .55;
  }
  #ladoNav > *{ position: relative; z-index: 1 }

  .lado-marca{ display: flex; align-items: center; gap: 10px; padding: 4px 6px 20px }
  .lado-marca b{ font: 900 19px/1 var(--f-titulo); letter-spacing: -.01em }
  .lado-logo{
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: var(--crema); border: 2px solid var(--tinta);
    display: grid; place-items: center; overflow: hidden;
  }
  .lado-logo svg{ width: 30px; height: 30px }

  .lado-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
  .lado-item{
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border: 2px solid transparent; border-radius: 15px;
    background: none; color: var(--crema); cursor: pointer;
    font: 800 15px/1 var(--f-texto); text-align: left;
  }
  .lado-item:hover{ background: rgba(255,255,255,.07) }
  .lado-ic{
    width: 32px; height: 32px; flex: none; display: grid; place-items: center;
    border: 2px solid var(--tinta); border-radius: 11px; color: var(--tinta);
    box-shadow: var(--brillo-boton);
  }
  .lado-ic .ico{ width: 18px; height: 18px }
  /* La seccion activa, pildora roja solida con borde de tinta. */
  .lado-item.activa{
    background: #ff5454; color: var(--tinta);
    border-color: var(--tinta); border-radius: 999px;
    box-shadow: var(--brillo-boton), 0 3px 0 rgba(0,0,0,.55);
  }
  .lado-item.activa .lado-ic{ background: var(--crema); box-shadow: none }

  /* La ficha del perfil, abajo del todo y en vidrio oscuro. */
  .lado-perfil{
    margin-top: auto; width: 100%; cursor: pointer; text-align: left;
    display: grid; grid-template-columns: 44px 1fr; gap: 4px 11px;
    padding: 12px; border-radius: 18px; font: inherit;
  }
  .lp-avatar{
    grid-row: span 2; width: 44px; height: 44px; border-radius: 50%;
    background: var(--lila); border: 2px solid var(--tinta);
    display: grid; place-items: center; color: var(--tinta);
  }
  .lp-avatar .ico{ width: 24px; height: 24px }
  .lp-txt{ display: flex; flex-direction: column; justify-content: center; min-width: 0 }
  .lp-txt b{ font: 900 15px/1.1 var(--f-titulo); text-transform: uppercase; color: var(--crema) }
  .lp-txt small{ font-size: 12px; color: #c9c9d4 }
  .lp-pie{
    grid-column: 1 / -1; display: flex; justify-content: space-between;
    font: 800 12px/1 var(--f-texto); margin-top: 8px;
  }
  .lp-xp{ color: var(--crema) }
  .lp-racha{ color: #ffdf2b }
  .lp-barra{
    grid-column: 1 / -1; height: 8px; margin-top: 7px; border-radius: 6px;
    background: rgba(255,255,255,.18); overflow: hidden;
  }
  .lp-barra i{ display: block; height: 100%; background: #ffdf2b; border-radius: 6px; transition: width .5s }

  /* --- 2. La franja roja ------------------------------------------- */
  #homeBanda{
    display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
    flex: none; padding: 20px 26px 22px;
    border-bottom: 3px solid var(--tinta);
    background-color: #ff5454;
    background-image:
      radial-gradient(circle at 74% -40%, #ffdf2b 0 120px, transparent 121px),
      radial-gradient(circle at 101% 120%, #8b97fd 0 110px, transparent 111px),
      var(--cuadricula-sobre-color);
    background-size: auto, auto, 26px 26px, 26px 26px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
  }
  /* El ancho de esta columna lo marcaba el parrafo de abajo, que es
     corto, y entonces el titular se partia en dos lineas. Con flex:1
     se queda con todo el hueco que deja el panel y el titular cabe en
     una sola linea, como en el diseno. */
  .banda-txt{ flex: 1; min-width: 0; position: relative; z-index: 1 }
  .banda-txt h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .banda-etiqueta{
    display: inline-block; margin-bottom: 9px; padding: 5px 13px;
    background: var(--crema); border: 2px solid var(--tinta); border-radius: 999px;
    font: 900 11px/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 5px; font: 900 34px/1.05 var(--f-titulo);
    text-transform: uppercase; color: var(--tinta); letter-spacing: -.01em;
  }
  /* En el diseno la palabra manuscrita va en la MISMA linea que el
     titular y en crema. Crema sobre rojo da 3.14: como texto normal no
     pasa, pero a partir de 24px cuenta como texto grande y el minimo
     baja a 3.0. Por eso el .8em, que aqui son 27px, es un tamano
     minimo, no un capricho. */
  .banda-txt h2 .mano{
    display: inline; margin-left: .22em;
    font-family: var(--f-mano); font-weight: 400; font-size: .8em;
    text-transform: none; letter-spacing: 0; color: var(--crema);
  }
  .banda-txt p{ margin: 0; font-size: 13.5px; font-weight: 700; color: var(--tinta); opacity: .88 }

  /* La barra de progreso de la unidad es cosa del celular: aqui su
     sitio lo ocupan los chips del panel de la derecha. */
  .banda-barra{ display: none }
  /* Y la etiqueta del nodo que toca se queda en nombre y estrellas: el
     numero de leccion y el coste son del formato de celular. */
  #homeInner .unidad.enCanvas .eti-num,
  #homeInner .unidad.enCanvas .eti-sub{ display: none }
  #homeInner .unidad.enCanvas .eti-tit{ font: 700 13px/1.25 var(--f-texto); color: var(--tinta) }

  .banda-panel{
    flex: none; width: 380px; border-radius: 22px; padding: 12px;
    display: grid; gap: 10px; position: relative; z-index: 1;
  }
  /* El resplandor de colores que rodea al panel en el diseno. Es lo que
     hace que el vidrio parezca vidrio y no un recuadro translucido:
     manchas de color por DEBAJO, desenfocadas, que el panel recoge. */
  .banda-panel::before{
    content: ""; position: absolute; inset: -26px; z-index: -1;
    border-radius: 40px; pointer-events: none;
    background:
      radial-gradient(circle at 12% 30%, #ff9f40 0 70px, transparent 71px),
      radial-gradient(circle at 48% 95%, #ffdf2b 0 80px, transparent 81px),
      radial-gradient(circle at 92% 20%, #8b97fd 0 75px, transparent 76px),
      radial-gradient(circle at 78% 92%, #00c07a 0 65px, transparent 66px);
    filter: blur(22px); opacity: .85;
  }
  .banda-chips{ display: flex; gap: 8px }
  .banda-chips > span{
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 6px; border: 2px solid var(--tinta); border-radius: 13px;
    font: 900 14px/1 var(--f-texto); color: var(--tinta);
    box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  }
  .banda-chips .ico{ width: 16px; height: 16px }
  .chip-racha{ background: #ff9f40 } .chip-estrellas{ background: #ffdf2b } .chip-xp{ background: #00c07a }
  .banda-seguir{
    width: 100%; padding: 13px; border: 2px solid var(--tinta); border-radius: 16px;
    background: var(--tinta); color: var(--crema); cursor: pointer;
    font: 900 16px/1 var(--f-texto); display: flex; align-items: center;
    justify-content: center; gap: 9px; box-shadow: 0 3px 0 rgba(0,0,0,.5);
  }
  .banda-seguir .ico{ width: 18px; height: 18px }
  .banda-seguir:hover{ transform: translateY(-1px) }
  .banda-seguir[disabled]{ opacity: .55; cursor: default; transform: none }

  /* Las figuras que flotan van FIJAS a toda la ventana (.adornos lleva
     position:fixed con inset heredado de la pantalla de celular). En
     escritorio eso las pone encima de la barra lateral y de la columna
     de la derecha, que son superficies solidas y no admiten nada
     encima. Aqui se encierran en el lienzo. */
  #homeInner > .adornos{ position: absolute; inset: 0 }
  #ladoNav, #homeRuta{ z-index: 2 }         /* y por si acaso, delante */

  /* En tablet de lado las tres columnas caben, pero el titular de la
     franja no: se quedaba cortado con puntos suspensivos. Se encoge el
     titular y el panel de los chips, que es de donde sale el sitio. */
  @media (max-width: 1199px){
    body[data-modo="mapa"] #home{ grid-template-columns: 216px minmax(0,1fr) 280px }
    .banda-txt h2{ font-size: 27px }
    .banda-panel{ width: 330px }
    #homeBanda{ padding: 16px 20px 18px }
    .lado-item{ font-size: 14px; padding: 8px 10px; gap: 10px }
    .lado-marca b{ font-size: 17px }
    .ruta-lista button{ padding: 10px 11px; font-size: 12.5px }
  }

  /* --- 3. El lienzo ------------------------------------------------- */
  #homeInner{
    padding: 0; position: relative;
    background-image:
      radial-gradient(circle at 17% 26%, #00c07a 0 96px, transparent 97px),
      radial-gradient(circle at 84% 64%, #ffdf2b 0 86px, transparent 87px),
      var(--cuadricula);
    background-size: auto, auto, 26px 26px, 26px 26px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
  }
  /* El lienzo del mapa va a lo ancho, pero las pantallas de entrar y
     de perfiles tambien cuelgan de #homeInner: sin esta excepcion la
     tarjeta se estiraba a 1280 px y las caritas salian enormes. */
  body:not(.acceso-abierto) #homeInner > *:not(.adornos){ max-width: none }
  /* En escritorio el lienzo ensena UNA unidad: el resto esta en la
     columna de la derecha, que es por donde se cambia. */
  #homeInner .unidad{ display: none }
  #homeInner .unidad.enCanvas{ display: block; margin: 0; padding: 26px 0 60px }
  #homeInner .uni-head{ display: none }     /* ya esta en la franja roja */

  /* El camino en zigzag. La linea punteada NO va aqui: la dibuja
     learn.js con las posiciones de verdad, porque el alto de cada nodo
     depende de cuantas lineas ocupe su nombre. */
  .camino{ gap: 46px; padding-top: 14px; 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;
  }
  /* En el lienzo los nodos son mas grandes: hay sitio de sobra. */
  #homeInner .unidad.enCanvas .nodo-ic{ width: 74px; height: 74px; font-size: 25px }
  #homeInner .unidad.enCanvas .nodo{ gap: 9px }
  #homeInner .unidad.enCanvas .nodo{
    transform: translateX(calc(var(--off) * 90px));
    position: relative; z-index: 1;
  }
  #homeInner .unidad.enCanvas .nodo:hover{
    transform: translateX(calc(var(--off) * 90px)) scale(1.06);
  }
  /* La etiqueta va AL LADO del nodo, no debajo, y el nombre y las
     estrellas comparten una sola pildora. Va absoluta para no mover el
     centro del circulo, que es de donde sale el camino punteado. */
  #homeInner .unidad.enCanvas .nodo{ overflow: visible }
  #homeInner .unidad.enCanvas .nodo-eti{
    position: absolute; left: calc(50% + 48px); top: 50%; translate: 0 -50%;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    background: var(--crema); border: 2px solid var(--tinta);
    border-radius: 999px; padding: 6px 14px;
    box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  }
  /* Los que van a la derecha del lienzo sacan la etiqueta a la
     izquierda; si no, se sale por el borde. */
  #homeInner .unidad.enCanvas .nodo[style*="--off:1"] .nodo-eti{
    left: auto; right: calc(50% + 48px);
  }
  #homeInner .unidad.enCanvas .nodo-nom{ max-width: 230px; overflow: hidden; text-overflow: ellipsis }
  #homeInner .unidad.enCanvas .nodo-est{ color: #e0a500 }

  /* El nodo que toca: aro rosa por fuera y el anillo punteado. */
  #homeInner .unidad.enCanvas .nodo.ahora .nodo-ic::before{
    content: ""; position: absolute; inset: -15px; border-radius: 50%;
    background: #ffd3d3; z-index: -1;
  }
  #homeInner .unidad.enCanvas .nodo.ahora .nodo-ic .ico{ width: 30px; height: 30px }

  /* --- 4. La columna «El recorrido» --------------------------------- */
  #homeRuta{
    grid-area: ruta; display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px; overflow-y: auto;
    background: #f3f1e6; border-left: 3px solid var(--tinta);
  }
  .ruta-tit{
    margin: 0 0 4px; font: 900 15px/1 var(--f-titulo);
    text-transform: uppercase; letter-spacing: .04em; color: var(--tinta);
  }

  .ruta-todo{
    width: 100%; margin-top: 2px; padding: 9px; cursor: pointer;
    border: 2px dashed rgba(22,22,29,.35); border-radius: 14px;
    background: none; color: var(--tinta); font: 800 12.5px/1 var(--f-texto);
  }
  .ruta-todo:hover{ border-style: solid; background: var(--crema) }
  .ruta-lista-larga{ display: grid; gap: 9px }

  .ruta-chispa{ margin-top: auto; border-radius: 20px; padding: 14px; background: var(--tinta) }
  .ruta-chispa p{ margin: 0 0 12px; display: flex; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--crema) }
  .rc-ic{
    width: 32px; height: 32px; flex: none; display: grid; place-items: center;
    background: #ffdf2b; border: 2px solid var(--tinta); border-radius: 50%; color: var(--tinta);
  }
  .rc-ic .ico{ width: 17px; height: 17px }
  .rc-btn{
    width: 100%; padding: 11px; border: 2px solid var(--tinta); border-radius: 15px;
    background: #8b97fd; color: var(--tinta); cursor: pointer;
    font: 900 14px/1 var(--f-texto); box-shadow: var(--brillo-boton), 0 3px 0 rgba(0,0,0,.5);
  }
}

/* ---------------------------------------------------------------------
   MENOS TRANSPARENCIA
   Quien la pide en su sistema la pierde entera tambien aqui. Los
   fondos ya salen opacos por los tokens; falta quitar el desenfoque.
   --------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce){
  #mapaTabs, .lado-perfil, .banda-panel, .ruta-chispa{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* =====================================================================
   LA LISTA DE LAS 12 UNIDADES

   Vivia dentro de la consulta de escritorio, porque solo salia en la
   columna de «El recorrido». Ahora el mismo dialogo se abre desde el
   celular —tocando la pastilla del nivel en la banda roja—, asi que
   estas reglas tienen que valer a cualquier ancho. Sin ellas la lista
   salia como un <ol> pelado, con los numeros repetidos y sin colores.
   ===================================================================== */
.ruta-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.ruta-lista button{
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border: 2px solid var(--tinta); border-radius: 15px;
  background: var(--crema); color: var(--tinta); cursor: pointer;
  font: 700 13.5px/1.25 var(--f-texto); text-align: left;
}
.ruta-lista button:focus-visible{ outline: 3px solid #5a66e0; outline-offset: 2px }
.ru-nom{ flex: 1; min-width: 0 }
.ru-num{ font-family: var(--f-titulo); font-size: 14px; flex: none; min-width: 18px }
.ru-num2{ font-size: 12px; font-weight: 800; flex: none; opacity: .75 }
.ruta-lista .hecha button   { background: #00c07a }
.ruta-lista .ahora button,
.ruta-lista .mirando button { background: #ff5454; box-shadow: 0 3px 0 var(--tinta) }
.ruta-lista .prep button    { background: transparent; border-style: dashed }
.ruta-lista .prep .ru-num   { font: 900 10.5px/1 var(--f-texto); letter-spacing: .07em; text-transform: uppercase }