/* Conversor de energía (2 de octubre de 2026). */

.entrada-conversor {
  max-width: 70ch;
  color: var(--texto-2);
  line-height: 1.55;
}

/* La cabecera de la fuente elegida: su dibujo a escala y el resumen. */
.conv-cabecera {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
  .conv-cabecera { grid-template-columns: 1fr; }
}
.conv-figura {
  margin: 0;
  padding: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s, 8px);
  background: var(--superficie-2);
}
.conv-figura figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--texto-2);
  line-height: 1.4;
}
.conv-dibujo { display: block; width: 100%; height: auto; }
/* Yumi sosteniendo la fuente: centrada y sin pasarse de alto. */
.conv-yumi {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  margin: 0 auto;
}
.conv-cabecera__nombre { margin: 0 0 0.4rem; }
.conv-texto { margin: 0 0 0.5rem; line-height: 1.55; }
.conv-resumen {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  border-inline-start: 3px solid var(--marcador);
  background: var(--marcador-suave);
  border-radius: var(--r-s, 8px);
  font-weight: 600;
  line-height: 1.45;
}

/* Los seis pasos. */
.conv-pasos { display: grid; gap: 0.9rem; }
.conv-paso {
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s, 8px);
}
.conv-paso__cabeza { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.conv-paso__numero {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--marcador);
  color: var(--fondo, #000);
  font-weight: 700;
  font-size: 0.9rem;
  flex: none;
}
.conv-paso__titulo { margin: 0; font-size: 1.02rem; }
.conv-paso__cuerpo > :last-child { margin-bottom: 0; }

.conv-tabla { overflow-x: auto; margin-bottom: 0.5rem; }
.conv-ecuacion {
  margin: 0 0 0.5rem;
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.conv-cifra {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Qué parte reacciona de verdad. */
.conv-barra {
  height: 10px;
  margin: 0.2rem 0 0.6rem;
  border-radius: 5px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.conv-barra__lleno { display: block; height: 100%; background: var(--marcador); }

/* Las tres equivalencias. */
.conv-equivalencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.conv-equivalencia {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s, 8px);
  background: var(--superficie-2);
}
.conv-equivalencia__nombre { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }
.conv-equivalencia__valor { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conv-equivalencia__extra { font-size: 0.8rem; color: var(--texto-2); }
.conv-equivalencia__dibujo { margin-top: 0.4rem; }
.conv-equivalencia__pie { font-size: 0.75rem; color: var(--texto-2); line-height: 1.35; }

/* Los dibujos a escala de las equivalencias. */
.esc-dibujo { display: block; width: 100%; height: auto; }
.esc-suelo { stroke: var(--borde-fuerte, var(--texto-2)); stroke-width: 1; }
.esc-ref circle, .esc-ref path, .esc-ref rect { fill: var(--texto-2); fill-opacity: 0.55; }
.esc-ref .esc-hueco { fill: var(--superficie-2); fill-opacity: 1; }
.esc-moneda { fill: #c9a24a; }
.esc-sombra { fill: #000; opacity: 0.35; }
.esc-ref .esc-tejado { fill-opacity: 0.75; }
.esc-ref .esc-ventana, .esc-ventana { fill: #f2d27a; fill-opacity: 0.8; }
.esc-rueda { fill: #1c1c1f !important; fill-opacity: 1 !important; stroke: #666; stroke-width: 0.5; }

/* Yumi, la referencia de 1,60 m. */
.esc-yumi__traje { fill: #1f6fe5; }
.esc-yumi__franja { fill: #f3efe6; }
.esc-yumi__cremallera { stroke: #f08a24; stroke-width: 1.6; }
.esc-yumi__guante { fill: #3a3434; }
.esc-yumi__piel { fill: #f0a060; }
.esc-yumi__pelo { fill: #1d1d1f; }
.esc-yumi__gafas { fill: none; stroke: #1d1d1f; stroke-width: 1; }
.esc-yumi__boca { fill: none; stroke: #7a2e1e; stroke-width: 1; }

/* Carbón. */
.esc-carbon { fill: url(#esc-g-carbon); stroke: #6e6e78; stroke-width: 0.6; }
.esc-carbon__trozo { fill: #26262b; stroke: #4a4a52; stroke-width: 0.3; }
.esc-carbon__brillo { fill: #6a6a74; stroke: #8a8a94; stroke-width: 0.3; }

/* Leña. */
.esc-lena { fill: url(#esc-g-lena); }
.esc-lena__arriba { fill: #8b6238; }
.esc-lena__lado { fill: #4a3018; }
.esc-tronco { fill: #d9a868; stroke: #5b3a1c; stroke-width: 0.7; }
.esc-tronco__anillo { fill: none; stroke: #a8743d; stroke-width: 0.5; }

/* Gasolina. */
.esc-gasolina { fill: #e8a838; fill-opacity: 0.9; stroke: none; }
.esc-garrafa path { fill: #c8372d; stroke: #7e1f19; stroke-width: 0.6; }
.esc-garrafa .esc-tapon { fill: #2b2b2b; }
.esc-garrafa .esc-hueco { fill: var(--superficie-2); }
.esc-bidon rect { fill: url(#esc-g-bidon); stroke: #1c3a66; stroke-width: 0.6; }
.esc-bidon line { stroke: #1c3a66; stroke-width: 0.8; }
.esc-bidon__tapa { fill: #5d86c2; }
.esc-cisterna__tanque { fill: url(#esc-g-cisterna); stroke: #6a737c; stroke-width: 0.6; }
.esc-cisterna__cabina { fill: #c8372d; }
.esc-cisterna__chasis { fill: #2b2b2e; }
.esc-piscina__borde { fill: #cfd6dc; stroke: #8a929b; stroke-width: 0.8; }
/* Un envase a medias se ve translúcido, con el nivel de gasolina dentro. */
.esc-a-medias path, .esc-a-medias rect:not(.esc-gasolina):not(.esc-ventana), .esc-a-medias .esc-cisterna__tanque { fill-opacity: 0.3; }

/* Los dibujos. */
.conv-regla line { stroke: var(--texto-2); stroke-width: 1.2; }
.conv-regla text { fill: var(--texto-2); font-size: 10px; font-family: ui-monospace, monospace; }
.conv-moneda { fill: #c9a24a; opacity: 0.85; }
.conv-moneda__borde { fill: none; stroke: #8a6a22; stroke-width: 1.2; }
.conv-sombra { fill: var(--texto); opacity: 0.12; }
.conv-grano { fill: #f4f6f8; stroke: #9aa7b4; stroke-width: 0.4; }
.conv-cuchara ellipse { fill: #c8ced6; stroke: #7d8894; stroke-width: 1; }
.conv-cuchara line { stroke: #7d8894; stroke-width: 4; stroke-linecap: round; }
.conv-cubo path { fill: #7cc4e8; fill-opacity: 0.55; stroke: #3c8fb8; stroke-width: 1.2; }
.conv-cubo path:nth-child(2) { fill-opacity: 0.4; }
.conv-cubo path:nth-child(3) { fill-opacity: 0.3; }
.conv-metal { fill: #8b929b; stroke: #4b525b; stroke-width: 1; }
.conv-brillo { fill: #fff; opacity: 0.7; }
.conv-globo { fill: #b7a3ff; fill-opacity: 0.45; stroke: #7b62d9; stroke-width: 1.2; }
.conv-hilo { fill: none; stroke: var(--texto-2); stroke-width: 1; }
.conv-pellet rect, .conv-pellet ellipse { fill: #3b3f44; stroke: #1d2023; stroke-width: 1; }
.conv-pellet ellipse:first-of-type { fill: #5a6068; }
.conv-bomba rect, .conv-bomba path { fill: #4f5d4a; stroke: #2d362a; stroke-width: 1.2; }
.conv-bomba line { stroke: #2d362a; stroke-width: 2; }
.conv-rtg path { fill: #9aa3ad; stroke: #59626c; stroke-width: 1.2; }
.conv-rtg line { stroke: #59626c; stroke-width: 1; }
.conv-cristal path { fill: #f4f6f8; fill-opacity: 0.9; stroke: #9aa7b4; stroke-width: 1.2; }
.conv-cristal path:nth-child(2) { fill-opacity: 0.7; }
.conv-cristal path:nth-child(3) { fill-opacity: 0.55; }
.conv-carbon path { fill: #1d1d1f; stroke: #4a4a4f; stroke-width: 1.4; stroke-linejoin: round; }
.conv-carbon .conv-carbon__arista { fill: none; stroke: #5d5d63; stroke-width: 1; }
.conv-persona circle, .conv-persona path { fill: var(--texto-2); opacity: 0.55; }