/* MODULO1.CSS — Capítulo 1 "Argentina hoy" (Emi, prefijo em-): estilos de la tarjeta y de sus 2 gráficos de barras. */

/* TARJETA PRINCIPAL: lleva las clases "ui-panel em-card"; .ui-panel (style.css) pone fondo, borde, padding y ancho, y .em-card ajusta lo puntual. */
.em-card {
  margin-bottom: 8px; /* un poco de aire antes del borde de .main-col */
}

/* El título de la tarjeta usa la clase compartida .ui-card-title (style.css) para verse igual que en el módulo 3. */

/* PESTAÑAS (.em-tabs / .em-tab): botones en forma de píldora para elegir el gráfico. */
.em-tabs {
  display: flex;
  flex-wrap: nowrap; /* SIEMPRE en un solo renglón, nunca se pasan a una 2da fila */
  align-items: stretch; /* los 3 botones quedan de la misma altura entre sí */
  gap: 6px;
  margin-bottom: var(
    --ui-gap-titulo
  ); /* mismo espacio que título → pestañas (variable compartida, ver style.css) */
}
/* Cada botón de pestaña ocupa solo el ancho de su texto y nunca lo parte en 2 líneas. */
.em-tab {
  font-family: var(--sans);
  font-size: 0.8rem; /* mismo tamaño que .ui-tab compartida, para que no se note la diferencia */
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: 30px; /* bien redondeado = forma de píldora */
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s; /* anima el cambio de color/fondo al activarse o al hacer hover */
  flex: 0 1 auto;
  white-space: nowrap;
  text-align: center;
}
/* Al pasar el mouse por una pestaña NO activa: el borde y el texto se aclaran un poco, como señal de "esto es clickeable". */
.em-tab:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}
/* Pestaña activa: el JS (modulo1.js) le agrega/saca la clase "active" al clickear. */
.em-tab.active {
  background: var(--rose-strong);
  border-color: var(--rose-strong);
  color: #1a0510;
  box-shadow: 0 6px 18px rgba(255, 111, 156, 0.35);
}

/* CONTENEDOR DEL GRÁFICO: .em-panel es el div vacío donde modulo1.js dibuja el gráfico de la pestaña activa. */
.em-panel {
  width: 100%;
}
/* Entrada al cambiar de pestaña: fundido corto con un pequeño desliz hacia arriba (igual que .br-fade-in del módulo 2). */
@keyframes em-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.em-fade-in {
  animation: em-fade-in 0.35s ease;
}
/* Los gráficos ya no usan <svg> (se borró .em-svg): ahora son divs normales, ver las reglas de más abajo. */

/* La bajada de arriba de cada gráfico reutiliza .ui-sub (style.css) para que el texto sea igual al del módulo 3. */
.em-panel .ui-sub {
  margin-bottom: 10px;
}

/* GRÁFICOS DE BARRAS INTERACTIVOS: cada barra es un div, para animarla con Web Animations API desde modulo1.js. */

/* Invitación a interactuar ("¿Hasta dónde creés..." / "Tocá o arrastrá..."), con un puntito que pulsa al lado. */
.em-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rose-strong);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
/* .em-prompt-tipo: prompt de "Casos por tipo", más grande, centrado y más cerca del gráfico que el de "Casos por edad". */
.em-prompt-tipo {
  font-size: 1.05rem;
  justify-content: center;
  text-align: center;
  margin-bottom: 6px;
}
/* El prompt centrado deja de ser flex: así el punto queda pegado a la primera palabra aunque el texto ocupe 2 renglones. */
.em-prompt-tipo {
  display: block;
}
.em-prompt-tipo .em-prompt-dot {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -1px;
}
/* .em-prompt-dot (y no ".dot"): style.css ya define ".dot" para los puntitos del título del capítulo y chocarían. */
.em-prompt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose-strong);
  flex: none;
  animation: em-dot-pulse 1.4s infinite;
}
@keyframes em-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--rose-glow);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 111, 156, 0);
  }
}

/* .em-col define su propio display, así que [hidden] no alcanza: se fuerza display:none para ocultar la columna. */
.em-col[hidden] {
  display: none;
}

