/* StrucPlan — componentes base. Requiere tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: var(--peso-normal) var(--t-md)/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
.num { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--enfoque); outline-offset: 2px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-4); border-radius: var(--r-md); border: 1px solid transparent; font: var(--peso-medio) var(--t-md) var(--fuente); cursor: pointer; transition: background var(--transicion), border-color var(--transicion), transform var(--transicion); white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primario { background: var(--primario); color: var(--sobre-primario); box-shadow: var(--sombra-1); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-secundario { background: var(--superficie); color: var(--primario); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--primario-suave); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-peligro { background: var(--peligro-suave); color: var(--peligro); }
.btn-icono { width: var(--toque); padding: 0; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* Campo numérico con unidades */
.campo { display: grid; gap: var(--e-1); }
.campo > label { font-size: var(--t-sm); color: var(--texto-2); font-weight: var(--peso-medio); }
.campo-caja { display: flex; align-items: stretch; min-height: var(--toque); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo-caja:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.campo-caja input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texto); padding: 0 var(--e-3); font: var(--t-lg) var(--fuente-num); font-variant-numeric: tabular-nums; outline: none; }
.campo-unidad { display: flex; align-items: center; gap: 2px; padding: 0 var(--e-3); background: var(--superficie-2); color: var(--primario); font: var(--peso-medio) var(--t-sm) var(--fuente); border: 0; border-left: 1px solid var(--borde); cursor: pointer; }
.campo-ayuda { font-size: var(--t-xs); color: var(--texto-3); }
.campo.error .campo-caja { border-color: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }
.campo.error .campo-ayuda { color: var(--peligro); }

/* Selector segmentado */
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie-2); border-radius: var(--r-md); }
.segmentado button { min-height: 38px; padding: 0 var(--e-3); border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: var(--texto-2); font: var(--peso-medio) var(--t-sm) var(--fuente); cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--primario); box-shadow: var(--sombra-1); }

/* Pestañas */
.pestanas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestanas button { position: relative; min-height: var(--toque); padding: 0 var(--e-3); border: 0; background: none; color: var(--texto-3); font: var(--peso-medio) var(--t-md) var(--fuente); cursor: pointer; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--primario); }
.pestanas button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--e-2); right: var(--e-2); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primario); }
.pestanas .insignia { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: var(--r-full); background: var(--peligro); color: #fff; font-size: 11px; }

/* Tarjetas */
.tarjeta { min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--e-4); box-shadow: var(--sombra-1); }
.tarjeta > * { min-width: 0; }
.resultado { display: grid; gap: var(--e-2); }
.resultado-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.resultado-cab h4 { margin: 0; font-size: var(--t-sm); color: var(--texto-2); font-weight: var(--peso-medio); }
.resultado-valor { font: var(--peso-fuerte) var(--t-2xl)/1.1 var(--fuente-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.resultado-valor small { font: var(--peso-medio) var(--t-md) var(--fuente); color: var(--texto-2); margin-left: 4px; }
.resultado-pie { font-size: var(--t-sm); color: var(--texto-3); }
.fila-reaccion { display: flex; justify-content: space-between; align-items: baseline; padding: var(--e-2) 0; border-top: 1px solid var(--borde); }
.fila-reaccion:first-of-type { border-top: 0; }
.fila-reaccion b { font-family: var(--fuente-num); font-weight: var(--peso-fuerte); }
.flecha { color: var(--primario); font-weight: var(--peso-fuerte); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--e-2); border-radius: var(--r-full); background: var(--primario-suave); color: var(--primario-hover); font: var(--peso-medio) var(--t-xs) var(--fuente); }

/* Aviso de error (ErrorAmigable: mensaje + comoArreglar + donde + pestana) */
.aviso { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-lg); border: 1px solid; }
.aviso svg { width: 22px; height: 22px; grid-row: span 3; margin-top: 2px; }
.aviso-titulo { font-weight: var(--peso-fuerte); }
.aviso-texto { color: var(--texto-2); font-size: var(--t-sm); }
.aviso-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.aviso-acciones .btn { min-height: 36px; font-size: var(--t-sm); }
.aviso-error { background: var(--peligro-suave); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); color: var(--peligro); }
.aviso-alerta { background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); color: var(--aviso); }
.aviso-ok { background: var(--exito-suave); border-color: color-mix(in srgb, var(--exito) 35%, transparent); color: var(--exito); }
.aviso .aviso-titulo { color: var(--texto); }

