/* Convergent — prototipo de la app entera (simplicity bar: Tiimo + Indy).
   Tokens copiados del tema vivo "C" para que la comparación sea justa. */

:root {
  --paper: #f6f7f3;
  --raised: #ffffff;
  --sunken: rgba(255, 255, 255, 0.55);
  --rule: rgba(22, 32, 31, 0.08);
  --rule-strong: rgba(22, 32, 31, 0.18);
  --ink: #23292b;
  --ink-soft: rgba(22, 32, 31, 0.62);
  --ink-faint: rgba(22, 32, 31, 0.4);
  --on-ink: #ffffff;
  --signal: #e8590c;
  --signal-wash: #fdeade;
  --rhyme: #c2a05a;
  --ever: #0b4a41;
  --ever-wash: #e7f1e9;
  --stage-ideate: #c2a05a;
  --stage-incubate: #8f8cc0;
  --stage-execute: #5a9a6c;
  --stage-resting: #9aa098;
  --night: #0b101c;
  --night-2: #131b2c;
  --night-line: #253352;
  --night-ivory: #e9e7df;
  --night-dim: #8291a8;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(45,55,75,.04),
    0 10px 26px -14px rgba(55,70,100,.14), 0 26px 60px -36px rgba(55,70,100,.16);
  --r-sm: .75rem; --r-md: 1.125rem; --r-lg: 1.625rem;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: linear-gradient(180deg, #f3f4f4 0%, #f7f7f4 60%, #f7f5ee 100%) fixed;
  color: var(--ink);
  font-family: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 8.5rem;
}
body.night { background: radial-gradient(120% 90% at 50% 0%, #16203a 0%, var(--night) 70%); color: var(--night-ivory); }

.wrap { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 0; }
.wide { max-width: 62rem; }

/* ---- type roles (mismos nombres que la app) ---- */
.ceremony { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.display { font-weight: 600; letter-spacing: -.015em; }
.voice { font-size: 1.0625rem; line-height: 1.6; }
.kicker { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint); margin: 0; }
.etch { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.stack > * + * { margin-top: .65rem; }
.mt1 { margin-top: .5rem } .mt2 { margin-top: 1rem } .mt3 { margin-top: 1.75rem } .mt4 { margin-top: 2.75rem }

/* ---- cards ---- */
.card {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 1.5rem 1.5rem; position: relative; overflow: hidden;
}
.card + .card { margin-top: 1rem; }
.card.flat { box-shadow: none; border-radius: var(--r-md); }
.sun::before {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 120%; z-index: 0;
  background: radial-gradient(50% 60% at 70% 20%, rgba(255,214,150,.45), transparent 70%);
}
.card > * { position: relative; z-index: 1; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.sundot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd98f, #f0a03c);
  box-shadow: 0 0 0 4px rgba(240,160,60,.22); animation: breath 3.2s ease-in-out infinite; }
@keyframes breath { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.12); opacity: .8 } }

/* ---- buttons ---- */
button { font: inherit; cursor: pointer; }
.btn { border-radius: 999px; border: 1px solid transparent; padding: .7rem 1.6rem; font-size: 15px; font-weight: 600;
  background: var(--ink); color: var(--on-ink); transition: opacity .18s var(--ease); }
.btn:hover { opacity: .85; }
.btn.ghost { background: var(--raised); color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--ink-faint); opacity: 1; }
.btn.sm { padding: .45rem 1.05rem; font-size: 13px; }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--ink-faint); font-size: 13px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-strong); }
.link:hover { color: var(--ink-soft); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ---- chips ---- */
.chip { border-radius: 999px; border: 1px solid var(--rule); background: rgba(255,255,255,.6);
  padding: .45rem .85rem; font-size: 12.5px; color: var(--ink-soft); text-align: left; }
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }

.pill-stage { display: inline-flex; align-items: center; gap: .5rem; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }

/* ---- lists ---- */
.bullets { margin: .5rem 0 0; padding-left: 1.1rem; }
.bullets li { margin-top: .35rem; }
.lines > div { padding: .7rem 0; border-top: 1px solid var(--rule); display: flex; gap: 1rem; }
.lines > div:first-child { border-top: 0; }
.lines .lbl { flex: 0 0 8.5rem; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; padding-top: .18rem; }

input[type=text], textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 999px; padding: .75rem 1.1rem;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--raised);
}
textarea { border-radius: var(--r-md); resize: vertical; }
input:focus, textarea:focus { outline: 1px solid var(--signal); outline-offset: 1px; }

/* ---- the omnipresent talk pill (Indy) ---- */
.talkbar { position: fixed; left: 0; right: 0; bottom: 4.6rem; z-index: 40; pointer-events: none; }
.talkbar .inner { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; pointer-events: auto; }
.talkbar form { display: flex; align-items: center; gap: .55rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: 999px; box-shadow: var(--shadow-card); padding: .35rem .35rem .35rem 1.1rem; }
.talkbar input { border: 0; box-shadow: none; padding: .55rem 0; background: none; }
.talkbar .mic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--paper); display: grid; place-items: center; color: var(--ink-soft); }
.talkbar .send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: var(--on-ink); }

