/* Kornzaft Budget — design system
   Paper & ink: fondo calido casi blanco, tinta casi negra, un acento teal.
   Bordes hairline en vez de sombras; Inter; espaciado generoso. */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --ink: #1c1917;
  --ink-soft: #44403c;
  --muted: #78716c;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: #f0fdfa;
  --accent-mid: #99f6e4;
  --pos: #047857;
  --neg: #dc2626;
  --warn: #d97706;
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* El atributo hidden debe ganar siempre — las reglas display:flex/grid
   de los componentes lo pisarian (estilos de autor > estilos del UA). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.6;
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11";
}

img {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--surface);
}

.btn-primary:hover {
  background: var(--ink-soft);
}

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--ink);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13.5px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.logo:hover {
  text-decoration: none;
}

.logo .logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.logo span em {
  font-style: normal;
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.main-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--bg);
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--border);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero p.lead {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 480px;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-art {
  text-align: center;
}

/* ---------- Sections ---------- */

/* El ritmo vertical entre secciones de la landing, acotado a la landing.
   Sin acotar, este selector de elemento alcanza a TODA <section> del sitio, incluidas
   las de las paginas de app. Ahi vivio escondido mucho tiempo porque `.panel` le ganaba
   por especificidad y le imponia su propio padding; el dia que el registro dejo de ser
   una tarjeta (issue #33) y solto esa clase, aparecieron 88px de papel vacio arriba del
   titulo. Las paginas de app se distinguen por `app-body` en el body — todas la llevan,
   la landing y courses.html no — asi que la trampa se cierra aca en vez de taparse con
   un `padding: 0` en cada region que migre. Los issues #29 a #31 la habrian pisado
   igual, una vez por pagina. */
body:not(.app-body) section {
  padding: 88px 0;
}

section.alt {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  font-size: 16px;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 56px;
}

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
}

.feature-card .icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
}

.feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.feature-card p {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  text-align: left;
  padding: 28px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step .step-num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--surface);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.step p {
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Download ---------- */
.download-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

.badge:hover {
  border-color: var(--ink);
  text-decoration: none;
}

.badge small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- Courses / cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.course-card .card-head {
  background: var(--accent-soft);
  color: var(--ink);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.course-card .card-head .code {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.course-card .card-head h3 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 4px;
}

.course-card .card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-card .card-body p {
  color: var(--muted);
  font-size: 14px;
  flex: 1;
}

.course-card .meta {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.course-card .meta span {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ---------- Press / testimonials ---------- */
.press-row {
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 700;
  color: var(--border-strong);
  letter-spacing: -0.01em;
}

.testimonial {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
}

.testimonial blockquote {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.testimonial cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.price-card.premium {
  border-color: var(--ink);
}

.price-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.price-card .price {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
}

.price-card .per {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}

.price-card ul {
  list-style: none;
  margin-bottom: 26px;
}

.price-card ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 14px;
  color: var(--ink-soft);
}

.price-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--surface);
  text-align: center;
  padding: 72px 0;
}

.cta-band h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 22px;
}

.cta-band .btn {
  background: var(--surface);
  color: var(--ink);
}

.cta-band .btn:hover {
  background: var(--bg);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  color: var(--muted);
  padding: 56px 0 32px;
  font-size: 14px;
  border-top: 1px solid var(--border);
}

.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.site-footer h4 {
  color: var(--ink);
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
}

.site-footer ul {
  list-style: none;
}

.site-footer ul li {
  margin-bottom: 9px;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--ink);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- App (dashboard) ---------- */
.app-body {
  background: var(--bg);
  min-height: 100vh;
}

.app-header-bar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.app-header-bar .logo {
  color: var(--ink);
  font-size: 16px;
}

.app-header-bar a.back,
.app-header-bar .back {
  color: var(--muted);
  font-size: 13px;
}

/* ---------- App-shell: fixed-viewport frame (desktop ≥900px) ----------
   La pagina no scrollea: header + stats hero quedan fijos y el cuerpo
   (sidebar + history) llena el alto restante via flexbox, scrolleando
   internamente. Por debajo de 900px el shell se libera (ver @media).

   issue #33: el fondo pasa de --bg (#f7f7f5, la piel vieja de la landing/courses/
   reports/goals/investments — ver el comentario de tokens.css sobre el prefijo
   --a2-) a --a2-paper, el mismo papel kraft que ya pinta Masthead/StatsHero/
   GoalReminders. `body.app-shell` sólo existe en app.html (ninguna de las páginas
   compartidas lo tiene en su <body>), así que este cambio no las toca — es
   exactamente "acotar los cambios a selectores que sólo existan en el tablero". Con
   esto, ya no queda ningún #f7f7f5 a la vista en el tablero: antes se filtraba por
   los 16px de `.shell-body` (ver más abajo) y por cualquier resto de página más
   ancha que 1320px.

   ADR 0007: --a2-paper deja de ser un color plano y pasa a ser sólo el color de
   base bajo una textura — el papel entero (ADR 0004: el dashboard es un libro
   mayor) pasa a ser "C · el pliego": la hoja derecha de un libro abierto, con su
   lomo, su ondulación y la mugre de pasar la hoja (.design/papel). El fondo real
   es `--a2-paper-page-image` (tokens.css) — un compuesto de siete capas, nunca un
   literal acá — que sólo se declara en este único selector: es el único lugar del
   sistema donde la hoja entera es visible de punta a punta, así que es el único
   lugar que necesita el lomo (anclado a la izquierda) y el canto (a la derecha).
   Las piezas que pintaban --a2-paper opaco encima (Masthead, StatsHero, FinePrint,
   GoalReminders, el cuerpo de History) pasan a transparentes para que se vea este
   fondo; las que necesitan seguir opacas por flotar o superponerse (los
   encabezados sticky del registro, el cajón abierto de Sobres/Cuentas) repiten la
   misma pila con `background-attachment: fixed` para que la textura calce sin
   costura, en vez de empezar de cero en su propia esquina. */
body.app-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--a2-paper-page-base);
  background-image: var(--a2-paper-page-image);
  background-size: var(--a2-paper-page-size);
  background-position: var(--a2-paper-page-position);
  background-repeat: var(--a2-paper-page-repeat);
  background-blend-mode: var(--a2-paper-page-blend);
}

