/* =====================================================================
   canva.css — la capa de identidad.

   Va DESPUÉS de styles.css y learn.css a propósito: aquí se corrigen
   las superficies que todavía estaban en el estilo genérico de antes
   (bordes de 1 px, sombras difuminadas, blancos puros) y se llevan al
   lenguaje de las diapositivas de Canva:

       · contorno negro grueso, nunca un borde gris
       · sombra sólida y desplazada, nunca un desenfoque
       · color plano con el texto en negro encima
       · titulares en Archivo Black, en mayúsculas y subrayados

   Y una cosa nueva, que es lo que hace que no se parezca a cualquier
   otra: las superficies que FLOTAN son de vidrio. Se ve lo que hay
   debajo, borroso. Pegatina y vidrio a la vez no es una mezcla que se
   vea por ahí, y resuelve un problema real: el niño no pierde de vista
   su circuito cuando se le abre un panel encima.

   El vidrio se degrada solo: si el aparato no sabe hacerlo (tablets
   viejas), queda el color opaco de siempre y no se rompe nada.
   ===================================================================== */

:root{
  /* El vidrio ahora vive en css/vidrio.css. Estas tres se quedan como
     alias para no reescribir las reglas de mas abajo, pero el valor
     manda desde alli: una sola fuente. */
  --vidrio:      var(--vidrio-claro);
  --vidrio-poco: var(--vidrio-claro-fuerte);
  --borroso:     var(--filtro-vidrio);
  /* La cuadrícula lila de las diapositivas. */
  --trama-color: #8b97fd4d;
}

/* ---------------------------------------------------------------------
   1. LA CUADRÍCULA
   En el Canva hay una banda de papel cuadriculado lila que parte la
   página. Aquí hace el mismo papel: separa sin necesidad de una línea.
   --------------------------------------------------------------------- */
.trama{
  background-image:
    repeating-linear-gradient(to right,  var(--trama-color) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(to bottom, var(--trama-color) 0 1.5px, transparent 1.5px 26px);
}


/* ---------------------------------------------------------------------
   2. LAS SUPERFICIES QUE FLOTAN  →  vidrio con contorno de pegatina
   --------------------------------------------------------------------- */
.float-tools, .float-zoom{
  background:var(--vidrio);
  border:2.5px solid var(--tinta);
  border-radius:16px;
  box-shadow:var(--sombra-2);
  padding:7px;
  gap:7px;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .float-tools, .float-zoom{ -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso) }
}
.float-tools .sep{ background:var(--tinta); opacity:.25; width:2px; border-radius:2px }

.props{
  background:var(--vidrio);
  border:2.5px solid var(--tinta);
  border-radius:18px;
  box-shadow:var(--sombra-2);
  padding:13px 15px;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .props{ -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso) }
}
.props h4{
  font:400 14px var(--f-titulo); text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 10px; padding-bottom:7px; border-bottom:2.5px solid var(--tinta);
}
.prop-row input[type=number], .prop-row select, .prop-row input[type=text]{
  border:2px solid var(--tinta); border-radius:9px; background:var(--crema);
}
.prop-meas{ border:2px solid var(--tinta); border-radius:10px; background:var(--crema) }

.sim-badge{
  background:var(--amarillo); border:2.5px solid var(--tinta); border-radius:999px;
  box-shadow:var(--sombra-1); font-weight:900; font-size:12.5px; padding:5px 13px;
}
.sim-badge .dot{ background:var(--tinta); width:9px; height:9px }

.warn-box{
  background:var(--amarillo); border:2.5px solid var(--tinta); border-radius:14px;
  box-shadow:var(--sombra-2); font-size:12.5px;
}
.warn-box b{ color:var(--tinta) }

