/* ==========================================================================
   VERDADES FINANCIERAS DURAS — Editorial newsprint reckoning
   --------------------------------------------------------------------------
     A financial broadsheet that doesn't lie.
       · LIGHT  → salmon paper, claret ink, FT-style editorial
       · DARK   → midnight ledger, parchment text, amber-gold accent
   ========================================================================== */

/* ---------- DARK · midnight ledger (default) ---------- */
:root {
  --bg-primary:    #0c0a09;
  --bg-secondary:  #14110f;
  --bg-card:       #1a1714;
  --bg-input:      #0c0a09;
  --text-primary:  #f2e9d8;
  --text-secondary:#a39882;
  --text-muted:    #6b6253;
  --accent:        #ffb627;            /* amber-gold */
  --accent-2:      #c1440e;            /* burnt orange */
  --accent-hover:  #ffd166;
  --danger:        #c1440e;
  --success:       #6a994e;
  --warning:       #e9c46a;
  --border:        #2a241f;
  --rule:          #3a322a;            /* heavier rule line */
  --shadow:        rgba(0, 0, 0, 0.55);
  --paper-tint:    rgba(255, 182, 39, 0.04);
  --radius:        0px;
  --radius-lg:     2px;
  --font-display:  'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:     'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ---------- LIGHT · salmon paper ---------- */
body.light {
  --bg-primary:    #fff1e5;            /* FT salmon */
  --bg-secondary:  #fbe7d3;
  --bg-card:       #fff7ec;
  --bg-input:      #ffffff;
  --text-primary:  #1a1610;
  --text-secondary:#4a4136;
  --text-muted:    #8b7d6b;
  --accent:        #990f3d;            /* claret */
  --accent-2:      #c8102e;            /* warm red */
  --accent-hover:  #6e0a2c;
  --danger:        #c8102e;
  --success:       #2e6f40;
  --warning:       #b8860b;
  --border:        rgba(26, 22, 16, 0.18);
  --rule:          rgba(26, 22, 16, 0.35);
  --shadow:        rgba(26, 22, 16, 0.06);
  --paper-tint:    rgba(153, 15, 61, 0.05);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & PAPER
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum", "tnum" off;
  background: var(--bg-primary);
  color: var(--text-primary);
  /* subtle paper grain — a single SVG noise inline, no extra request */
  background-image:
    radial-gradient(circle at 20% 10%, var(--paper-tint), transparent 60%),
    radial-gradient(circle at 80% 90%, var(--paper-tint), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection { background: var(--accent); color: var(--bg-primary); }

/* ==========================================================================
   HEADER · MASTHEAD
   ========================================================================== */
.header {
  position: relative;
  background: transparent;
  border: none;
  padding: 1.4rem clamp(1rem, 4vw, 3rem) 2rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

/* top + bottom hairline rules with a centered trim */
.header::before,
.header::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  right: clamp(1rem, 4vw, 3rem);
  height: 1px;
  background: var(--rule);
}
.header::before { top: 3.4rem; }
.header::after  { display: none; }

.masthead-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 clamp(5rem, 8vw, 6.5rem) 1rem 0;   /* keep clear of the toggle */
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.masthead-edition::before { content: "§ "; color: var(--accent); }
.masthead-tag::after { content: " ●"; color: var(--accent); margin-left: 0.3rem; }

.header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary);
  margin: 0.2rem auto 0.6rem;
  max-width: 16ch;
}

.header h1 em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

.header p,
#header-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--text-secondary);
  margin-top: 0.5rem;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

#header-subtitle .quote-mark {
  font-family: var(--font-display);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.25em;
  color: var(--accent);
  margin: 0 0.05em;
}

.header-author {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-top: 1rem !important;
}
.header-author a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.header-author a:hover { color: var(--accent); }

/* Theme toggle — repositioned, editorial styling */
.theme-toggle {
  position: absolute !important;
  top: 1.1rem !important;
  right: clamp(1rem, 4vw, 3rem) !important;
  width: auto !important;
  height: auto !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  opacity: 1 !important;
  z-index: 10;
}
.theme-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--paper-tint) !important;
}
.theme-icon { font-size: 0.95rem !important; }

/* ==========================================================================
   NAV · SECCIONES (centered, numbered, ruled)
   ========================================================================== */
.tool-nav {
  counter-reset: nav;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  padding: 0.4rem clamp(0.5rem, 3vw, 2rem);
  margin: 0 auto;
  overflow: visible;
}

