/* ============ Base ============ */
:root{
  --accent:#f4553d;
  --accent-2:#ff6a4d;
  --accent-press:#dd4630;
  --blue:#2563eb;
  --bg:#ffffff;
  --sidebar:#f7f7f8;
  --line:#e7e7ea;
  --line-soft:#f0f0f2;
  --text:#16161a;
  --text-2:#6b6b76;
  --text-3:#9a9aa5;
  --hover:#efeff1;
  --card:#0e0e10;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --font:-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-size:14px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:#ffd9d1}

.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:15px;height:15px}
.icon.xs{width:13px;height:13px}

/* ============ Layout ============ */
.app{display:flex;height:100vh;overflow:hidden}

.sidebar{
  width:258px;flex:none;background:var(--sidebar);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 12px;transition:width .18s ease;
}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .hide-collapsed{display:none}
.sidebar.collapsed .brand-name{display:none}
.sidebar.collapsed .nav-item{justify-content:center}

.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand-logo{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  display:grid;place-items:center;color:#fff;box-shadow:0 2px 6px rgba(244,85,61,.35)
}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.02em}

.ws-select{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:#fff;margin-bottom:14px;
}
.ws-select:hover{background:var(--hover)}
.ws-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-align:left}
.badge{
  font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:5px;
  background:#ececed;color:#5b5b66;text-transform:uppercase
}
.ws-select .icon{margin-left:auto;color:var(--text-3)}

