/* ============================================================
   Tablero · La oficina de Rufo
   Capa de interacción sobre sr.css v1.0. No define color nuevo,
   no define tipografía nueva. Sólo estructura y movimiento.
   ============================================================ */

html,body{height:100%}
html{overflow:hidden}
body.tb{margin:0;overflow:hidden}

/* ============ barra superior ============ */
.tb-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sr-3);height:52px;padding:0 var(--sr-3);border-bottom:1px solid var(--sr-line);background:var(--sr-paper)}
.tb-top-l{display:flex;align-items:baseline;gap:var(--sr-2);min-width:0}
.tb-top-l a{border:0;padding:0}
.tb-top-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-count{font-size:var(--sr-micro);font-weight:var(--sr-emph);color:var(--sr-mid);white-space:nowrap}
.tb-count b{color:var(--sr-ink);font-weight:var(--sr-emph)}

/* ============ riel de módulos ============ */
.tb-rail{position:relative;z-index:2;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--sr-line);background:var(--sr-paper)}
.tb-rail::-webkit-scrollbar{display:none}
.tb-rail button{flex:none;display:flex;align-items:baseline;gap:7px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--sr-micro);color:var(--sr-mid);padding:9px var(--sr-2);
  border-top:2px solid transparent;margin-top:-1px;transition:color .18s ease,border-color .18s ease}
.tb-rail button:hover{color:var(--sr-ink)}
.tb-rail button .n{font-weight:var(--sr-emph);font-variant-numeric:tabular-nums}
.tb-rail button[aria-current="true"]{color:var(--sr-ink);border-top-color:var(--sr-ink);font-weight:var(--sr-emph)}

/* ============ tablero ============ */
.tb-board{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;height:calc(100dvh - 92px);scrollbar-width:none}
.tb-board::-webkit-scrollbar{display:none}
.tb-panel{flex:none;width:100%;height:100%;scroll-snap-align:start;overflow-y:auto;padding:var(--sr-4) var(--sr-3)}
.tb-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--sr-5);align-items:start}
.tb-in-wide{grid-template-columns:minmax(0,1fr);gap:var(--sr-3)}

/* entrada del contenido cuando el panel se vuelve activo */
.tb-say,.tb-see{opacity:0;transform:translateY(10px);transition:opacity .42s ease,transform .42s ease}
.tb-panel.is-in .tb-say{opacity:1;transform:none}
.tb-panel.is-in .tb-see{opacity:1;transform:none;transition-delay:.08s}

.tb-num{display:block;color:var(--sr-mid);margin-bottom:var(--sr-1)}
.tb-say h2{margin-bottom:var(--sr-2)}
.tb-say .sr-lead{margin-bottom:var(--sr-3);color:var(--sr-ink)}

/* ============ solapas ============ */
.tb-tabs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--sr-ink);margin-top:var(--sr-3)}
.tb-tabs button{flex:1 1 auto;background:none;border:0;border-right:1px solid var(--sr-line);cursor:pointer;
  font-family:inherit;font-size:var(--sr-micro);font-weight:var(--sr-emph);color:var(--sr-mid);
  text-align:left;padding:10px 12px;transition:color .16s ease,background .16s ease}
.tb-tabs button:last-child{border-right:0}
.tb-tabs button:hover{color:var(--sr-ink);background:var(--sr-surface)}
.tb-tabs button[aria-expanded="true"]{color:var(--sr-ink);background:var(--sr-surface)}
.tb-tabs button .s{display:inline-block;width:11px;color:var(--sr-mid);font-weight:var(--sr-text)}

.tb-drawer{overflow:hidden;max-height:0;opacity:0;border-top:1px solid var(--sr-line);
  transition:max-height .34s ease,opacity .24s ease}
.tb-drawer[data-open="true"]{max-height:460px;opacity:1}
.tb-drawer-in{padding:var(--sr-2) 0 0}
.tb-dl{display:grid;grid-template-columns:auto;gap:10px}
.tb-dl li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--sr-2);
  font-size:var(--sr-label);line-height:1.55;padding-bottom:10px;border-bottom:1px solid var(--sr-line)}
.tb-dl li:last-child{border-bottom:0;padding-bottom:0}
.tb-dl .k{font-weight:var(--sr-emph)}
.tb-dl .v{color:var(--sr-mid)}