body.app-shell .app-header-bar {
  flex-shrink: 0;
}

/* stats hero: una sola barra horizontal baja, 3 grupos con divisores hairline */
.stats-hero {
  flex-shrink: 0;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: stretch;
}

.hero-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 2px 28px;
}

.hero-group + .hero-group {
  border-left: 1px solid var(--border);
}

.hero-group:first-child {
  padding-left: 0;
}

.hero-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hero-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* cuerpo del shell: fila flex (cajones + libro) que llena el alto restante. El
   cajón de Sobres/Cuentas (Drawers.css, issue #26) se superpone al libro con
   position:absolute — nunca reserva ancho en esta fila más allá de su riel — así
   que abrirlo o cerrarlo no reacomoda el libro (ADR 0004).

   issue #33: sin `max-width`/`margin:auto`/`padding` — el artboard aprobado no capa
   el cuerpo a un ancho central: el riel de pestañas empieza pegado al borde
   izquierdo de la ventana y el registro llega hasta el derecho, sin margen de
   ninguno de los dos lados (Main.dc.html, la fila "cuerpo"). Masthead/StatsHero/
   GoalReminders ya son así — `width:100%`, sin `max-width` — así que esto sólo pone
   al cuerpo a tono con el resto de la franja migrada. `gap:0`, no 16px: es la otra
   mitad de "las pestañas quedan flotando separadas" — la separación restante era el
   padding de la tarjeta blanca de `.history-panel`, que se fue con la clase
   `.panel` (ver History.css). */
.shell-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  gap: 0;
  align-items: stretch;
}

.a2-book {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /* `z-index: 0` no lo sube ni lo baja: lo vuelve un contexto de apilado propio, que es
     lo que encierra el encabezado y el pie pegajosos del registro (History.css, los dos
     con z-index 2) dentro del libro. Sin esto compiten de igual a igual con el cajón
     abierto (Drawers.css, también z-index 2) y, por venir después en el DOM, se pintan
     encima: el cajón quedaba cortado en dos por el encabezado del registro. */
  z-index: 0;
}

/* Envelopes ocupa el alto sobrante; su lista scrollea internamente */
.panel-envelopes {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-envelopes .scroll-list {
  flex: 1;
  min-height: 0;
}

/* issue #15: la lista archivada (plegada, secundaria) no compite flex:1 con la
   activa cuando esta abierta — capada como la de Accounts, nunca 50/50. */
#envelope-archived-list {
  flex: none;
  max-height: 160px;
}

/* Accounts: altura natural, capada a ~5 filas antes de scrollear */
.panel-accounts {
  flex-shrink: 0;
}

.panel-accounts .scroll-list {
  max-height: 200px;
}

/* issue #15: capada tambien en mobile (donde la vista enfocada saca el tope de
   .scroll-list en general) — la lista archivada sigue siendo secundaria. */
#account-archived-list {
  max-height: 160px;
}

/* History llena el ancho restante; tabla scrollea, footer+load-more pinneados */
.history-panel {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.history-panel .tx-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.app-layout {
  max-width: 1100px;
  margin: 20px auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}

.panel h2 {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.panel h2 .total {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* envelope rows */
.envelope {
  padding: 11px 0;
  border-bottom: 1px solid var(--bg);
}

.envelope:last-child {
  border-bottom: none;
}

.envelope .env-top {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 7px;
  gap: 12px;
}

.envelope .env-top .amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.amount.neg {
  color: var(--neg);
}

.amount.pos {
  color: var(--pos);
}

.bar {
  height: 5px;
  border-radius: 999px;
  background: #f0efed;
  overflow: hidden;
}

.bar .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s;
}

.bar .fill.warn {
  background: var(--warn);
}

.bar .fill.over {
  background: var(--neg);
}

.env-budget {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* issue #7: el sobre vale a costo mientras algun Holding no tenga precio — mismo
   tratamiento visual que .holding-at-cost en investments.js, nunca disfrazado de
   numero firme. */
.env-soft-note {
  font-size: 11px;
  font-style: italic;
  color: var(--warn);
  margin-top: 5px;
}

/* accounts */
.account-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--bg);
  gap: 12px;
}

.account-row .amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-row:last-child {
  border-bottom: none;
}

/* archivados (issue #15): siguen abriendo el modal de edicion (unica forma de
   desarchivar), atenuados para no competir con la lista activa */
.envelope.is-archived,
.account-row.is-archived {
  opacity: 0.55;
}

.archived-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 0 4px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.archived-toggle:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* "Invested" — no es una Account, es la puerta a investments.html (donde viven
   los Holdings). Separada del resto con un borde superior y sin datos de
   cuenta; el color acento la distingue de un balance liquido. */
.invested-row {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  border-bottom: none;
  color: var(--accent-strong);
  text-decoration: none;
  cursor: pointer;
}

.invested-row:hover {
  color: var(--accent);
}

.invested-row .amount {
  color: inherit;
}

/* transactions table */
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tx-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.tx-table td {
  padding: 10px;
  border-bottom: 1px solid var(--bg);
  vertical-align: top;
}

.tx-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.tx-table .tx-del {
  background: none;
  border: none;
  color: var(--border-strong);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}

.tx-table .tx-del:hover {
  color: var(--neg);
}

/* forms */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--ink-soft);
}

input,
select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* segmented control */
.tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.tabs button {
  flex: 1;
  padding: 7px 6px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}