/* .em-reveal-fade: muestra y oculta con opacity+visibility sin sacar el elemento del flujo, para que la tarjeta no cambie de alto. */
.em-reveal-fade {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}
.em-reveal-fade.em-shown {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s ease,
    visibility 0s linear;
}

/* Fila de columnas: las barras se paran sobre el mismo piso (align-items:flex-end) y el alto es fijo; la escala la define el dato. */
.em-chart-tipo,
.em-chart-edad {
  display: flex;
  align-items: flex-end;
  justify-content: center; /* el grupo de barras (columnas de 100px como máximo, ver .em-col) queda centrado en el gráfico */
  gap: clamp(4px, 1vw, 10px); /* separación entre barras, entre 4px y 10px según el ancho */
  height: 220px;
  padding-top: 30px; /* aire arriba para que el número más alto no se pegue al borde */
  position: relative;
  touch-action: none; /* evita que el navegador interprete el arrastre como scroll en celular */
  user-select: none; /* arrastrar la manija o tocar barras ya no deja texto seleccionado ("Mama" en azul) */
  -webkit-user-select: none;
}
/* "Casos por tipo": barras de 250px en vez de 220px para aprovechar el espacio que antes quedaba vacío. */
.em-chart-tipo {
  height: 250px;
}
/* "Casos por edad": barras de 280px para que se diferencien mejor entre sí (ver EDAD_MAX en modulo1.js). */
.em-chart-edad {
  height: 280px;
}
/* Estado fusionado ("¿Y si sumamos los otros 4?"): 2 columnas centradas del ancho de Mama (--em-colw, la fija modulo1.js). */
.em-chart-tipo.em-merged {
  justify-content: center;
  gap: 48px;
}
.em-chart-tipo.em-merged .em-col {
  flex: 0 0 var(--em-colw);
}
/* El texto no se parte en 2 líneas: se desborda un poco a los costados y sigue centrado. */
#em-sum-col .em-lbl {
  white-space: nowrap;
}

/* Una columna (barra + valor + etiqueta): flex:1 reparte el ancho y position:relative aloja la zona de arrastre de Mama. */
.em-col {
  flex: 1;
  min-width: 0;
  /* max-width: la columna nunca mide más que la barra (96px) + 4px, para que las barras no se separen de más ni se achiquen. */
  max-width: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  transition: opacity 0.35s ease;
}
/* "Ver por separado" en vuelo: el número y la etiqueta de la columna arrancan invisibles hasta que aterriza su bloque. */
.em-col.em-ghost .em-val,
.em-col.em-ghost .em-lbl {
  opacity: 0;
}

.em-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  color: var(--text);
  margin-bottom: 6px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
/* .em-val-q: agranda el "?" de Mama mientras no hay un número real (modulo1.js saca la clase apenas lo hay). */
.em-val-q {
  font-size: clamp(
    1.6rem,
    4vw,
    2.1rem
  ); /* tamaño de respaldo: modulo1.js lo ajusta a la barra punteada de cada pantalla (ver placeQ) */
  line-height: 1; /* caja justa al signo, para poder centrarlo adentro de la barra punteada */
  z-index: 2; /* por encima del fondo rosado de la barra punteada (.em-guess-zone), no detrás */
  pointer-events: none; /* el mouse atraviesa el "?": no hay hover ni manito */
  cursor: default;
  user-select: none;
}
/* .em-val-live: el número que se va eligiendo al arrastrar, más grande que los de las barras (se saca al revelar). */
.em-val-live {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--rose-strong);
  z-index: 2;
}

/* Antes de confirmar, las otras 4 columnas no se muestran y Mama queda sola y centrada (se saca al revelar). */
.em-col.em-col-pending {
  display: none;
}
.em-lbl {
  margin-top: 10px;
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  color: var(--text);
  text-align: center;
  transition: opacity 0.3s ease;
}

/* La barra: rosa apagado por defecto; .em-bar-mama y .em-bar-sel la pasan a rosa fuerte. */
.em-bar {
  position: relative; /* para ubicar el número (.em-val) encima de la punta, ver abajo */
  width: min(100%, 96px);
  border-radius: 7px 7px 3px 3px;
  background: rgba(255, 182, 206, 0.4);
  cursor: pointer;
  transition:
    height 0.5s ease,
    background 0.25s ease;
}
.em-chart-tipo .em-bar {
  cursor: default;
}

