/* ====== Ajuste general ====== */
:root{
  --brand:#029fcd;
  --brand-dark:#253b7f;
  --ink:#1f2937;
  --muted:#64748b;
  --ring:rgba(2,159,205,.22);
  --line:#e2e8f0;
  --bg:#ffffff;
}

/* Permite seleccionar texto (style.css lo desactiva) */
body{ -webkit-user-select:auto; user-select:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ====== CONTENEDOR TOOLBAR ====== */
#deviceMngRow{
  position:relative;
  clear:both !important;
  float:none !important;
}

#devices-toolbar{
  display:grid !important;
  grid-template-columns:1fr !important; /* una sola columna: búsqueda -> filtros -> paginación */
  row-gap:12px !important;
  margin:12px 0 16px !important;
  position:relative;
  z-index:5; /* por encima de tarjetas, para que nunca queden por debajo al hacer zoom */
}

/* ====== BÚSQUEDA ====== */
.searchbar{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  clear:both !important;
  float:none !important;
  position:relative;
  z-index:6;
}

.search-input{
  height:36px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  outline:none;
  min-width:240px;
  max-width:100%;
  font-size:14px;
  background:#fff;
}
.search-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }

.icon-btn{
  height:36px; width:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:8px; background:#fff; cursor:pointer;
}
.icon-btn:hover{ background:#f5faff; }
#searchBtn img{ width:20px; height:20px; }

/* ====== FILTROS ====== */
.filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  background:#fff;
}

.filter-label{
  font-size:14px; color:#374151;
}

.filter-input{
  height:36px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  outline:none;
  background:#fff;
  min-width:160px;
}

.apply-btn,
.clear-btn{
  height:36px; padding:0 14px;
  border-radius:8px; cursor:pointer;
  font-weight:600; border:1px solid transparent;
  line-height:34px; white-space:nowrap;
}
.apply-btn{ background:var(--brand); color:#fff; }
.apply-btn:hover{ filter:brightness(.96); }
.clear-btn{ background:#f8fafc; color:#374151; border-color:var(--line); }
.clear-btn:hover{ background:#eef2f7; }

.dash{ user-select:none; }

/* ====== PAGINACIÓN ====== */
.pager,
#devicePagesDiv{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  clear:both !important;
  float:none !important;
  position:static !important;
  width:100% !important;
  margin-top:4px !important;
  z-index:4; /* por debajo de filtros, por encima de tarjetas */
}

#devicePagesDiv .indexSelected,
#devicePagesDiv .indexUnselected,
#devicePagesDiv button{
  appearance:none;
  min-width:34px;
  height:34px;
  padding:0 10px !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:14px !important;
  font-weight:600 !important;
  margin:0 !important;
  line-height:32px !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
#devicePagesDiv .indexSelected{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}
#devicePagesDiv button:hover{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}

/* ====== TARJETAS: nunca por encima del toolbar/paginador ====== */
.deviceElementDiv{ position:relative; z-index:0; clear:both; }

/* ====== BREAKPOINTS ====== */
@media (max-width:1024px){
  .search-input{ flex:1 1 320px; }
  #devicePagesDiv{ justify-content:center !important; }
}
@media (max-width:640px){
  #fromDate, #toDate{ min-width:140px; }
  #onlineSelect{ min-width:120px; }
}