/* Estilos de la app (formulario guiado + resultado) */
.contenedor.ancho { max-width: 1320px; }
.area-app { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; padding-top: 20px; padding-bottom: 60px; align-items: start; }
.lateral { position: sticky; top: 76px; }
/* Con resultado a todo lo ancho, el panel fijo lo taparía al bajar */
.area-app:has(.resultado:not(:empty)) .lateral { position: static; }
.resultado { grid-column: 1 / -1; }
.resultado:empty { display: none; }
@media (max-width: 960px) {
  .area-app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; order: -1; }
}
.btn-chico { padding: 7px 12px; font-size: 14px; }
.btn-ancho { width: 100%; margin-top: 12px; font-size: 16px; padding: 13px; }
.btn-texto { background: none; border: 0; color: var(--acento); font: 600 14px var(--fuente); cursor: pointer; padding: 6px 4px; }
.btn-texto:hover { text-decoration: underline; }
.btn-quitar { background: none; border: 1px solid var(--borde); color: var(--texto-2); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; flex: none; }
.btn-quitar:hover { border-color: var(--mal); color: var(--mal); }
.sel-barra { max-width: 200px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); font: 14px var(--fuente); }
@media (max-width: 480px) { .sel-barra { max-width: 130px; } .app .menu { gap: 8px; } }
.centrado { text-align: center; }

.panel-diagrama { padding: 16px; }
.panel-titulo { font-weight: 700; margin: 0 0 8px; }
.panel-diagrama .diagrama svg { max-width: 100%; width: 100%; }
.panel-diagrama .diagrama { min-height: 90px; }

/* Secciones del editor */
.seccion { padding: 18px; margin-bottom: 16px; }
.seccion > h2 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.seccion > h2 .num { width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 14px; display: grid; place-items: center; flex: none; }
:root[data-tema="oscuro"] .seccion > h2 .num { color: #0e0f1a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .seccion > h2 .num { color: #0e0f1a; } }
.seccion > p.ayuda { color: var(--texto-2); font-size: 14px; margin: 0 0 12px; }
.item { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--superficie); }
.item-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.item-cab .titulo-item { font-weight: 700; margin-right: auto; }
.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.fila > label, .ctrl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.app input[type="text"], .app input[type="number"], .app select {
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--texto); font: 15px var(--fuente); min-width: 0;
}
.app input[type="number"] { width: 110px; }
.app input.corto { width: 80px; }
.app input.id { width: 90px; font-weight: 700; }
.app input:focus, .app select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.app input:disabled { opacity: .5; }
.grupo-valor { display: flex; gap: 4px; }
.grupo-valor input[type="number"] { width: 100px; }
.chips-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px; font-size: 14px; cursor: pointer; background: var(--superficie); color: var(--texto); font-weight: 500; }
.chip-check:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.chip-check input { margin: 0; }
.chip-comp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 14px; }
.chip-comp button { border: 0; background: none; color: var(--texto-2); cursor: pointer; font-size: 16px; padding: 0 4px; }
.agregar-comp { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.agregar-comp input[type="text"] { flex: 1; min-width: 180px; }
.tabla-fracciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tabla-fracciones label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.tabla-fracciones input { width: 100% !important; }
.ecuacion-prev { font-family: var(--fuente-ec); font-size: 16px; color: var(--texto); margin: 4px 0 0; }
.sub { border-top: 1px dashed var(--borde); margin-top: 10px; padding-top: 10px; }
.sub-titulo { font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.vacio { color: var(--texto-2); font-size: 14px; margin: 0 0 10px; }
.agregar-fila { display: flex; gap: 8px; flex-wrap: wrap; }

.resultado .tarjeta { padding: 22px; }
.resultado-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 6px; }
.resultado-cab h2 { margin: 0; font-size: 22px; }
.estado-ok { color: var(--ok); font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); z-index: 50; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cargando { opacity: .6; pointer-events: none; }

/* En celular, botón Resolver fijo abajo para no tener que subir */
.resolver-movil { display: none; }
@media (max-width: 960px) { .resolver-movil { display: block; position: sticky; bottom: 12px; z-index: 5; } .resolver-movil .btn { margin: 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); } }

.panel-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-cab .panel-titulo { margin: 0 auto 0 0; }