/* truopus app — sobre tokens.css. Ningún color literal: todo sale de la marca.
   Morado es el lado del cliente (compra), cielo el del developer (construye). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 15px/24px var(--font-sans);
}
a { color: var(--marca); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
code { font-family: var(--font-mono); font-size: 13px; }
h1 { font-size: 28px; line-height: 36px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 var(--space-3); }
h3 { font-size: 15px; line-height: 22px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); max-width: 72ch; }
.tenue, .sub { color: var(--texto-tenue); }
.sub { display: block; font-size: 13px; line-height: 18px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: var(--space-4); top: var(--space-2); z-index: 10; background: var(--fondo); padding: var(--space-2) var(--space-3); }

.marco { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.marco.angosto { max-width: 620px; }
@media (min-width: 720px) { .marco { padding-inline: var(--space-5); } }
#vista:focus { outline: none; }
.cargando { padding: var(--space-7) var(--space-4); color: var(--texto-tenue); text-align: center; }

/* --- barra ---------------------------------------------------------------- */
.barra { border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 0; z-index: 5; }
.barra-marco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); }
.firma { display: inline-flex; }
.logo { height: 30px; width: auto; display: block; }
.logo.oscuro { display: none; }
[data-theme="oscuro"] .logo.claro { display: none; }
[data-theme="oscuro"] .logo.oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .logo.claro { display: none; }
  :root:not([data-theme="claro"]) .logo.oscuro { display: block; }
}
.nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); order: 3; width: 100%; }
.nav a { color: var(--texto-tenue); text-decoration: none; font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--texto); }
.nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--marca); }
@media (min-width: 900px) { .nav { order: 0; width: auto; } }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.quien { font-size: 13px; color: var(--texto-tenue); padding-left: var(--space-3); border-left: 3px solid var(--borde); }
.quien b { color: var(--texto); font-weight: 500; }
.quien.compra { border-left-color: var(--lado-compra); }
.quien.construye { border-left-color: var(--lado-construye); }