/* Estado vacío */
.vacio { display: grid; justify-items: center; text-align: center; gap: var(--e-3); padding: var(--e-8) var(--e-4); }
.vacio h3 { margin: 0; font-size: var(--t-xl); }
.vacio p { margin: 0; color: var(--texto-2); max-width: 34ch; }
.pasos-guia { display: grid; gap: var(--e-2); width: 100%; max-width: 320px; margin: var(--e-2) 0; padding: 0; list-style: none; text-align: left; }
.pasos-guia li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-md); background: var(--superficie-hundida); color: var(--texto-2); }
.pasos-guia li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--superficie-2); color: var(--primario); font-weight: var(--peso-fuerte); font-size: var(--t-sm); flex: none; }
.pasos-guia li.actual { background: var(--primario-suave); color: var(--texto); font-weight: var(--peso-medio); }
.pasos-guia li.actual span { background: var(--primario); color: var(--sobre-primario); }
.ejemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }

/* Paso a paso (Paso { titulo, texto, ecuaciones, tabla?, figura? }) */
.paso { display: grid; grid-template-columns: 32px 1fr; gap: var(--e-1) var(--e-3); }
.paso-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--primario); color: var(--sobre-primario); font-weight: var(--peso-fuerte); }
.paso h4 { margin: 4px 0 0; font-size: var(--t-lg); }
.paso > :not(.paso-n) { grid-column: 2; }
.paso p { margin: 0; color: var(--texto-2); }
.ecuacion { margin: var(--e-2) 0 0; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--primario); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--superficie-hundida); font: var(--t-md)/1.7 "Cambria Math", "STIX Two Math", "Latin Modern Math", Georgia, serif; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; margin-top: var(--e-2); font-size: var(--t-sm); }
.tabla th { text-align: left; color: var(--texto-3); font-weight: var(--peso-medio); padding: var(--e-1) var(--e-2); border-bottom: 1px solid var(--borde-fuerte); }
.tabla td { padding: var(--e-1) var(--e-2); border-bottom: 1px solid var(--borde); font-family: var(--fuente-num); }

/* Hoja inferior (móvil) */
.hoja { background: var(--superficie); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sombra-3); padding: var(--e-2) var(--e-4) calc(var(--e-4) + var(--seguro-abajo)); }
.hoja-asa { width: 40px; height: 5px; margin: 0 auto var(--e-3); border-radius: var(--r-full); background: var(--borde-fuerte); }

/* Barra inferior (móvil) */
.barra-inf { display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--barra-inferior) + var(--seguro-abajo)); padding-bottom: var(--seguro-abajo); background: var(--superficie); border-top: 1px solid var(--borde); }
.barra-inf button { display: grid; justify-items: center; align-content: center; gap: 2px; border: 0; background: none; color: var(--texto-3); font: var(--peso-medio) 11px var(--fuente); cursor: pointer; }
.barra-inf button svg { width: 24px; height: 24px; }
.barra-inf button[aria-current="page"] { color: var(--primario); }
.barra-inf button[aria-current="page"] svg { background: var(--primario-suave); border-radius: var(--r-full); padding: 2px 14px; width: 52px; box-sizing: content-box; height: 22px; }

/* Teclado numérico propio */
.teclado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.teclado button { min-height: 48px; border: 0; border-radius: var(--r-md); background: var(--superficie-hundida); color: var(--texto); font: var(--peso-medio) var(--t-lg) var(--fuente-num); cursor: pointer; }
.teclado button:active { background: var(--superficie-2); }
.teclado .t-unidad { background: var(--superficie-2); color: var(--primario); font: var(--peso-medio) var(--t-sm) var(--fuente); }
.teclado .t-ok { background: var(--primario); color: var(--sobre-primario); grid-row: span 2; }

/* Iconos */
.icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }