/* North Planner v55 — «Rumbo»
   Capa de diseño aplicada AL FINAL de las capas existentes. No toca datos ni lógica.
   Reglas de la dirección:
   1. Tres superficies: crema, carbón y bosque (solo en el momento importante de cada pantalla).
   2. Un solo acento: bosque en claro, lima en oscuro.
   3. Radios con sistema: 6 / 12 / 20.
   4. Líneas finas antes que cajas; cifras siempre tabulares.
   5. La faceta del logo (esquina cortada) vive en 3 sitios: saldo, botón central, indicador activo.
   El logo (SVG inline) no se modifica. */

/* ---------- 1. Tokens ---------- */
:root[data-theme]{
  --r-s:6px;--r-m:12px;--r-l:20px;
  --r-forest:#2F4A36;--r-forest-deep:#243A2A;--r-lime:#D9F99D;--r-cream:#F8F6EF;
  --r-cut:22px;
  --r-ease:cubic-bezier(.2,.8,.2,1);
  --r-dur:240ms;
}
:root[data-theme="light"],html:not([data-theme]){
  --canvas:#F8F6EF;--surface:#FFFEFA;--surface2:#F0EDE4;--raised:#E7E3D8;
  --ink:#111315;--muted:#666B63;--line:#DCD7C9;
  --accent:#2F4A36;--accent-ink:#F8F6EF;--accent-soft:#E7ECDC;
  --r-split-a:#F8F6EF;--r-split-b:#8FA582;--r-split-c:#D9F99D;
}
:root[data-theme="dark"]{
  --accent:#D9F99D;--accent-ink:#111315;--accent-soft:#262B24;
  --muted:#A9ADA6;
  --hero:#2A4331;--hero2:#2A4331;
  --r-split-a:#F8F6EF;--r-split-b:#8FA582;--r-split-c:#D9F99D;
}

/* ---------- 2. Base: tipografía, números, foco ---------- */
:root[data-theme] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme] :is(strong,b,.amt,.num,.monthly-amount,[data-private-amount],.metric strong,.overview-card strong,.bank-account strong){font-variant-numeric:tabular-nums lining-nums}
:root[data-theme] :is(h1,h2,h3){text-wrap:balance}
:root[data-theme] p{text-wrap:pretty}
:root[data-theme] :is(button,a,[role="button"],input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent)!important;outline-offset:3px!important;border-radius:var(--r-s)}
:root[data-theme] :is(button,[role="button"]){-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- 3. Encabezados con voz ---------- */
:root[data-theme] .page-title,
:root[data-theme] .structure-heading h1,
:root[data-theme] .task-heading h1{
  font-weight:800;letter-spacing:-.05em;line-height:1.02;font-size:clamp(30px,9vw,38px)}
:root[data-theme] .secondary-head .page-title{font-size:clamp(24px,7vw,30px);letter-spacing:-.045em}
:root[data-theme] .structure-heading small,
:root[data-theme] .period-head small{
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--muted)}
:root[data-theme] .section-head h2,
:root[data-theme] .structure-group>h2{
  font-size:16px;font-weight:700;letter-spacing:-.03em}
:root[data-theme] .section-head .link{font-size:13px;font-weight:600;letter-spacing:0}

/* Titular de Inicio: la segunda línea va en acento, como en los posts */
:root[data-theme] #home .welcome-head{align-items:flex-start;margin-bottom:26px}
:root[data-theme] #home .welcome-head h1,
:root[data-theme] #home .rumbo-headline{
  font-size:clamp(34px,10.4vw,44px);font-weight:800;letter-spacing:-.055em;line-height:.98;margin:18px 0 0}
:root[data-theme] #home .rumbo-headline span{display:block;color:var(--accent)}
:root[data-theme] #home .welcome-head small{
  display:block;margin-top:14px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}

/* ---------- 4. Superficies: líneas finas, radios con sistema ---------- */
:root[data-theme] :is(.panel,.card,.overview-card,.monthly-card,.plan-card,.home-goal,.task-recommend,.metric,.analysis-hero,.analysis-list,.analysis-insights,.analysis-forecast,.structure-home,.north-purchase-card){
  border-radius:var(--r-m)!important;box-shadow:none!important}
:root[data-theme="light"] :is(.panel,.card,.overview-card,.monthly-card,.plan-card,.home-goal,.task-recommend,.metric,.north-purchase-card){
  background:var(--surface)!important;border:1px solid var(--line)!important}
