/* SYSTEM/diseno/publico.css — la cara pública de TDT (2026-10-04). Requiere tokens.css.
   Una sola gramática para Proyectos y las páginas de cada pieza. Reglas: REGLAS_UI.md → "Páginas públicas".
   Cada página pone la pieza en <body data-pieza="system|scale|tropa|global|vault|chain|core">: eso define --c.

   Lo que identifica a TDT (y no se negocia entre páginas):
   1. Negro, blanco y gris; el color de la pieza aparece poco y siempre en los mismos lugares:
      el chaflán, el nombre de la pieza o del producto en el encabezado, la acción principal y los estados activos.
   2. Títulos livianos en dos tonos: blanco + gris (<i>). Nunca dos colores.
   3. Rótulos y TODA cifra en Geist Mono.
   4. Líneas finas en vez de cajas y sombras. Radios: 12 px contenedores, 8 px botones, 2 px sellos.
   5. El chaflán (corte de la T) una sola vez por pantalla, junto al título.
   6. Arriba siempre la ruta: TDT / Pieza / página. Abajo siempre el mapa de las piezas. */

[data-pieza="system"]{--c:var(--force);--on-c:#000}
[data-pieza="scale"]{--c:var(--scale);--on-c:#fff}
[data-pieza="tropa"]{--c:var(--crew);--on-c:#000}
[data-pieza="global"]{--c:var(--edge);--on-c:#fff}
[data-pieza="vault"]{--c:var(--vault);--on-c:#000}
[data-pieza="chain"]{--c:var(--chain);--on-c:#fff}
[data-pieza="growth"]{--c:var(--growth);--on-c:#04110F}
[data-pieza="core"]{--c:var(--core);--on-c:#000}
:root{--c:var(--text-primary);--on-c:#000;--ancho:1160px}
[data-pieza]{--color-pieza:var(--c)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body.tdt{margin:0;min-height:100%;background:var(--bg-base);color:var(--text-primary);font:400 16px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
.tdt a{color:inherit;text-decoration:none}
.tdt button{font-family:inherit}
.tdt-wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.tdt-sec{margin-top:clamp(56px,9vh,96px);scroll-margin-top:88px}

/* ── Barra: logo → Proyectos, ruta (TDT / Pieza / página), atajos y una acción. La pinta publico.js. */
.tdt-barra{position:sticky;top:12px;z-index:30;max-width:var(--ancho);margin:12px auto 0;min-height:54px;display:flex;align-items:center;gap:18px;padding:8px 10px 8px 20px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-float);backdrop-filter:var(--blur-float);-webkit-backdrop-filter:var(--blur-float);overflow:hidden}
.tdt-barra .wm{flex:none;display:block}.tdt-barra .wm img{display:block;height:13px;width:auto}
.tdt-ruta{display:flex;align-items:center;gap:8px;min-width:0;font:500 11.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.tdt-ruta .pz{color:var(--c)}.tdt-ruta .aqui{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}
.tdt-ruta a:hover{filter:brightness(1.25)}
.tdt-barra nav{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--text-secondary)}
.tdt-barra nav a{transition:color var(--transition-fast)}.tdt-barra nav a:hover{color:#fff}
.tdt-barra>.tdt-btn{margin-left:auto;padding:10px 16px;font-size:14px}
.tdt-barra nav~.tdt-btn{margin-left:4px}
.tdt-barra .av{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c)}
.tdt-barra>.tdt-idioma:nth-child(-n+3){margin-left:auto}
.tdt-idioma{display:flex;gap:2px;margin-left:4px;font:500 11px var(--font-mono);letter-spacing:.08em}
.tdt-idioma button{padding:6px 8px;border:0;border-radius:var(--radius-xs);background:none;color:var(--text-muted);cursor:pointer}
.tdt-idioma button.on{color:#fff;background:var(--bg-raised)}

/* ── Texto */
.tdt-rot{margin:0 0 14px;font:500 12px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.tdt-h1{margin:0;font-size:clamp(40px,min(6vw,11vh),76px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.tdt-h2{margin:0 0 28px;font-size:clamp(28px,3.8vw,46px);font-weight:400;letter-spacing:-.045em;line-height:1.04}
.tdt-h3{margin:0;font-size:clamp(19px,1.9vw,23px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.tdt-h1 i,.tdt-h2 i{font-style:normal;color:var(--text-muted)}
.tdt-h1 b{font-weight:inherit;color:var(--c)}
.tdt-lead{margin:0;max-width:560px;font-size:clamp(17px,1.9vw,21px);line-height:1.45;color:var(--text-secondary)}
.tdt-lead.claro{color:var(--text-primary)}
.tdt-ch{fill:var(--c);flex:none}
.tdt-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tdt-aviso{margin:14px 0 0;font:11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* ── Acciones: una principal (color de la pieza) y, si hace falta, una secundaria (línea). */
.tdt-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border:1px solid transparent;border-radius:var(--radius-md);background:var(--c);color:var(--on-c);font:600 15px/1.2 var(--font-sans);cursor:pointer;transition:filter var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}
.tdt-btn:hover{filter:brightness(1.08)}
.tdt-btn:focus-visible,.tdt a:focus-visible,.tdt button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tdt-btn:disabled{opacity:.55;cursor:default;filter:none}
.tdt-btn.sec{background:none;border-color:var(--border-hover);color:var(--text-primary)}
.tdt-btn.sec:hover{filter:none;border-color:var(--c)}
.tdt-sello{display:inline-block;padding:3px 7px;border-radius:var(--radius-xs);font:500 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:var(--bg-raised);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.tdt-sello.on{background:var(--c);border-color:var(--c);color:var(--on-c)}

/* ── Superficies */
.tdt-card{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);padding:24px;min-width:0}
.tdt-card.pieza{border-color:color-mix(in srgb,var(--c) 45%,transparent)}

/* ── Columnas con línea fina: ícono a la izquierda, número a la derecha, título y una frase. */
.tdt-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.tdt-col{position:relative;border-top:1px solid var(--border-default);padding-top:22px;min-width:0}
.tdt-col .n{position:absolute;right:0;top:24px;font:500 12px var(--font-mono);color:var(--text-muted)}
.tdt-col svg{display:block;width:24px;height:24px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tdt-col b{display:block;margin:24px 0 8px;font-size:clamp(19px,1.9vw,23px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.tdt-col:not(:has(svg)) .n{position:static;display:block;margin-bottom:20px}.tdt-col:not(:has(svg)) b{margin-top:0}
.tdt-col p{margin:0;color:var(--text-secondary);font-size:15px;line-height:1.55;max-width:340px}

/* ── Fila de cifras: número en mono blanco, unidad en el color de la pieza. */
.tdt-cifras{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.tdt-cifras>div{padding:6px 16px;border-left:1px solid var(--border-default);text-align:center;min-width:0}
.tdt-cifras>div:first-child{border-left:0}
.tdt-cifras b{display:block;white-space:nowrap;font:500 clamp(22px,2.8vw,38px)/1.1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.tdt-cifras b i{font-style:normal;color:var(--c)}
.tdt-cifras span{display:block;margin-top:8px;color:var(--text-secondary);font-size:14px}

/* ── Lista sin / con (✕ en rojo semántico, ✓ en el color de la pieza) */
.tdt-xs{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tdt-xs li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);line-height:1.4}
.tdt-xs li::before{content:"✕";color:#F87171;font-weight:600;flex:none}
.tdt-xs.si li::before{content:"✓";color:var(--c)}
.tdt-xs small{display:block;margin-top:2px;color:var(--text-secondary);font-size:13.5px}

/* ── Formularios */
.tdt-form{display:grid;gap:12px}
.tdt-form label{display:grid;gap:6px;font-size:13px;color:var(--text-secondary)}
.tdt-form input,.tdt-form textarea,.tdt-form select{width:100%;background:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px;color:#fff;font:inherit;font-size:16px}
.tdt-form input:focus,.tdt-form textarea:focus,.tdt-form select:focus{outline:none;border-color:var(--c)}
.tdt-form .tdt-btn{width:100%}

/* ── Pie: el mapa de las piezas, igual en todas las páginas. Lo pinta publico.js. */
.tdt-pie{max-width:var(--ancho);margin:clamp(64px,10vh,104px) auto 0;padding:26px 24px 40px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;color:var(--text-muted);font-size:13px}
.tdt-pie .wm img{display:block;height:11px;opacity:.7}
.tdt-pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.tdt-pie nav a{display:inline-flex;align-items:center;gap:8px;transition:color var(--transition-fast)}
.tdt-pie nav a::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--pc,#fff)}
.tdt-pie nav a:hover,.tdt-pie nav a.on{color:#fff}
.tdt-pie small{font:11px var(--font-mono);letter-spacing:.08em}

@media(max-width:900px){
 .tdt-barra{margin:12px 12px 0;padding-left:16px}
 .tdt-barra nav{display:none}
 .tdt-barra>.tdt-btn,.tdt-barra nav~.tdt-btn,.tdt-barra nav~.tdt-idioma{margin-left:auto}.tdt-barra .tdt-idioma~.tdt-btn{margin-left:4px}
 .tdt-cols{grid-template-columns:minmax(0,1fr);gap:26px}
 .tdt-cifras{grid-template-columns:1fr 1fr;gap:22px 0}.tdt-cifras>div:nth-child(odd){border-left:0}
}
@media(max-width:640px){.tdt-wrap{padding:0 16px}.tdt-card{padding:20px}.tdt-ruta .aqui{display:none}.tdt-ruta .sep2{display:none}.tdt-pie{padding:22px 16px 96px}}