/* .em-plot: el área de dibujo de cada columna (todo MENOS la etiqueta). */
.em-plot {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative; /* contexto de la zona de arrastre y de la línea "Tu respuesta" */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
/* El número va ADENTRO de la barra (o de la pila), flotando justo encima de su punta. */
.em-bar > .em-val,
.em-stack > .em-val {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.em-bar-mama,
.em-bar-sel {
  background: var(--rose-strong);
}
.em-col-age {
  cursor: pointer;
} /* toda la columna (no solo la barra) responde al clic en "Casos por edad" */

/* "Casos por edad": las barras arrancan parejas, grises y sin número. */
.em-bar.em-bar-pending {
  background: rgba(169, 154, 166, 0.28);
}
.em-bar.em-bar-pending > .em-val {
  opacity: 0; /* el número ya está escrito, pero no se ve hasta tocar la barra */
}
/* Al tocarla, la barra sube o baja a su valor real en 0,9s con frenado al final, para notar bien la diferencia. */
.em-chart-edad .em-bar {
  transition:
    height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease;
}

.em-axis-note {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.85rem;
  margin-top: -4px;
}
/* Solo "Casos por tipo": más aire arriba del eje porque "Cuello uterino" se parte en 2 líneas y el margen base lo pisaba. */
.em-chart-tipo + .em-axis-note {
  /* Más aire entre el gráfico y el eje, y entre el eje y los botones de abajo. */
  margin-top: 18px;
  /* color: gris apagado (var(--text-dim)), igual que .ui-sub, para que las 2 notas chicas de la tarjeta combinen. */
  color: var(--text-dim);
  margin-bottom: 22px;
}

/* Solo "Casos por edad": despega la nota "Años" de las etiquetas de las barras y la deja centrada debajo del gráfico. */
.em-chart-edad + .em-axis-note {
  margin-top: 12px;
  text-align: center;
}

/* ---- "Casos por tipo": zona de arrastre + línea "Tu respuesta" ---- */
/* Capa sobre la columna de Mama (desde la etiqueta hacia arriba) con pointer-events:none: solo la manija responde al arrastre. */
.em-guess-zone {
  position: absolute;
  inset: 0; /* ocupa toda la .em-plot de Mama: misma escala que la barra real */
  pointer-events: none;
}
/* La barra punteada que sigue al arrastre, con la manija "↕" arriba. */
/* animation: destello constante en el borde para que se note que esta barra punteada es la que hay que arrastrar. */
.em-guess-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 96px);
  border: 2px dashed var(--rose-strong);
  border-radius: 7px 7px 3px 3px;
  background: rgba(255, 111, 156, 0.18);
  animation: em-guess-pulse 1.6s ease-in-out infinite;
}
/* Después del primer movimiento la barra punteada deja de brillar (lo pone modulo1.js en markMoved). */
.em-guess-quiet .em-guess-bar {
  animation: none;
}
@keyframes em-guess-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 111, 156, 0);
  }
  50% {
    box-shadow: 0 0 16px 3px var(--rose-glow);
  }
}
/* .em-handle es la única parte interactiva de la zona de arrastre: pointer-events:auto y cursor ns-resize. */
/* La manija dice "↕ Arrastrá": el ancho sale del texto y se centra con left/right:0 + margin:auto para dejar libre transform. */
.em-handle {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -13px;
  width: max-content;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--rose-strong);
  color: #1a0510;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: ns-resize;
  touch-action: none;
  /* Sube y baja apenas, en loop, hasta el primer movimiento: dice "agarrame y movéme" sin tener que leer nada. */
  animation: em-handle-bob 1.4s ease-in-out infinite;
}
@keyframes em-handle-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
/* Después del primer movimiento ya se entendió: deja de moverse sola (la agrega modulo1.js, ver markMoved en setupDrag). */
.em-handle.em-handle-used {
  animation: none;
}
/* Foco con teclado (Tab): un anillo visible, para saber que las flechas la mueven. */
.em-handle:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* BARRA "Tu respuesta": misma anchura que la real, superpuesta. 
   El color se define UNA sola vez acá (--em-resp-color) y lo usan los bordes y la línea. */