:root[data-theme] .bank-account-list{border-radius:var(--r-m)!important;overflow:hidden}
:root[data-theme] .bank-account{padding:15px 16px}
:root[data-theme] .bank-account + .bank-account{border-top:1px solid var(--line)}
:root[data-theme] .task-card{border-radius:var(--r-m)!important}
:root[data-theme] .overview-card strong{font-size:22px;font-weight:800;letter-spacing:-.05em}

/* ---------- 5. Saldo: faceta del logo + distribución ---------- */
:root[data-theme] .bank-hero{
  position:relative;
  background:var(--r-forest)!important;
  border:0!important;border-radius:var(--r-s)!important;
  padding:22px 20px 16px!important;
  color:var(--r-cream);
  clip-path:polygon(0 0,calc(100% - var(--r-cut)) 0,100% var(--r-cut),100% 100%,0 100%);
}
:root[data-theme] .bank-hero:before,:root[data-theme] .bank-hero:after{display:none!important}
:root[data-theme] .bank-hero-top>span{
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#C7D3C3!important}
:root[data-theme] .bank-hero-top button{color:#C7D3C3!important;font-size:13px;font-weight:500}
:root[data-theme] .bank-hero>strong,:root[data-theme] #structureAvailable{
  display:block;font-size:clamp(38px,12vw,48px);font-weight:800;letter-spacing:-.055em;line-height:1.04;
  color:var(--r-cream)!important;margin:10px 0 6px}
:root[data-theme] .bank-hero>span{color:#C7D3C3!important;font-size:13px}
:root[data-theme] .bank-hero-foot{border-color:rgba(248,246,239,.18)!important;margin-top:14px}
:root[data-theme] .bank-hero-foot,:root[data-theme] .bank-hero-foot span,:root[data-theme] .bank-hero-foot button{color:#C7D3C3!important}
:root[data-theme] .bank-hero-foot b{color:var(--r-cream)!important}

.rumbo-split{margin:16px 0 4px}
.rumbo-split-bar{display:flex;gap:2px;height:6px}
.rumbo-split-bar i{display:block;height:6px;min-width:3px;transition:flex-basis var(--r-dur) var(--r-ease)}
.rumbo-split-list{list-style:none;margin:10px 0 0;padding:0}
.rumbo-split-list li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;
  border-top:1px solid rgba(248,246,239,.14);color:var(--r-cream)}
.rumbo-split-list li:first-child{border-top:0}
.rumbo-split-list i{width:8px;height:8px;border-radius:2px;flex:none}
.rumbo-split-list em{margin-left:auto;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.rumbo-split-list small{opacity:.7;font-size:11px;margin-left:2px}

/* ---------- 6. Acciones rápidas: cuadradas, sin círculos ---------- */
:root[data-theme] #home .bank-actions i,
:root[data-theme] .bank-actions i{
  width:52px;height:52px;border-radius:var(--r-m)!important;
  background:transparent!important;border:1px solid var(--line)!important;color:var(--accent)!important}
:root[data-theme] #home .bank-actions button{font-size:13px;font-weight:600;letter-spacing:-.01em}
:root[data-theme] .bank-actions button{transition:transform var(--r-dur) var(--r-ease)}
:root[data-theme] .bank-actions button:active{transform:scale(.97)}

:root[data-theme] :is(.bank-account-icon,.north-action-icon,.step-badge,.goal-symbol,.create-ico,.analysis-symbol,.spark){
  background:transparent!important;color:var(--accent)!important;border:1px solid var(--line)!important;border-radius:var(--r-m)!important}

/* ---------- 7. Navegación: barra anclada, línea activa, botón con faceta ---------- */
:root[data-theme] .nav{
  left:0!important;right:0!important;bottom:0!important;transform:none!important;
  width:100%!important;max-width:none!important;margin:0!important;
  height:auto!important;min-height:64px;
  padding:0 max(10px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-right))!important;
  border-radius:0!important;border:0!important;border-top:1px solid var(--line)!important;
  background:var(--canvas)!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  display:grid!important;grid-template-columns:1fr 1fr 64px 1fr 1fr;align-items:end;
}
:root[data-theme] .nav button{
  position:relative;background:transparent!important;border-radius:0!important;
  padding:10px 0 9px!important;font-size:11px!important;font-weight:600;letter-spacing:-.005em;color:var(--muted)!important;
  min-height:56px}
:root[data-theme] .nav button.active:not(.nav-create){color:var(--ink)!important}
:root[data-theme] .nav button.active:not(.nav-create):before{
  content:"";position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--accent)}
:root[data-theme] .nav button.active:not(.nav-create) .nav-icon svg{stroke:var(--accent)}
:root[data-theme] .nav .nav-create{
  width:50px!important;height:50px!important;margin:0 auto 10px!important;min-height:0!important;
  background:var(--accent)!important;color:var(--accent-ink)!important;border:0!important;box-shadow:none!important;
  border-radius:var(--r-s)!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform var(--r-dur) var(--r-ease)}
:root[data-theme] .nav .nav-create:active{transform:scale(.94)}
:root[data-theme="light"] .nav .nav-create{background:var(--r-forest)!important;color:var(--r-cream)!important}
:root[data-theme] .app{padding-bottom:calc(112px + env(safe-area-inset-bottom))}

/* ---------- 8. Controles ---------- */
:root[data-theme] :is(.save,.category-actions .primary,.planning-entry-actions button:first-child,.north-install-button){
  border-radius:var(--r-m)!important;font-weight:700;letter-spacing:-.01em;min-height:48px;
  transition:transform var(--r-dur) var(--r-ease),filter var(--r-dur) var(--r-ease)}
:root[data-theme="dark"] :is(.save,.category-actions .primary,.planning-entry-actions button:first-child){
  background:var(--r-lime)!important;border-color:var(--r-lime)!important;color:#111315!important}
:root[data-theme="light"] :is(.save,.category-actions .primary,.planning-entry-actions button:first-child){
  background:var(--r-forest)!important;border-color:var(--r-forest)!important;color:var(--r-cream)!important}
:root[data-theme] :is(.save,.category-actions .primary):active{transform:scale(.98)}
:root[data-theme] :is(.field input,.field select,.field textarea,.task-search input,.move-search input){border-radius:var(--r-m)!important;min-height:48px}
:root[data-theme] .segmented{border-radius:var(--r-m)!important;padding:4px}
:root[data-theme] .segmented button{border-radius:var(--r-s)!important;font-weight:600}
:root[data-theme] :is(.sheet,.category-dialog,.confirm-sheet,.create-menu,.context-menu){
  border-radius:var(--r-l) var(--r-l) 0 0!important;box-shadow:none!important;border-top:1px solid var(--line)!important}
:root[data-theme] :is(.back-circle,.add-circle,.notice-button,.profile-dot){
  border-radius:var(--r-m)!important;width:42px;height:42px}

/* ---------- 9. Estados vacíos con invitación ---------- */
:root[data-theme] :is(.empty,.analysis-empty,.chart-empty,.integrated-empty){
  border:1px dashed var(--line);border-radius:var(--r-m);padding:22px 18px;text-align:center;
  color:var(--muted);font-size:13px;line-height:1.55;background:transparent}
:root[data-theme] :is(.empty-action,.analysis-empty-action){
  cursor:pointer;color:var(--ink);font-weight:600;transition:border-color var(--r-dur) var(--r-ease),transform var(--r-dur) var(--r-ease)}
:root[data-theme] :is(.empty-action,.analysis-empty-action):hover{border-color:var(--accent)}
:root[data-theme] :is(.empty-action,.analysis-empty-action):active{transform:scale(.99)}

/* ---------- 10. Estado de sincronización ---------- */
:root[data-theme] .north-sync-badge{
  top:max(10px,env(safe-area-inset-top))!important;border-radius:var(--r-s)!important;
  font-size:11px;font-weight:600;letter-spacing:0;border:1px solid var(--line)!important}

/* ---------- 11. Movimiento: entrada escalonada, solo transform y opacity ---------- */
@keyframes rumboRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  :root[data-theme] .page.active>*{animation:rumboRise 380ms var(--r-ease) both}
  :root[data-theme] .page.active>*:nth-child(2){animation-delay:40ms}
  :root[data-theme] .page.active>*:nth-child(3){animation-delay:80ms}
  :root[data-theme] .page.active>*:nth-child(4){animation-delay:120ms}
  :root[data-theme] .page.active>*:nth-child(5){animation-delay:160ms}
  :root[data-theme] .page.active>*:nth-child(n+6){animation-delay:200ms}
}
@media (prefers-reduced-motion:reduce){
  :root[data-theme] *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 12. Pantallas angostas ---------- */
@media (max-width:360px){
  :root[data-theme] #home .welcome-head h1,:root[data-theme] #home .rumbo-headline{font-size:34px}
  :root[data-theme] .bank-hero{padding:18px 16px 14px!important}
}

/* ---------- 13. Espaciado entre palabras ---------- */
/* La fuente embebida trae espacios estrechos; con tracking negativo las palabras se pegan. */
:root[data-theme] body{word-spacing:.03em}
:root[data-theme] :is(h1,h2,h3,.page-title,.rumbo-headline,.brand-wordmark b){word-spacing:.12em}
:root[data-theme] #structureAvailable{word-spacing:0}

/* ---------- 14. Etiquetas secundarias en oración, sin tracking ancho ---------- */
:root[data-theme] small{letter-spacing:0;text-transform:none}
:root[data-theme] .moves-period{text-transform:none;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
:root[data-theme] .analysis-hero-head>span{letter-spacing:0;text-transform:none;font-size:13px;font-weight:500}
:root[data-theme] #taskListLabel{letter-spacing:0;text-transform:none;font-size:13px;font-weight:700}

/* ======================================================================
   v56 · Correcciones de campo
   ====================================================================== */
:root[data-theme]{--on-forest:#F8F6EF;--on-forest-muted:#C7D3C3;--gutter-x:20px}

/* 15.1 Cintas de filtros y opciones: sin rectángulo detrás, con desplazamiento horizontal */
:root[data-theme] :is(.task-filters,.chips){
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
:root[data-theme] :is(.task-filters,.chips)>*{flex:none;scroll-snap-align:start}

/* 15.2 Color por superficie: sobre el verde se usa crema; sobre el resto, la tinta del tema */
:root[data-theme] .bank-hero :is(button,button *,span,small){color:var(--on-forest-muted)!important}
:root[data-theme] .bank-hero :is(strong,b){color:var(--on-forest)!important}
:root[data-theme] .bank-hero svg{stroke:currentColor}

/* 15.3 Menús: hoja inferior desplazable, siempre sobre la navegación y dentro de las zonas seguras */
:root[data-theme] .rumbo-scrim{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.45)}
:root[data-theme] .task-menu.rumbo-sheet{
  display:block!important;position:fixed!important;left:12px!important;right:12px!important;top:auto!important;
  bottom:calc(12px + env(safe-area-inset-bottom))!important;z-index:90!important;
  max-height:min(60dvh,440px);overflow:auto;overscroll-behavior:contain;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 -12px 40px rgba(0,0,0,.28)}
:root[data-theme] .task-menu.rumbo-sheet button{
  display:flex;align-items:center;min-height:52px;padding:14px 16px;font-size:16px;font-weight:600;
  border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)}
:root[data-theme] .task-menu.rumbo-sheet button:last-child{border-bottom:0;color:var(--negative)}
:root[data-theme] :is(.overlay,.category-backdrop,.confirm-backdrop,.create-backdrop,.context-backdrop){z-index:100!important}
:root[data-theme] :is(.sheet,.category-dialog,.confirm-sheet,.create-menu,.context-menu){
  max-height:calc(100dvh - 16px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* 15.4 Teclado abierto, horizontal y zonas seguras */
html.rumbo-kb .nav{display:none!important}
:root[data-theme] .app{
  padding-left:max(var(--gutter-x),env(safe-area-inset-left));
  padding-right:max(var(--gutter-x),env(safe-area-inset-right))}
@media (orientation:landscape) and (max-height:520px){
  :root[data-theme] .nav{min-height:48px}
  :root[data-theme] .nav button{min-height:44px;padding:4px 0!important;font-size:11px!important}
  :root[data-theme] .nav .nav-create{width:40px!important;height:40px!important;margin-bottom:4px!important}
  :root[data-theme] .app{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  :root[data-theme] #home .welcome-head h1,:root[data-theme] #home .rumbo-headline{font-size:28px}
  :root[data-theme] .bank-hero>strong,:root[data-theme] #structureAvailable{font-size:34px}
}

/* 15.5 Zoom accidental: campos de 16 px (los navegadores amplían la pantalla con menos), sin doble toque.
   No se bloquea el pellizco: es una herramienta de accesibilidad. */
@media (pointer:coarse){
  :root[data-theme] :is(input,select,textarea){font-size:16px!important}
}
:root[data-theme] :is(button,a,[role="button"],input,select,textarea,label,summary){touch-action:manipulation}
:root[data-theme] :is(.row .info,.bank-account-name,.task-main,.structure-link span){min-width:0;overflow-wrap:anywhere}

/* Versión visible: sirve para saber qué se está ejecutando */
.rumbo-version{margin:28px 0 8px;text-align:center;font-size:13px;color:var(--muted)}

/* Pantalla de acceso de la app: el enlace al sitio se ve y se pulsa como botón principal */
:root[data-theme] .north-cloud-gate a.primary:any-link{
  display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:0 20px;
  border-radius:var(--r-m);background:var(--accent);color:var(--accent-ink)!important;
  font-weight:700;text-decoration:none}
:root[data-theme="light"] .north-cloud-gate a.primary:any-link{background:var(--r-forest);color:var(--r-cream)!important}
:root[data-theme] .north-cloud-gate .panel{max-width:440px}