/* ===== Global Styles (v4) ===== */*{box-sizing:border-box}html,body{height:100%}body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 1200px at 10% 10%, #1a1a1a 0%, #0f0f0f 40%, #0a0a0a 100%);
	  color:#f1f1f1;
	  /* Scrollbar del sidebar (se sobreescribe por tema) */
	  --sb-scroll-track: rgba(255,255,255,.05);
	  --sb-scroll-thumb: rgba(255,255,255,.24);
	  --sb-scroll-thumb-hover: rgba(255,255,255,.34);
	}/* Glassmorphism */.glass{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 32px rgba(0,0,0,.37); border-radius:16px; }
.glass-blur{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }.icon{ width:16px !important; height:16px !important; display:inline-block; vertical-align:middle; flex:0 0 16px; }
/* ===== Layout (CSS variables para ancho del sidebar) ===== */.app-shell{
  --sbw: 280px; /* ancho base */
  display:grid;
  grid-template-columns: var(--sbw) 1fr;
  gap:20px;
  padding:20px;
  min-height:100vh;
  position: relative;
}
.app-shell.collapsed{ --sbw: 72px; }#main-content{ padding:20px; min-width:0; height: 94vh;}.sidebar{
  width: var(--sbw);
  position: relative;
  top:auto;
  height: calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden;
  transition: width .25s ease, transform .25s ease, left .25s ease;
  z-index:1001;
}.sidebar .sidebar-header{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid rgba(255,255,255,.12); }.sidebar .logo{ font-weight:700; letter-spacing:.5px; }.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--metricas-card-border, rgba(255,255,255,.14)); cursor:pointer; }
/* Sidebar: el listado de módulos SIEMPRE debe scrollear dentro del sidebar */
.sidebar-nav{ display:flex; flex-direction:column; padding:8px; gap:6px; flex:1 1 0%; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-gutter:stable; }
/* Scrollbar del sidebar (WebKit) */
.sidebar-nav::-webkit-scrollbar{ width: 10px; height: 10px; }
.sidebar-nav::-webkit-scrollbar-track{ background: var(--sb-scroll-track); border-radius: 12px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: var(--sb-scroll-thumb); border-radius: 12px; border: 2px solid transparent; background-clip: padding-box; }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background: var(--sb-scroll-thumb-hover); }
/* Firefox */
.sidebar-nav{ scrollbar-width: thin; scrollbar-color: var(--sb-scroll-thumb) var(--sb-scroll-track); }
.nav-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; text-decoration:none; color:#f1f1f1; border:1px solid transparent; }.nav-item:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }.nav-item.active{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); }
/* Footer siempre por encima del scroll (evita solapamiento visual) */
.sidebar-footer{border-radius: 15px; margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:10px; background:inherit; position:relative; z-index:2; }
.user-info{ display:flex; gap:10px; align-items:center; }.user-meta{ display:grid; }.btn-logout{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:#f1f1f1; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); }.btn-logout:hover{ background:rgba(255,255,255,.16); }.btn-settings{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:14px; margin-top:10px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#f1f1f1; text-decoration:none; cursor:pointer;
}.btn-settings:hover{ background:rgba(255,255,255,.16); }.card{ padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); }/* Tabla */.table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.12); font-size: 10px; }.table th,.table td{ padding:5px 5px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }.table thead th{ background:rgba(255,255,255,.08); }.actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content: flex-end;}table tr td{WORD-BREAK:break-all}/* Botones */.btn,.btn.small,.btn.danger,.btn.ghost,.primary{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer;
}.btn.small{ padding:8px 10px; font-size:.9rem; }.btn.danger{ border-color:rgba(255,0,0,.3); background:rgba(255,0,0,.08); }.btn.ghost{ background:transparent; }.primary{ background:rgba(255,255,255,.20); }.primary:hover{ background:rgba(255,255,255,.26); }/* Formularios */.form-grid{ display:grid; gap:12px; }label{ font-size:.92rem; color:#e8e8e8; }input[type=text],input[type=email],input[type=password],input[type=number],input[type=datetime-local],input[type=tel],select{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--metricas-card-border, rgba(255,255,255,.14));
  background:rgba(255,255,255,.04); color:#fff;
  margin: 2px;
}.switch{ display:inline-flex; align-items:center; gap:8px; }.switch input[type=checkbox]{ width:20px; height:20px; }/* Modal */.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:20px; z-index:1000; }.modal-overlay.hidden{ display:none; }.modal{ width:min(640px,100%); border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); padding:16px; position:relative; }.modal-close{ position:absolute; top:10px; right:10px; background:transparent; border:none; color:#fff; cursor:pointer; }.modal h2{ margin-top:0; }/* Toggle flotante: oculto en desktop, visible en móvil */.floating-toggle{ display:none; position:fixed; left:12px; top:12px; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; background: var(--metricas-card-bg, rgba(255,255,255,.08)); border:1px solid var(--metricas-card-border, rgba(255,255,255,.2)); color: var(--metricas-icon-color, #fff); z-index:1100; cursor:pointer; }.sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; display:none; }/* ===== Login ===== */.login-body{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:24px;
}.login-card{
  width:min(460px, 94vw);
  padding:24px;
}.login-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}.alert{
  padding:10px;
  border-radius:12px;
  background:rgba(255,0,0,.1);
  border:1px solid rgba(255,0,0,.3);
  margin-bottom:10px;
}.login-form{ display:grid; gap:12px; }.login-form button{ justify-content:center; width:100%; }/* Neutralizar color de autocompletado (Chrome/Edge) */input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
  transition: background-color 9999s ease-out 0s;
}::placeholder{ color:#cfcfcf; opacity:.8; }/* ===== Sidebar en modo colapsado (desktop) ===== */.sidebar-nav{ overflow-y:auto; overflow-x:hidden; }.nav-item{ white-space:nowrap; }.app-shell.collapsed .sidebar .logo{ display:none; }.app-shell.collapsed .sidebar .nav-item span{ display:none; }.app-shell.collapsed .sidebar .user-meta{ display:none; }.app-shell.collapsed .sidebar .btn-logout span{ display:none; }.app-shell.collapsed .sidebar .sidebar-header{ justify-content:center; }.app-shell.collapsed .sidebar .nav-item{ justify-content:center; padding:10px; gap:0; }.app-shell.collapsed .sidebar .btn-logout{ justify-content:center; padding:10px; }.app-shell.collapsed .sidebar .user-info{ justify-content:center; }/* v11 sidebar footer buttons collapsed */.app-shell.collapsed .sidebar .btn-settings span{ display:none; }.app-shell.collapsed .sidebar .btn-settings,
.app-shell.collapsed .sidebar .btn-logout{
  justify-content:center;
  gap:0;
  padding:10px;
  width:44px;
  margin-left:auto;
  margin-right:auto;
  border-radius:14px;
}/* ===== Responsive ===== *//* ===== Switch glasmorfista para UsuariosApp (solo afecta .ua-toggle) ===== */
.switch input.ua-toggle[type="checkbox"]{
  /* Tamaño base */
  --sw-w: 46px;
  --sw-h: 26px;
  --pad: 3px;                 /* padding interior del track */
  --knob: calc(var(--sw-h) - var(--pad)*2);

  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  cursor: pointer;

  /* Track */
  background:
    radial-gradient(180% 180% at 20% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.03) 100%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.35);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  outline: none;
}.switch input.ua-toggle[type="checkbox"]::after{
  content: "";
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(230,230,230,.92));
  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}/* Estado checked */.switch input.ua-toggle[type="checkbox"]:checked{
  background:
    radial-gradient(180% 180% at 20% 20%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 60%, rgba(255,255,255,.06) 100%),
    rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.12),
    0 12px 32px rgba(0,0,0,.38);
}.switch input.ua-toggle[type="checkbox"]:checked::after{
  transform: translateX(calc(var(--sw-w) - var(--knob) - var(--pad)*2));
  background:
    linear-gradient(180deg, #ffffff, #e9e9e9);
}/* Hover / Focus */.switch input.ua-toggle[type="checkbox"]:hover{ border-color: rgba(255,255,255,.45); }.switch input.ua-toggle[type="checkbox"]:focus-visible{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.2),
    0 0 0 4px rgba(255,255,255,.10),
    inset 0 1px 2px rgba(255,255,255,.12),
    0 12px 32px rgba(0,0,0,.38);
}/* Disabled (mientras hace fetch) */.switch input.ua-toggle[type="checkbox"]:disabled{
  opacity: .6;
  cursor: not-allowed;
}/* Tamaño compacto en tablas: se ve mejor en filas */.table .switch input.ua-toggle[type="checkbox"]{
  --sw-w: 40px;
  --sw-h: 22px;
}/* Accesibilidad: respeta reduced motion */@media (prefers-reduced-motion: reduce){
  .switch input.ua-toggle[type="checkbox"],
  .switch input.ua-toggle[type="checkbox"]::after{
    transition: none;
  }
}@media (max-width: 1024px){
  .app-shell{ display:block; padding:16px; }
  #main-content{ padding: 15px 8px 16px; }
  .sidebar{ position:fixed; left:0; top:0; height:100vh; width:280px; transform:translateX(-110%); border-radius:0 16px 16px 0; }
  .sidebar.open{ transform:translateX(0); }
  .floating-toggle{ display:flex; }
  .sidebar-backdrop.show{ display:block; }
  /* En móvil, la "colapsada" no aplica; el ancho siempre 280px cuando abierta */
}@media (max-width: 640px){
  .module-general .general-pager .pager-label{ display:none; }
  .module-general .general-pager .btn.small{ padding-left:10px; padding-right:10px; }
 .card{ padding:12px; } .nav-item{ padding:10px 12px; } .btn,.primary{ padding:9px 10px; } }/* ===== General: tabla responsive a tarjetas ===== */.module-general .general-table { width:100%; }/* Layout card para mobile / tablet *//* Compacción extra en mobile pequeño */@media (max-width: 640px){
  .module-general .general-table td{ grid-template-columns: 96px 1fr; }
}/* ===== General: Acciones masivas ===== */.module-general .bulk-bar { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }.module-general .bulk-select-all { display:none; }/* Mostrar el "Seleccionar todo" de la barra en mobile (el thead se oculta en tu diseño responsive) */@media (max-width: 1024px){
  .module-general .bulk-select-all { display:flex; }
}/* ===== General: toolbar de paginación ===== */.module-general .general-toolbar{
  display:flex; gap:12px; align-items:center;
  justify-content:space-between; flex-wrap:wrap; margin-bottom:10px;
}.module-general .general-pp{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:8px 10px;
}.module-general .general-pp select{
  padding:6px 8px; border-radius:10px;
  background: rgba(255,255,255,.06); color:#5f5f5f;
  border:1px solid rgba(255,255,255,.18);
}.module-general .general-pageinfo{
  opacity:.9;
}.general-pp option{color:black}.module-general .general-pager{
  display:flex; align-items:center; gap:8px;
}.module-general .general-pager .page-indicator{ opacity:.9; }.module-general .general-pager .btn.disabled{
  pointer-events:none; opacity:.5;
}/* Mobile tweaks */@media (max-width: 640px){
  .module-general .general-pp span { display:none; }
}/* ===== General: scroll interno y cabecera sticky ===== */.module-general .general-table-wrap{
  /* alto máximo con scroll interno */
  max-height: clamp(320px, 60vh, 720px);
  overflow: auto;
  border-radius: 14px;
  /* leve borde/glass para separar el área scrollable dentro de la card */
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  }/* Cabecera pegajosa dentro del scroll */.module-general .general-table thead th{
  position: static;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,.08);            /* conserva tu tema */}/* Scrollbar estilizado (WebKit) */.module-general .general-table-wrap::-webkit-scrollbar{
  width: 10px; height: 10px;
}.module-general .general-table-wrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 12px;
}.module-general .general-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.26);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
}.module-general .general-table-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.36);
}/* Scrollbar (Firefox) */.module-general .general-table-wrap{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.34) rgba(255,255,255,.08);
}/* Mobile / tablet: seguimos usando las tarjetas; el contenedor también scrollea si es largo */@media (max-width: 1024px){
  .module-general .general-table-wrap{
    max-height: clamp(320px, 65vh, 720px);
  }
}/* Ocultar por defecto el label táctil (solo móvil lo muestra) */.module-general .row-select-label{ display:none; }/* ===== General: selección táctil por tarjeta (mobile) ===== */@media (max-width: 1024px){
  /* Celda de selección: sin grilla label/valor */
  .module-general .general-table td.sel-cell{
    padding: 0;
    border: 0;
    display: block;
  }
  /* Oculta el label "Seleccionar" generado por data-label */
  .module-general .general-table td.sel-cell::before{ display:none; }

  /* El checkbox se oculta pero sigue accesible para el <label for> */
  .module-general .general-table td.sel-cell input[type=checkbox]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Botón/label táctil a ancho completo */
  .module-general .row-select-label{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:10px 12px; margin:6px 0 10px 0;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .module-general .row-select-label span{ font-weight:600; }
  .module-general .row-select-label i{ opacity:.9; }

  /* Estado seleccionado (solo el label) */
  .module-general .general-table td.sel-cell input:checked + .row-select-label{
    background: rgba(59,130,246,.16);           /* azul tenue */
    border-color: rgba(59,130,246,.42);
    box-shadow: 0 0 0 2px rgba(59,130,246,.25) inset;
  }

  /* Resaltado de la tarjeta completa cuando está seleccionada */
  .module-general .general-table tr.general-row.is-selected{
    border-color: rgba(59,130,246,.45) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.25) inset, 0 8px 24px rgba(0,0,0,.25);
    background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.03));
  }
}.modal{
  max-height: min(90vh, 720px);
  overflow: auto;
}select option{
  color:#000;
  background:#fff; /* mejora legibilidad en menús del SO */
}/* textarea con mismo estilo que inputs */textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--metricas-card-border, rgba(255,255,255,.14));
  background:rgba(255,255,255,.04);
  color:#fff;
}/* Asegura grid por porcentajes en la modal */.g-row-wrap{ flex:0 0 var(--w,100%); max-width:var(--w,100%); padding:5px;}.g-form-flex{ display:flex; flex-wrap:wrap; }.g-row-wrap input,.g-row-wrap textarea,.g-row-wrap select{ width:100%; }/* scrollbars para la modal del builder */#modal-body,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) rgba(255, 255, 255, .03);
}/* WebKit (Chrome, Edge, Safari) */.modal::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}.modal::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .03);
  border-radius: 999px;
}.modal::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .28);
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0); /* para que se vea más delgado */}.modal::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .45);
}/* botón eliminar columna en modal */.ag-col-del {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  color: #fee2e2;
  border-radius: 9999px;
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  cursor:pointer;
  transition: background .12s ease;
}.ag-col-del:hover {
  background: rgba(248,113,113,0.22);
}.ag-col-row--deleted {
  opacity: .35;
  text-decoration: line-through;
}/* ===== Modal de Filtros (layout con flex) ===== *//* Contenedor principal de la modal (usa tu .modal/.glass para el look) */
.filters-modal{
  width: min(980px, 96vw);
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 10px;
}/* Cuerpo de la modal */.filters-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* 1) Buscador en una sola fila */.filters-global{
  display: flex;
  align-items: center;
  gap: 10px;
}.filters-global label{
  font-weight: 600;
  white-space: nowrap;
}#fl-global-q{
  flex: 1 1 auto;
  min-width: 220px;
}/* 2) Grupo de filtros: 3 por fila en desktop, 1 por fila en mobile */.filters-form{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}/* Cada filtro (tarjeta/ítem) */.fl-row{
  display: flex;
  flex-direction: column;          /* label arriba, controles abajo */
  flex: 1 1 calc(33.333% - 12px);  /* 3 por fila con el gap anterior */
  min-width: 260px;                /* evita que se ahogue en pantallas medianas */
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}/* Etiqueta del filtro */.fl-label{
  margin-bottom: 6px;
  opacity: .95;
  font-weight: 600; /* si tu tema ya lo pone fuerte, puedes quitar esto */
}/* Controles del filtro (operador, valor, valor2) */.fl-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}.fl-controls .fl-op{
  min-width: 120px;       /* selector de operador */
}.fl-controls .fl-v,
.fl-controls .fl-v2{
  flex: 1 1 140px;        /* que crezcan y rellenen */
  min-width: 0;
}.fl-controls select[multiple]{
  min-height: 96px;       /* multiselect más cómodo */
  padding: 8px;
}/* Footer de la modal */.filters-footer{
  display: flex;
  align-items: center;
  gap: 10px;
}.filters-footer .spacer{
  flex: 1 1 auto;
}/* Guardados (fila de acciones) */.filters-saved .filters-saved-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}#fl-save-name{
  min-width: 220px;
}/* Responsivo: 1 filtro por fila en mobile */@media (max-width: 720px){
  .fl-row{
    flex: 1 1 100%;
    min-width: 0;
  }
}/* ===== Filters Saved — una sola fila ===== */.filters-saved{
  margin-top: 2px;
}.filters-saved .filters-saved-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;         /* una sola fila */
  width: 100%;
  padding: 6px 0;
  overflow: hidden;          /* evita "bailes" si algo es muy ancho */
}/* Nombre del filtro a guardar: ancho razonable, no crece infinito */#fl-save-name{
  flex: 0 1 280px;           /* base 280px, puede achicarse un poco */
  min-width: 200px;
}/* Botón Guardar: fijo */#fl-save-btn{
  flex: 0 0 auto;
  white-space: nowrap;
}/* Lista de filtros guardados: ¡protagonista! ocupa el espacio disponible */#fl-saved-list{
  flex: 1 1 auto;            /* se estira y rellena */
  min-width: 260px;          /* no colapsa demasiado */
}/* Botones Aplicar/Eliminar: compactos, sin romper la fila */#fl-apply-saved,
#fl-del-saved{
  flex: 0 0 auto;
  white-space: nowrap;
}/* Opcional: que los .btn.small no corten texto */.filters-saved .btn.small{
  white-space: nowrap;
}/* Resiliencia en pantallas chicas:
   - permitimos wrap
   - cada control ocupa fila completa para usabilidad
*/@media (max-width: 720px){
  .filters-saved .filters-saved-row{
    flex-wrap: wrap;         /* ya no forzamos una sola fila en mobile */
    gap: 8px;
  }
  #fl-save-name,
  #fl-save-btn,
  #fl-saved-list,
  #fl-apply-saved,
  #fl-del-saved{
    flex: 1 1 100%;
    min-width: 0;
  }
}.toolbar-content{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}/* ===== Toolbar: icon-only en tablets y mobile ===== */.module-general .toolbar-actions{
  margin-left: auto;
  display:flex; align-items:center; 
  gap:10px; flex-wrap:wrap;
}/* tamaño normal (desktop) */.module-general .toolbar-actions .btn .btn-label{ display:inline; }/* Tablet: ocultar texto, dejar solo ícono */@media (max-width: 1024px){
  .module-general .toolbar-actions{ gap:8px; }
  .module-general .toolbar-actions .btn{
    padding:8px; width:40px; height:40px;
    justify-content:center; gap:0;
  }
  .module-general .toolbar-actions .btn .btn-label{ display:none; }
  .module-general .toolbar-actions .btn > svg,
  .module-general .toolbar-actions .btn > i[data-lucide]{
    width:20px; height:20px; display:inline-flex; align-items:center;
  }
}/* Mobile: más compacto aún */@media (max-width: 640px){
  .module-general .toolbar-actions{ gap:6px; }
  .module-general .toolbar-actions .btn{
    padding:7px; width:36px; height:36px; border-radius:12px;
  }
  .module-general .toolbar-actions .btn.primary{ background:var(--metricas-icon-border, rgba(255,255,255,.18)); }
}/* ===== Indicador de filtros activos (titileo suave) ===== */.module-general .toolbar-actions .btn{ position: relative; }/* para anclar el badge *//* Puntos y animación sutil */
@keyframes filtersPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  50%      { box-shadow: 0 0 0 6px rgba(96,165,250,.10); }
}/* Aplica cuando hay filtros activos */#general-filters-btn.is-active{
  animation: filtersPulse 1.8s ease-in-out infinite;
  border-color: rgba(96,165,250,.35); /* azul tenue */
}#general-filters-btn.is-active::after{
  content:"";
  position:absolute; top:-4px; right:-4px;
  width:8px; height:8px; border-radius:50%;
  background:#60a5fa;                /* azul */
  box-shadow:0 0 10px rgba(96,165,250,.75);
}/* Respeto a accesibilidad */@media (prefers-reduced-motion: reduce){
  #general-filters-btn.is-active{ animation:none; }
}/* ===== Tema Claro (Light) ===== *//* ===== Historial: tabs ===== */
.h-tabs{ width:100%; }.h-tablist{ display:flex; flex-wrap:wrap; gap:10px; }.h-tab{
  appearance:none;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#f1f1f1;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}.h-tab:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }.h-tab.active{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30); }.h-tab .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#f1f1f1;
  font-size:12px;
  font-weight:700;
  line-height:1;
}/* Panels */.h-panel{ display:none; }.h-panel.active{ display:block; }/* v13 hide internal toggle on mobile (use only floating toggle) */@media (max-width: 1024px){
  #sidebar-toggle{ display:none !important; }
}/* v14 floating toggle acts as close when sidebar is open */@media (max-width: 1024px){
  .floating-toggle.is-open{
    /* keep it visible and tappable */
  }
}/* v15 move floating toggle when sidebar open (mobile) so it doesn't overlap sidebar title */@media (max-width: 1024px){
  .floating-toggle.is-open{
    left: auto !important;
    right: 16px !important;
  }
}/* v16 toggle icon contrast fixes *//* Ensure lucide icons follow currentColor */
.icon-btn svg, .floating-toggle svg{ color: currentColor; stroke: currentColor; }/* v18 table row hover */.general-table tbody tr{
  transition: background-color .15s ease, box-shadow .15s ease;
}/* v23 sidebar scrollbar */.sidebar{
  scrollbar-width: thin; /* Firefox */
}/* WebKit (Chrome/Edge/Safari) */.sidebar::-webkit-scrollbar{
  width: 10px;
}/* v24 icon-only footer actions + tooltips */.sidebar .user-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:10px;
}.sidebar .icon-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  position:relative;
}.sidebar .icon-action span{ display:none; }/* Tooltip */.sidebar .icon-action[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  top:-10px;
  transform: translate(-50%, -100%);
  white-space:nowrap;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
}.sidebar .icon-action[data-tooltip]::before{
  content:'';
  position:absolute;
  left:50%;
  top:-10px;
  transform: translate(-50%, -10px);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid transparent;
  opacity:0;
  transition: opacity .15s ease, transform .15s ease;
  z-index:9998;
}.sidebar .icon-action:hover::after{
  opacity:1;
  transform: translate(-50%, -105%);
}.sidebar .icon-action:hover::before{
  opacity:1;
  transform: translate(-50%, -6px);
}/* When sidebar is collapsed, keep actions stacked like before */.app-shell.collapsed .sidebar .user-actions{
  flex-direction:column;
  align-items:center;
  gap:10px;
}/* v25 tooltip clipping + left align */.sidebar .user-actions{
  justify-content:flex-start;
}.sidebar .user-actions .icon-action{
  margin: 0;
}/* ensure tooltip not clipped */.sidebar,
.sidebar .sidebar-footer,
.sidebar .user-info{

}.sidebar .icon-action[data-tooltip]::after,
.sidebar .icon-action[data-tooltip]::before{
  z-index: 100000 !important;
}/* v26 nav-item tooltips (only when sidebar is collapsed) */.app-shell.collapsed .sidebar .nav-item{
  position: relative;
}.app-shell.collapsed .sidebar .nav-item[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 100000;
}.app-shell.collapsed .sidebar .nav-item[data-tooltip]::before{
  content:'';
  position:absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  width:0;
  height:0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid transparent;
  opacity:0;
  transition: opacity .15s ease;
  z-index: 99999;
}.app-shell.collapsed .sidebar .nav-item:hover::after{ opacity:1; }.app-shell.collapsed .sidebar .nav-item:hover::before{ opacity:1; }/* v29 nav tooltips always (modules sidebar tabs) */.sidebar .sidebar-nav,
.sidebar .sidebar-menu{
  overflow-y: auto;
  overflow-x: hidden;
}


