/* =============================================================
   Rebalanceo de cartera — solo lo específico de esta herramienta.
   La base (tokens, espaciado, formularios, resultado, secciones) está
   en ../assets/kalculia-ui.css.
   ============================================================= */

/* ---------------------------------------------------------------
   Formulario. Un solo ritmo vertical:
   · entre bloques del formulario: --s-5 (24 px)
   · del título de un bloque a su contenido: --s-2 (8 px)
   · entre casillas: --s-3 en vertical y --s-4 en horizontal
   · todas las casillas y pastillas: 48 px de alto
   --------------------------------------------------------------- */
#rb-form { --rb-h: 48px; }
#rb-form > * + * { margin-top: var(--s-5); }
#rb-form > [hidden]:first-child + * { margin-top: 0; }
#rb-form > .rb-assets { margin-top: var(--s-2); }
#rb-form > .rb-assets-foot { margin-top: var(--s-3); }
#rb-form .field, #rb-form fieldset.field { margin-bottom: 0; }
#rb-form fieldset.field > legend { margin-bottom: var(--s-2); padding: 0; }
#rb-form .block-title { margin-bottom: 0; }
#rb-form :where(input[type="number"], input[type="text"]:not(.rb-name), select) { height: var(--rb-h); padding-block: 0; }
#rb-form .radio-pill { min-height: var(--rb-h); }
#rb-form .field-hint { line-height: 1.4; }

/* Ejemplos para empezar */
.rb-start-label { font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.rb-start .rate-chips { margin-top: var(--s-2); }

/* Última visita */
.rb-visit { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--accent-soft); font-size: .88rem; line-height: 1.5; }
.rb-visit p + p { margin-top: var(--s-1); }