.nav-item{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;
  color:var(--text);font-size:13.5px;font-weight:500;width:100%;text-align:left;
}
.nav-item:hover{background:var(--hover)}
.nav-item.active{background:#e9e9ec;font-weight:600}
.nav-item .count{margin-left:auto;color:var(--text-3);font-size:12.5px;font-weight:500}
.nav-item .icon{color:var(--text-2)}

.side-title{
  display:flex;align-items:center;padding:20px 10px 6px;font-size:11.5px;font-weight:600;
  color:var(--text-3);letter-spacing:.02em;text-transform:none
}
.side-title button{margin-left:auto;color:var(--text-3);display:grid;place-items:center;
  width:22px;height:22px;border-radius:6px}
.side-title button:hover{background:var(--hover);color:var(--text)}

.folder-list{overflow-y:auto;flex:1;min-height:0;margin:0 -2px;padding:0 2px}
.folder-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  font-size:13.5px;cursor:pointer;position:relative}
.folder-row:hover{background:var(--hover)}
.folder-row.active{background:#e9e9ec;font-weight:600}
.folder-row.drop{background:#dbeafe;outline:2px dashed #93c5fd}
.folder-row .dot{width:9px;height:9px;border-radius:3px;flex:none}
.folder-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-row .more{margin-left:auto;opacity:0;color:var(--text-3);width:22px;height:22px;
  border-radius:6px;display:grid;place-items:center}
.folder-row:hover .more{opacity:1}
.folder-row .more:hover{background:#dededf;color:var(--text)}

.side-foot{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.user-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;width:100%}
.user-row:hover{background:var(--hover)}
.avatar{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(140deg,#ffb199,#ff6a4d);display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:12px}
.user-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ Main ============ */
.main{flex:1;min-width:0;overflow-y:auto;position:relative}
.main-inner{max-width:1640px;margin:0 auto;padding:34px 42px 80px}

.page-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.page-title{font-size:26px;font-weight:700;letter-spacing:-.025em;margin:0}
.page-head .right{margin-left:auto;display:flex;align-items:center;gap:14px}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:9px;
  font-size:13.5px;font-weight:600;border:1px solid transparent;white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s;
}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(244,85,61,.35)}
.btn-primary:hover{background:var(--accent-press)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#1d4ed8}
.btn-ghost{border-color:var(--line);background:#fff}
.btn-ghost:hover{background:var(--hover)}
.btn-plain{color:var(--text-2)}
.btn-plain:hover{background:var(--hover);color:var(--text)}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:9px}

.banner{
  display:flex;align-items:center;gap:20px;background:#fdf5d6;border-left:4px solid #f0c93b;
  border-radius:10px;padding:16px 20px;margin-bottom:22px;
}
.banner b{font-weight:700}
.banner .txt{font-size:13.5px;line-height:1.55;color:#6b5b18}
.banner .btn{margin-left:auto}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.chip-select{
  display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:500
}
.chip-select:hover{background:var(--hover)}
.search{position:relative;margin-left:auto;flex:1;max-width:420px;min-width:200px}
.search .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-3)}
.search input{
  width:100%;padding:9px 12px 9px 35px;border-radius:9px;border:1px solid var(--line);
  background:#fff;outline:none
}
.search input:focus{border-color:#c9c9d0;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.seg button{padding:8px 10px;color:var(--text-2);display:grid;place-items:center}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--hover);color:var(--text)}

.section-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin:0 0 14px}
.section-title button{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--text-2)}
.section-title button:hover{background:var(--hover);color:var(--text)}

.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-bottom:34px}
.folder-card{
  display:flex;align-items:center;gap:13px;padding:19px 18px;border-radius:12px;
  background:var(--sidebar);cursor:pointer;border:1px solid transparent;position:relative
}
.folder-card:hover{background:#eeeef0}
.folder-card.drop{background:#dbeafe;border-color:#93c5fd}
.folder-card .name{font-weight:600;font-size:14.5px}
.folder-card .n{margin-left:auto;color:var(--text-3);font-size:12.5px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{
  border-radius:12px;overflow:hidden;cursor:pointer;position:relative;
  transition:transform .12s ease, box-shadow .12s ease
}
.card:hover{transform:translateY(-2px)}
.card:hover .thumb{box-shadow:var(--shadow)}
.card.dragging{opacity:.4}
.thumb{
  background:var(--card);color:#8f8f96;border-radius:12px;height:186px;padding:22px 24px;
  overflow:hidden;font-size:22.5px;font-weight:600;line-height:1.42;letter-spacing:-.015em;
  position:relative
}
.thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;
  background:linear-gradient(to bottom,rgba(14,14,16,0),#0e0e10)}
.thumb.empty{color:#4a4a52;font-style:italic;font-weight:500}
.card-meta{padding:12px 3px 0}
.card-title{font-weight:600;font-size:14px;margin-bottom:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card-sub{color:var(--text-2);font-size:12.5px;line-height:1.6}
.card-sub .muted{color:var(--text-3)}
.card-actions{position:absolute;top:9px;right:9px;opacity:0;transition:opacity .12s}
.card:hover .card-actions{opacity:1}
.card-actions button{
  width:29px;height:29px;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);display:grid;place-items:center
}
.card-actions button:hover{background:rgba(255,255,255,.3)}

/* lista */
.list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list-row{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;background:#fff}
.list-row+.list-row{border-top:1px solid var(--line-soft)}
.list-row:hover{background:var(--sidebar)}
.list-row .t{font-weight:600;min-width:200px}
.list-row .p{color:var(--text-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .d{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.list-row .acts{display:flex;gap:4px;opacity:0}
.list-row:hover .acts{opacity:1}
.list-row .acts button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--text-2)}
.list-row .acts button:hover{background:var(--hover);color:var(--text)}

.empty-state{text-align:center;padding:90px 20px;color:var(--text-3)}
.empty-state h3{color:var(--text);font-size:17px;margin:0 0 6px}
.empty-state p{margin:0 0 20px;font-size:13.5px}

/* ============ Editor ============ */
.ed-top{
  display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:20
}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text-2)}
.crumbs b{color:var(--text);font-weight:600}
.crumbs .sep{color:var(--text-3)}
.ed-top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.save-state{font-size:12.5px;color:var(--text-3);min-width:74px}

.ed-wrap{max-width:860px;margin:0 auto;padding:46px 24px 200px}
.ed-title{
  width:100%;border:none;outline:none;font-size:44px;font-weight:700;letter-spacing:-.03em;
  padding:0;margin:0 0 16px;background:transparent
}
.ed-title::placeholder{color:#c9c9d0}
.labels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.label-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
  border:1px dashed var(--line);color:var(--text-2);font-size:12.5px;font-weight:500
}
.label-chip.solid{border-style:solid;background:var(--sidebar);color:var(--text)}
.label-chip button{color:var(--text-3);display:grid;place-items:center}
.label-chip button:hover{color:var(--text)}
.label-add:hover{background:var(--hover);color:var(--text)}
hr.rule{border:none;border-top:1px solid var(--line);margin:0 0 26px}

.rt-toolbar{
  display:inline-flex;align-items:center;gap:2px;padding:6px;border-radius:12px;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);margin-bottom:26px;
  flex-wrap:wrap;position:sticky;top:64px;z-index:15
}
.rt-toolbar button{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--text-2)}
.rt-toolbar button:hover{background:var(--hover);color:var(--text)}
.rt-toolbar button.on{background:#e9e9ec;color:var(--text)}
.rt-sep{width:1px;height:20px;background:var(--line);margin:0 5px}

.ed-body{
  outline:none;font-size:18px;line-height:1.85;color:#1c1c20;min-height:55vh;
}
.ed-body p{margin:0 0 1.15em}
.ed-body:empty::before{content:attr(data-ph);color:var(--text-3)}
.ed-body mark{background:#fff2a8;padding:1px 2px;border-radius:3px}
.ed-body .cue{
  display:inline-block;background:#eef2ff;color:#4338ca;border-radius:6px;padding:1px 7px;
  font-size:.86em;font-weight:600
}
.ed-body blockquote{border-left:3px solid var(--line);margin:0 0 1.15em;padding-left:16px;color:var(--text-2)}
.ed-stats{position:fixed;bottom:20px;right:26px;font-size:12px;color:var(--text-3);
  background:rgba(255,255,255,.9);padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  backdrop-filter:blur(8px)}

/* ============ Menús y modales ============ */
.menu{
  position:fixed;z-index:200;min-width:194px;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.14);padding:5px;font-size:13.5px
}
.menu button, .menu .mi{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;text-align:left
}
.menu button:hover{background:var(--hover)}
.menu button.danger{color:#dc2626}
.menu button.danger:hover{background:#fef2f2}
.menu hr{border:none;border-top:1px solid var(--line-soft);margin:5px 2px}
.menu .head{padding:7px 10px 5px;color:var(--text-3);font-size:11.5px;font-weight:600}

.overlay{position:fixed;inset:0;background:rgba(15,15,18,.42);z-index:300;display:grid;place-items:center;padding:20px}
.modal{background:#fff;border-radius:15px;width:100%;max-width:430px;box-shadow:0 24px 60px rgba(0,0,0,.24);
  padding:24px;animation:pop .14s ease}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{margin:0 0 6px;font-size:17px;font-weight:700}
.modal p{margin:0 0 18px;color:var(--text-2);font-size:13.5px;line-height:1.55}
.modal input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;outline:none}
.modal input[type=text]:focus{border-color:#c9c9d0;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.modal .row{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
.swatches{display:flex;gap:8px;margin-top:14px}
.swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent}
.swatch.on{border-color:var(--text);transform:scale(1.06)}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#16161a;color:#fff;
  padding:11px 18px;border-radius:10px;font-size:13.5px;z-index:400;box-shadow:0 10px 30px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:12px;animation:up .18s ease
}
@keyframes up{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.toast button{color:#ffb4a4;font-weight:600}

/* ============================== Modo noche ================================ */
:root{color-scheme:light}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --bg:#111116;
  --sidebar:#0d0d11;
  --line:#2a2a34;
  --line-soft:#20202a;
  --text:#f0f0f4;
  --text-2:#a8a8b6;
  --text-3:#76768a;
  --hover:#1e1e27;
  --card:#08080b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
}
:root[data-tema="oscuro"] ::selection{background:#5c2a20}
:root[data-tema="oscuro"] .ws-select{background:var(--hover)}
:root[data-tema="oscuro"] .ws-select:hover{background:#262632}
:root[data-tema="oscuro"] .badge{background:#26262f;color:#9a9aab}
:root[data-tema="oscuro"] .nav-item.active,
:root[data-tema="oscuro"] .folder-row.active{background:#232330}
:root[data-tema="oscuro"] .btn-ghost{background:var(--hover)}
:root[data-tema="oscuro"] .btn-ghost:hover{background:#262632}
:root[data-tema="oscuro"] .chip-select,
:root[data-tema="oscuro"] .search input,
:root[data-tema="oscuro"] .seg,
:root[data-tema="oscuro"] .list-row,
:root[data-tema="oscuro"] .menu,
:root[data-tema="oscuro"] .modal,
:root[data-tema="oscuro"] .rt-toolbar{background:var(--hover)}
:root[data-tema="oscuro"] .chip-select:hover,
:root[data-tema="oscuro"] .seg button.on,
:root[data-tema="oscuro"] .menu button:hover,
:root[data-tema="oscuro"] .rt-toolbar button:hover{background:#2a2a36}
:root[data-tema="oscuro"] .rt-toolbar button.on{background:#33333f;color:#fff}
:root[data-tema="oscuro"] .list-row:hover{background:#1a1a23}
:root[data-tema="oscuro"] .ed-top{background:rgba(17,17,22,.92)}
:root[data-tema="oscuro"] .ed-body{color:#e8e8ee}
:root[data-tema="oscuro"] .ed-body mark{background:#5c4a12;color:#ffeaa0}
:root[data-tema="oscuro"] .ed-body .cue{background:#22223a;color:#a5b4fc}
:root[data-tema="oscuro"] .ed-stats{background:rgba(17,17,22,.9)}
:root[data-tema="oscuro"] .banner{background:#26220f;border-left-color:#8a7420}
:root[data-tema="oscuro"] .banner .txt{color:#e0d09a}
:root[data-tema="oscuro"] .folder-card{background:var(--hover)}
:root[data-tema="oscuro"] .folder-card:hover{background:#242430}
:root[data-tema="oscuro"] .label-chip.solid{background:var(--hover)}
:root[data-tema="oscuro"] .menu button.danger:hover{background:#2a1416}
:root[data-tema="oscuro"] .modal input[type=text]{background:#0f0f14;color:var(--text)}
:root[data-tema="oscuro"] .toast{background:#2a2a36}
:root[data-tema="oscuro"] .thumb{background:#08080b}
:root[data-tema="oscuro"] .thumb::after{background:linear-gradient(to bottom,rgba(8,8,11,0),#08080b)}
:root[data-tema="oscuro"] .card-actions button{background:rgba(255,255,255,.1)}
:root[data-tema="oscuro"] .folder-row.drop{background:#1e2a44;outline-color:#3b5a94}
:root[data-tema="oscuro"] .folder-card.drop{background:#1e2a44;border-color:#3b5a94}

/* ---------------- selectores de idioma y tema en el lateral --------------- */
.side-tools{display:flex;gap:8px;align-items:center;padding:8px 8px 0}
.sidebar.collapsed .side-tools{flex-direction:column;padding:8px 0 0}
.selector-idioma,.selector-tema{
  display:inline-flex;background:var(--hover);border:1px solid var(--line);
  border-radius:9px;padding:3px;gap:2px;flex:none
}
.selector-idioma button{
  border:none;background:none;cursor:pointer;font-family:inherit;font-size:11.5px;
  font-weight:700;letter-spacing:.03em;color:var(--text-3);padding:4px 8px;border-radius:6px
}
.selector-tema button{
  border:none;background:none;cursor:pointer;padding:4px 8px;border-radius:6px;
  color:var(--text-3);display:grid;place-items:center
}
.selector-tema button svg{
  width:15px;height:15px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.selector-idioma button:hover,.selector-tema button:hover{color:var(--text)}
.selector-idioma button.on{background:var(--bg);color:var(--text)}
.selector-tema button.on{background:var(--bg);color:var(--accent)}

/* ==========================================================================
   Móvil y tablet
   El lateral pasa a ser un cajón que se abre sobre el contenido. Los
   selectores de idioma y tema siguen al pie del lateral, que es donde ya
   estaban, así que en el móvil quedan al final del menú.
   ========================================================================== */
.abrir-lateral{
  display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--bg);
  border-radius:9px;cursor:pointer;place-items:center;flex:none
}
.abrir-lateral:hover{background:var(--hover)}
.barras{display:block;width:17px;height:11px;position:relative}
.barras i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--text);
  transition:transform .2s ease, opacity .16s ease
}
.barras i:nth-child(1){top:0}
.barras i:nth-child(2){top:4.5px}
.barras i:nth-child(3){top:9px}

.velo{
  position:fixed;inset:0;background:rgba(10,10,14,.45);z-index:40;
  animation:aparecerVelo .16s ease;backdrop-filter:blur(2px)
}
@keyframes aparecerVelo{from{opacity:0}to{opacity:1}}

@media(max-width:860px){
  .abrir-lateral{display:grid}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:50;width:280px;
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18)
  }
  .sidebar.abierto{transform:none}
  .sidebar.collapsed{width:280px}          /* contraer no aplica en móvil */
  .sidebar.collapsed .hide-collapsed{display:revert}
  .sidebar.collapsed .brand-name{display:revert}
  #collapseBtn{display:none}
  .main-inner{padding:20px 18px 70px}
  .page-head{gap:10px}
  .page-title{font-size:21px}
  .toolbar{gap:9px}
  .search{max-width:none;order:3;flex-basis:100%;min-width:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  .folder-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px}
  .banner{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}
  .banner .btn{margin-left:0}
}
@media(max-width:520px){
  .page-head .right .btn span{display:none}   /* el botón queda como icono */
  .page-head .right .btn{padding:9px 11px}
  .grid{grid-template-columns:1fr}
  .thumb{height:150px;font-size:19px}
  .ed-wrap{padding:26px 18px 140px}
  .ed-title{font-size:31px}
  .ed-top{padding:11px 14px;gap:8px}
  .ed-top .crumbs{display:none}
  .ed-top .right .btn span{display:none}
  .save-state{display:none}
  .ed-stats{right:14px;bottom:14px;font-size:11px}
}

/* ============================ Sello de compilación ========================= */
.sello-version{
  position:fixed;bottom:10px;z-index:70;
  border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:10.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:var(--text-3);opacity:.4;padding:4px 7px;border-radius:6px;
  transition:opacity .15s, background .15s
}
.sello-version[data-lado="derecha"]{right:10px}
.sello-version[data-lado="izquierda"]{left:10px}
.sello-version:hover{opacity:.95;background:var(--hover)}
/* En el editor el contador ya ocupa esa esquina. */
.ed-wrap ~ .sello-version,
body:has(.ed-wrap) .sello-version[data-lado="derecha"]{bottom:44px}
@media(max-width:620px){ .sello-version{bottom:6px;font-size:10px;opacity:.3} }