.sidebar .nav-item[data-tooltip]{
  position: relative !important;
  z-index: 1000000 !important;
}.sidebar .nav-item[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 100000;
}.sidebar .nav-item[data-tooltip]::before{
  content:'';
  position:absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  width:0;
  height:0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid transparent;
  opacity:0;
  transition: opacity .15s ease;
  z-index: 99999;
}.sidebar .nav-item:hover::after{
  opacity:1;
  transform: translateY(-50%);
}.sidebar .nav-item:hover::before{
  opacity:1;
}




.sidebar{ overflow: visible; }

/* ===== JS Tooltips (rendered outside scroll containers to avoid clipping) ===== */
body.js-tooltips .sidebar .nav-item[data-tooltip]::before,
body.js-tooltips .sidebar .nav-item[data-tooltip]::after{
  display: none !important;
  content: none !important;
}

.app-tooltip{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 2000000;
  background: rgba(17,24,39,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* en temas claros/pastel, tooltip oscuro se mantiene para contraste */
body[data-theme="light"] .app-tooltip,
body[data-theme="pastel"] .app-tooltip,
body[data-theme="medical"] .app-tooltip,
body[data-theme="friendly"] .app-tooltip,
body[data-theme="marino"] .app-tooltip,
body[data-theme="terciopelo"] .app-tooltip{
  background: rgba(17,24,39,.92);
  color: #fff;
  border-color: rgba(255,255,255,.12);
}

.app-tooltip.show{ opacity: 1; }

/* ensure tooltips are positioned relative to the app shell */
.app-shell{ position: relative; }

/* ==== Configuración: Logo en Sidebar ==== */
.sidebar .logo-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.sidebar .logo-img{ max-height:34px; max-width:100%; width:auto; object-fit:contain; display:block; }
.sidebar .logo-text{ font-weight:700; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* =========================================================
   MOBILE — Compact module header + overflow menu (⋮)
   Reduces vertical space used by module headers/toolbars.
   Works with any module using: .module-general, .toolbar-content, .general-toolbar.
   ========================================================= */

.mobile-module-header{ display:none; }
.mobile-module-actions{ display:flex; align-items:center; gap:8px; }
.mobile-module-title{ display:flex; align-items:center; gap:8px; margin:0; font-size:1.05rem; line-height:1.2; min-width:0; }
.mobile-module-title .title-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  border-radius:12px;
  border:1px solid var(--metricas-icon-border, rgba(255,255,255,.18));
  background:var(--metricas-icon-bg, rgba(255,255,255,.06));
  color:var(--metricas-icon-color, inherit);
  cursor:pointer;
}
.btn-icon:hover{
  background:var(--metricas-icon-bg-hover, rgba(255,255,255,.10));
  border-color:var(--metricas-icon-border-hover, var(--metricas-icon-border, rgba(255,255,255,.18)));
}

.mobile-module-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:1200; display:none;
}
.mobile-module-menu{
  position:fixed; left:0; right:0; bottom:0;
  z-index:1201;
  /* anchor absolute children like the close button */
  position: fixed;
  background:var(--metricas-card-bg, rgba(18,18,18,.92));
  border:1px solid var(--metricas-card-border, rgba(255,255,255,.14));
  border-bottom:none;
  border-radius:18px 18px 0 0;color:var(--metricas-card-text, inherit);
  padding:16px;
  display:none;
  max-height:70vh;
  overflow:auto;
}
.mobile-module-menu .menu-section{ display:grid; gap:14px; }
/* action buttons look nicer as a responsive grid */
.mobile-module-menu .menu-row[data-slot="actions"]{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.mobile-module-menu .menu-row[data-slot="actions"] .btn{ width:100%; justify-content:center; }
/* the moved toolbar (pp + pager) should be full-width */
.mobile-module-menu .menu-row[data-slot="toolbar"]{ display:block; }
.mobile-module-menu .menu-title{ font-weight:800; opacity:.95; margin:0; letter-spacing:.2px; }
/* close button */
.mobile-module-menu .menu-close{
  position:absolute; right:12px; top:10px;
  z-index:2;
  pointer-events:auto;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--metricas-icon-border, var(--metricas-card-border, rgba(255,255,255,.14)));
  background:var(--metricas-icon-bg, rgba(255,255,255,.06));
  color:var(--metricas-icon-color, inherit);
}
.mobile-module-menu .menu-close:hover{ background:var(--metricas-icon-bg-hover, rgba(255,255,255,.10)); }
/* little grabber/handle */
.mobile-module-menu::before{
  content:"";
  display:block;
  width:44px;
  height:5px;
  border-radius:999px;
  background:var(--metricas-icon-border, rgba(255,255,255,.18));
  margin: 0 auto 14px auto;
}

/* Make moved toolbar controls fit the sheet */
.mobile-module-menu .general-toolbar{ display:grid; gap:12px; }
.mobile-module-menu .general-pp{ display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.mobile-module-menu .general-pp label{ opacity:.85; }
.mobile-module-menu .general-pp select{ width:100%; }
.mobile-module-menu .general-pageinfo{
  opacity:.85;
  text-align:center;
  padding:8px 10px;
  border-radius:14px;
  background:var(--metricas-widget-bg, rgba(255,255,255,.03));
  border:1px solid var(--metricas-widget-border, rgba(255,255,255,.08));
}
.mobile-module-menu .general-pager{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.mobile-module-menu .general-pager .btn{ flex:1 1 auto; justify-content:center; }
.mobile-module-menu .page-indicator{ width:100%; text-align:center; opacity:.85; }

@media (max-width: 768px){
  /* Oculta cabeceras grandes solo en móvil */
  .module-general .toolbar-content{ display:none !important; }
  .module-general .general-toolbar{ display:none !important; }

  /* La barra de selección masiva se reemplaza por un badge en la cabecera móvil */
  .module-general .bulk-bar{ display:none !important; }

  /* Header móvil */
  .mobile-module-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    padding:10px 10px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
  }
}

/* Badge de eliminación masiva (basurero + número) */
.bulk-badge{
  height:44px;
  min-width:44px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255, 0, 0, .14);
  color: inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.bulk-badge svg{ width:18px; height:18px; }
.bulk-badge .bulk-count{
  font-weight:900;
  letter-spacing:.2px;
}
.bulk-badge:disabled{ opacity:.55; cursor:not-allowed; }

/* Paginación compacta debajo de la cabecera móvil (1 sola línea) */
.mobile-module-pager{
  display:none;
}
@media (max-width: 768px){
  .mobile-module-pager{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin: 10px 0 8px;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
  }
  .mobile-module-pager .general-pageinfo{
    font-size:12px;
    opacity:.9;
    white-space:nowrap;
  }
  .mobile-module-pager .general-pager{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  .mobile-module-pager .general-pager .btn.small{
    padding: 10px 12px;
    border-radius: 14px;
    white-space:nowrap;
  }
  .mobile-module-pager .general-pager .page-indicator{
    white-space:nowrap;
    opacity:.85;
    font-size:12px;
  }
}

/* Abierto */
body.mobile-menu-open{ overflow:hidden; }
.mobile-module-menu-backdrop.is-open{ display:block; }
.mobile-module-menu.is-open{ display:block; }



/* =============================
   Mobile: acciones en cards (icon-only, una fila)
   ============================= */
@media (max-width: 768px){
  td[data-label="Acciones"] .actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    justify-content:flex-start;
    align-items:center;
  }
  td[data-label="Acciones"] .actions .btn{
    padding:8px;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
  }
  /* En mobile dejamos SOLO el ícono; el texto va envuelto en .btn-label y NO ocupa espacio */
  td[data-label="Acciones"] .actions .btn .btn-label{ display:none; }
  td[data-label="Acciones"] .actions .btn svg,
  td[data-label="Acciones"] .actions .btn i{
    font-size:18px;
    line-height:1;
    width:18px;
    height:18px;
  }

  /* En mobile: ocultar el texto de los botones de acciones sin afectar el layout */
  td[data-label="Acciones"] .actions .btn .btn-label{ display:none !important; }
  /* por si algún tema aplica color al texto del botón */
  td[data-label="Acciones"] .actions .btn{ color: inherit; }
}


/* ===== v8: Mobile pager icon-only & action icons centered ===== */
@media (max-width: 640px){
  /* Oculta textos en botones de paginación (Anterior/Siguiente) dejando solo íconos */
  .module-general .general-pager .btn.small{
    font-size: 0 !important;
    line-height: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
  }
  .module-general .general-pager .btn.small i,
  .module-general .general-pager .btn.small svg{
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    line-height: 1;
    display: block;
    margin: 0;
  }

  /* Acciones en cards (mobile): íconos perfectamente centrados */
  td[data-label="Acciones"] .actions .btn{
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  td[data-label="Acciones"] .actions .btn i,
  td[data-label="Acciones"] .actions .btn svg{
    display:block;
    margin:0 !important;
    width:18px;
    height:18px;
  }
}


/* Floating toggle theme-aware */
.floating-toggle svg{ stroke: currentColor; }
.floating-toggle:hover{ filter: brightness(1.05); }


/* pager mobile icon-center fix (evita texto oculto empujando iconos) */
@media (max-width: 640px){
  .module-general .general-pager .btn.small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0; /* elimina ancho del texto (incluye nodos de texto ocultos) */
    line-height:0;
  }
  .module-general .general-pager .btn.small svg,
  .module-general .general-pager .btn.small i{
    font-size:18px;
    line-height:18px;
  }
}