.em-guess-ghost {
  --em-resp-gris: #6e4f5d; /* COLOR ÚNICO de la respuesta: acá se cambia */
  --em-resp-color: var(--em-resp-gris); /* bordes y línea, del mismo color que el relleno */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 96px);
  box-sizing: border-box;
  background: var(--em-resp-gris); /* relleno sólido, sin transparencia */
  border-left: 2px dashed var(--em-resp-color);
  border-right: 2px dashed var(--em-resp-color);
  border-top: 0; /* el borde de arriba lo dibuja la línea (::before), así es uno solo */
  border-bottom: 0;
  border-radius: 0; /* sin esquinas redondeadas: la línea llega recta hasta el borde */
  pointer-events: none;
  z-index: 3; /* arriba de la barra real */
}

/* LÍNEA ÚNICA: arranca a la izquierda de la barra y sigue recta hasta su borde derecho, tapando todo el tope. */
.em-guess-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -15px; /* 2px del borde de la barra + 36px de línea hacia afuera (largo editable) */
  right: -2px; /* cubre también el borde derecho */
  height: 2px;
  background: var(--em-resp-color);
}

/* CARTEL "Tu respuesta": pegado al extremo izquierdo de la línea, centrado en su altura. */
.em-guess-ghost span {
  position: absolute;
  right: calc(100% + 21px); /* 15px (donde empieza la línea) + 6px de separación */
  top: 1px; /* centro de la línea (que mide 2px) */
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--text);
}

/* El número real (20.750) queda por encima de la barra de la respuesta. */
.em-bar-mama > .em-val.em-val-sobre {
  z-index: 4;
}

/* El 20.750 pisaba la línea de "Tu respuesta": pasa adentro de su barra, pegado al tope (la distancia la calcula modulo1.js). */
.em-bar-mama > .em-val.em-val-dentro {
  transform: translateX(-50%) translateY(var(--em-val-baja, 0px)); /* mantiene el centrado y lo baja */
  text-shadow: 0 1px 3px rgba(26, 5, 16, 0.55); /* se lee mejor sobre el rosa de la barra */
  transition:
    opacity 0.3s ease,
    transform 0.25s ease;
}

/* ---- "Casos por tipo": la pila "Los otros 4 juntos" ---- */
/* Cada segmento de la pila mide flex:<valor> (inline desde modulo1.js), así su alto es proporcional a su valor. */
/* Sin overflow:hidden (cortaría el número del total que flota encima): el primer y el último segmento redondean sus propias esquinas. */
.em-stack {
  position: relative;
  width: min(100%, 96px);
  display: flex;
  flex-direction: column;
}
.em-stack > [data-i='1'] {
  border-radius: 7px 7px 0 0;
}
.em-stack > [data-i='4'] {
  border-radius: 0 0 3px 3px;
}
.em-stack > [data-i] {
  background: rgba(255, 182, 206, 0.4);
  border-top: 2px solid var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.58rem, 1.5vw, 0.68rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  overflow: hidden;
  padding: 0 3px;
  cursor: pointer;
}
.em-stack > [data-i='1'] {
  border-top: 0;
}

/* El clon volador de la fusión/separación: copia temporal que modulo1.js anima con el.animate() y saca al llegar. */
.em-fly {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: clamp(0.58rem, 1.5vw, 0.68rem);
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 182, 206, 0.4);
  border-radius: 7px 7px 3px 3px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

/* Mensaje de resultado. */
.em-feedback {
  min-height: 1.5em;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 16px; /* aire entre la respuesta y los botones de abajo */
}
.em-feedback b {
  color: var(--rose-strong);
}
/* Un número del mensaje que NO es de mama (ej. el total de "los otros 4") va en blanco: el rosa queda reservado para mama. */
.em-feedback b.em-fb-neutral {
  color: var(--text);
}