.tool-nav::-webkit-scrollbar { display: none; }

.nav-item {
  counter-increment: nav;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.nav-item::before {
  content: counter(nav, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  align-self: flex-start;
  margin-top: 0.1rem;
  transition: color 0.2s ease;
}

.nav-item .nav-icon { display: none; }      /* ditch the emojis — too "AI" */
.nav-item .nav-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.nav-item:hover {
  color: var(--text-primary);
  background: transparent;
}
.nav-item:hover::before { color: var(--accent); }

.nav-item.active {
  color: var(--text-primary);
  background: transparent;
  border-bottom-color: var(--accent);
}
.nav-item.active::before { color: var(--accent); }
.nav-item.active .nav-label { font-style: normal; font-weight: 600; }

/* ==========================================================================
   TOOL INTRO · big editorial display
   ========================================================================== */
.tool-section { animation: tool-fade 0.45s ease both; }
@keyframes tool-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.tool-intro {
  text-align: left;
  margin: 0 auto 2rem;          /* center the block in any container */
  max-width: 38rem;
  padding: 0.5rem 0 1.3rem;
  border-bottom: 1px solid var(--rule);
}

/* Sidebar-layout tools place the intro outside the centered grid; give it
   the same horizontal breathing room as the grid so it feels grounded. */
.tool-section > .tool-intro {
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
  max-width: calc(38rem + 2 * clamp(1rem, 4vw, 2.5rem));
}

.tool-intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  position: relative;
}

.tool-intro h2::before {
  content: "—";
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.tool-intro p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   CARDS · hairline broadsheet
   ========================================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: none;
  position: relative;
}

.card + .card { margin-top: 1rem; }

.card-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.card-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   FORMS · editorial inputs
   ========================================================================== */
.form-group label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

input[type="number"],
input[type="text"],
select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.65rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 0.2s, background 0.2s;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Toggle pills → editorial tabs */
.toggle-group {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2px;
}
.toggle-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.55rem 0.8rem;
  border-radius: 0;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.toggle-btn.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  font-weight: 600;
}
.toggle-btn:hover:not(.active) {
  background: var(--paper-tint);
  color: var(--text-primary);
}

/* Slider */
input[type="range"] {
  height: 2px;
  background: var(--rule);
  border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  width: 14px; height: 14px;
  border-radius: 0;
  background: var(--accent);
  border: none;
  transform: rotate(45deg);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 0;
  background: var(--accent);
  border: none;
  transform: rotate(45deg);
}
.slider-value {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Add button */
.btn-add {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px dashed var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 0.7rem 1rem;
  margin-top: 0.8rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper-tint);
}

/* Salary / total amounts → tabular numbers, big serif */
.salary-result .amount,
.total-bar .amount,
.amount {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================================
   LAYOUT · let it breathe
   ========================================================================== */
.layout-sidebar,
.layout-centered {
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  gap: 2rem;
}

/* ==========================================================================
   FOOTER · colophon
   ========================================================================== */
.footer {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
}
.footer a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.footer-more { margin-top: 0.6rem; }

/* ==========================================================================
   PORTADA · newspaper front page
   ========================================================================== */
.portada {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem;
}

/* Top strip — masthead-meta echo */
.portada-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.portada-strip-l::before { content: "§ "; color: var(--accent); }
.portada-strip-r::after  { content: " ●"; color: var(--accent); }

/* Generic story-card reset (overrides default <button> chrome) */
.story-card {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  position: relative;
  transition: opacity 0.25s ease;
}
.story-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.story-kicker,
.story-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.story-num { color: var(--text-muted); letter-spacing: 0.18em; }

.story-headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  transition: color 0.2s;
}
.story-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

.story-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  max-width: 56ch;
}

.story-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 0 0 2px;
  transition: background 0.2s, color 0.2s, padding 0.2s;
}

.story-card:hover .story-headline { color: var(--accent); }
.story-card:hover .story-cta {
  background: var(--accent);
  color: var(--bg-primary);
  border-bottom-color: transparent;
  padding: 2px 6px;
}