/* La ventanita de los pasos y las viñetas: también de vidrio. Así el
   niño sigue viendo su circuito por detrás mientras lee qué hacer. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .vpaso:not(.min), .guia-globo, .modal{
    background:var(--vidrio-poco);
    -webkit-backdrop-filter:var(--borroso); backdrop-filter:var(--borroso);
  }
}

/* ---------------------------------------------------------------------
   3. LAS TARJETAS DE LECCIÓN
   Estaban con borde fino y sombra difuminada: el aire de plantilla que
   queríamos quitar. Ahora son pegatinas.
   --------------------------------------------------------------------- */
.step-card{ background:#fffff7d9 }
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .step-card{
    background:#fffff7b3; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
}
/* La de victoria NO es de vidrio. Translucida se veia el circuito por
   detras y parecia que la pantalla se habia quedado pegada: el niño
   intentaba tocar sus cables y no respondian. Tiene que leerse como una
   tarjeta que tapa, con su boton para volver al nivel. */
.win-card{ background:#16161dbf }
.sc-inner, .win-inner{
  background:var(--crema);
  border:3px solid var(--tinta);
  border-radius:24px;
  box-shadow:0 7px 0 var(--tinta);
}
.sc-inner h2, .win-inner h2{
  font-family:var(--f-titulo); font-weight:400; text-transform:uppercase;
  line-height:1.12; letter-spacing:-.005em;
}
/* El subrayado grueso de los titulares del Canva («RECURSOS»). */
.sc-inner h2::after, .win-inner h2::after{
  content:""; display:block; width:72px; height:5px; margin:9px auto 0;
  background:var(--rojo); border:2px solid var(--tinta); border-radius:999px;
}
/* El icono de la tarjeta se mide en pixeles, no en «em»: el contenedor
   ya no tiene tamano de letra porque ahi antes vivia un emoji. */
.sc-emoji{ font-size:0; line-height:0; margin-bottom:6px }
.sc-emoji .ico{ width:54px; height:54px; vertical-align:top }
@media (max-width:520px){ .sc-emoji .ico{ width:44px; height:44px } }

/* ---------------------------------------------------------------------
   4. LAS PEGATINAS QUE SE SALEN DEL BORDE
   En la diapositiva las caritas se montan encima del borde de la banda
   roja, medio dentro y medio fuera. Es un detalle pequeño y es justo lo
   que hace que no parezca una plantilla.
   --------------------------------------------------------------------- */
.pegatina{
  position:absolute; pointer-events:none; z-index:2;
  filter:drop-shadow(0 3px 0 var(--tinta));
}
.pegatina.gira  { rotate:-12deg }
.pegatina.gira2 { rotate:14deg }

/* ---------------------------------------------------------------------
   5. DETALLES
   --------------------------------------------------------------------- */
/* Los iconos dentro de un botón de color van en negro, como el texto:
   en el Canva nunca hay texto blanco sobre los bloques de color. */
.btn .ico, .mtab .ico, .icon-btn .ico{ color:var(--tinta) }

/* El icono de la unidad: la caja ya tiene tamano fijo, el icono tambien. */
.uni-emoji{ font-size:0 }
.uni-emoji .ico{ width:32px; height:32px }
.ficha-badge .ico{ width:1.05em; height:1.05em; vertical-align:-.18em }

/* El numerito de los pasos y las bolitas no deben heredar cursiva. */
.nump, .bolita{ font-style:normal }

/* Las fichas del mapa, un pelín más de relieve al pasar por encima. */
.nodo:hover{ translate:0 -2px }

@media (prefers-reduced-motion: reduce){
  .nodo:hover{ translate:none }
}

/* ---------------------------------------------------------------------
   6. TEXTURAS
   El sitio web no se siente plano porque tiene fondos con cuadrícula y
   bandas de color; la aplicación era crema lisa de punta a punta. Aquí
   se traen esas MISMAS texturas, no otras nuevas.

   Dos sitios quedan intencionadamente lisos, y no es un olvido:
     · el lienzo del circuito, porque un fondo con dibujo compite con los
       cables y las patitas, que es justo lo que el niño tiene que leer;
     · el editor de código, por lo mismo con el texto.
   --------------------------------------------------------------------- */

/* El papel cuadriculado, como el de las diapositivas. Muy flojo: tiene
   que notarse que hay algo, no leerse como una rejilla. */
#home{
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(to right,  #8b97fd26 0 1.5px, transparent 1.5px 30px),
    repeating-linear-gradient(to bottom, #8b97fd26 0 1.5px, transparent 1.5px 30px);
}

/* El panel de la misión: puntitos en vez de cuadrícula, para que no se
   confunda con el papel del mapa y para que el texto respire. */
#missionPanel{
  background-color:var(--bg2);
  background-image:radial-gradient(#16161d14 1.4px, transparent 1.4px);
  background-size:18px 18px;
}
/* El texto va sobre su propia tarjeta limpia: sobre los puntos cansa. */
.mp-body > .mp-guia, .mp-body > #misionTexto{ position:relative }

/* La lista de piezas: cuadrícula fina, como el panel lateral del sitio. */
#palette{
  background-color:var(--bg2);
  background-image:
    repeating-linear-gradient(to right,  #8b97fd1a 0 1.5px, transparent 1.5px 24px),
    repeating-linear-gradient(to bottom, #8b97fd1a 0 1.5px, transparent 1.5px 24px);
}
.pal-item{ background:var(--crema) }

/* Las cabeceras de panel pasan a ser bandas de color con línea negra,
   como las secciones del sitio, en vez de una raya gris. */
.panel-head{
  background:var(--amarillo); border-bottom:2.5px solid var(--tinta);
  font-family:var(--f-titulo); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; font-size:13px; padding:9px 12px;
}
.panel-head .btn, .panel-head .icon-btn, .panel-head .mini{ font-family:var(--f-texto) }

/* La barra de pestañas del móvil, también banda y no fondo liso. */
#mobileTabs{ border-top:2.5px solid var(--tinta) }

/* La tarjeta de lección se apoya sobre el lienzo: un pelín de papel
   detrás ayuda a que se vea que está ENCIMA de algo. */
.sc-inner, .win-inner{
  background-color:var(--crema);
  background-image:radial-gradient(#16161d0f 1.3px, transparent 1.3px);
  background-size:16px 16px;
}
/* El texto de la lección, sobre crema limpia dentro de la tarjeta. */
.sc-body, .win-inner p{ background:var(--crema); border-radius:14px }
.sc-body{ padding:14px 16px; margin-top:2px }

@media (prefers-reduced-motion: no-preference){
  .sc-inner, .win-inner{ background-attachment:local }
}

/* ---------------------------------------------------------------------
   7. LOS BOTONES DE LA MISIÓN
   Eran tres botones repartiéndose a partes iguales un panel de 262 px:
   con el icono delante no cabían y «Tutor» salía cortado. Ahora pueden
   bajar a la línea siguiente, y cada uno lleva su color para que el niño
   los distinga de un vistazo antes de leerlos.
   --------------------------------------------------------------------- */
.mp-sec{ flex-wrap:wrap; gap:7px }
.mp-sec .btn{
  flex:1 1 auto; min-width:92px; white-space:nowrap;
  border:2.5px solid var(--tinta); border-radius:999px;
  box-shadow:var(--sombra-1); font-weight:900; padding:7px 12px;
}
.mp-sec .btn .ico{ flex:none }

#btnVoz   { background:var(--lila) }
#btnPista { background:var(--amarillo) }
#btnTutor { background:var(--verde) }
#btnSolucion{ background:var(--crema) }
.mp-sec .btn:hover{ translate:0 -2px; box-shadow:var(--sombra-2) }

/* Cuando está leyendo, el botón cambia a «Parar» y conviene que se note. */
#btnVoz.sonando{ background:var(--rojo) }

@media (prefers-reduced-motion: reduce){
  .mp-sec .btn:hover{ translate:none }
}