/* Botones "Probar de nuevo" / "Ver los otros 4 juntos" / "Ver por separado". */
.em-tipo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px; /* aire entre los botones y lo que sigue */
}
/* "Confirmar resultado": al costado derecho de la barra de Mama, a la altura de su base; arranca oculto y modulo1.js lo agrega en .em-plot. */
.em-btn-confirm {
  position: absolute;
  left: calc(100% + 16px);
  bottom: 0; /* alineado con la BASE de la barra de Mama (pedido de Emi; antes a media altura) */
  width: max-content;
  max-width: 180px;
  color: var(--text);
  background: rgba(255, 111, 156, 0.18);
  z-index: 3;
}
.em-btn-confirm.em-shown {
  animation: em-confirm-blink 2.4s ease-in-out infinite;
}
/* Titileo SUTIL, el MISMO que el buscador "Escribí tu localidad" del módulo 3. */
@keyframes em-confirm-blink {
  0%,
  100% {
    border-color: var(--panel-border);
    box-shadow: 0 0 0 0 rgba(255, 111, 156, 0);
    color: var(--text-dim);
  }
  50% {
    border-color: var(--rose-strong);
    box-shadow: 0 0 0 4px rgba(255, 111, 156, 0.2);
    color: var(--text);
  }
}
/* Celular: al costado de la barra queda poco lugar -- el texto pasa a 2 renglones en vez de salirse de la tarjeta. */
@media (max-width: 600px) {
  .em-btn-confirm {
    max-width: 100px;
    white-space: normal;
    left: calc(100% + 10px);
  }
}
.em-btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rose-strong);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.em-btn:hover {
  background: rgba(255, 111, 156, 0.12);
}
.em-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Se sacó .em-btn-ghost: los 2 botones ahora tienen el mismo formato. */
/* .em-btn-sum: ancho fijo para el más largo de sus 2 textos, así no corre de lugar al otro botón al cambiar de texto. */
.em-btn-sum {
  width: 236px;
  max-width: 100%;
  text-align: center;
}
/* "Probar de nuevo" mide lo mismo que el otro botón, para que el hueco entre los 2 quede centrado en la tarjeta. */
.em-tipo-actions .em-btn {
  width: 236px;
  max-width: calc(50% - 5px); /* 5px = la mitad del gap entre botones */
  text-align: center;
}
/* Guía después de revelar: "¿Y si sumamos los otros 4?" titila (em-confirm-blink) hasta que se lo toca. */
.em-btn.em-btn-blink {
  animation: em-confirm-blink 2.4s ease-in-out infinite;
}
/* "Probar de nuevo" mientras titila el otro botón: borde gris para no competir con él (modulo1.js saca la clase al tocarlo). */
.em-btn.em-btn-quiet {
  border-color: var(--panel-border);
}

/* La nota chica al pie de "Casos por edad" ahora es .ui-note, compartida en style.css (la necesita también el módulo 3). */

/* Tooltip compartido: tarjeta chica con fondo, borde y sombra (como .br-tooltip del módulo 2) que vive en <body> y sigue al mouse. */
.em-tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  min-width: 170px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-variant-numeric: tabular-nums;
}
.em-tip strong {
  font-family: var(--serif);
  color: var(--rose-strong);
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}
.em-tip div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-dim);
}
.em-tip div span:last-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap; /* el número nunca se parte en 2 renglones */
}
/* Respeta "reducir movimiento": apaga las transiciones CSS de los elementos nuevos. */
@media (prefers-reduced-motion: reduce) {
  .em-bar,
  .em-val,
  .em-lbl,
  .em-col,
  .em-prompt-dot,
  .em-reveal-fade,
  .em-guess-bar,
  .em-handle,
  .em-btn-confirm,
  .em-btn-blink,
  .em-fade-in {
    transition: none !important;
    animation: none !important;
  }
}

/* Texto chico debajo del gráfico: hoy ningún gráfico lo usa, queda definido por si hace falta una aclaración. */
.em-caption {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 12px 0 0;
}

