/* =====================================================================
   vidrio-app.css — dónde se aplica el vidrio DENTRO de la aplicación.

   Los tokens y las clases viven en css/vidrio.css, que se comparte con
   el sitio. Aquí solo está lo propio de la app: qué superficie es de
   vidrio y qué botón lleva color.

   LA REGLA: el vidrio es crema sin tinte. El color va en los botones,
   los iconos y los chips, y siempre sólido.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LA BARRA DE ARRIBA — píldora flotante de vidrio, ya no roja
   --------------------------------------------------------------------- */
/* LA BARRA DE ARRIBA ES NEGRA, no una pildora de vidrio.

   La primera version la hizo entera de vidrio, de cuando el encargo
   era «pildora flotante». En el documento de la app la barra es una
   franja negra de lado a lado, y el vidrio es SOLO la pildora de
   «Salir · titulo · pasos» que va dentro. Con las dos cosas de vidrio
   sobre fondo crema no se distinguia una de otra, y lo que se veia era
   una barra blanca. */
#topbar{
  background: var(--tinta);
  border-bottom: 3px solid var(--tinta);
  height: auto;
  padding: 10px 14px;
}
/* Lo que va encima del negro, en crema. */
#topbar .brand-name{ color: var(--crema) }
#topbar .btn.ghost{ color: var(--crema); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22) }
#topbar .btn.ghost:hover{ background: rgba(255,255,255,.16) }
#topbar #projectName{
  background: rgba(255,255,255,.08); color: var(--crema);
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 12px;
}
#topbar #projectName::placeholder{ color: #9a9aa6 }
#topbar .icon-btn{ color: var(--crema) }
/* El logo, en su círculo crema con borde de tinta. */
#btnInicio .logo{
  width: 40px; height: 40px; background: var(--crema);
  border: 2px solid var(--tinta); border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
#btnInicio .logo svg{ width: 26px; height: 26px }

/* Los botones de la barra, en color sólido. */
#btnRun{
  background: #00c07a; border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura); color: var(--tinta);
}
#btnRun.running{ background: #ff5454 }
#btnCode{
  background: #ffdf2b; border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura); color: var(--tinta);
}
#btnPalette, #btnMenu{
  background: var(--crema); border: 2px solid var(--tinta); border-radius: 13px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
}

/* ---------------------------------------------------------------------
   2. ENTRAR
   --------------------------------------------------------------------- */
