/* KRECE · tablero de síntesis — capa sobre Sinapsis */
#tablero{
  display:none;
  position:fixed;
  top:46px;left:0;right:0;bottom:0;
  z-index:58;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}
body.tablero-open #tablero{display:block}
body.tablero-open #viz,
body.tablero-open #core,
body.tablero-open #legend,
body.tablero-open #netbox,
body.tablero-open #ficha,
body.tablero-open #detail,
body.tablero-open #zctl,
body.tablero-open #results,
body.tablero-open #m-shell,
body.tablero-open #m-scrim,
body.tablero-open #keyhint,
body.tablero-open #cmd,
body.tablero-open #domchips{
  display:none!important;
}
body.tablero-open{
  overflow:auto;
  height:auto;
}
body.tablero-open #scan,
body.tablero-open #vig{z-index:40}

.tb-bar{
  grid-column:1/-1;
  position:sticky;top:0;z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 4px 12px;
  background:linear-gradient(180deg,rgba(7,9,9,.98) 70%,rgba(7,9,9,0));
}
.tb-wrap{max-width:1400px;margin:0 auto;padding:8px 12px 64px;display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.tb-cell{background:rgba(9,11,11,.92);box-shadow:0 0 0 1px var(--line);border-radius:2px}
.tb-k{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.tb-k.gold{color:var(--gold)}
.tb-k.coral{color:var(--coral)}

.tb-hero{grid-column:1/-1;padding:22px 22px 18px}
.tb-hero .row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.tb-hero h1{
  font-family:var(--disp);font-weight:800;font-size:clamp(32px,6.4vw,68px);
  line-height:.88;letter-spacing:-.03em;margin:10px 0 12px;color:var(--ink)
}
.tb-lede{font-family:'Outfit',var(--mono);font-size:14px;line-height:1.55;color:rgba(233,230,221,.78);max-width:52rem}
.tb-actions{display:flex;gap:8px;flex-wrap:wrap}
.tb-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--line);background:none;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer
}
.tb-btn:hover{border-color:var(--teal);color:var(--teal)}
.tb-btn.x:hover{border-color:var(--coral);color:var(--coral)}
.tb-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.tb-metric{background:rgba(233,230,221,.04);padding:10px 12px}
.tb-metric .k{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tb-metric .v{font-family:var(--disp);font-weight:800;font-size:22px;margin-top:4px;letter-spacing:-.02em}

.tb-pos{grid-column:1/8;padding:20px;border-left:3px solid var(--gold)}
.tb-pos p{font-family:'Outfit',var(--mono);font-size:14.5px;line-height:1.65;color:rgba(233,230,221,.88);margin-bottom:12px}
.tb-pos p:last-child{margin-bottom:0}
.tb-side{grid-column:8/-1;display:flex;flex-direction:column;gap:10px}
.tb-es{padding:18px;border-left:3px solid var(--coral)}
.tb-es p{font-family:'Outfit',var(--mono);font-size:14px;line-height:1.6;color:var(--ink)}
.tb-qa{padding:18px;border-left:3px solid var(--teal);flex:1}
.tb-qa h2{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.25;margin-bottom:10px}
.tb-qa p{font-family:'Outfit',var(--mono);font-size:13.5px;line-height:1.6;color:var(--dim)}

.tb-ev{grid-column:1/6;padding:18px}
.tb-ev li{display:flex;gap:10px;margin-bottom:12px}
.tb-ev .n{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--coral);width:28px;flex:none;line-height:1}
.tb-ev p{font-family:'Outfit',var(--mono);font-size:13px;line-height:1.5;color:rgba(233,230,221,.82)}
.tb-map{grid-column:6/-1;padding:18px}
.tb-map ol{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tb-map li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(233,230,221,.08);font-family:'Outfit',var(--mono);font-size:13px}
.tb-map .n{font-size:9px;letter-spacing:.1em;color:var(--teal);width:22px;flex:none}

.tb-qas{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tb-qas article{padding:16px}
.tb-qas h3{font-family:var(--disp);font-weight:800;font-size:15px;line-height:1.3;margin:6px 0 8px}
.tb-qas p{font-family:'Outfit',var(--mono);font-size:13px;line-height:1.5;color:var(--dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.tb-conn{grid-column:1/-1}
.tb-conn .tb-k{padding:4px 2px 8px}
.tb-conn .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tb-c{
  display:block;width:100%;text-align:left;padding:16px;cursor:pointer;
  background:rgba(9,11,11,.92);box-shadow:0 0 0 1px var(--line);border:0;color:inherit;
  font-family:var(--mono)
}
.tb-c:hover{box-shadow:0 0 0 1px var(--gold)}
.tb-c .t{font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.3;margin:6px 0;color:var(--ink)}
.tb-c .x{font-family:'Outfit',var(--mono);font-size:12px;line-height:1.4;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tb-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 20px}
.tb-tags span{border:1px solid rgba(255,106,77,.45);color:var(--coral);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px}

.tb-search{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:rgba(7,9,9,.9);padding:8px 10px;min-width:min(280px,70vw)
}
.tb-search input{
  flex:1;background:none;border:0;outline:none;color:var(--ink);
  font-family:var(--mono);font-size:12px
}

@keyframes tb-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.tb-cell,.tb-c,.tb-qas article{animation:tb-in .5s cubic-bezier(.22,1,.36,1) both}
.tb-hero{animation-delay:40ms}
.tb-pos{animation-delay:90ms}
.tb-side{animation-delay:140ms}
.tb-ev{animation-delay:190ms}
.tb-map{animation-delay:230ms}

@media (max-width:920px){
  #tablero{top:calc(52px + env(safe-area-inset-top))}
  .tb-metrics{grid-template-columns:1fr 1fr}
  .tb-pos,.tb-side,.tb-ev,.tb-map,.tb-qas,.tb-conn{grid-column:1/-1}
  .tb-map ol,.tb-qas,.tb-conn .grid{grid-template-columns:1fr}
  .tb-hero{padding:16px}
  .tb-hero h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .tb-cell,.tb-c,.tb-qas article{animation:none}
}