/* DATOS SUELTOS (.em-stat): columna angosta con el número grande arriba y su descripción chica debajo. */
.em-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.em-stat-value {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem; /* igual que .ui-big */
  color: var(--rose-strong);
  line-height: 1; /* sin aire extra arriba/abajo del número */
  font-variant-numeric: tabular-nums; /* todos los dígitos del mismo ancho: los números no "bailan" al cambiar */
}
.em-stat-label {
  font-family: var(--sans);
  font-size: 0.8rem; /* igual que .ui-lab */
  color: var(--text-dim);
  line-height: 1.3;
}
/* .em-inline-stats: agrupa los datos sueltos de un gráfico en una grilla de 2 columnas iguales. */
.em-inline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
/* Solo "Casos por edad": la oración gris debajo de los números rosas un poco más grande (+1px). */
.em-inline-stats .em-stat-label {
  font-size: calc(
    0.8rem + 1px
  ); /* un poco más grande que el tamaño base (0.8rem) de .em-stat-label */
}
/* "Casos por edad" antes del primer toque: los 2 datos quedan vacíos, pero ocupando su lugar. */
.em-inline-stats.em-stats-empty .em-stat {
  visibility: hidden;
}
/* "Casos por tipo": prompt/resultado y pie. */
/* .em-tipo-top: el prompt y el mensaje de resultado comparten el mismo lugar (grid de una celda) y se ve solo el que está "em-shown". */
.em-tipo-top {
  display: grid;
}
.em-tipo-top > * {
  grid-area: 1/1;
}
.em-tipo-top .em-feedback {
  /* Con el ancho completo de la tarjeta el mensaje entra en 1-2 líneas: 2.6em evita que la tarjeta cambie de alto al revelar. */
  min-height: 2.6em;
  margin-bottom: 6px; /* mismo margen que .em-prompt-tipo, para que no cambie el alto al pasar de uno a otro */
  text-align: center; /* centrado, como el prompt al que reemplaza */
}

/* .em-tipo-result: ahora solo contiene los 2 datos fijos, en un solo renglón y centrados. */
.em-tipo-result {
  /* margin-top fijo: la tarjeta no se estira al alto de la vela de al lado, así que no hay espacio sobrante para centrar con flexbox. */
  margin-top: 44px;
}
.em-tipo-result-stats {
  /* Vuelve a grid de 2 columnas: cada dato arranca justo al principio de su columna. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
/* .em-stat de base apila número y etiqueta; acá cada dato va en un solo renglón (número rosa + texto gris) alineado por el piso del texto. */
.em-tipo-result-stats .em-stat {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.em-tipo-result-stats .em-stat-pct-mujeres + .em-stat {
  grid-column: 2;
  grid-row: 2;
}
/* Título del bloque de datos fijos ("El cáncer de mama es:") */
.em-tipo-result-stats .em-stats-lead {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-dim);
}
.em-tipo-result-stats .em-stat-pct-mujeres {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
}
.em-tipo-result-stats .em-stat-primero {
  grid-column: 1;
  grid-row: 2;
}
/* Letra un poco más grande para estos 2 datos, limitada acá porque .em-stat-value/.em-stat-label también los usa "Casos por edad". */
.em-tipo-result-stats .em-stat-value {
  font-size: 1.55rem; /* un poco más grande que el tamaño base (1.4rem) de .em-stat-value */
}
.em-tipo-result-stats .em-stat-label {
  font-size: 0.9rem; /* un poco más grande que el tamaño base (0.8rem) de .em-stat-label */
}
/* La bajada del pie iguala el tamaño agrandado de los datos fijos (clase propia; no toca .ui-sub). */
.em-foot-sub-lg {
  font-size: var(--ui-fs-pie); /* mismo valor en las 2 pestañas, desde la variable compartida */
}

/* .em-foot: la bajada + "Fuente" en la misma fila, al pie de la tarjeta, en las 2 pestañas. */
.em-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 18px;
}
.em-foot .ui-sub {
  margin: 0;
  /* Mismo tamaño en las 2 pestañas, tomado de la variable compartida --ui-fs-pie de style.css. */
  font-size: var(--ui-fs-pie);
}
.em-foot .ui-src {
  margin-top: 0;
  flex: 0 0 auto;
  margin-left: auto; /* siempre a la derecha, aunque baje de renglón: solucion en pantallas angostas*/
}

/* FUENTE: no hay clase .em-src propia, se reutiliza .ui-src (style.css) con su ícono, popover y triangulito. */
.em-card .ui-src {
  margin-top: 12px;
}