.tabs button.active {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.empty-note {
  text-align: center;
  color: var(--muted);
  padding: 18px 0;
  font-size: 13.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .container,
  .app-layout {
    grid-template-columns: 1fr;
  }

  /* Por debajo de 900px se abandona el shell fijo: la pagina vuelve a
     scrollear normalmente y sidebar + history se apilan. La capa mobile
     dedicada llega en un workstream posterior.

     ADR 0007, supuesto pendiente de confirmar con el usuario: sin lomo. Todavía
     no está decidido dónde vive el lomo del libro en una pantalla vertical —
     por ahora se lo saca entero (--a2-paper-page-mobile-image, tokens.css) en
     vez de adivinar, y quedan sólo el kraft, la ondulación (estirada al ancho
     de la pantalla) y la mugre de la esquina, ya escalada para no ocupar medio
     teléfono. Aislado en este único bloque para que cambiarlo el día de mañana
     sea tocar una sola regla. */
  body.app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: block;
    background-image: var(--a2-paper-page-mobile-image);
    background-size: var(--a2-paper-page-mobile-size);
    background-position: var(--a2-paper-page-mobile-position);
    background-repeat: var(--a2-paper-page-mobile-repeat);
    background-blend-mode: var(--a2-paper-page-mobile-blend);
  }

  .stats-hero,
  .shell-body {
    flex-wrap: wrap;
  }

  .shell-body {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-envelopes .scroll-list {
    max-height: 360px;
  }

  .history-panel .tx-scroll {
    flex: none;
    max-height: 460px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .hero h1 {
    font-size: 38px;
  }
}

/* ---------- Modal de edicion ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 16px;
  z-index: 200;
}

.modal {
  width: 100%;
  max-width: 460px;
  margin: 0;
  max-height: 82vh;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.modal-actions .btn-danger,
.modal-actions .btn-quiet {
  margin-right: auto;
}

.btn-danger {
  background: var(--surface);
  color: var(--neg);
  border-color: var(--neg);
}

.btn-danger:hover {
  background: #fef2f2;
}

/* Delete, demotido a accion secundaria (issue #15): Archive pasa a ser la salida
   principal para sacar algo de las listas, asi que Delete queda mas callado —
   sigue a la izquierda (mismo layout que antes) pero ya no compite visualmente. */
.btn-quiet {
  background: none;
  border-color: transparent;
  color: var(--muted);
  padding: 8px 10px;
}

.btn-quiet:hover {
  color: var(--neg);
  text-decoration: underline;
}

/* ---------- Filas clickeables ---------- */
.clickable {
  cursor: pointer;
}

.tx-table tbody tr.clickable:hover td {
  background: var(--bg);
}

.envelope.clickable:hover,
.account-row.clickable:hover {
  background: var(--bg);
}

/* ---------- Lista scrolleable (75 sobres) ---------- */
.scroll-list {
  overflow-y: auto;
}

/* ---------- Scrollbar fina y siempre visible (utilidad) ----------
   6px, track transparente, thumb --border-strong que oscurece al hover. */
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ---------- Toasts ---------- */
#toast-container {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.18s ease-out;
  max-width: 90vw;
}

.toast.error {
  background: var(--neg);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tabla en mobile ---------- */
@media (max-width: 640px) {
  .tx-table th:nth-child(3),
  .tx-table td:nth-child(3),
  .tx-table th:nth-child(4),
  .tx-table td:nth-child(4) {
    display: none;
  }
}

/* ---------- Boton + (nueva transaccion) ---------- */
.btn-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--surface);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s, background 0.15s;
}

.btn-plus:hover {
  background: var(--accent);
}

.btn-plus.open {
  transform: rotate(45deg);
}

/* ---------- FAB (boton + flotante) ---------- */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  font-size: 30px;
  z-index: 250; /* sobre el modal-backdrop (200) para que la "×" sea visible */
  box-shadow: 0 6px 20px rgba(28, 25, 23, 0.28);
}

/* ---------- Overflow menu ("⋯") en el header de History ---------- */
.overflow-menu {
  position: relative;
}

.btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-icon:hover,
.btn-icon[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--ink);
  color: var(--ink);
}

.overflow-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 70;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.overflow-item:hover,
.overflow-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}

/* ---------- Combobox (autocomplete de payee) ---------- */
.combobox {
  position: relative;
}

.combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
}

.combobox-item {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.combobox-item .uses {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.combobox-item:hover,
.combobox-item.active {
  background: var(--accent-soft);
}

/* ---------- Bimonetario ---------- */
.cur-note {
  margin-top: 6px;
}

/* ---------- Investments ---------- */
.investments-layout {
  max-width: 820px;
  margin: 24px auto 48px;
  padding: 0 24px;
}

.instrument-kind {
  color: var(--muted);
  font-size: 12.5px;
}

.no-price {
  color: var(--muted);
  font-style: italic;
}

.price-date {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

/* holdings (lotes) */
.holding-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--bg);
}

.holding-card:last-child {
  border-bottom: none;
}

.holding-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.holding-instrument {
  font-size: 14px;
  font-weight: 600;
}

.holding-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.holding-at-cost {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--warn);
}

.holding-numbers {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}