/* --- botones y formularios ------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid transparent;
  border-radius: var(--radio-sm); font: 500 14px/20px var(--font-sans); cursor: pointer;
  text-decoration: none; transition: background-color .15s, border-color .15s;
}
.boton:disabled { opacity: .55; cursor: progress; }
.boton.primaria { background: var(--marca-solida); color: var(--blanco); }
.boton.primaria:hover { background: var(--morado-800); }
.boton.obra { background: var(--lado-construye); color: var(--tinta-950); }
.boton.obra:hover { background: var(--cielo-500); }
.boton.secundaria { background: transparent; color: var(--marca); border-color: var(--borde-control); }
.boton.secundaria:hover { border-color: var(--marca); background: var(--marca-tenue); }
.boton.fantasma { background: transparent; color: var(--texto-tenue); min-height: 34px; padding: var(--space-1) var(--space-3); }
.boton.fantasma:hover { color: var(--texto); background: var(--superficie); }
.boton.peligro { background: transparent; color: var(--alerta); border-color: var(--alerta); }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }

.form { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.form-pie { display: flex; gap: var(--space-3); }
.campo { display: grid; gap: var(--space-1); }
.campo .etq { font-weight: 500; font-size: 14px; }
.campo .ayuda { font-size: 13px; line-height: 18px; color: var(--texto-tenue); }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie-alta);
  border: 1px solid var(--borde-control); border-radius: var(--radio-sm); padding: var(--space-2) var(--space-3);
}
.campo textarea { resize: vertical; line-height: 22px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--foco); outline: 2px solid var(--foco); outline-offset: 0; }
.check { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 13px; }
.check input { width: 18px; height: 18px; accent-color: var(--ok); }

.lead { font-size: 17px; line-height: 27px; color: var(--texto-tenue); margin-top: var(--space-3); }
.nota { margin-top: var(--space-5); color: var(--texto-tenue); }
.error { color: var(--alerta); border-left: 3px solid var(--alerta); padding-left: var(--space-3); }
.verificado { color: var(--ok); border-left: 3px solid var(--ok); padding-left: var(--space-3); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.pestanas { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--borde); margin-bottom: var(--space-5); }
.pestanas a { padding: var(--space-2) 0; color: var(--texto-tenue); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a.on { color: var(--texto); }
.pestanas a.on.compra { border-bottom-color: var(--lado-compra); }
.pestanas a.on.construye { border-bottom-color: var(--lado-construye); }

/* --- la vía: el recorrido completo de la request ---------------------------------- */
.via { margin: var(--space-5) 0 var(--space-6); padding: var(--space-5) 0 var(--space-4); border-block: 1px solid var(--borde); }
.via-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.via-fase { display: grid; gap: var(--space-2); align-content: start; }
.via-fase-nombre { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--texto-tenue); }
.via-fase > ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-height: 28px; }
.via-paso { position: relative; flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.via-paso::before { content: ""; flex: 1 1 auto; height: 2px; background: var(--borde); margin-right: 4px; }
.via-paso:first-child { flex: 0 0 auto; }
.via-paso:first-child::before { display: none; }
.via-paso.hecho::before, .via-paso.actual::before { background: var(--marca); }
.punto { flex: none; width: 12px; height: 12px; border-radius: var(--radio-pill); border: 2px solid var(--borde-control); background: var(--fondo); }
.via-paso.hecho .punto { background: var(--marca); border-color: var(--marca); }
.via-paso.actual .punto { width: 18px; height: 18px; border: 3px solid var(--marca); background: var(--fondo); box-shadow: 0 0 0 4px var(--marca-tenue); }
.via-etq { position: absolute; top: 24px; right: 0; transform: translateX(calc(50% - 9px)); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--marca); }
.via-paso:first-child .via-etq { right: auto; left: 0; transform: none; }
.via-paso:last-child .via-etq { transform: none; }
.via-fase:has(.actual) { padding-bottom: 22px; }
.via-sigue { margin: var(--space-3) 0 0; font-size: 15px; }
.via-sigue.toca { font-weight: 500; color: var(--texto); padding-left: var(--space-3); border-left: 3px solid var(--marca); }
.via.cerrada .via-paso .punto { border-style: dashed; }
.via-sigue.mal { color: var(--alerta); }
@media (min-width: 900px) {
  .via-pasos { grid-template-columns: 7fr 4fr 4fr; gap: var(--space-5); }
  .via-fase { border-left: 1px solid var(--borde); padding-left: var(--space-4); }
  .via-fase:first-child { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .via-paso.actual .punto { animation: latido 2.4s ease-in-out 1; }
  @keyframes latido { 0% { box-shadow: 0 0 0 0 var(--marca-tenue); } 50% { box-shadow: 0 0 0 10px var(--marca-tenue); } 100% { box-shadow: 0 0 0 4px var(--marca-tenue); } }
}

/* --- estructura de las vistas ------------------------------------------------- */
.titulo-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.titulo-fila h1 { flex: 1 1 320px; }
.migas { margin-bottom: var(--space-2); font-size: 14px; }
.sub-titulo { color: var(--texto-tenue); margin-top: var(--space-1); }
.detalle { display: grid; gap: var(--space-6); }
.detalle > * { min-width: 0; }
.titulo-fila + .detalle { margin-top: var(--space-6); }
@media (min-width: 960px) {
  .detalle { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .sigue { position: sticky; top: 88px; }
}
.bloque { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--borde); }
.bloque:last-child { border-bottom: 0; }
.problema { font-size: 16px; line-height: 26px; white-space: pre-line; }

.sigue { background: var(--superficie); border-radius: var(--radio-md); padding: var(--space-5); border-top: 4px solid var(--borde-control); }
.sigue.compra { border-top-color: var(--lado-compra); }
.sigue.construye { border-top-color: var(--lado-construye); }
.sigue.ops { border-top-color: var(--texto); }
.sigue .form { margin-bottom: 0; }
.sigue h3:first-child { margin-top: 0; }
.sigue .enlaces { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--borde); font-size: 14px; }
.retirar { margin-top: var(--space-5); font-size: 14px; }
.retirar summary { cursor: pointer; color: var(--texto-tenue); }
.corrida { padding-top: var(--space-3); border-top: 1px solid var(--borde); }

.datos { display: grid; gap: var(--space-2) var(--space-5); margin: 0; }
@media (min-width: 600px) { .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.datos div { min-width: 0; }
.datos dt { font-size: 13px; line-height: 18px; color: var(--texto-tenue); }
.datos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

.cifras, .cartera { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); align-items: flex-end; }
.cifras > div, .cartera > div:not(.acciones) { display: grid; }
.cifra { font-family: var(--font-mono); font-size: 32px; line-height: 40px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cifra.chica { font-size: 17px; line-height: 40px; font-family: var(--font-sans); }
.cifras span:last-child, .cartera span:last-child { font-size: 13px; color: var(--texto-tenue); }
.cartera { margin: var(--space-5) 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--lado-construye-tenue); border-radius: var(--radio-md); }
.cartera .acciones { margin-left: auto; }
.precio { font-family: var(--font-mono); font-size: 32px; line-height: 40px; font-weight: 500; margin-bottom: var(--space-4); }
.resumen { white-space: pre-line; background: var(--superficie); padding: var(--space-3) var(--space-4); border-radius: var(--radio-sm); }
.texto { white-space: pre-wrap; font: 13px/20px var(--font-mono); max-height: 420px; overflow: auto; background: var(--superficie); padding: var(--space-3); border-radius: var(--radio-sm); }
details summary { cursor: pointer; }

