/* =====================================================================
   Flota Studio — sistema visual
   Estructura tomada del vocabulario de Notion (jerarquía por susurros,
   ritmo de bloques, badges pastilla) sobre el registro oscuro de Linear
   (apilado por luminancia, bordes semitransparentes, tipo comprimida).
   Acento propio: un solo cian eléctrico. El brillo es señal, no adorno.
   ===================================================================== */

:root{
  /* superficies: el nivel sube por luminancia, no por sombra */
  --bg:#05070e;
  --panel:#0a0f1c;
  --surface:#0f1626;
  --surface-2:#141d33;

  /* líneas: siempre semitransparentes */
  --line:rgba(120,180,255,.10);
  --line-strong:rgba(120,180,255,.19);

  /* tinta */
  --ink:#e6f1ff;
  --ink-2:#8fa3c8;
  --ink-3:#5b6b8c;

  /* un solo acento cromático */
  --accent:#2ea8ff;
  --accent-hi:#7dd3fc;
  --accent-glow:#00e0ff;
  --accent-soft:rgba(46,168,255,.13);

  --ok:#2ee6a8;
  --warn:#ffb454;
  --danger:#ff5f7a;

  --r-xs:3px; --r-sm:5px; --r-md:7px; --r-lg:11px; --r-pill:999px;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail:266px;
  --insp:320px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
/* el atributo hidden debe ganar siempre a los display de las clases */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  font-feature-settings:'cv01','ss03';
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--accent-soft);color:#fff}

/* rejilla de fondo: textura, apenas visible */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(120,180,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,180,255,.030) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 25%,transparent 75%);
}

/* foco: anillo cian, siempre visible para teclado */
:focus-visible{
  outline:2px solid var(--accent-glow);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ===================== estructura ===================== */
.app{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  height:100dvh;
}
.app.insp-on{grid-template-columns:var(--rail) minmax(0,1fr) var(--insp)}
/* cerrar el riel se hace colapsando la variable, no redefiniendo la plantilla:
   así el panel principal nunca cae en una columna de ancho cero */
.app.rail-off{--rail:0px}

/* ===================== riel ===================== */
.rail{
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:opacity .18s var(--ease);
}
.rail-off .rail{opacity:0;pointer-events:none}

.rail-head{display:flex;align-items:center;gap:4px;padding:10px 10px 6px}
.ws{
  flex:1;display:flex;align-items:center;gap:9px;min-width:0;
  padding:7px 8px;border-radius:var(--r-md);
  transition:background .15s var(--ease);
}
.ws:hover{background:var(--surface)}
.ws-mark{
  font-size:15px;color:var(--accent);line-height:1;
  text-shadow:0 0 12px var(--accent-glow);
}
.ws-name{
  flex:1;text-align:left;font-weight:590;font-size:14px;
  letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ws-caret{color:var(--ink-3);font-size:11px}

.rail-search{padding:6px 10px 10px}
.search-btn{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-3);font-size:13.5px;text-align:left;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.search-btn:hover{border-color:var(--line-strong);color:var(--ink-2)}
.search-ico{font-size:14px}
.search-btn kbd{margin-left:auto}

kbd{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:1px 4px;
}

.rail-nav{flex:1;overflow-y:auto;padding:0 8px 8px}
.rail-nav::-webkit-scrollbar{width:9px}
.rail-nav::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:9px}

.tree-item{
  display:flex;align-items:center;gap:7px;width:100%;
  padding:6px 8px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;text-align:left;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.tree-item:hover{background:var(--surface);color:var(--ink)}
.tree-item.on{background:var(--accent-soft);color:var(--ink);font-weight:500}
.tree-item.on .tree-ico{color:var(--accent)}
.tree-ico{width:16px;color:var(--ink-3);font-size:12px;text-align:center;flex:none}
.tree-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-badge{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  background:var(--surface-2);border-radius:var(--r-pill);padding:1px 6px;
}
.tree-kids{padding-left:11px;border-left:1px solid var(--line);margin-left:11px}

.rail-section{padding:0 8px 10px;border-top:1px solid var(--line);margin-top:4px}
.rail-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 8px 6px;font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.members{list-style:none;margin:0;padding:0}
.member{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2)}
.member:hover{background:var(--surface)}
.member-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:10px;font-weight:600;color:#04101f;
  letter-spacing:.02em;
}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.member-role{margin-left:auto;font-size:11px;color:var(--ink-3);font-family:var(--mono)}