.acceso{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 28px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura-grande);
  padding: 26px 22px 24px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .acceso{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
.acceso input[type="email"],
.acceso input[type="password"],
.acceso input[type="text"]{
  background: rgba(255,255,255,.55);
  border: 2px solid var(--tinta);
  border-radius: 14px;
  box-shadow: inset 0 2px 5px rgba(22,22,29,.10);
}
.acceso input::placeholder{ color: #6a6a76 }

/* El logo en su cuadrado de vidrio. */
.acceso-logo, .bv-logo{
  width: 84px; height: 84px; padding: 12px; margin-inline: auto;
  display: grid; place-items: center;
  background: var(--vidrio-claro-fuerte);
  border: 2px solid var(--tinta); border-radius: 22px;
  box-shadow: var(--brillo-superior), var(--sombra-dura);
}
/* .ico.gde de styles.css pesa (0,2,0) y se llevaba el tamano por delante:
   el dibujo salia a 123 px dentro de un cuadrado de 84 y se desbordaba
   sobre el titulo. Con .ico aqui empatamos el peso y manda este, que va
   despues. */
.acceso-logo .ico, .bv-logo .ico{ width: 100%; height: 100% }

/* «Continuar con Google» en vidrio; «Entrar» en rojo sólido. */
.acceso .btn-google, .acceso .google{
  background: var(--vidrio-claro-fuerte);
  border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), var(--sombra-dura);
}
.acceso .btn.primary{ background: #ff5454 }

/* ---------------------------------------------------------------------
   3. MAPA DE NIVELES
   --------------------------------------------------------------------- */
#homeHdr{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 22px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura);
  margin: 10px 12px 0;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  #homeHdr{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
/* Los chips, en color sólido: racha naranja, estrellas amarillo, XP verde. */
#hdrRacha, .hdr-xp, .hdr-estrellas, .perfil-chip{
  border: 2px solid var(--tinta); border-radius: 999px;
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
  color: var(--tinta); font-weight: 900;
}
#hdrRacha     { background: #ff9f40 }
.hdr-estrellas{ background: #ffdf2b }
.hdr-xp       { background: #00c07a }
.perfil-chip  { background: var(--crema) }

/* La cabecera de la unidad que toca, en ROJO SÓLIDO; las demás, vidrio.
   Antes cada una se tintaba con su color y el vidrio quedaba sucio. */
.uni-head{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 20px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura);
  padding: 12px 14px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .uni-head{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
.unidad.ahora .uni-head{ background: #ff5454 }
/* Sobre el rojo solido, el gris de los textos secundarios da 1.99 de
   contraste y la norma pide 4.5: ahi el texto va en tinta. */
.unidad.ahora .uni-head .uni-txt p,
.unidad.ahora .uni-head .uni-prep{ color: var(--tinta) }
/* El cuadrito del icono conserva el color de su unidad: ahí sí va. */
.uni-head .uni-emoji{
  background: var(--uc, #ffdf2b);
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
}

/* Los nodos. Hecho verde con brillo, el de ahora rojo con anillo
   punteado, el cerrado en vidrio claro con su candado. */
.nodo{ background: none; border: 0; box-shadow: none }
.nodo .nodo-ic{
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), var(--sombra-dura);
  color: var(--tinta);
}
.nodo.hecha   .nodo-ic{ background: #00c07a }
.nodo.abierta .nodo-ic{ background: #ff5454 }
.nodo.cerrada .nodo-ic{ background: var(--vidrio-claro-fuerte); color: var(--txt2) }
/* El anillo punteado va SOLO en el nivel que toca, no en todos los que
   se pueden jugar. Y el ::after se cuelga del circulo, no del boton: si
   no, rodea tambien el titulo y sale una elipse. */
.nodo .nodo-ic{ position: relative }
.nodo.ahora .nodo-ic::after{
  content: ""; position: absolute; inset: -9px;
  border: 2.5px dashed var(--tinta); border-radius: 50%; pointer-events: none;
}
.nodo .nodo-nom{ background: none }

/* La ficha que se abre al tocar un nivel. */
.ficha, .ficha-caja{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta);
  border-radius: 24px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura-grande);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .ficha, .ficha-caja{
    -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio);
  }
}

/* ---------------------------------------------------------------------
   4. LECCIÓN Y SIMULADOR
   --------------------------------------------------------------------- */
.vpaso:not(.min){
  background: var(--vidrio-claro-fuerte);
  border: 2.5px solid var(--tinta);
  box-shadow: var(--brillo-superior), var(--sombra-dura);
}
/* ---------------------------------------------------------------------
   LA COLUMNA DE LA IZQUIERDA, EN VIDRIO
   La mision tenia fondo solido con puntitos. Ahora es vidrio, como el
   resto: el panel se ve translucido y lo que manda son los botones,
   que siguen en color solido.

   Detras hacen falta figuras: el vidrio no tiene color propio, toma el
   de lo que hay debajo, y desenfocar crema da crema. Sin esto el
   efecto no existe, que es justo lo que pasaba.
   --------------------------------------------------------------------- */
/* OJO con el position: en celular la columna es un cajon que entra
   deslizandose, y para eso learn.css la pone absolute dentro de una
   consulta de medios. Ponerle relative aqui, sin acotar, le gana a esa
   regla y el cajon se queda clavado en el flujo comiendose el lienzo.
   En celular ya es absolute, que sirve igual de bloque contenedor. */
#leftCol{ background: var(--bg) }
@media (min-width: 820px){ #leftCol{ position: relative } }
#leftCol::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 112% 14%, #8b97fd 0 120px, transparent 121px),
    radial-gradient(circle at -18% 54%, #ff5454 0 110px, transparent 111px),
    radial-gradient(circle at 104% 88%, #ffdf2b 0 100px, transparent 101px);
  opacity: .42;
}
#leftCol > *{ position: relative; z-index: 1 }

#missionPanel{
  background: var(--vidrio-claro);
  background-image: none;
  border-bottom: 2px solid var(--tinta);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  #missionPanel{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
/* La tarjeta del paso a paso sigue siendo solida: es lo que se lee,
   y encima del vidrio tiene que destacar, no sumarse. */
.mp-body > .mp-guia, .mp-body > #misionTexto{
  background: var(--crema);
  border: 2px solid var(--tinta); border-radius: 16px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  padding: 12px 14px;
}
.mp-body h4{ margin-top: 0 }
/* La cabecera lila de la leccion, encima del vidrio. */
#missionPanel .mp-cabecera, #missionPanel > .mp-lila{ position: relative }

/* La banda de «Componentes» es negra, como en el documento, no
   amarilla: la amarilla es la del panel de codigo, y tener las dos
   iguales hacia que la pantalla no tuviera un solo punto de reposo. */
#palette > .panel-head{
  background: var(--tinta); color: var(--crema);
  border-bottom: 3px solid var(--tinta);
}
#palette > .panel-head strong{ color: var(--crema) }
#palette > .panel-head .icon-btn{ color: var(--crema) }

/* La paleta vuelve a ser vidrio claro, sin el lila de antes. */
#palette{
  background: var(--vidrio-claro);
  background-image: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  #palette{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
.pal-item{
  background: var(--vidrio-claro-fuerte);
  border: 2px solid var(--tinta); border-radius: 14px;
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}

/* Las herramientas y el zoom, en vidrio con los botones de color. */
.float-tools, .float-zoom{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta); border-radius: 16px;
  box-shadow: var(--brillo-superior), var(--sombra-dura);
}
#btnRotate  { background: #8b97fd }
#btnDelete  { background: #ff5454 }
#btnDuplicate{ background: #ffdf2b }
#btnUndo, #btnRedo{ background: var(--crema) }
#btnPan.active{ background: #ffdf2b }
.float-tools .icon-btn, .float-zoom .icon-btn{
  border: 2px solid var(--tinta); border-radius: 11px;
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}

/* Los botones de la columna izquierda, en sus colores. */
#btnComprobar  { background: #ff5454 }
#btnVoz        { background: #8b97fd }
#btnPista      { background: #ffdf2b }
#btnTutor      { background: #00c07a }
#btnRepasarPaso{ background: var(--crema) }

/* El panel de código: cabecera amarilla sólida. */
#codePanel .panel-head{ background: #ffdf2b; border-bottom: 2.5px solid var(--tinta) }
/* En celular el código se abre como cajón de vidrio oscuro. */
@media (max-width:819px){
  #codePanel{
    background: rgba(22,22,29,.72);
    border-left: 0; border-top: 2px solid var(--tinta);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    #codePanel{ -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6) }
  }
  /* El texto se pone claro, pero las CAJAS que lo contienen traian su
     propio fondo crema de la version de escritorio. Resultado: crema
     sobre crema y el codigo invisible. Hay que vaciarlas tambien. */
  #codePanel .editor-wrap, #codePanel .code-view,
  #codePanel .serial-view, #codePanel .serial-out{ background: transparent }
  #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 }
  #codePanel .editor-bar, #codePanel .serial-in{ background: transparent }
  #codePanel #editorStatus{ color: #b9b9c4 }

  /* Los bloques, igual que en escritorio: lo estructural en crema y
     las piezas como pegatinas solidas encima. */
  #codePanel #bloquesView,
  #codePanel #diagramaView{
    background-color: transparent;
    background-image: radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px);
  }
  #codePanel .bl-tit{ color: var(--crema) }
  #codePanel .bl-tit small, #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) }
  #codePanel .bl-pieza{ background: var(--crema); box-shadow: 0 3px 0 rgba(0,0,0,.5) }

  /* El diagrama y el monitor serie, lo mismo que los bloques. */
  #codePanel .dg-cab b{ color: var(--crema) }
  #codePanel .dg-cab small, #codePanel .dg-vacio,
  #codePanel .dg-nada, #codePanel .dg-rama{ color: #b9b9c4 }
  #codePanel .dg-cab{ border-bottom-color: var(--borde-vidrio-oscuro) }
  #codePanel .dg-flecha{ background: var(--crema) }
  #codePanel .dg-flecha::after{ border-top-color: var(--crema) }
  #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) }
}