/* ============ el mapa ============ */
.tb-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sr-3)}
.tb-band{border-top:1px solid var(--sr-ink);padding-top:var(--sr-2)}
.tb-band h3{font-size:var(--sr-label);color:var(--sr-mid);font-weight:var(--sr-emph);margin-bottom:var(--sr-2)}
.tb-band ul{display:grid;gap:8px}
.tb-mod{width:100%;text-align:left;background:var(--sr-paper);border:1px solid var(--sr-line);cursor:pointer;
  font-family:inherit;font-size:var(--sr-label);color:var(--sr-ink);padding:11px 12px;
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:baseline;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.tb-mod .n{color:var(--sr-mid);font-size:var(--sr-micro);font-weight:var(--sr-emph)}
.tb-mod:hover{border-color:var(--sr-ink);background:var(--sr-surface)}
.tb-mod .d{display:block;color:var(--sr-mid);font-size:var(--sr-micro);margin-top:2px}

/* ============ maqueta de producto ============ */
.tb-mock{border:1px solid var(--sr-ink);background:var(--sr-paper)}
.tb-mock-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sr-2);
  padding:9px 14px;border-bottom:1px solid var(--sr-line);background:var(--sr-surface)}
.tb-mock-b{padding:12px 14px;border-bottom:1px solid var(--sr-line)}
.tb-mock-b:last-child{border-bottom:0}
.tb-who{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sr-2);flex-wrap:wrap}
.tb-hats{display:flex;gap:6px;flex-wrap:wrap}

.tb-clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--sr-line)}
.tb-clock{background:var(--sr-paper);padding:10px 14px}
.tb-clock .l{display:block;font-size:var(--sr-micro);color:var(--sr-mid);margin-bottom:6px}
.tb-clock .v{display:block;font-size:var(--sr-lead);font-weight:var(--sr-emph);line-height:1.2;letter-spacing:-0.02em}
.tb-clock .s{display:block;font-size:var(--sr-micro);color:var(--sr-mid);margin-top:5px}
.tb-clock.is-due .v{color:var(--sr-ink)}
.tb-clock.is-due{background:var(--sr-surface)}

.tb-line{display:grid;grid-template-columns:78px 86px minmax(0,1fr);gap:var(--sr-2);
  font-size:var(--sr-label);padding:9px 0;border-bottom:1px solid var(--sr-line)}
.tb-line:last-child{border-bottom:0}
.tb-line .d{color:var(--sr-mid);font-variant-numeric:tabular-nums}
.tb-line .c{color:var(--sr-mid)}
.tb-acc{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sr-2);
  font-size:var(--sr-label);padding:8px 0;border-bottom:1px solid var(--sr-line)}
.tb-acc:last-child{border-bottom:0}
.tb-acc .n{text-align:right;font-weight:var(--sr-emph);font-variant-numeric:tabular-nums}
.tb-cap{margin-top:var(--sr-1);color:var(--sr-mid);font-size:var(--sr-micro)}

/* ============ piezas de maqueta ============ */
.tb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sr-2);align-items:baseline;
  font-size:var(--sr-label);padding:9px 0;border-bottom:1px solid var(--sr-line)}
.tb-row:last-child{border-bottom:0}
.tb-row .s{display:block;color:var(--sr-mid);font-size:var(--sr-micro);margin-top:2px}
.tb-row-3{grid-template-columns:96px minmax(0,1fr) auto}
.tb-row .t{color:var(--sr-mid);font-variant-numeric:tabular-nums;white-space:nowrap}

/* conversación */
.tb-chat{display:grid;gap:8px}
.tb-msg{max-width:84%;border:1px solid var(--sr-line);padding:8px 11px;font-size:var(--sr-label);line-height:1.5}
.tb-msg .w{display:block;color:var(--sr-mid);font-size:var(--sr-micro);margin-bottom:3px}
.tb-msg-out{justify-self:end;background:var(--sr-surface);border-color:var(--sr-line)}
.tb-msg-in{justify-self:start;border-color:var(--sr-ink)}

/* matriz de permisos */
.tb-matrix{width:100%;border-collapse:collapse;font-size:var(--sr-label)}
.tb-matrix th{text-align:left;font-size:var(--sr-micro);font-weight:var(--sr-emph);color:var(--sr-mid);
  padding:0 0 8px;border-bottom:1px solid var(--sr-ink)}
.tb-matrix td{padding:9px 0;border-bottom:1px solid var(--sr-line);vertical-align:middle}
.tb-matrix tr:last-child td{border-bottom:0}
.tb-matrix th+th,.tb-matrix td+td{padding-left:14px;text-align:center}
.tb-matrix .yes{font-weight:var(--sr-emph)}
.tb-matrix .no{color:var(--sr-line)}

/* armador de informe */
.tb-blocks{display:grid;gap:6px}
.tb-blk{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  border:1px solid var(--sr-line);padding:8px 11px;font-size:var(--sr-label)}
.tb-blk .h{color:var(--sr-mid);font-size:var(--sr-micro)}
.tb-blk-off{color:var(--sr-mid)}