.rail-foot{
  display:flex;flex-direction:column;gap:2px;
  padding:8px;border-top:1px solid var(--line);
}
.ghost-btn{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13px;text-align:left;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.ghost-btn:hover{background:var(--surface);color:var(--ink)}

/* ===================== principal ===================== */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{
  display:flex;align-items:center;gap:10px;
  height:47px;padding:0 14px;flex:none;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,15,28,.9),rgba(5,7,14,.5));
}
.crumbs{flex:1;display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:var(--ink-3)}
.crumbs b{color:var(--ink-2);font-weight:500}
.crumbs span.sep{color:var(--ink-3);opacity:.55}
.topbar-actions{display:flex;align-items:center;gap:6px}
.sync-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(46,230,168,.5);
}
.sync-dot.saving{background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,180,84,.5)}70%{box-shadow:0 0 0 6px rgba(255,180,84,0)}100%{box-shadow:0 0 0 0 rgba(255,180,84,0)}}

.icon-btn{
  width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink-3);font-size:14px;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.icon-btn:hover{background:var(--surface);color:var(--ink)}
.icon-btn.sm{width:24px;height:24px;font-size:12px}
.only-mobile{display:none}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.scroll::-webkit-scrollbar{width:11px}
.scroll::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:9px;border:3px solid var(--bg)}
.page-wrap{max-width:1000px;margin:0 auto;padding:38px 46px 140px}
.page-wrap.wide{max-width:1180px}

/* ===================== cabecera de página ===================== */
.page-head{margin-bottom:26px}
.page-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
}
.page-icon{
  font-size:30px;line-height:1;margin-bottom:12px;display:block;
  color:var(--accent);text-shadow:0 0 22px rgba(0,224,255,.35);
}
.page-title{
  font-size:34px;font-weight:590;letter-spacing:-.72px;line-height:1.12;
  margin:0;outline:none;
}
.page-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:12px;font-size:12.5px;color:var(--ink-3);
}
.page-meta .mono{font-family:var(--mono);font-size:11.5px}

/* ===================== bloques ===================== */
.blocks{padding-left:2px}
.blk{
  position:relative;display:flex;gap:6px;align-items:flex-start;
  border-radius:var(--r-sm);padding:2px 0;
}
.blk-handle{
  position:absolute;left:-26px;top:3px;
  width:20px;height:22px;display:grid;place-items:center;
  color:var(--ink-3);font-size:13px;opacity:0;
  cursor:grab;border-radius:var(--r-xs);transition:opacity .12s var(--ease);
}
.blk:hover .blk-handle{opacity:.8}
.blk-handle:hover{background:var(--surface);color:var(--ink)}
.blk-gutter{width:22px;flex:none;display:grid;place-items:center;padding-top:3px}
.blk-body{
  flex:1;min-width:0;outline:none;
  padding:3px 2px;border-radius:var(--r-xs);
  word-break:break-word;
}
.blk-body:empty::before{content:attr(data-ph);color:var(--ink-3);pointer-events:none}

.blk[data-t="h1"] .blk-body{font-size:27px;font-weight:590;letter-spacing:-.5px;line-height:1.2;padding-top:14px}
.blk[data-t="h2"] .blk-body{font-size:21px;font-weight:590;letter-spacing:-.3px;padding-top:11px}
.blk[data-t="h3"] .blk-body{font-size:17px;font-weight:590;letter-spacing:-.15px;padding-top:8px}
.blk[data-t="quote"] .blk-body{
  border-left:2px solid var(--accent);padding-left:13px;color:var(--ink-2);font-style:italic;
}
.blk[data-t="code"] .blk-body{
  font-family:var(--mono);font-size:12.5px;background:var(--surface);
  border:1px solid var(--line);padding:9px 11px;border-radius:var(--r-md);
  color:var(--accent-hi);white-space:pre-wrap;
}
.blk[data-t="callout"]{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px}
.blk[data-t="callout"] .blk-body{font-size:14.5px}
.blk[data-t="divider"] .blk-body{height:1px;background:var(--line-strong);padding:0;margin:11px 0}
.blk[data-t="todo"].done .blk-body{color:var(--ink-3);text-decoration:line-through}
.chk{
  width:15px;height:15px;border:1.5px solid var(--line-strong);border-radius:4px;
  display:grid;place-items:center;flex:none;font-size:10px;color:transparent;
  transition:all .15s var(--ease);
}
.chk:hover{border-color:var(--accent)}
.blk[data-t="todo"].done .chk{
  background:var(--accent);border-color:var(--accent);color:#04101f;
  box-shadow:0 0 12px rgba(0,224,255,.45);
}
.bullet,.num{color:var(--accent);font-size:14px;line-height:1.5}