/* ---- Lead story ---- */
.story-lead {
  position: relative;
  padding: 2.2rem 0 2.5rem;
  border-bottom: 3px double var(--rule);
  margin-bottom: 0;
}
.story-lead::before {
  content: "Nº 01";
  position: absolute;
  top: 1.4rem;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.story-lead .story-headline {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  max-width: 18ch;
  margin-bottom: 1.1rem;
}
.story-lead .story-dek {
  font-size: 1.15rem;
  max-width: 60ch;
}

/* ---- Featured stories (2-up) ---- */
.story-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.story-features > .story {
  padding: 2rem 0;
  position: relative;
}
.story-features > .story:first-child {
  padding-right: 2rem;
  border-right: 1px solid var(--rule);
}
.story-features > .story:last-child {
  padding-left: 2rem;
}
.story-features .story-headline {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  max-width: 14ch;
}

/* ---- Briefs section divider label ---- */
.briefs-label {
  position: relative;
  text-align: center;
  margin: 2.5rem 0 0.5rem;
}
.briefs-label span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.briefs-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}

/* ---- Briefs grid ---- */
.story-briefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 0;
}
.story-briefs > .story {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: none;
}
.story-briefs .story-headline {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.1;
  margin-bottom: 0.6rem;
  font-variation-settings: "opsz" 36, "SOFT" 30;
}
.story-briefs .story-dek {
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* Foot caption */
.portada-foot {
  text-align: center;
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.portada-foot span { color: var(--accent); margin: 0 0.6rem; }

/* The portada is the front page; suppress the section's animation duplication
   on initial load — it inherits .tool-section { animation: tool-fade } already */

/* The header h1 is now a return-home link */
.header h1 {
  cursor: pointer;
  user-select: none;
}
.header h1:hover em { color: var(--accent-hover); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .layout-sidebar { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .tool-intro h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  .story-briefs { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; }
}

@media (max-width: 600px) {
  html { font-size: 15px; }

  .header { padding: 1rem 1rem 1.5rem; }
  .header::before { top: 3rem; }
  .masthead-meta {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    padding: 0 3.4rem 0.7rem 0;
    margin-bottom: 1.2rem;
  }
  .header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
    letter-spacing: -0.03em;
    max-width: 12ch;
  }
  #header-subtitle { font-size: 0.95rem; max-width: 28ch; }
  .header-author { font-size: 0.62rem !important; letter-spacing: 0.18em; }

  .theme-toggle {
    top: 0.7rem !important;
    right: 0.8rem !important;
    padding: 0.3rem 0.55rem !important;
  }

  /* nav: stay centered but allow horizontal scroll if it can't fit */
  .tool-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem 0.5rem;
  }
  .nav-item {
    scroll-snap-align: start;
    padding: 0.7rem 0.7rem;
    flex-shrink: 0;
  }
  .nav-item .nav-label { font-size: 0.85rem; }
  .nav-item::before { font-size: 0.6rem; }

  .layout-sidebar,
  .layout-centered { padding: 1.2rem 1rem; gap: 1.2rem; }
  .card { padding: 1.1rem; }
  .tool-intro { padding-bottom: 1rem; margin-bottom: 1.2rem; }

  input[type="number"],
  input[type="text"],
  select { font-size: 16px; }      /* prevent iOS auto-zoom */
}

@media (max-width: 600px) {
  .portada { padding: 1rem 1rem 3rem; }
  .portada-strip {
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-align: left;
  }
  .story-lead { padding: 1.5rem 0 1.8rem; }
  .story-lead::before { display: none; }
  .story-lead .story-headline { max-width: none; }

  .story-features { grid-template-columns: 1fr; }
  .story-features > .story:first-child {
    padding: 1.6rem 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .story-features > .story:last-child { padding: 1.6rem 0 0.5rem; }
  .story-features .story-headline { max-width: none; }

  .story-briefs { grid-template-columns: 1fr; column-gap: 0; }

  .briefs-label { margin-top: 1.8rem; }
}

@media (max-width: 380px) {
  .masthead-tag { display: none; }
  .nav-item { padding: 0.6rem 0.55rem; gap: 0.3rem; }
  .nav-item .nav-label { font-size: 0.8rem; }
}

/* Touch */
@media (pointer: coarse) {
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
  input[type="range"] { height: 4px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   MOVIMIENTO Y TINTAS — capa compartida
   --------------------------------------------------------------------------
   Va al final de themes.css a propósito: styles.css trae todavía el sistema
   viejo (cian sobre azul marino, esquinas de 8px, Segoe UI) y esta hoja es la
   que manda. Todo lo de aquí abajo existe para que no se cuele nada de aquello.
   ========================================================================== */

:root {
  /* --- Duraciones. Tres, no una: la respuesta al dedo tiene que ser casi
         instantánea, y un revelado necesita tiempo para leerse. --- */
  --t-toque:  110ms;   /* hover, pulsación: feedback inmediato */
  --t-cambio: 240ms;   /* un valor que cambia, un panel que aparece */
  --t-pieza:  420ms;   /* cambiar de calculadora, revelar un resultado */
  --escalon:   16ms;   /* separación entre elementos de una secuencia */

  /* --- Curvas. Salida para lo que llega (frena al posarse), entrada para lo
         que se va, lineal para el progreso constante. --- */
  --sal:    cubic-bezier(0.22, 1, 0.36, 1);
  --ent:    cubic-bezier(0.55, 0, 1, 0.45);
  --papel:  cubic-bezier(0.34, 1.28, 0.64, 1);   /* rebote muy corto */

  /* styles.css usa var(--transition) en 16 sitios; se define aquí para poder
     borrar su bloque :root entero sin dejar nada huérfano. */
  --transition: var(--t-cambio) var(--sal);

  /* --- Tintas de categoría. Sustituyen a la paleta plana de 2013
         (#e74c3c, #2ecc71, #3498db…) que no pinta nada en un periódico.
         Cada una lleva su color de texto ya comprobado a 4.5:1. --- */
  --cat-1: #c1440e;  --cat-1-fg: #fdf8ef;   /* naranja quemado */
  --cat-2: #a8324a;  --cat-2-fg: #fdf8ef;   /* clarete */
  --cat-3: #7d8c4e;  --cat-3-fg: #17130f;   /* oliva */
  --cat-4: #3d7a78;  --cat-4-fg: #fdf8ef;   /* verdigrís */
  --cat-5: #5a7099;  --cat-5-fg: #fdf8ef;   /* azul pizarra */
  --cat-6: #8a5f9e;  --cat-6-fg: #fdf8ef;   /* ciruela */
  --cat-7: #6b8f71;  --cat-7-fg: #17130f;   /* salvia */
  --cat-8: #6e2233;  --cat-8-fg: #fdf8ef;   /* vino */

  /* Los días que te quedan para ti llevan el color de la marca: es el premio
     de toda la herramienta, no un genérico «correcto» en verde. */
  --libre:    var(--accent);
  --libre-fg: #17130f;

  --celda-vacia: var(--bg-card);
}

body.light {
  --cat-1: #a8380c;  --cat-1-fg: #fdf8ef;
  --cat-2: #a6791f;  --cat-2-fg: #17130f;
  --cat-3: #5f6d34;  --cat-3-fg: #fdf8ef;
  --cat-4: #2c5c5a;  --cat-4-fg: #fdf8ef;
  --cat-5: #3a5075;  --cat-5-fg: #fdf8ef;
  --cat-6: #4a3a6b;  --cat-6-fg: #fdf8ef;
  --cat-7: #4a7256;  --cat-7-fg: #fdf8ef;
  --cat-8: #5e2409;  --cat-8-fg: #fdf8ef;
  --libre-fg: #fff1e5;
}

/* ==========================================================================
   ENTRADAS — que parezcan tocables
   ========================================================================== */

/* Antes se veían como texto apagado dentro de una caja negra: el campo del
   sueldo y el de cada gasto parecían deshabilitados. */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-color: var(--rule);
  transition: border-color var(--t-toque) var(--sal),
              background-color var(--t-toque) var(--sal),
              box-shadow var(--t-toque) var(--sal);
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover {
  border-color: var(--accent-hairline);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* El foco por teclado nunca se quita, solo se dibuja mejor. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;              /* Firefox lo baja a .54 por su cuenta */
}

/* ==========================================================================
   PULSAR — el gesto tiene que notarse
   ========================================================================== */

button {
  transition: background-color var(--t-toque) var(--sal),
              color var(--t-toque) var(--sal),
              border-color var(--t-toque) var(--sal),
              transform var(--t-toque) var(--sal);
}
button:active:not(:disabled) { transform: translateY(1px); }

/* Objetivos táctiles: la norma es 44x44. El interruptor de tema medía 27x25. */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-item  { min-height: 44px; }
.btn-delete {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-toque) var(--sal), background-color var(--t-toque) var(--sal);
}
.btn-delete:hover { color: var(--danger); background: var(--hover-tint); }

/* ==========================================================================
   NAVEGACIÓN — el subrayado se desliza
   ========================================================================== */

.nav-item { position: relative; }
.nav-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-cambio) var(--sal);
}
.nav-item:hover::after  { transform: scaleX(0.35); }
.nav-item.active::after { transform: scaleX(1); }

/* ==========================================================================
   CAMBIO DE CALCULADORA
   ========================================================================== */

/* Sustituye a tool-fade: entra con algo más de recorrido y frena al llegar. */
.tool-section.active {
  animation: entra-pieza var(--t-pieza) var(--sal) both;
}
@keyframes entra-pieza {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   CALENDARIO — las celdas cambian de color, no se reconstruyen
   ========================================================================== */

.day-cell {
  transition: background-color var(--t-cambio) var(--sal),
              color var(--t-cambio) var(--sal),
              transform var(--t-toque) var(--sal);
}
.day-cell:not(.empty):hover { transform: scale(1.04); z-index: 2; }

/* Sin sueldo ni gastos no se pinta el mes entero de un color: eso afirmaba un
   resultado que el usuario todavía no ha pedido. Queda en espera. */
.day-cell.en-espera {
  background: var(--celda-vacia);
  color: var(--text-muted);
}

/* Revelado escalonado. Solo se dispara al abrir la herramienta o al pasar de
   vacío a lleno — no en cada tecla, que marearía. */
.day-cell.revelar {
  animation: revelar-celda var(--t-cambio) var(--sal) backwards;
  animation-delay: calc(var(--i, 0) * var(--escalon));
}
@keyframes revelar-celda {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   BARRAS Y CIFRAS
   ========================================================================== */

.progress-segment {
  transition: width var(--t-pieza) var(--sal),
              background-color var(--t-cambio) var(--sal);
}

/* Las cifras grandes las cuenta motion.js; aquí solo se reserva el sitio para
   que el número al crecer no empuje el resto de la caja. */
.cuenta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Un valor que acaba de cambiar parpadea una vez en el color de marca. */
.recien-cambiado { animation: latido var(--t-pieza) var(--sal); }
@keyframes latido {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}

.legend-item,
.legend-color {
  transition: background-color var(--t-cambio) var(--sal);
}

/* ==========================================================================
   REVELADO AL ENTRAR EN PANTALLA — portada y paneles de resultado
   ========================================================================== */

.revelable {
  opacity: 0;
  transform: translateY(14px);
}
.revelable.dentro {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-pieza) var(--sal),
              transform var(--t-pieza) var(--sal);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ==========================================================================
   MENOS MOVIMIENTO
   --------------------------------------------------------------------------
   Ya había una regla para esto más arriba; se repite aquí porque las de este
   bloque son posteriores y si no, ganarían. motion.js hace su propia
   comprobación: apagar animaciones en CSS no detiene un contador en JS.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelable { opacity: 1; transform: none; }
  .day-cell:not(.empty):hover { transform: none; }
}


/* ==========================================================================
   AJUSTES — coherencia de color y peso visual
   ========================================================================== */

/* Los días «para ti» del calendario se pintan con el acento; la frase que los
   cuenta los pintaba de verde. El mismo concepto en dos colores dentro de la
   misma pantalla: ahora van los dos del color de la marca. */
.highlight-success { color: var(--libre); }
.highlight         { color: var(--text-primary); font-weight: 600; }
.highlight-danger  { color: var(--accent-2); }

/* Un total de gastos por debajo del sueldo no es un logro que celebrar en
   verde: es el estado normal. Solo se tiñe cuando se pasa. */
.amount.under-budget { color: var(--text-primary); }
.amount.over-budget  { color: var(--danger); }

/* Compartir es secundario. Era un bloque macizo de ámbar de 900 px de ancho,
   lo más llamativo de la página, por encima del propio resultado. */
.share-btn {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-hairline);
}
.share-btn:hover {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

/* «Alimentación» no cabía y se leía «Alimentació». */
.category-item { flex-wrap: wrap; }
.category-item .cn { flex: 1 1 8.5rem; min-width: 8.5rem; }
.category-item .ca { flex: 0 0 5.5rem; text-align: right; }

/* La barra vacía era una píldora gris flotando: sin datos no hay nada que
   medir, así que se retira sola. */
.progress-bar:empty { opacity: 0; }
.progress-bar { transition: opacity var(--t-cambio) var(--sal); }

/* El swatch del fin de semana en la leyenda no se distinguía del fondo. */
.legend-color { border: 1px solid var(--border); }


/* ==========================================================================
   ANCHO — dos columnas cuando la pantalla da de si
   ========================================================================== */

@media (min-width: 1024px) {
  .layout-centered {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
    max-width: 64rem;
  }

  /* Por defecto todo a la columna de datos... */
  .layout-centered > * { grid-column: 1; }

  /* ...menos el titular, que cruza las dos. */
  .layout-centered > .tool-intro { grid-column: 1 / -1; }

  /* ...y el resultado, que se va a la derecha y acompaña mientras escribes.
     Se usa `span` y no `/ -1` porque las filas son implícitas: un `-1` ahí se
     resuelve contra la rejilla explícita (la fila 1) en vez de contra la
     última, y el panel acabaría en la fila de arriba. */
  .layout-centered > [id$="-result-card"],
  .layout-centered > [id$="-results"],
  .layout-centered > #taxi-goals-card {
    grid-column: 2;
    /* `span 3` y no `span 50`: la rejilla tiene row-gap, así que cada fila de
       más son 32 px de página vacía. Ninguna herramienta pasa de 3 tarjetas. */
    grid-row: 2 / span 3;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    margin-bottom: 0;
  }

  /* Un panel de resultado vacío no debe abrir un hueco a la derecha. */
  .layout-centered > [id$="-results"]:empty { display: none; }
}

/* Entre 700 y 1024 se sigue en una columna, pero sin desaprovechar tanto. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .layout-centered { max-width: 44rem; }
}


/* ==========================================================================
   RELOJ DE LA VIDA — filas legibles y espera visible
   ========================================================================== */

@media (min-width: 700px) {
  .reloj-persona-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem 7rem 5rem 8.5rem 44px;
    align-items: center;
    gap: 0.5rem;
  }


  .reloj-persona-item input[type="number"] { width: 100%; }
  .reloj-persona-item select { width: 100%; }

  /* Con la cabecera puesta, los «años» y «esp.» sueltos entre campos sobran. */
  .reloj-persona-item .reloj-unit { display: none; }
}