/* ---- bottom nav ---- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: rgba(246,247,243,.92);
  backdrop-filter: blur(12px); border-top: 1px solid var(--rule); }
.nav .inner { max-width: 46rem; margin: 0 auto; display: flex; }
.nav a { flex: 1; text-align: center; padding: .8rem .3rem 1.1rem; font-size: 11px; letter-spacing: .06em;
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
.nav a.on { color: var(--ink); }
.nav a .g { display: block; font-size: 17px; margin-bottom: .2rem; letter-spacing: 0; }
body.night .nav { background: rgba(11,16,28,.9); border-color: var(--night-line); }
body.night .nav a { color: var(--night-dim); } body.night .nav a.on { color: var(--night-ivory); }
body.night .talkbar form { background: var(--night-2); border-color: var(--night-line); }
body.night .talkbar input { color: var(--night-ivory); }

/* ---- proto banner ---- */
.protobar { background: #1b2b2a; color: #dfe7e2; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .06em; text-align: center; padding: .5rem 1rem; }
.protobar b { color: #ffd08a; font-weight: 600; }
.protobar select { font: inherit; background: transparent; color: #ffd08a; border: 1px solid #3a4c4a; border-radius: 6px; padding: 1px 4px; }

/* ---- misc ---- */
.rule { height: 1px; background: var(--rule); margin: 1.75rem 0; border: 0; }
.tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .15rem .55rem; color: var(--ink-faint); }
.new { color: var(--signal); border-color: rgba(232,89,12,.35); background: var(--signal-wash); }
details > summary { cursor: pointer; list-style: none; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
details > summary:hover { color: var(--ink-soft); }
.timer { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-faint); }
.big-timer { font-family: 'IBM Plex Mono', monospace; font-size: 4rem; letter-spacing: -.02em; }
.center { text-align: center; }
.grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.progress { height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ever); }
.night-card { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; }
.orbit { color: var(--night-dim); }
@media (max-width: 560px) { .lines .lbl { flex-basis: 6.5rem; } .wrap { padding-top: 1.25rem; } }

/* ---- execute: timeline + road ---- */
.timeline { display: flex; gap: 0; margin-top: 1.1rem; }
.timeline .ms { flex: 1; position: relative; padding-top: 1.4rem; }
.timeline .ms::before { content: ''; position: absolute; top: .3rem; left: 0; right: 0; height: 2px; background: var(--rule); }
.timeline .ms.done::before, .timeline .ms.live::before { background: var(--stage-execute); }
.timeline .ms i { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--raised); border: 2px solid var(--rule-strong); }
.timeline .ms.done i { background: var(--stage-execute); border-color: var(--stage-execute); }
.timeline .ms.live i { background: var(--raised); border-color: var(--stage-execute); box-shadow: 0 0 0 4px rgba(90,154,108,.18); }
.timeline .ms b { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; padding-right: .6rem; }
.timeline .ms span { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: .15rem; }

.step { display: flex; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.step:first-child { border-top: 0; }
.step .box { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--rule-strong);
  margin-top: .15rem; background: var(--raised); display: grid; place-items: center; font-size: 11px; color: var(--ink-faint); }
.step .box.done { background: var(--stage-execute); border-color: var(--stage-execute); color: #fff; }
.step .box.prop { border-style: dashed; }
.step .body { flex: 1; min-width: 0; }
.step .meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .05em; color: var(--ink-faint); margin-top: .2rem; }
.step.mine { background: linear-gradient(90deg, rgba(232,89,12,.05), transparent 60%); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }
.step.mine .box { border-color: var(--signal); }

.money-bar { height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; display: flex; margin-top: .8rem; }
.money-bar i { display: block; height: 100%; }
.money-bar .spent { background: var(--ever); }
.money-bar .held { background: var(--stage-execute); }
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .6rem; font-size: 12px; color: var(--ink-soft); }
.legend b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--ink); }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; }

.seg { display: flex; gap: .3rem; background: var(--sunken); border: 1px solid var(--rule); border-radius: 999px; padding: .25rem; margin-top: 1.25rem; overflow-x: auto; }
.seg button { flex: 1; white-space: nowrap; border: 0; background: none; border-radius: 999px; padding: .45rem .9rem;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.seg button.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(45,55,75,.08); }

.escal { border-left: 3px solid var(--signal); }
.who { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; color: var(--ink-soft); }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--ever-wash); color: var(--ever);
  display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.op-shell { background: #101617; color: #e7ece9; min-height: 100vh; }
.protobar a { color: #ffd08a; text-decoration: none; border-bottom: 1px solid rgba(255,208,138,.35); }
.protobar a:hover { border-color: #ffd08a; }

/* QA: gramática honesta del timeline — pasado sólido, actual anillo, futuro gris */
.timeline .ms.next::before, .timeline .ms.later::before { background: var(--rule); }
.timeline .ms.live::before { background: linear-gradient(90deg, var(--stage-execute) 0 50%, var(--rule) 50% 100%); }
.timeline .ms.later b, .timeline .ms.next b { color: var(--ink-soft); font-weight: 500; }

/* QA: la columna de etiqueta partía en dos líneas y descuadraba la fila en móvil */
.lines > div { flex-wrap: wrap; }
.lines .lbl { flex-basis: 100%; padding-top: 0; padding-bottom: .25rem; }
@media (min-width: 620px) { .lines > div { flex-wrap: nowrap; } .lines .lbl { flex: 0 0 9.5rem; padding-top: .18rem; padding-bottom: 0; } }

/* QA: contraste en la sala del operador */
.op-primary { background: #e7ece9; color: #101617; }
.op-ghost { background: transparent; color: #e7ece9; border-color: #4a5f59; }
.op-shell { padding-bottom: 4rem; }
body:has(.op-shell) { background: #101617; }

/* QA: "Other ways" no debe pesar como un botón */
.step details > summary { padding: .45rem .2rem; }
.seg button { flex: 0 0 auto; }