/* =============================
   Escanon Dashboard (CSS limpio)
   Solo lo que usa el index actual
   ============================= */

/* ===== Vars ===== */
:root{
  --nav-h: 64px;                 /* alto del header oscuro */
  --control-h: 36px;             /* alto único: pills + selects */
  --line: #e6eef5;
  --soft: #f6f8fb;

  /* paleta header */
  --green:   #39e991;
  --green-2: #18d777;
  --bg-900:  #262833;
  --bg-800:  #3c3f50;
}

/* Reset mínimo para fondo */
body{ background:#fff; }

/* ================= Header oscuro (logo + título) ================= */
.dash-nav.nav-dark{
  background: linear-gradient(180deg, var(--bg-900) 0%, var(--bg-800) 100%);
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  border-bottom: none;
}
.dash-nav.nav-dark .nav-wrap{
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; height:100%; width:100%;
}
.dash-nav.nav-dark .brand{ display:inline-flex; align-items:center; line-height:0; }
.dash-nav.nav-dark .brand img{ height:36px; width:auto; display:block; }

/* Título, más pequeño y a la derecha */
.dash-nav.nav-dark .nav-title{
  margin-left:auto;
  text-align:right;
  color:var(--green);
  font-weight:780;
  font-size:clamp(14px,1.6vw,18px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ================= Toolbar (features + separador + filtros) ================= */
.toolbar{
  position: sticky; top: var(--nav-h); z-index: 19;
  background:#fff; border-bottom:1px solid #eef1f5;
  padding:12px 16px; box-shadow:0 4px 16px rgba(30,35,48,.04);
}
.toolbar__row{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:nowrap;
}

/* Routebar (features) */
.routebar{ display:flex; gap:12px; }

/* Píldoras de nivel 1 */
.rb-pill{
  height:var(--control-h);
  display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:14px;
  background:#fff; color:#192132; font-weight:600;
  border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(30,35,48,.06);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.rb-pill:hover{ border-color:var(--green); box-shadow:0 0 0 2px rgba(57,233,145,.08); }
.rb-pill.is-active{ border-color:var(--green); }
.rb-chev{ font-size:12px; opacity:.7; }

/* Íconos por mask (reutilizables) */
.rb-ico{
  width:18px; height:18px; background: currentColor; color:#6b7a90;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
}
.rb-ico--lock{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/></svg>");
}
.rb-ico--search{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 4a6 6 0 1 1 0 12A6 6 0 0 1 10 4zm8.3 12.9 3.4 3.4-1.4 1.4-3.4-3.4A8 8 0 1 1 10 2a8 8 0 0 1 8.3 14.9z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 4a6 6 0 1 1 0 12A6 6 0 0 1 10 4zm8.3 12.9 3.4 3.4-1.4 1.4-3.4-3.4A8 8 0 1 1 10 2a8 8 0 0 1 8.3 14.9z'/></svg>");
}
.rb-ico--heart{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6.7-4.2-9.3-7C.7 11.9 1.3 8.4 4 7a5 5 0 0 1 6 1 5 5 0 0 1 6-1c2.7 1.4 3.3 4.9 1.3 7-2.6 2.8-9.3 7-9.3 7z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-6.7-4.2-9.3-7C.7 11.9 1.3 8.4 4 7a5 5 0 0 1 6 1 5 5 0 0 1 6-1c2.7 1.4 3.3 4.9 1.3 7-2.6 2.8-9.3 7-9.3 7z'/></svg>");
}

/* Dropdown de features */
.rb-group{ position:relative; }
.rb-menu{
  position:absolute; top: calc(100% + 8px); left:0;
  min-width:260px; width:280px; background:#fff;
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 18px rgba(30,35,48,.06);
  padding:6px; display:none; z-index:40;
}
.rb-group.is-open > .rb-menu{ display:block; }

.rb-item{
  position:relative; display:flex; align-items:center; gap:10px;
  height:38px; padding:0 12px 0 16px; border-radius:10px;
  color:#3c3f50; text-decoration:none; font-size:14px;
}
.rb-item:hover{ background:#eefdf5; box-shadow: inset 0 0 0 1px var(--green); color:#0b2b1b; }
.rb-item.is-active{ background:#f7fafc; color:#192132; }
.rb-item.is-active::after{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--green);
}
.rb-dot{ width:6px; height:6px; border-radius:50%; background:#cfd6e3; display:inline-block; }
.rb-tag{ font-size:12px; color:#6b7a90; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:.1rem .5rem; }

/* Separador vertical (features | filtros) */
.toolbar__sep{
  width:1px; height:var(--control-h); background:#e8eef4;
  margin:0 10px; align-self:center;
}
@media (min-resolution: 2dppx){
  .toolbar__sep{ transform: translateY(.5px); } /* ajuste sub-pixel */
}

/* Filtros (misma altura/tipo que las pills, sin bold) */
.top-actions{ display:flex; align-items:center; gap:8px; }
.top-actions select{
  height:var(--control-h); padding:0 12px; border-radius:14px;
  border:1px solid var(--line); background:#fff;
  font: 500 14px/1.2 Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a; transition:border-color .15s, box-shadow .15s;
}
.top-actions select:hover{ border-color:#cfd8e3; }
.top-actions select:focus{
  outline: none; border-color: var(--green-2);
  box-shadow:0 0 0 3px rgba(24,215,119,.22);
}
.top-actions select[disabled]{ opacity:.5; cursor:not-allowed; }

/* ================= Main / Viewer ================= */
.dash-layout{ min-height: calc(100vh - var(--nav-h) - 48px); }
.dash-view{ padding:16px; background:var(--soft); }
#viewer{
  width:100%; height: calc(100vh - var(--nav-h) - 48px);
  background:#fff; border:1px solid var(--line); border-radius:16px;
}

/* ================= Footer ================= */
.dash-foot{
  padding:16px; text-align:center; color:#7b8aa0; border-top:1px solid var(--line); background:#fff;
}

/* ================= Responsive ================= */
@media (max-width:1180px){
  .toolbar__row{ flex-wrap:wrap; }
}
@media (max-width:900px){
  .dash-nav.nav-dark .nav-title{
    width:100%; text-align:left; margin-left:0;
  }
}

/* === FIX: centrado vertical exacto del header y título sin corte === */
.dash-nav.nav-dark { height: var(--nav-h); overflow: visible; }
.dash-nav.nav-dark .nav-wrap{
  height: 100%;
  padding: 0 16px !important;   /* antes 10px 16px → bajaba 10px el contenido */
  align-items: center;          /* asegura centrado vertical */
}

/* título a la derecha pero con “aire” y línea compacta */
.dash-nav.nav-dark .nav-title{
  margin-left: auto;
  padding-right: 35px;          /* evita que se pegue/corte contra el borde */
  line-height: 1;               /* alinea mejor verticalmente */
  max-width: 40vw;              /* evita overflow en pantallas chicas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}