/* PANTALLAS BAJAS (alto chico): achica los gráficos de barras para que no aparezca scroll vertical, igual que style.css. */
@media (max-height: 760px) {
  .em-chart-tipo {
    height: min(193px, 30vh);
  } /* alto del gráfico en pantallas bajas: cede px al .chapter-header */
  .em-chart-edad {
    height: min(140px, 21vh);
  } /* alto del gráfico de edad en pantallas bajas */
  /* "Casos por tipo" reserva siempre el alto de la versión revelada, así que en pantallas bajas se achican el eje, los botones y el feedback. */
  .em-tipo-top .em-feedback {
    min-height: 1.5em;
  }
  .em-tipo-result {
    margin-top: 10px;
  }
  .em-tipo-result-stats {
    gap: 6px 24px;
  }
  .em-tipo-actions {
    margin-bottom: 6px;
  }
  .em-foot {
    margin-top: 6px;
  }
  .em-chart-tipo + .em-axis-note {
    margin-top: 6px;
    margin-bottom: 10px;
  }
}

/* PANTALLAS MUY BAJAS (segundo escalón): segunda vuelta de achique para los gráficos, complemento del @media (max-height:660px) de style.css. */
@media (max-height: 660px) {
  .em-chart-tipo {
    height: min(186px, 31vh);
  } /* alto del gráfico en pantallas muy bajas: cede px al .chapter-header */
  .em-chart-edad {
    height: min(136px, 23vh);
  } /* alto del gráfico de edad en pantallas muy bajas */
}

/* TARJETA DE ALTO FIJO (compu, más de 900px de ancho): la tarjeta mide siempre lo mismo y el gráfico de barras se queda con el alto que sobra. */
@media (min-width: 901px) {
  #chapter-1.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 44px); /* respaldo para navegadores sin dvh */
    height: clamp(480px, calc(100dvh - 44px), 760px);
    /* Red de seguridad: si la ventana es muy baja y angosta, el capítulo crece (con scroll) en vez de recortar el pie de la tarjeta. */
    min-height: min-content;
  }
  /* Sin min-height:0 a propósito: así los contenedores no se achican por debajo de su contenido. */
  .em-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .em-card {
    flex: 1;
    height: auto; /* pisa el height:100% de .ui-panel: con él, la tarjeta podía achicarse por debajo de su contenido */
    margin-bottom: 0; /* el pie de la tarjeta coincide justo con el de la vela */
  }
  .em-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  /* El gráfico de barras se queda con el alto que sobra (pisa los 280px/250px y los min(...) de los escalones de arriba). */
  .em-chart-tipo,
  .em-chart-edad {
    flex: 1 1 0;
    height: auto;
    min-height: 100px;
  }
}

/* ESPACIO ENTRE BLOQUES: entre bloque y bloque va el mismo espacio que entre título y pestañas (--ui-gap-titulo de style.css). */

/* Instrucción rosa (o respuesta variable de "Por tipo") → gráfico */
.em-card .em-prompt-tipo,
.em-card .em-tipo-top .em-feedback {
  margin-bottom: var(--ui-gap-titulo);
}
/* Los gráficos reservan arriba solo el alto del número de la barra más alta (18px de número + 6px de separación). */
.em-card .em-chart-tipo,
.em-card .em-chart-edad {
  padding-top: 24px;
}
/* "Por tipo": leyenda "Los 5 cánceres..." → botones */
.em-card .em-chart-tipo + .em-axis-note {
  margin-bottom: var(--ui-gap-titulo);
}
/* "Por edad": "Años" → "3 de cada 100..." (la línea separadora de arriba de los datos queda a este espacio de "Años") */
.em-card .em-inline-stats {
  margin-top: var(--ui-gap-titulo);
}
/* Último bloque → pie (descripción + "Fuente"), en las 2 pestañas */
.em-card .em-foot {
  margin-top: var(--ui-gap-titulo);
}

/* "POR TIPO": BARRAS MÁS ALTAS: los datos fijos usan el espacio parejo entre bloques y el gráfico crece con esos px. */
@media (min-height: 761px) {
  .em-card .em-tipo-result {
    margin-top: var(--ui-gap-titulo);
  }
}