/* ---------------------------------------------------------------------
   5. CHISPA
   --------------------------------------------------------------------- */
#tutorPanel{
  background: var(--vidrio-claro);
  border: 2px solid var(--tinta); border-radius: 22px;
  box-shadow: var(--brillo-superior), var(--brillo-inferior-lila), var(--sombra-dura-grande);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  #tutorPanel{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
@media (min-width:820px){
  #tutorPanel .panel-head{ background: #ffdf2b; border-bottom: 2.5px solid var(--tinta) }
}
.msg.yo{
  background: #ff5454; border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}
.msg.bot{
  background: var(--vidrio-claro-fuerte); border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), var(--sombra-dura);
}
.tutor-rapido{
  background: #8b97fd; border: 2px solid var(--tinta); border-radius: 999px;
  box-shadow: var(--brillo-boton), 0 2px 0 var(--tinta);
}
#tutorForm{
  background: var(--vidrio-claro-fuerte);
  border: 2px solid var(--tinta); border-radius: 999px;
  box-shadow: var(--brillo-superior), var(--sombra-dura);
  padding: 5px 5px 5px 14px;
}
#tutorInput{ background: transparent; border: 0 }
#tutorForm button[type="submit"]{ background: #ff5454 }

/* ---------------------------------------------------------------------
   6. CONTRASTE Y RENDIMIENTO
   --------------------------------------------------------------------- */
