/* ============================== */
/* Base: single vertical scroll   */
/* ============================== */
html, body {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;     /* ← la página es quien scrollea */
  overflow-x: hidden !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  color: #212529;
  background: #f3f6f8;
}

/* ============================== */
/* App shell / topbar             */
/* ============================== */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
.app-main  { display:flex; flex:1; }
.topbar    { height:56px; display:flex; align-items:center; }
.dx-toolbar { padding:10px 14px; }

/* ============================== */
/* Layout + Drawer                */
/* ============================== */
#drawer {
  flex: 1;
  min-width: 0;
  height: auto !important;                        /* ← nunca fijo */
  min-height: calc(100vh - 56px) !important;      /* ← solo mínimo */
  background: transparent;
}

.layout {
  display: flex;
  height: auto !important;                        /* ← nunca fijo */
  min-height: calc(100vh - 56px) !important;      /* ← solo mínimo */
}

/* Sidebar (scroll propio) */
#sidebar{
  width:260px;
  background:#1f2937;
  color:#fff;
  padding:12px;
  overflow-y:auto !important;                     /* ← su propio scroll */
  overflow-x:hidden !important;
  transition:left .2s ease;
  position:sticky;
  top:56px;
  max-height: calc(100vh - 56px);
}

/* Contenido central (sin scroll interno) */
#content-wrap{
  flex:1;
  min-width:0;
  background:#f3f6f8;
  padding:18px 22px;
  height:auto !important;
  min-height:0 !important;
  overflow-y:visible !important;                  /* ← NO scroll interno */
  overflow-x:hidden !important;
}

/* ============================== */
/* DevExtreme Drawer internals    */
/* ============================== */
.dx-drawer-content {
  height: 100% !important;
  display: block;
}
.dx-drawer-panel-content {
  background-color: #1f2937 !important;
  color: #ffffff !important;
  height: 100%;
  overflow: auto;
}

/* Fuerza ancho del panel en desktop cuando está shrink */
@media (min-width:1200px){
  .dx-drawer-opened .dx-drawer-panel-content,
  .dx-drawer-shrink .dx-drawer-panel-content{
    width:260px !important;
  }
}

/* ============================== */
/* Responsive (sidebar móvil)     */
/* ============================== */
@media (max-width:1199px){
  .layout { position:relative; }
  #sidebar{
    position:fixed;
    top:56px; left:-260px; bottom:0;
    z-index:1000;
    max-height:none;
  }
  body.sidebar-open #sidebar{ left:0; }
}

/* ============================== */
/* Tree (navtree)                 */
/* ============================== */
#navtree .dx-treeview-item,
#navtree .dx-treeview-item .dx-icon { color: #ffffff !important; }
#navtree .dx-treeview-item-without-checkbox .dx-treeview-item-content {
  padding: 8px 10px; border-radius: 8px;
}
#navtree .dx-treeview-item:hover,
#navtree .dx-treeview-item.dx-state-focused {
  background: rgba(255,255,255,0.12) !important; color: #ffffff !important;
}
#navtree .dx-treeview-node.dx-state-selected > .dx-treeview-item {
  background: rgba(255,255,255,0.22) !important; color: #ffffff !important;
}
/* Oculta buscador del tree si DevExtreme lo inyecta */
#navtree .dx-treeview-search, #navtree .dx-searchbox { display: none !important; }

/* Tree dentro de #sidebar (cuando no usas #navtree explícito) */
#sidebar .dx-treeview-item,
#sidebar .dx-treeview-item .dx-icon{ color:#fff !important; }
#sidebar .dx-treeview-item-without-checkbox .dx-treeview-item-content{
  padding:8px 10px; border-radius:8px;
}
#sidebar .dx-treeview-item:hover,
#sidebar .dx-treeview-item.dx-state-focused{
  background:rgba(255,255,255,.12) !important;
}
#sidebar .dx-treeview-node.dx-state-selected > .dx-treeview-item{
  background:rgba(255,255,255,.22) !important;
}
#sidebar .dx-treeview-search, #sidebar .dx-searchbox{ display:none !important; }

/* ============================== */
/* Botón hamburguesa              */
/* ============================== */
#btn-menu .dx-button,
#btn-menu .dx-button.dx-button-mode-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#btn-menu .dx-icon, #btn-menu .dx-button-content { color: #fff !important; }

/* ============================== */
/* Bienvenida / textos            */
/* ============================== */
.welcome h1{ font-size:28px; margin:10px 0 14px; font-weight:700; }
.sutext{ font-size:12px; color:#6b7280; }

/* ============================== */
/* DataGrid (estético)            */
/* ============================== */
.dx-datagrid { background:#fff; border-radius:12px; }
.dx-datagrid-headers { font-weight:600; }
.dx-datagrid-rowsview .dx-row:hover { background:#f3f4f6; }
.dx-datagrid .dx-toolbar { border-bottom:none; padding:8px 10px; }

/* ============================== */
/* Filtros / genéricos            */
/* ============================== */
.filtro-form { display:grid; gap:10px; padding:10px; }
.f-field { display:grid; gap:6px; }
.f-field label { font-size:12px; color:#333; }
.f-field input, .f-field select { padding:6px 8px; border:1px solid #ddd; border-radius:6px; }
.f-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.gg-toolbar { position: relative; z-index: 1; }
.gg-grid-host { margin-top: 8px; position: relative; z-index: 0; }
.gg-toolbar .dx-button { height: 30px; } /* evita colapsos con temas */

 /* layout propio que ya tenías */
.filtro-form { display:grid; gap:10px; padding:10px; }
.f-field { display:grid; gap:6px; position: relative; }
.f-field label { font-size:12px; color:#333; }
.f-field input, .f-field select { padding:6px 8px; border:1px solid #ddd; border-radius:6px; }
.f-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.gg-toolbar { position: relative; z-index: 1; }
.gg-grid-host { margin-top: 8px; position: relative; z-index: 0; }
.gg-toolbar .dx-button { height: 30px; }

/* ==== validación visual ==== */
.f-field.invalid input,
.f-field.invalid select,
.f-field.invalid textarea {
  border-color: #e53935 !important;
  background: #ffebee !important;
}
.field-error-msg { color:#e53935; font-size:12px; margin-top:4px; }

/* botón del calendario */
.date-suffix-btn { cursor:pointer; margin-left:6px; user-select:none; font-size:18px; line-height:1; }
.date-hidden-input { position:absolute; left:-9999px; width:0; height:0; opacity:0; }

.date-hidden-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}