/* ===================== base de datos ===================== */
.db-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:2px;
}
.tabs{display:flex;gap:2px;background:var(--surface);padding:3px;border-radius:var(--r-md);border:1px solid var(--line)}
.tab{
  padding:5px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
  color:var(--ink-3);transition:all .14s var(--ease);
}
.tab:hover{color:var(--ink-2)}
.tab.on{background:var(--surface-2);color:var(--ink);box-shadow:0 0 0 1px rgba(120,180,255,.14)}
.db-spacer{flex:1}
.db-tools{display:flex;gap:6px;align-items:center}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);font-size:12.5px;color:var(--ink-2);
}
.filter-chip b{color:var(--accent-hi);font-weight:500}
.pri-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-md);font-size:13px;font-weight:500;
  background:var(--accent);color:#03192e;
  box-shadow:0 0 20px rgba(46,168,255,.30);
  transition:transform .12s var(--ease),box-shadow .2s var(--ease);
}
.pri-btn:hover{box-shadow:0 0 26px rgba(0,224,255,.48)}
.pri-btn:active{transform:scale(.97)}

/* tabla */
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.dtable thead th{
  text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
  padding:9px 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:2;cursor:pointer;
  white-space:nowrap;
}
.dtable thead th:hover{color:var(--ink-2)}
.dtable td{padding:4px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable tr.row{transition:background .12s var(--ease);cursor:pointer}
.dtable tr.row:hover{background:var(--surface)}
.dtable tr.row.on{background:var(--accent-soft)}
.cell-title{outline:none;padding:5px 0;min-width:130px}
.row-code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.empty-cell{color:var(--ink-3);font-size:12.5px}
.cell-strong{color:var(--ink)}

/* pastillas de propiedad */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-size:12px;color:var(--ink-2);white-space:nowrap;
  transition:border-color .14s var(--ease),background .14s var(--ease);
  max-width:100%;
}
.pill:hover{border-color:var(--accent);background:var(--accent-soft)}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.mono{font-family:var(--mono);font-size:11px}
.st-hoja{color:var(--ok);border-color:rgba(46,230,168,.35)}
.st-curso{color:var(--accent-hi);border-color:rgba(0,224,255,.38)}
.st-bloq{color:var(--danger);border-color:rgba(255,95,122,.38)}
.pr-alta{color:var(--danger);border-color:rgba(255,95,122,.35)}
.pr-media{color:var(--warn);border-color:rgba(255,180,84,.35)}

/* tablero */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding:16px 0 8px;align-items:start;scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent}
.board::-webkit-scrollbar{height:9px}
.board::-webkit-scrollbar-track{background:transparent}
.board::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:9px}
.board::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}
.col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;min-height:130px}
.col.over{border-color:var(--accent);background:var(--accent-soft)}
.col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.col-name{font-size:13px;font-weight:500;color:var(--ink)}
.col-count{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 11px;margin-bottom:8px;cursor:grab;
  transition:border-color .14s var(--ease),transform .14s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),0 0 22px rgba(46,168,255,.16)}
.card-title{font-size:13.5px;line-height:1.45;margin-bottom:9px}
.card-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.card-mine{border-left:2px solid var(--accent)}

/* lista */
.dlist{list-style:none;margin:14px 0 0;padding:0}
.dlist li{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--r-md);border:1px solid transparent;
  transition:background .12s var(--ease),border-color .12s var(--ease);cursor:pointer;
}
.dlist li:hover{background:var(--surface);border-color:var(--line)}
.dlist .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlist .to-do .card-title{color:var(--ink-3)}