.holding-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holding-num-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.holding-num-value {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.holding-num.headline .holding-num-value {
  font-size: 20px;
  font-weight: 700;
}

.holding-num-value.pos {
  color: var(--pos);
}

.holding-num-value.neg {
  color: var(--neg);
}

/* ---------- Reportes ---------- */
.reports-layout {
  max-width: 1100px;
  margin: 24px auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  align-items: start;
}

.report-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-nav button {
  text-align: left;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.report-nav button:hover {
  background: var(--bg);
}

.report-nav button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.report-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.report-controls .tabs {
  margin-bottom: 0;
  width: auto;
}

.report-controls .tabs button {
  padding: 7px 14px;
  flex: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s;
}

.chip:hover {
  border-color: var(--ink);
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.date-range {
  display: flex;
  gap: 8px;
  align-items: center;
}

.date-range input {
  width: 142px;
  padding: 7px 10px;
  font-size: 13px;
}

/* resumen del periodo */
.report-summary {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.report-summary .sum-item .sum-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.report-summary .sum-item .sum-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* barras horizontales */
.hbar {
  padding: 8px 0;
}

.hbar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  margin-bottom: 5px;
}

.hbar-head .hbar-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar-head .hbar-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.hbar-head .hbar-pct {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}

.hbar-track {
  height: 8px;
  border-radius: 999px;
  background: #f0efed;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.hbar-fill.income {
  background: var(--pos);
}

.hbar-fill.over {
  background: var(--neg);
}

/* chart vertical (mensual) */
.vchart-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
}

.vchart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 220px;
  padding-top: 8px;
}

.vcol {
  flex: 1;
  min-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vcol .vbars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 180px;
  width: 100%;
  justify-content: center;
}

.vcol .vbar {
  width: 100%;
  max-width: 26px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  min-height: 2px;
}

.vcol .vbar.income {
  background: var(--pos);
}

.vcol .vbar.spending {
  background: var(--ink);
}

.vcol .vlabel {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.report-note {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .reports-layout {
    grid-template-columns: 1fr;
  }

  .report-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .report-nav button {
    white-space: nowrap;
  }
}

/* issue #33: la barra de filtros del historial (.filter-bar/.filter-select/
   .chip-clear) se fue con la piel vieja — el registro tiene ahora la suya propia,
   vestida en A2, en web/src/components/History.css (.a2-filterline/
   .a2-filter-expanded/Select). .chip/.chip-row/.date-range siguen acá sin tocar:
   reports.html e investments.html todavía los usan para sus propios filtros. */

/* ---------- Totales del historial filtrado ---------- */
.tx-totals {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.tx-totals .tt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
}

.tx-totals .tt-cur {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--muted);
  min-width: 32px;
}

.tx-totals .tt-item {
  color: var(--ink-soft);
}

.tx-totals .tt-item b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* drill-down de categorias en reportes */
.hbar.clickable:hover {
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.hbar.clickable:hover .hbar-fill {
  background: var(--accent-strong);
}

/* linea de saldo en otra moneda dentro de un sobre (gastos cross-currency) */
.env-alt {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
}

.env-alt .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* envelope/account panel titles (mismas reglas que antes tenia .panel-toggle) */
.panel-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Scroll del historial ---------- */
.tx-scroll {
  max-height: 460px;
  overflow-y: auto;
}

/* encabezados de columna fijos al hacer scroll */
.tx-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

/* ======================================================================
   W4 — Capa mobile (<900px): bottom tab bar + vistas enfocadas + sheets
   Ver CONTEXT.md ("Bottom tab bar") y docs/adr/0001 [[mobile-layout]].
   ====================================================================== */

/* ---------- Bottom tab bar ----------
   Existe en app.html y reports.html; oculto en desktop. Debajo de 900px
   es la navegacion principal fija al fondo. En app.html, History /
   Envelopes / Accounts cambian de vista in-page (data-mobile-view, que en
   app.html escribe web/src/components/TabBar.tsx y en reports.html sigue
   siendo markup estatico); Reports es un link a reports.html. Se revela
   recien con sesion iniciada. */
.tab-bar {
  display: none;
}

.tab-bar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}

.tab-bar .tab .tab-icon {
  font-size: 19px;
  line-height: 1;
}

.tab-bar .tab.active {
  color: var(--accent-strong);
}

/* slide de los sheets desde el fondo */
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 900px) {
  /* la pagina deja lugar para la tab bar fija */
  .app-body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .tab-bar:not([hidden]) {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150; /* sobre el contenido, debajo del sheet (200) y el FAB (250) */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ---------- Una vista enfocada por vez (data-mobile-view) ----------
     History (default): stats strip + history. Envelopes / Accounts: solo su cajón
     (issue #26 sólo renombró el contenedor — .sidebar a .a2-drawers — el
     interruptor de una vista por vez sigue exactamente igual). */
  body[data-mobile-view="history"] .a2-drawers {
    display: none;
  }

  body[data-mobile-view="envelopes"] #stats-row,
  body[data-mobile-view="envelopes"] .history-panel,
  body[data-mobile-view="envelopes"] #panel-accounts {
    display: none;
  }

  body[data-mobile-view="accounts"] #stats-row,
  body[data-mobile-view="accounts"] .history-panel,
  body[data-mobile-view="accounts"] #panel-envelopes {
    display: none;
  }

  /* el unico panel visible llena el alto disponible */
  body[data-mobile-view="envelopes"] .panel-envelopes .scroll-list,
  body[data-mobile-view="accounts"] .panel-accounts .scroll-list {
    max-height: none;
  }

  .shell-body {
    padding: 0 16px;
  }

  /* ---------- Stats strip compacto atop la vista History ---------- */
  .stats-hero {
    flex-wrap: nowrap;
    gap: 0;
    margin: 14px 16px 0;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .hero-group,
  .hero-group:first-child {
    flex: 1;
    align-items: flex-start;
    padding: 0 12px;
  }

  .hero-group:first-child {
    padding-left: 4px;
  }

  .hero-label { font-size: 10px; }
  .hero-value { font-size: 17px; }
  .hero-sub { font-size: 12px; }

  /* ---------- FAB por encima de la tab bar ---------- */
  .fab {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Modales como bottom-sheets (solo CSS) ----------
     anclados al fondo, esquinas superiores redondeadas, scroll interno,
     entrando deslizando desde abajo. No cambia el JS del modal. */
  .modal-backdrop {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sheet-up 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* ---------- Goals (issue #8) ----------
   goals.html reusa .investments-layout/.panel/.tx-table/.bar/.fill de arriba —
   solo lo que es realmente nuevo (el resumen del plan y las etiquetas de estado
   del checklist) vive aca. */
.goal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 4px;
}

.goal-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goal-summary-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.goal-summary-value {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.goal-checklist-title {
  font-size: 13px;
  font-weight: 600;
  margin: 20px 0 10px;
}

.goal-status-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.goal-status-tag.goal-status-paid {
  color: var(--pos);
}

.goal-status-tag.goal-status-paid-late {
  color: var(--warn);
}

/* migracion 0011: "Late" = sin pagar y ya vencida de verdad (due_date < hoy) — nunca la
   cuota que vence hoy, ver goal_months.late. Antes se llamaba goal-status-overdue. */
.goal-status-tag.goal-status-late {
  color: var(--neg);
  font-weight: 600;
}

.goal-status-tag.goal-status-upcoming {
  color: var(--muted);
  font-style: italic;
}

/* issue #9: compliance y coverage, lado a lado — dos barras separadas que nunca se
   combinan en una sola (ADR 0003). Colapsa a una columna en mobile. */
.goal-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}

.goal-progress-block .goal-checklist-title {
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .goal-progress-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---------- Goal reminder strip (issue #10) ----------
   Entre el stats-hero y el cuerpo del shell. Alto acotado a UN renglon siempre — el shell
   fijo de escritorio (ADR 0001, 100vh) no puede crecer, asi que varios Goals a la vez
   comparten el mismo renglon como pastillas horizontales (scroll interno si no entran) en
   vez de un banner apilado por Goal. Oculto por completo (JS pone [hidden]) cuando ningun
   Goal tiene una cuota que ya toque pedir — un renglon vacio reservado ensenia al ojo a
   saltearlo. */
.goal-reminder-strip {
  flex-shrink: 0;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 12px;
}

.goal-reminder-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px; /* lugar para la scrollbar fina sin tapar el borde de la pastilla */
}

.goal-reminder-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 8px 10px 8px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.goal-reminder-icon {
  color: var(--neg);
  font-weight: 700;
  flex-shrink: 0;
}

.goal-reminder-text {
  min-width: 0; /* deja que el ellipsis de abajo funcione dentro de un flex item */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.goal-reminder-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goal-reminder-detail {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goal-reminder-pay-btn {
  flex-shrink: 0;
}

/* issue #11: un Goal ENTERO vencido no es deuda (una Contribution late si lo es, arriba)
   — mismo amarillo que .goal-due-banner, nunca el rojo de "atrasado". */
.goal-reminder-pill-due {
  background: #fffbeb;
  border-color: #fde68a;
}

.goal-reminder-pill-due .goal-reminder-icon {
  color: var(--warn);
}

@media (max-width: 900px) {
  .goal-reminder-strip {
    padding: 12px 16px 0;
  }
}

/* ---------- Goal due / closed (issue #11) ----------
   El deadline cambia la palabra, no el estado — este bloque solo INFORMA (nunca un
   boton de vender/cerrar solo). Amarillo, no rojo: no es deuda ni fallo, es "llego el
   dia" — mismo tono que .env-soft-note/.holding-at-cost ya usan para "atencion, no
   error". */
.goal-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal-due-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.goal-due-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  margin: 0 0 4px;
}

.goal-due-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.goal-due-list li {
  padding: 3px 0;
  border-top: 1px solid #fde68a;
}

.goal-due-list li:first-child {
  border-top: none;
}