/* Activos: un bloque por línea */
.rb-assets { display: grid; gap: var(--s-3); }
.rb-asset { padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); }
@media (min-width: 720px) { .rb-asset { padding: var(--s-5); } }
.rb-asset-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.rb-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.rb-name { flex: 1; min-width: 0; height: 40px; font-family: var(--display); font-size: 1.05rem !important; font-weight: 700; background: transparent !important; box-shadow: none !important; padding: 0 .5rem !important; margin-left: -.5rem; border-radius: 8px !important; }
.rb-name:focus { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.rb-remove { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; color: var(--text-muted); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .12s var(--ease-out); }
.rb-remove:active { transform: scale(0.94); }
.rb-remove:disabled { opacity: .35; cursor: not-allowed; }
@media (pointer: coarse) { .rb-remove { width: 44px; height: 44px; } }

/* Rejilla de cada activo: columnas siempre iguales.
   Móvil: Objetivo | Valor, y Clase y Tipo a todo el ancho. Tableta: 2 × 2. Escritorio: 4 en fila. */
.rb-asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); align-items: start; }
.rb-asset-grid .field { min-width: 0; }
.rb-asset-grid .field > label, .rb-asset-grid fieldset.field > legend { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rb-asset :where(input[type="number"], input[type="text"]:not(.rb-name), select) { background-color: var(--surface); }
/* Móvil estrecho: Clase y Tipo a todo el ancho, para que «Inmobiliario» o «ETF o acción» quepan enteros */
@media (max-width: 479px) {
  .rb-asset-grid:not(.rb-asset-grid--more) > .rb-f-clase, .rb-asset-grid:not(.rb-asset-grid--more) > .rb-f-tipo { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .rb-asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sufijo € / % dentro del campo */
.rb-suffix { position: relative; }
.rb-suffix input { padding-right: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.rb-suffix::after { content: attr(data-suffix); position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: .9rem; font-weight: 600; color: var(--text-muted); pointer-events: none; }

/* «Impuestos y participaciones»: desplegable cerrado, a todo el ancho de la tarjeta */
.rb-asset-more { margin-top: var(--s-4); font-size: inherit; }
.rb-asset-more > summary { background: var(--surface); font-size: .88rem; min-height: var(--rb-h); padding-block: 0; }
.rb-asset-more > summary .rb-more-t small { font-size: inherit; color: var(--text-muted); font-weight: 500; }
@media (max-width: 479px) { .rb-asset-more > summary .rb-more-t small { display: none; } }
.rb-asset-grid.rb-asset-grid--more { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
@media (min-width: 640px) { .rb-asset-grid.rb-asset-grid--more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-asset-grid--more .field-hint { margin-top: calc(var(--s-1) * -1); }
.rb-f-mensual { grid-column: 1 / -1; align-items: center; min-height: 32px; }

/* Añadir activo y suma de pesos */
.rb-assets-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.rb-assets-foot .btn { min-height: 40px; }
.rb-sum { font-size: .86rem; font-weight: 600; line-height: 1.45; }
.rb-sum--ok { color: var(--accent); }
.rb-sum--warn { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); }

/* Este mes: tres opciones del mismo ancho */
.rb-flow .radio-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.rb-flow .radio-pill { justify-content: center; min-width: 0; white-space: nowrap; padding-inline: var(--s-3); }
.rb-flow-amount { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--surface-2); }
.rb-flow-amount[hidden] { display: none; }
.rb-flow-amount label { font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.rb-flow-amount input { width: 10rem; text-align: right; font-family: var(--display); font-size: 1.25rem; font-weight: 700; background: var(--surface); }

/* Corregir: dos opciones del mismo ancho (una debajo de otra en móvil) */
.rb-mode { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--s-2); }
@media (min-width: 560px) { .rb-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-mode .radio-pill--stack { min-width: 0; }

/* Ajustes */
.rb-settings { margin-top: var(--s-5); }
.rb-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); align-items: start; }
@media (min-width: 560px) { .rb-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-settings-grid .field-hint { margin-top: calc(var(--s-1) * -1); }

/* Resultado */
.rb-section-title { margin-top: var(--s-6); }
.cc-hero-card .ic-headline.rb-headline--text { font-size: clamp(2.4rem, 9vw, 4rem); }

/* Semáforo por activo */
.rb-status-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.rb-status { padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); }
.rb-status-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.rb-status-name { flex: 1 1 12rem; min-width: 0; font-family: var(--display); font-weight: 700; line-height: 1.3; }
.rb-status-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--s-2); border-radius: 50%; background: var(--c); vertical-align: .05em; }
.rb-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.rb-chip--dentro { background: var(--accent-soft); color: var(--accent); }
.rb-chip--vigilar { background: var(--warning-soft); color: var(--warning); }
.rb-chip--fuera { background: var(--text); color: var(--surface); }
.rb-bandbar { position: relative; height: 12px; border-radius: 999px; background: var(--surface); margin: var(--s-3) 0; }
.rb-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 28%, transparent); }
.rb-target { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.rb-mark { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--surface-2); }
.rb-mark--fin { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--surface); box-shadow: inset 0 0 0 3px var(--c); }
.rb-status-meta { display: flex; justify-content: space-between; gap: var(--s-1) var(--s-3); flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rb-status-meta strong { color: var(--text); }

/* Órdenes */
.rb-orders { list-style: none; padding: 0; counter-reset: rb; display: grid; gap: var(--s-3); }
.rb-order { counter-increment: rb; position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 3.4rem; border-radius: var(--radius-lg); background: var(--surface-2); }
.rb-order::before { content: counter(rb); position: absolute; left: var(--s-4); top: var(--s-4); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; background: var(--text); color: var(--surface); }
.rb-order-main { font-size: .98rem; line-height: 1.4; }
.rb-order-main strong { font-family: var(--display); font-variant-numeric: tabular-nums; }
.rb-order-meta { margin-top: var(--s-1); font-size: .84rem; color: var(--text-muted); }
.rb-order-meta strong { color: var(--text); }
.rb-tag { display: inline-block; margin-top: var(--s-2); padding: .15rem .6rem; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: .76rem; font-weight: 700; }
.rb-stats { margin-top: var(--s-4); }
@media (min-width: 640px) { .rb-stats { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.rb-stats[hidden] { display: none; }

/* Avisos */
#rb-avisos { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
#rb-avisos:empty { display: none; }
.rb-aviso { padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: .88rem; line-height: 1.5; }
.rb-aviso--warn { background: var(--warning-soft); color: var(--warning); }
.rb-aviso--warn strong { color: inherit; }
.rb-aviso--info { background: var(--surface-2); color: var(--text); }
.rb-aviso--tip { background: var(--accent-soft); color: var(--text); }

#rb-plan { margin-top: var(--s-4); }
#rb-plan .tiny-note { margin-bottom: var(--s-3); }

/* Crisis */
.rb-crisis[hidden] { display: none; }
.rb-perfil { font-size: .95rem; margin-bottom: var(--s-4); max-width: 62ch; }
.rb-perfil a, .rb-crisis .tiny-note a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rb-crisis-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .rb-crisis-list { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
.rb-crisis-item { padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s-2); }
.rb-crisis-name { font-family: var(--display); font-weight: 700; }
.rb-crisis-figs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: .86rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rb-crisis-figs strong { color: var(--text); font-size: 1rem; }
.rb-crisis-diff { margin-top: auto; font-size: .86rem; font-weight: 600; }
.rb-loss, .rb-crisis-figs strong.rb-loss { color: var(--loss); }
.rb-crisis .tiny-note { margin-top: var(--s-3); }

/* Recordatorio */
.rb-reminder { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.rb-reminder .btn-secondary { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.rb-reminder select { width: auto; display: inline-block; padding: .2rem 2rem .2rem .6rem; font-size: .88rem; background-color: var(--surface); }

.is-revealing .rb-status, .is-revealing .rb-order { animation: kc-rise 300ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .is-revealing .rb-status, .is-revealing .rb-order { animation: kc-fade 200ms ease both; } }

/* Ejemplos: rejilla de 2 columnas iguales; el impar ocupa la fila entera */
#rb-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#rb-presets .rate-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rb-presets .rate-chip[hidden] { display: none; }
#rb-presets .rate-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { #rb-presets { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } #rb-presets .rate-chip:last-child:nth-child(odd) { grid-column: auto; } }