/* --- tablas y listas -------------------------------------------------------- */
.tabla-envuelta { overflow-x: auto; margin: var(--space-3) 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-weight: 500; color: var(--texto-tenue); font-size: 13px; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--borde-control); }
.tabla td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .neg { color: var(--texto-tenue); }
.tabla td.toca { font-weight: 600; color: var(--marca); }
.tabla td a { font-weight: 500; }
.lista { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.lista li { margin-bottom: var(--space-2); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: 2px var(--space-2); border: 1px solid var(--borde-control); border-radius: var(--radio-sm);
  font-size: 12px; line-height: 18px; color: var(--texto-tenue); background: var(--superficie);
}
.chip i { width: 7px; height: 7px; border-radius: var(--radio-pill); background: currentColor; }
.chip.marca { color: var(--marca); border-color: var(--marca); }
.chip.obra { color: var(--lado-construye-texto); border-color: var(--lado-construye-texto); }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.mal { color: var(--alerta); border-color: var(--alerta); }

.mercado { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.mercado-item {
  display: grid; gap: var(--space-1) var(--space-4); padding: var(--space-4); text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-left: 4px solid var(--lado-construye); border-radius: var(--radio-sm);
}
.mercado-item:hover { border-color: var(--lado-construye-texto); }
.m-titulo { font-weight: 600; font-size: 16px; color: var(--texto); }
.m-plaza { font-family: var(--font-mono); font-size: 20px; font-weight: 500; }
.m-plaza small { font-family: var(--font-sans); font-size: 13px; color: var(--texto-tenue); font-weight: 400; }
.m-meta { font-size: 13px; color: var(--texto-tenue); }
@media (min-width: 720px) {
  .mercado-item { grid-template-columns: 1fr auto; }
  .m-plaza { grid-row: span 2; grid-column: 2; align-self: center; text-align: right; }
}

.filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.filtros a { padding: var(--space-1) var(--space-3); border: 1px solid var(--borde); border-radius: var(--radio-pill); text-decoration: none; color: var(--texto-tenue); font-size: 14px; }
.filtros a[aria-current="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.vacio { padding: var(--space-5); background: var(--superficie); border-radius: var(--radio-md); }

.bienvenida { margin-top: var(--space-6); max-width: 720px; }
.pasos-eval { list-style: none; counter-reset: paso; margin: var(--space-4) 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.pasos-eval li { counter-increment: paso; display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-3); }
.pasos-eval li::before { content: counter(paso); grid-row: span 2; width: 32px; height: 32px; border-radius: var(--radio-pill); border: 2px solid var(--marca); color: var(--marca); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; }
.pasos-eval span { color: var(--texto-tenue); }

.ledger { list-style: none; padding: 0; margin: var(--space-4) 0; }
.ledger li { padding: var(--space-3) 0; border-bottom: 1px solid var(--borde); }
.l-cab { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.ledger p { margin: var(--space-1) 0 0; }

.avisos { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 20; max-width: min(420px, calc(100vw - 32px)); }
.aviso { margin: 0; padding: var(--space-3) var(--space-4); background: var(--texto); color: var(--fondo); border-radius: var(--radio-sm); box-shadow: var(--sombra-md); }
.aviso.mal { background: var(--alerta); color: var(--blanco); }

/* --- Founding Projects ------------------------------------------------------ */
@media (min-width: 900px) { .via-pasos.una { grid-template-columns: 1fr; } }
.escalera { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.escalera li { padding: 2px var(--space-3); border: 1px solid var(--borde-control); border-radius: var(--radio-pill); font-size: 13px; color: var(--texto-tenue); }
.escalera li.hecho { border-color: var(--marca); color: var(--marca); }
.escalera li.actual { background: var(--marca-solida); border-color: var(--marca-solida); color: var(--blanco); font-weight: 600; }
.rebaseline { padding: var(--space-4); margin-bottom: var(--space-3); border: 1px solid var(--borde); border-left: 4px solid var(--borde-control); border-radius: var(--radio-sm); }
.rebaseline.baja { border-left-color: var(--ok); }
.rebaseline.sube { border-left-color: var(--alerta); }
.delta { font-family: var(--font-mono); font-weight: 500; }
.corridas { list-style: none; margin: 0; padding: 0; }
.corridas li { padding: var(--space-3) 0; border-bottom: 1px solid var(--borde); }
.corridas li .chip { margin-right: var(--space-1); }
.legado { margin-top: var(--space-6); }
.legado > summary { color: var(--texto-tenue); }
.legado .marco { padding-inline: 0; }