/* La tarjeta de quien menos tiempo le queda va primero y se nota que va primero. */
.reloj-result-card.es-primera {
  border-color: var(--accent-hairline);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Antes, sin edad, esto quedaba vacío y la página parecía rota. */
.reloj-espera {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--border);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
}

/* El ámbar mide tiempo GASTADO, que es lo que duele; lo que queda va apagado.
   Estaba al revés: el tramo consumido brillaba como si fuera el premio. */
.reloj-bar-spent { background: var(--accent-2); }
.reloj-bar-left  { background: var(--accent); }


/* ==========================================================================
   CAMPOS QUE SE ETIQUETAN SOLOS
   --------------------------------------------------------------------------
   La fila de personas eran cuatro números seguidos sin decir cuál era cuál, con
   un «esp.» que no se explicaba en ninguna parte. Con el rótulo encima de cada
   campo se entiende a cualquier ancho, y no hace falta cabecera aparte.
   ========================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.campo > span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campo > input,
.campo > select { width: 100%; min-width: 0; }

/* Dos campos por fila y no cuatro: en la columna de datos (336 px) cuatro dejaban
   60 px a cada uno, y los rótulos salían cortados («VIVIRÁ…», «añ»). */
.reloj-persona-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  align-items: end;
  gap: 0.5rem 0.6rem;
  padding: 0.6rem 0.5rem;
}
/* El nombre ocupa su propia línea: es lo único que se lee de un vistazo. */
.reloj-persona-item .campo-ancho { grid-column: 1 / -1; }
.reloj-persona-item input[type="number"] { width: 100%; text-align: right; }
/* Borrar acompaña a las dos filas de campos, no a una sola. */
.reloj-persona-item .btn-delete { grid-column: 3; grid-row: 2 / span 2; align-self: center; }

/* Si aun así no cupiera, el rótulo se parte en dos líneas antes que cortarse. */
.reloj-persona-item .campo > span { white-space: normal; }

/* ==========================================================================
   MOVIL — desbordes y objetivos tactiles
   ========================================================================== */

/* Un canvas dibujado a 640 px de ancho sacaba scroll horizontal en un movil de
   375. El atributo width del canvas es su resolucion, no su tamano en pantalla. */
canvas { max-width: 100%; height: auto; }

/* Con el dedo, 44x44 es el minimo. Se limita a punteros gruesos: en escritorio,
   con raton, esa altura infla los formularios sin que haga falta. */
@media (pointer: coarse) {
  button,
  select,
  input:not([type="range"]):not([type="color"]),
  .btn-add,
  .nav-item {
    min-height: 44px;
  }
  .campo > input,
  .campo > select { min-height: 44px; }
}