/* avatares + personas */
.who{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.who .avatar{width:20px;height:20px;font-size:9px}
.who .avatar.xs{width:18px;height:18px;font-size:8.5px}
.unassigned{color:var(--ink-3);font-style:italic}

/* ===================== inspector ===================== */
.inspector{
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.inspector-head{
  display:flex;align-items:center;justify-content:space-between;
  height:47px;padding:0 12px;border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  flex:none;
}
.inspector-body{flex:1;overflow-y:auto;padding:16px 15px 40px}
.prop{margin-bottom:17px}
.prop-label{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.prop-value{font-size:14px;color:var(--ink);line-height:1.5}
.insp-title{font-size:17px;font-weight:590;letter-spacing:-.2px;line-height:1.35;margin:0 0 4px;outline:none}
.insp-sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:18px}
.insp-empty{color:var(--ink-3);font-size:13px;text-align:center;padding:40px 10px;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{
  font-size:11.5px;font-family:var(--mono);color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-sm);padding:3px 8px;
}
.bar{height:4px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-glow));box-shadow:0 0 12px rgba(0,224,255,.5)}
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);padding-left:13px}
.timeline li{position:relative;padding-bottom:13px;font-size:12.5px;color:var(--ink-2)}
.timeline li::before{
  content:'';position:absolute;left:-17px;top:6px;width:6px;height:6px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line-strong);
}
.timeline time{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* ===================== overlay, paleta, menús ===================== */
.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,6,14,.62);
  backdrop-filter:blur(7px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:13vh;
  animation:fade .13s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palette{
  width:min(620px,92vw);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(0,224,255,.06),0 0 60px rgba(46,168,255,.10);
  overflow:hidden;
}
.palette input{
  width:100%;padding:15px 17px;background:transparent;border:none;
  border-bottom:1px solid var(--line);font-size:15.5px;outline:none;
}
.palette input::placeholder{color:var(--ink-3)}
.palette-list{list-style:none;margin:0;padding:7px;max-height:52vh;overflow-y:auto}
.palette-list li{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);
  cursor:pointer;
}
.palette-list li.sel{background:var(--accent-soft);color:var(--ink)}
.palette-list li .k{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.palette-foot{
  display:flex;gap:8px;align-items:center;
  padding:9px 14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);
}
.palette-foot kbd{margin-right:1px}

.menu{
  position:fixed;z-index:70;min-width:230px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:6px;
  box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 0 1px rgba(0,224,255,.05);
  max-height:330px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent;
}
.menu::-webkit-scrollbar{width:9px}
.menu::-webkit-scrollbar-track{background:transparent}
.menu::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:9px}
.menu-head{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 9px 7px;
}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{
  display:flex;align-items:center;gap:10px;
  padding:7px 9px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);cursor:pointer;
}
.menu li:hover,.menu li.sel{background:var(--accent-soft);color:var(--ink)}
.menu li .mico{
  width:26px;height:26px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--surface-2);
  font-size:12px;color:var(--accent);
}
.menu li .mdesc{font-size:11.5px;color:var(--ink-3);margin-left:auto;font-family:var(--mono)}
.menu-sep{height:1px;background:var(--line);margin:5px 7px}
.menu-item-title{font-size:12.5px;color:var(--ink-2)}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 17px;font-size:13px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  animation:rise .2s var(--ease);
}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===================== responsive ===================== */
@media (max-width:1180px){
  .app.insp-on{grid-template-columns:var(--rail) minmax(0,1fr)}
  .inspector{
    position:fixed;right:0;top:0;bottom:0;width:min(340px,90vw);
    z-index:50;box-shadow:-18px 0 50px rgba(0,0,0,.55);
  }
}
@media (max-width:880px){
  .app,.app.insp-on{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed;left:0;top:0;bottom:0;width:min(272px,86vw);
    z-index:55;box-shadow:20px 0 50px rgba(0,0,0,.6);
  }
  .rail-off .rail{transform:translateX(-100%)}
  .rail{transform:none;transition:transform .2s var(--ease)}
  .only-mobile{display:grid}
  .page-wrap{padding:22px 18px 120px}
  .page-title{font-size:26px}
  .blk-handle{display:none}
  .board{grid-auto-columns:minmax(210px,84vw)}
  .topbar{height:44px;padding:0 9px}
  .dtable thead th:nth-child(5),.dtable td:nth-child(5){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* toque: áreas mínimas cómodas */
@media (pointer:coarse){
  .icon-btn{width:36px;height:36px}
  .ghost-btn,.tree-item,.member{padding-top:9px;padding-bottom:9px}
  .pill{padding:6px 11px}
  .tab{padding:7px 14px}
}