/* =========================================================
   LA ACTIVIDAD DEL ÁRBOL COMO APLICACIÓN

   Tres franjas fijas: progreso arriba, contenido en medio,
   navegación abajo. La página nunca se desplaza; si algún
   contenido no cabe, se desplaza sólo la franja del medio y
   las barras siguen a la vista.
   ========================================================= */

.appshell {
  display: flex;
  flex-direction: column;
  /* La altura de la barra del sitio la mide el JS y la deja en
     --alto-topbar. dvh evita el salto de la barra de direcciones. */
  height: calc(100dvh - var(--alto-topbar, 70px));
  min-height: 460px;
}
.appshell__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Mientras se usa la actividad no hay pie de página ni scroll global. */
body:has(#vista-actividad:not([hidden])) .foot { display: none; }
body:has(#vista-actividad:not([hidden])) { overflow: hidden; }

.pant {
  width: min(100% - 1.6rem, var(--shell));
  margin-inline: auto;
  padding-block: clamp(.8rem, 2.5vw, 1.6rem);
}

/* ---------- barra de progreso ---------- */
.pg {
  flex: none;
  padding: .6rem clamp(.8rem, 3vw, 1.5rem) .5rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.pg__tramos { display: flex; gap: 3px; }
.pg__t {
  flex: 1; height: 6px; border-radius: var(--r-pill);
  background: var(--paper-3); transition: background .35s ease;
}
.pg__t.is-hecho { background: var(--ok); }
.pg__t.is-aqui  { background: var(--acc); }
.pg__pie { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-top: .4rem; }
.pg__paso { font-size: var(--t-xs); color: var(--muted); }
.pg__paso b { color: var(--ink); }
.pg__pts { font-size: var(--t-xs); font-weight: 700; color: var(--acc-dark); font-variant-numeric: tabular-nums; }

/* ---------- barra de navegación ---------- */
.nav {
  flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
  padding: .6rem clamp(.8rem, 3vw, 1.5rem);
  padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.nav__b {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.1rem; border-radius: var(--r-pill);
  border: 2px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 700;
  transition: background .2s, border-color .2s, transform .15s;
}
.nav__b:first-child { justify-self: start; }
.nav__b:last-child  { justify-self: end; }
.nav__b span { font-size: 1.2rem; line-height: 1; }
.nav__b em { font-style: normal; }
.nav__b:hover:not([disabled]) { border-color: var(--acc); color: var(--acc); }
.nav__b:active:not([disabled]) { transform: scale(.97); }
.nav__b[disabled] { opacity: .32; cursor: default; }
.nav__b--pri { background: var(--acc); border-color: var(--acc); color: #fff; }
.nav__b--pri:hover:not([disabled]) { background: var(--acc-dark); border-color: var(--acc-dark); color: #fff; }
.nav__b--pri[disabled] { background: var(--paper-3); border-color: var(--line); color: var(--muted-2); opacity: 1; }
.nav__saltar {
  font-size: var(--t-xs); color: var(--muted-2); padding: .5rem .8rem;
  border-radius: var(--r-pill); border: 1px dashed var(--line-2);
}
.nav__saltar:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 420px) {
  /* La flecha de atrás se entiende sola; la acción principal, no:
     esa conserva siempre su texto. */
  .nav__b:not(.nav__b--pri) em { display: none; }
  .nav__b:not(.nav__b--pri) { min-width: 56px; padding: 0 .9rem; }
  .nav__b--pri em { font-size: .78rem; }
  .nav__b--pri { padding: 0 .9rem; }
}

/* ---------- bienvenida compacta ---------- */
.bienvenida__t { font-size: clamp(1.6rem, 6vw, 2.6rem); }
.bienvenida__lead { font-size: var(--t-md); color: var(--muted); margin-top: .5rem; max-width: 52ch; }
.bpasos { display: grid; gap: .4rem; margin-top: 1rem; }
@media (min-width: 720px) { .bpasos { grid-template-columns: repeat(2, 1fr); } }
.bpasos li { display: flex; gap: .7rem; align-items: flex-start; }
.bpasos__n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .78rem; }
.bpasos b { display: block; font-size: var(--t-sm); color: var(--ink); line-height: 1.25; }
.bpasos em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.bnotas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.bnota { font-size: var(--t-xs); padding: .35rem .75rem; border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.bienvenida__pie { font-size: var(--t-xs); color: var(--muted-2); margin-top: .9rem; max-width: 56ch; }

/* ---------- selector: dos por fila desde el celular ---------- */
#vista-actividad .grid4 { grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: 1rem; }
@media (min-width: 900px) { #vista-actividad .grid4 { grid-template-columns: repeat(4, 1fr); gap: .9rem; } }
#vista-actividad .revcard { padding: .8rem; gap: .3rem; }
#vista-actividad .revcard__n { font-size: 1.5rem; }
#vista-actividad .revcard__illus { width: 54px; height: 54px; padding: 8px; }
#vista-actividad .revcard__t { font-size: var(--t-sm); line-height: 1.2; }
#vista-actividad .revcard__p { font-size: var(--t-xs); }
#vista-actividad .revcard__tag { font-size: .66rem; }
@media (min-width: 900px) {
  #vista-actividad .revcard { padding: 1.1rem; }
  #vista-actividad .revcard__illus { width: 84px; height: 84px; padding: 11px; }
  #vista-actividad .revcard__t { font-size: var(--t-md); }
}

/* ---------- contexto compacto ---------- */
#vista-actividad .ctx { gap: 1rem; }
#vista-actividad .quote { font-size: var(--t-md); margin: .8rem 0; }
#vista-actividad .provoca { padding: .8rem 1rem; margin-top: .8rem; }
#vista-actividad .provoca__q { font-size: var(--t-md); }

/* ---------- el juego ---------- */
.play { display: grid; gap: .9rem; }
@media (min-width: 980px) { .play { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: start; } }
.play .stage { position: static; box-shadow: none; }
@media (max-width: 979px) {
  /* El árbol acompaña; el protagonista es la pregunta. */
  .play .stage svg { max-height: 26vh; width: auto; margin-inline: auto; }
}
.play .panel__head h2 { font-size: clamp(1.15rem, 4.2vw, 1.6rem); }
.play .panel__head p { font-size: var(--t-xs); }
.play .rule { padding: .6rem .8rem; font-size: var(--t-xs); }
.play .opt { padding: .7rem .9rem; min-height: 48px; font-size: var(--t-sm); }
.play .opts { gap: .5rem; }
.play .opt__mark { width: 26px; height: 26px; font-size: .75rem; }
.play .feedback { padding: .7rem .9rem; font-size: var(--t-xs); }
.play .panel { gap: .7rem; }

/* ---------- resultado compacto ---------- */
#vista-actividad .result__head { margin-bottom: .9rem; }
#vista-actividad .medal { font-size: clamp(2.2rem, 8vw, 3.2rem); }
#vista-actividad .bigscore { font-size: clamp(1.8rem, 7vw, 3rem); }
#vista-actividad .trunkline { padding: .8rem 1rem; margin-top: .9rem; }
#vista-actividad .trunkline p { font-size: var(--t-md); }
#vista-actividad .legend { gap: .7rem; margin-top: .9rem; }
#vista-actividad .legend__box { padding: .8rem 1rem; }
#vista-actividad .legend li { padding: .3rem 0; font-size: var(--t-xs); }

/* ---------- contexto: una imagen, y acotada ---------- */
#vista-actividad .ctx__media img,
#vista-actividad .ctx__media video { aspect-ratio: 16/10; }
@media (max-width: 979px) {
  #vista-actividad .ctx__media img,
  #vista-actividad .ctx__media video { max-height: 30vh; aspect-ratio: auto; }
}

/* ---------- resultado en dos columnas ---------- */
.resultado { display: grid; gap: 1rem; }
@media (min-width: 900px) { .resultado { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; } }
.resultado .stage { position: static; box-shadow: none; }
@media (max-width: 899px) { .resultado .stage svg { max-height: 32vh; width: auto; margin-inline: auto; } }
.resultado .result__head { text-align: left; margin-bottom: .8rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.resultado .medal { font-size: 2rem; line-height: 1; }
.resultado .result__head h2 { font-size: var(--t-lg); }
.resultado .bigscore { font-size: var(--t-xl); margin-left: auto; }
.result__meta { flex-basis: 100%; font-size: var(--t-xs); color: var(--muted-2); }
.resultado .trunkline { margin-top: 0; padding: .8rem 1rem; }
.resultado .trunkline p { font-size: var(--t-md); }

.plega { margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.plega summary {
  cursor: pointer; padding: .6rem .9rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.plega summary::before { content: '▸'; color: var(--acc); transition: transform .2s; }
.plega[open] summary::before { transform: rotate(90deg); }
.plega summary::-webkit-details-marker { display: none; }
.plega__l { padding: 0 .9rem .8rem; display: grid; gap: .45rem; }
.plega__l li { font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.plega__l b { color: var(--ink); }
.resultado .cta-row { margin-top: .9rem; }

/* ---------- en el juego, el árbol se queda quieto ----------
   En celular el árbol queda fijo debajo de la barra de progreso y
   sólo se desplaza la lista de opciones. Así nunca se pierde de
   vista ni el árbol creciendo ni las flechas de navegación. */
@media (max-width: 979px) {
  .appshell.en-juego .appshell__cuerpo { overflow: hidden; }
  .appshell.en-juego .pant.play {
    height: 100%; display: flex; flex-direction: column; gap: .5rem;
    padding-block: .5rem;
  }
  .appshell.en-juego .play .stage { flex: none; }
  .appshell.en-juego .play .stage svg { max-height: 20vh; }
  .appshell.en-juego .play .panel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; padding-right: 2px;
  }
}
/* Opciones un punto más compactas: seis han de caber sin apretar el texto. */
.play .opt { padding: .6rem .8rem; min-height: 44px; line-height: 1.35; }
.play .panel__head { position: sticky; top: 0; background: var(--paper); z-index: 2; padding-bottom: .3rem; }

/* ---------- últimos ajustes para que quepa todo en celular ---------- */
@media (max-width: 899px) {
  #vista-actividad .ctx__media img,
  #vista-actividad .ctx__media video { max-height: 22vh; }
  #vista-actividad .ctx__pie { font-size: .7rem; padding: .4rem .7rem; }
  #vista-actividad .quote { font-size: var(--t-sm); margin: .6rem 0; padding-left: .8rem; }
  #vista-actividad .quote cite { margin-top: .3rem; }
  #vista-actividad .provoca { padding: .65rem .85rem; }
  #vista-actividad .provoca__q { font-size: var(--t-sm); }
  #vista-actividad .ctx { gap: .7rem; }

  .resultado { gap: .6rem; }
  .resultado .stage svg { max-height: 24vh; }
  .resultado .medal { font-size: 1.6rem; }
  .resultado .result__head { margin-bottom: .5rem; gap: .5rem; }
  .resultado .trunkline p { font-size: var(--t-sm); }
  .plega summary { padding: .5rem .8rem; font-size: var(--t-xs); }
}

/* ---------- que nada tape la barra de navegación ----------
   El indicador de la sala en vivo pertenece a la clase, no a la
   actividad: ahí estorbaría justo encima de la flecha de atrás. */
body:has(#vista-actividad:not([hidden])) .conexion,
body:has(#vista-actividad:not([hidden])) .seguir,
body:has(#vista-actividad:not([hidden])) .navbtn,
body:has(#vista-actividad:not([hidden])) .navlista,
body:has(#vista-actividad:not([hidden])) .progreso,
body:has(#vista-actividad:not([hidden])) .docente { display: none; }

/* El aviso flotante sube para no cubrir las flechas. */
body:has(#vista-actividad:not([hidden])) .toast { bottom: 84px; }

/* =========================================================
   PANTALLAS CORTAS
   El apuro aquí no es el ancho sino el alto: un celular de
   640 px de alto deja unos 440 útiles entre las dos barras.
   Se recorta lo prescindible por tramos de altura.
   ========================================================= */
@media (max-height: 820px) {
  #vista-actividad .pant { padding-block: .5rem; }
  #vista-actividad .eyebrow { margin-bottom: .4rem; }
  #vista-actividad h2 { font-size: clamp(1.15rem, 4.6vw, 1.5rem) !important; }
  /* El párrafo de apoyo repite lo que ya dijo la clase. */
  #vista-actividad .pant > p:not(.eyebrow) { font-size: var(--t-xs); margin-top: .3rem; }
  #vista-actividad .revcard { padding: .6rem; }
  #vista-actividad .revcard__n { font-size: 1.2rem; }
  #vista-actividad .revcard__illus { width: 44px; height: 44px; padding: 6px; margin-bottom: 0; }
  #vista-actividad .revcard__t { font-size: .88rem; }
  #vista-actividad .revcard::before { height: 3px; }
  .bienvenida__lead { font-size: var(--t-sm); }
  .bpasos { gap: .28rem; margin-top: .7rem; }
  .bnotas { margin-top: .7rem; }
  .bienvenida__pie { margin-top: .6rem; }
  .pg { padding-block: .45rem .35rem; }
  .nav { padding-block: .45rem; }
  .nav__b { min-height: 46px; }
}

@media (max-height: 700px) {
  /* Ya no hay margen: fuera los textos de apoyo y el pie de la bienvenida. */
  #vista-actividad .pant > p:not(.eyebrow) { display: none; }
  .bienvenida__pie { display: none; }
  .bienvenida__lead { display: block; font-size: var(--t-xs); }
  #vista-actividad .revcard__illus { display: none; }
  #vista-actividad .revcard { flex-direction: row; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
  #vista-actividad .revcard__t { flex: 1 1 100%; margin-top: .2rem; }
  .bnota { font-size: .68rem; padding: .25rem .6rem; }
}

/* El botón de descargar lleva más texto: se le deja crecer un poco. */
.nav__b--pri em { white-space: nowrap; }
@media (max-width: 480px) {
  .nav__saltar { font-size: .68rem; padding: .45rem .6rem; }
  .nav__b--pri em { font-size: .8rem; }
}

/* =========================================================
   RESULTADO: el árbol manda
   Es el producto de la actividad y lleva las etiquetas que el
   estudiante acaba de colocar: si no se leen, no sirve de nada.
   Ocupa todo el ancho y lo demás se aprieta a su alrededor.
   ========================================================= */
@media (max-width: 899px) {
  .resultado .stage svg { max-height: none; width: 100%; }
  .resultado .stage { border: 0; background: transparent; }

  .resultado .result__head { margin: .5rem 0 .4rem; align-items: center; }
  .resultado .medal { font-size: 1.4rem; }
  .resultado .result__head h2 { font-size: var(--t-md); }
  .resultado .bigscore { font-size: var(--t-lg); }
  .result__meta { font-size: .68rem; }

  .resultado .trunkline { padding: .55rem .8rem; }
  .resultado .trunkline span { font-size: .62rem; letter-spacing: .1em; }
  .resultado .trunkline p { font-size: .92rem; line-height: 1.35; margin-top: .15rem; }
  .plega { margin-top: .35rem; }
  .plega summary { padding: .45rem .75rem; }
}

/* =========================================================
   EL ÁRBOL, A TODO LO ANCHO TAMBIÉN MIENTRAS SE JUEGA
   Se prefiere un árbol legible —con las etiquetas que se van
   colocando— antes que uno diminuto que quepa entero. El
   cuerpo vuelve a desplazarse; las barras siguen fijas.
   ========================================================= */
@media (max-width: 979px) {
  .appshell.en-juego .appshell__cuerpo { overflow-y: auto; }
  .appshell.en-juego .pant.play { height: auto; display: grid; gap: .7rem; padding-block: .6rem; }
  .appshell.en-juego .play .stage { flex: initial; }
  .appshell.en-juego .play .stage svg { max-height: none; width: 100%; }
  .appshell.en-juego .play .panel { flex: initial; min-height: 0; overflow: visible; }
  /* El encabezado de la pregunta se queda pegado al desplazarse,
     para no perder de vista qué se está respondiendo. */
  .appshell.en-juego .play .panel__head {
    position: sticky; top: -1px; z-index: 3;
    background: var(--paper); padding-block: .35rem;
    box-shadow: 0 6px 10px -8px rgba(21,28,36,.4);
  }
}

/* =========================================================
   BOTONES DE NAVEGACIÓN DEL MISMO TAMAÑO
   Las dos columnas laterales miden igual y cada botón la llena
   entera: quedan simétricos y con la misma zona tocable, que
   en un celular importa tanto como la estética.
   ========================================================= */
.nav__b:first-child,
.nav__b:last-child { justify-self: stretch; width: 100%; }
.nav__b { min-width: 0; }
.nav__b em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Con ancho igual ya cabe el texto de atrás incluso en pantallas angostas. */
@media (max-width: 420px) {
  .nav__b:not(.nav__b--pri) em { display: inline; font-size: .78rem; }
  .nav__b:not(.nav__b--pri) { padding: 0 .7rem; }
  .nav__b--pri { padding: 0 .7rem; }
  .nav { gap: .4rem; }
}

/* =========================================================
   EL ÁRBOL DEL GRUPO
   ========================================================= */
.global__t { font-size: clamp(1.25rem, 5vw, 1.9rem); }
.global__lead { color: var(--muted); margin-top: .5rem; font-size: var(--t-sm); max-width: 56ch; }
.global__aviso {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--r-md);
  background: #FCF6E4; border: 1px solid #E3CE8E; font-size: var(--t-xs); color: var(--ink-2);
}
.global__h3 { font-size: var(--t-md); margin-top: 1.2rem; margin-bottom: .5rem; }

.gcifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .9rem; }
.gcifras .cifra { padding: .7rem .5rem; }
.gcifras .cifra b { font-size: clamp(1.1rem, 4.5vw, 1.7rem); word-break: break-word; }
.gcifras .cifra span { font-size: .66rem; }

/* Barras de reparto: cada una lleva su número al lado, nunca sólo el color. */
.gbarras { display: grid; gap: .35rem; }
.gb { display: grid; grid-template-columns: minmax(6.5rem, 34%) 1fr auto; align-items: center; gap: .5rem; }
.gb__n { font-size: var(--t-xs); color: var(--ink-2); }
.gb__barra { height: 14px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.gb__barra i { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }
.gb__v { font-size: var(--t-xs); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: right; }

.gtabla__caja { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.gtabla { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.gtabla th {
  text-align: left; padding: .5rem .6rem; background: var(--paper-2);
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.gtabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.gtabla tr:last-child td { border-bottom: 0; }
.gtabla tr.is-yo td { background: var(--acc-soft); font-weight: 600; }
.gtabla tr.is-yo em { font-style: normal; color: var(--acc-dark); }
.gt__p { color: var(--muted-2); font-variant-numeric: tabular-nums; width: 1.6rem; }
.gt__punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; }
.gt__rev { color: var(--muted); }
.gt__num { text-align: right; font-variant-numeric: tabular-nums; }
.gt__ok { color: var(--ok); font-weight: 700; }
.gt__no { color: var(--no); font-weight: 700; }

/* ---------- los puntos que se ganan o se pierden ---------- */
.feedback { align-items: center; }
.feedback__pts {
  margin-left: auto; flex: none; font-family: var(--serif); font-weight: 700;
  font-size: var(--t-md); font-variant-numeric: tabular-nums;
}
.feedback--ok .feedback__pts { color: var(--ok); }
.feedback--no .feedback__pts { color: var(--no); }
.pg__pts { transition: color .25s, transform .25s; }
.pg__pts.is-baja { color: var(--no); transform: scale(1.08); }

/* En el panel del grupo el rótulo del botón cabe entero si se acorta. */
.nav__b--pri em { max-width: 12rem; }

/* =========================================================
   LOS TRES BOTONES DE NAVEGACIÓN, IGUALES
   Mismo tamaño, mismo peso de texto y misma zona tocable.
   El del medio no es la acción principal, pero tiene que
   verse igual de bien: el jurado no ve de cerca.
   ========================================================= */
.nav {
  grid-template-columns: 1fr 1fr 1fr;
  /* Alineados con el contenido, no pegados al borde de la pantalla. */
  max-width: var(--shell); margin-inline: auto; width: 100%;
}
.pg { max-width: var(--shell); margin-inline: auto; width: 100%; }

.nav__b, .nav__saltar {
  min-height: 54px; font-size: var(--t-sm); font-weight: 700;
  border-radius: var(--r-pill); width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0 1rem;
}
.nav__b:first-child, .nav__b:last-child, .nav__saltar { justify-self: stretch; }

/* El del medio: sólido en su borde, pero sin competir con Adelante. */
.nav__saltar {
  color: var(--ink-2); background: var(--paper);
  border: 2px solid var(--line-2); border-style: solid;
  transition: border-color .2s, color .2s, background .2s;
}
.nav__saltar:hover { border-color: var(--gold); color: var(--gold); background: #FCF6E4; }

@media (max-width: 520px) {
  .nav { gap: .35rem; }
  .nav__b, .nav__saltar { font-size: .8rem; padding: 0 .5rem; min-height: 50px; }
  /* Aquí sí desaparece el texto de atrás: tres etiquetas no caben. */
  .nav__b:not(.nav__b--pri) em { display: none; }
}

/* =========================================================
   LEGIBILIDAD DE LOS BOTONES
   El jurado y el docente no ven de cerca con comodidad: por
   debajo de 15 px de letra o 46 px de alto, un botón se
   vuelve un obstáculo. Se recorta el relleno, nunca el texto.
   ========================================================= */
@media (max-width: 520px) {
  .nav__b, .nav__saltar { font-size: .95rem; padding: 0 .45rem; min-height: 52px; }
  .nav { gap: .3rem; }
}
@media (max-width: 380px) {
  .nav__b, .nav__saltar { font-size: .88rem; padding: 0 .3rem; }
}

/* Las pestañas del sitio: zona tocable por encima del mínimo. */
.tab { min-height: 46px; }
.iconbtn { width: 48px; height: 48px; }

/* Los desplegables del resultado son botones aunque no lo parezcan. */
.plega summary { font-size: var(--t-sm); min-height: 48px; padding: .7rem .9rem; }
.refs summary { min-height: 44px; display: flex; align-items: center; font-size: var(--t-sm); }

/* El botón deshabilitado no está apagado: informa de lo que falta
   («Elige una», «Faltan 3 causas»). Tiene que leerse. */
.nav__b--pri[disabled] { color: var(--muted); }

/* En pantallas muy angostas se acorta la etiqueta, no la letra:
   antes «Hoja de vida» encogía el texto de las tres pestañas a 12,6 px. */
@media (max-width: 400px) {
  .tab__larga { display: none; }
  .tab { font-size: .92rem; padding: 0 .7rem; }
}
@media (max-width: 340px) {
  .tab { font-size: .88rem; padding: 0 .5rem; }
}