/* "POR TIPO": MENSAJE DE RESULTADO PEGADO AL GRÁFICO: queda a la altura de "Tu respuesta" en cualquier pantalla. */
.em-card .em-tipo-top .em-feedback {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(calc(var(--ui-gap-titulo) - 4px));
}

/* "POR TIPO": ANIMACIÓN DE ENTRADA (una sola vez): canvas encima del gráfico donde vuelan los guiones del borde de Mama. */
.em-intro-puntos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.5s ease; /* mismo tiempo que tarda en encenderse el borde real (em-intro-borde) */
}
.em-intro-puntos.em-intro-fin {
  opacity: 0;
}

/* "POR TIPO": ENTRADA SIN CORTE: la barra real toma el relevo en pasos encadenados con .em-intro-entrada (modulo1.js). */
.em-guess-zone.em-intro-entrada .em-guess-bar {
  background: transparent; /* el relleno lo pone el ::before, que sube */
  animation: em-intro-borde 0.5s ease both;
}
@keyframes em-intro-borde {
  from {
    border-color: rgba(255, 111, 156, 0);
  }
  to {
    border-color: var(--rose-strong);
  }
}
.em-guess-zone.em-intro-entrada .em-guess-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px 5px 1px 1px; /* los de la barra (7px / 3px) menos el borde de 2px */
  background: rgba(255, 111, 156, 0.18); /* el mismo relleno de .em-guess-bar */
  transform-origin: bottom;
  animation: em-intro-relleno 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
@keyframes em-intro-relleno {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.em-guess-zone.em-intro-entrada .em-handle {
  animation: em-intro-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}
@keyframes em-intro-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* El "?" ya está centrado con translateX(-50%): el rebote lo tiene que mantener. */
.em-val.em-intro-entrada {
  animation: em-intro-q 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s both;
}
@keyframes em-intro-q {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* "Casos por tipo": mientras se adivina, la etiqueta "Cáncer de mama" va en un solo renglón, centrada y desbordando un poco. */
.em-chart-tipo .em-col:first-child .em-lbl {
  white-space: nowrap;
}
/* "Casos por tipo": el prompt y la respuesta suben a la fila de las pestañas (modulo1.js los mueve adentro de .em-tabs) */
.em-card .em-tabs .em-tipo-top {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
  margin-left: 12px;
}
.em-card .em-tabs .em-prompt-tipo,
.em-card .em-tabs .em-tipo-top .em-feedback {
  margin-bottom: 0;
  min-height: 0;
  transform: none;
  justify-content: center;
}
@media (max-width: 700px) {
  .em-card .em-tabs {
    flex-wrap: wrap;
  }
  .em-card .em-tabs .em-tipo-top {
    flex: 1 1 100%;
    margin: 8px 0 0;
  }
}
/* Instrucción "Arrastrá la barra para adivinar.": centrada sobre la barra de Mama (que está centrada en el gráfico).
   Con la fila de pestañas ancha (>= 560px) se centra respecto de TODA la fila; si no entra, vuelve a su
   renglón propio debajo de las pestañas (donde ya queda centrada igual que el gráfico). */
.em-card .em-tabs {
  position: relative; /* referencia para centrar la instrucción */
  container-type: inline-size; /* @container según el ancho real de la fila, no de la pantalla */
  flex-wrap: wrap;
}
@container (min-width: 560px) {
  .em-card .em-tabs .em-tipo-top > .em-prompt-tipo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(
      100% - 380px
    ); /* deja libres las pestañas a la izquierda y el mismo espacio a la derecha */
    pointer-events: none;
  }
}
@container (max-width: 559px) {
  .em-card .em-tabs .em-tipo-top {
    flex: 1 1 100%;
    margin: 8px 0 0;
  }
}

/* FOCO EN EL RESULTADO: al confirmar, el panel (barras, datos, botones, fuente) se oculta un instante
   y solo se ve el texto "Dijiste X. Se estiman Y..." (que vive en la fila de pestañas, fuera del panel).
   Al sacar la clase, el panel aparece con un fundido. */
.em-panel {
  transition: opacity 0.5s ease;
}
.em-panel.em-foco {
  opacity: 0;
  pointer-events: none;
}