/* ============ el camino ============ */
.tb-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--sr-line);
  border:1px solid var(--sr-line)}
.tb-step{background:var(--sr-paper);padding:var(--sr-2) 14px;display:flex;flex-direction:column;gap:8px}
.tb-step .w{font-size:var(--sr-micro);color:var(--sr-mid);font-weight:var(--sr-emph)}
.tb-step h4{font-size:var(--sr-body);font-weight:var(--sr-emph);margin:0;line-height:1.3}
.tb-step .d{font-size:var(--sr-micro);color:var(--sr-mid);line-height:1.55}
.tb-step .g{font-size:var(--sr-micro);border-top:1px solid var(--sr-line);padding-top:8px;margin-top:auto}

/* ============ precio ============ */
.tb-price{border:1px solid var(--sr-ink);padding:var(--sr-3)}
.tb-fig{font-size:var(--sr-cap);font-weight:var(--sr-emph);letter-spacing:-0.03em;line-height:1.1;display:block}
.tb-price .sub{color:var(--sr-mid);font-size:var(--sr-micro);display:block;margin-top:6px}
.tb-pays{margin-top:var(--sr-3);border-top:1px solid var(--sr-line)}
.tb-pay{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sr-2);font-size:var(--sr-label);
  padding:10px 0;border-bottom:1px solid var(--sr-line)}
.tb-pay:last-child{border-bottom:0}
.tb-pay .p{font-weight:var(--sr-emph);font-variant-numeric:tabular-nums}
.tb-start{display:grid;gap:0}
.tb-start li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--sr-2);font-size:var(--sr-label);
  padding:11px 0;border-bottom:1px solid var(--sr-line);line-height:1.55}
.tb-start li:last-child{border-bottom:0}
.tb-start .n{color:var(--sr-mid);font-size:var(--sr-micro);font-weight:var(--sr-emph)}

/* ============ pie de navegación ============ */
.tb-foot{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sr-2);padding:8px var(--sr-3);
  border-top:1px solid var(--sr-line);background:var(--sr-paper)}
.tb-move{display:flex;gap:8px}
.tb-move button{font-family:inherit;font-size:var(--sr-micro);font-weight:var(--sr-emph);
  background:none;border:1px solid var(--sr-line);color:var(--sr-ink);cursor:pointer;padding:6px 12px;
  transition:border-color .16s ease}
.tb-move button:hover{border-color:var(--sr-ink)}
.tb-move button[disabled]{color:var(--sr-line);border-color:var(--sr-line);cursor:default}
.tb-hint{font-size:var(--sr-micro);color:var(--sr-mid)}
.tb-board{padding-bottom:0}
.tb-panel{padding-bottom:calc(var(--sr-4) + 40px)}

/* marca de revisión: no va en la versión que se manda */
.tb-flag{position:fixed;left:var(--sr-3);bottom:46px;z-index:4;font-size:var(--sr-micro);
  font-weight:var(--sr-emph);color:var(--sr-mid);border:1px dashed var(--sr-line);padding:4px 8px;background:var(--sr-paper)}

/* ============ teléfono ============ */
@media(max-width:900px){
  .tb-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;
    height:calc(100dvh - 92px)}
  .tb-panel{width:100%;height:auto;min-height:100%;overflow-y:visible;padding:var(--sr-3) var(--sr-2) var(--sr-4)}
  .tb-in{grid-template-columns:minmax(0,1fr);gap:var(--sr-3)}
  .tb-map{grid-template-columns:minmax(0,1fr);gap:var(--sr-2)}
  .tb-clocks{grid-template-columns:minmax(0,1fr)}
  .tb-line{grid-template-columns:70px minmax(0,1fr);row-gap:2px}
  .tb-line .c{grid-column:1/2}
  .tb-steps{grid-template-columns:minmax(0,1fr)}
  .tb-row-3{grid-template-columns:80px minmax(0,1fr)}
  .tb-row-3 .n{grid-column:2/3;text-align:left}
  .tb-msg{max-width:100%}
  .tb-say,.tb-see{opacity:1;transform:none}
  .tb-move{display:none}
  .tb-drawer[data-open="true"]{max-height:700px}
}

@media(prefers-reduced-motion:reduce){
  .tb-board{scroll-behavior:auto}
  .tb-say,.tb-see{opacity:1;transform:none;transition:none}
  .tb-drawer{transition:opacity .01s}
  .tb-mod,.tb-rail button,.tb-tabs button{transition:none}
}