.mano, .acceso-mano, .acceso a, .mp-body h4{ color: var(--lila-texto) }

/* En el mapa pueden coincidir la barra y varias cabeceras de unidad.
   En táctil se quedan con el fondo y sin desenfocar: nunca más de dos
   capas a la vez. */
@media (pointer: coarse){
  .uni-head, .pal-item{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---------------------------------------------------------------------
   7. LAS FIGURAS DEL FONDO
   Tu documento las pide como elementos sueltos con aria-hidden. Aquí
   van como degradados radiales de corte duro sobre un único elemento:
   se ven igual —círculos sólidos que se salen por los bordes— y la
   página no gana ni un nodo que el navegador tenga que componer. En el
   mapa eso importa: ya hay 64 nodos y 12 cabeceras.
   --------------------------------------------------------------------- */
#home::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 104% 9%,  #ff5454 0 150px, transparent 151px),
    radial-gradient(circle at -7% 28%,  #8b97fd 0 165px, transparent 166px),
    radial-gradient(circle at 106% 56%, #ffdf2b 0 140px, transparent 141px),
    radial-gradient(circle at -9% 82%,  #00c07a 0 150px, transparent 151px),
    radial-gradient(circle at 92% 95%,  #ff9f40 0 100px, transparent 101px);
  background-repeat:no-repeat;
}
#home > *{ position:relative; z-index:1 }

@media (max-width:560px){
  #home::before{
    background-image:
      radial-gradient(circle at 108% 7%,  #ff5454 0 104px, transparent 105px),
      radial-gradient(circle at -14% 25%, #8b97fd 0 118px, transparent 119px),
      radial-gradient(circle at 112% 58%, #ffdf2b 0 100px, transparent 101px),
      radial-gradient(circle at -16% 86%, #00c07a 0 110px, transparent 111px);
  }
}


/* =====================================================================
   EL DIALOGO DEL PERFIL
   Los avatares iban dentro de una .prop-row, que es una fila de dos
   columnas: diez botones de 32px se apretujaban contra el borde
   derecho. Y los interruptores eran casillas del sistema, que con
   este diseno de pegatina desentonan.
   ===================================================================== */
.bloque-ajuste{
  margin: 14px 0 0; padding: 13px 14px;
  background: var(--vidrio-claro);
  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)){
  .bloque-ajuste{ -webkit-backdrop-filter: var(--filtro-vidrio); backdrop-filter: var(--filtro-vidrio) }
}
.ajuste-tit{
  display: block; margin-bottom: 11px;
  font: 900 11.5px/1 var(--f-texto); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta);
}

/* --- La rejilla de avatares --- */
.rejilla-av{
  display: grid; gap: 9px;
  /* Cinco y cinco, como en la pantalla de crear perfil. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.av-opcion{
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--crema); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  cursor: pointer; padding: 0; transition: transform .12s;
}
.av-opcion .ico{ width: 26px; height: 26px }
.av-opcion:hover{ transform: translateY(-2px) }
.av-opcion.sel{
  background: #8b97fd;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta), 0 0 0 3px var(--tinta);
}

/* Los dos botones de la cuenta, uno debajo del otro y a lo ancho. */
.cuenta-acciones{ display: grid; gap: 8px }
.cuenta-acciones .btn{
  width: 100%; justify-content: center; padding: 12px;
  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;
}
.cuenta-acciones #pfCerrar{ background: #ff9f40 }

/* --- El interruptor --- */
/* Sigue siendo una casilla de verdad debajo, para el teclado y para
   quien use lector de pantalla; lo que se ve es la palanca. */
.interruptor{
  display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 0;
}
.interruptor .in-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.interruptor .in-txt b{ font-size: 14px; color: var(--tinta) }
.interruptor .in-txt small{ font-size: 12px; color: var(--txt2); line-height: 1.35 }
.interruptor input{
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.in-palanca{
  flex: none; position: relative; width: 60px; height: 34px; border-radius: 999px;
  background: var(--crema); border: 2px solid var(--tinta);
  box-shadow: inset 0 2px 0 rgba(22,22,29,.10);
  transition: background .18s;
}
.in-palanca::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--tinta);
  transition: transform .18s;
}
.interruptor input:checked ~ .in-palanca{ background: #00c07a }
.interruptor input:checked ~ .in-palanca::after{ transform: translateX(26px) }
.interruptor input:focus-visible ~ .in-palanca{ outline: 3px solid #5a66e0; outline-offset: 3px }

/* =========================================================
   LAS CARITAS FUERA DEL DIALOGO DE PERFIL
   Al crear un perfil y en la lista de «¿quien aprende hoy?» las
   caritas eran emojis dentro de una caja: bastaba el tamano de
   letra para colocarlas. Ahora son dibujos, y un <svg> en linea
   no se centra solo ni hereda el tamano. Se visten igual que la
   rejilla del dialogo, que es la que ya esta bien.
   ========================================================= */
.bv-avatares{
  display: grid; gap: 9px;
  /* Cinco y cinco: son diez caritas y asi quedan dos filas parejas
     a cualquier ancho, en vez de 7+3 o 9+1. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bv-av{
  width: auto; height: auto; aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--crema); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 15px;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
  cursor: pointer; padding: 0; transition: transform .12s;
}
.bv-av .ico{ width: 26px; height: 26px }
.bv-av:hover{ transform: translateY(-2px) }
.bv-av.sel{
  background: #8b97fd;
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta), 0 0 0 3px var(--tinta);
}
.bv-av:focus-visible{ outline: 3px solid #5a66e0; outline-offset: 3px }

.perfil-card .pf-av{
  border: 2px solid var(--tinta);
  box-shadow: var(--brillo-boton), 0 3px 0 var(--tinta);
}
.perfil-card .pf-av .ico{ width: 34px; height: 34px; color: var(--tinta) }
.perfil-card.nuevo .pf-av{ box-shadow: none }
.perfil-card.nuevo .pf-av .ico{ width: 26px; height: 26px }

/* En pantalla ancha la tarjeta de entrar/perfiles se quedaba a 760 px
   (la regla del lienzo del mapa) y las caritas salian de 115 px. Esto
   la devuelve al tamano de una tarjeta de verdad; el #homeInner delante
   es para ganarle a «.home-inner > :not(.adornos)». */
@media (min-width: 560px){
  #homeInner > .acceso{ max-width: 440px; margin-inline: auto }
  #homeInner > .acceso.acceso-ancho{ max-width: 620px }
  #homeInner > .perfiles{ max-width: 560px; margin-inline: auto }
}

/* El cursor de escritura del editor era «tinta» sobre un panel que ahora
   es tinta: el mismo color exacto, invisible. Donde el panel es oscuro
   va en amarillo de la marca, que se ve a la primera. */
#codePanel #editor{ caret-color: #ffdf2b }