/* ============================================================
   Central de Producción — Custom Styles
   ============================================================ */

:root {
  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px;

  /* ── Colores marca ──────────────────────────────────────── */
  --color-primary: #164281;        /* alineado con MOVI */
  --color-primary-light: #2451a3;
  --color-accent: #F4831F;
  --color-accent-dark: #d4700f;
  --color-success: #198754;
  --color-danger: #dc3545;
  --color-warning: #b8860b;        /* dorado — centralizado aquí */
  --color-info: #0d6efd;

  /* ── Superficies ────────────────────────────────────────── */
  --color-bg: #f0f2f5;
  --color-card: #ffffff;
  --color-text: #212529;
  --color-text-muted: #5a6370;

  /* ── Bandas (evitar colores hardcoded en templates) ─────── */
  --color-band-gold:   #b8860b;
  --color-band-silver: #6c757d;
  --color-band-bronze: #a05a2c;

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-xs:  0.70rem;
  --font-xxs: 0.65rem;
  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Motion & Shape ─────────────────────────────────────── */
  --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-card: 16px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-card-hover: 0 8px 25px -5px rgba(0,0,0,0.08), 0 4px 10px -3px rgba(0,0,0,0.04);
}

/* ── Reset & Base ──────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

/* ── Modo embebido (iframe dentro de MOVI) ─────────────────── */
body.embedded #sidebar,
body.embedded #topbar {
  display: none !important;
}
body.embedded #main-wrapper {
  margin-left: 0 !important;
  padding-top: 0 !important;
}
body.embedded .hscroll-fixed {
  left: 0 !important;
}
body.embedded .messages-container {
  top: 12px;
}
body.embedded #content {
  padding: 12px 16px;
}

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--color-primary);
  transition: width var(--transition);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: var(--topbar-height);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
  font-size: .9rem;
}

.sidebar-logo-text { opacity: 1; transition: opacity var(--transition); }
#sidebar.collapsed .sidebar-logo-text { opacity: 0; width: 0; }

/* Nav Links */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.sidebar-nav a,
.sidebar-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .875rem;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  border-radius: 0;
}

.sidebar-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-nav a.active { background: var(--color-accent); color: #fff; }

.sidebar-nav a i { font-size: 1.1rem; flex-shrink: 0; min-width: 20px; }

.sidebar-nav-text { transition: opacity var(--transition); }
#sidebar.collapsed .sidebar-nav-text { opacity: 0; width: 0; }

.sidebar-section-header {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65); /* was .4 → ratio ~2.0:1 insuf.; .65 → ~3.7:1, adecuado para texto decorativo pequeño */
  padding: 16px 18px 4px;
  cursor: default;
}
#sidebar.collapsed .sidebar-section-header { opacity: 0; }

.sidebar-divider {
  border-color: rgba(255,255,255,.1);
  margin: 6px 12px;
}

/* ── Topbar ────────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1020;
  transition: left var(--transition);
  gap: 12px;
}

#sidebar.collapsed ~ #main-wrapper #topbar,
#sidebar.collapsed ~ #topbar {
  left: var(--sidebar-collapsed-width);
}

#toggle-sidebar {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background var(--transition);
  flex-shrink: 0;
}
#toggle-sidebar:hover { background: var(--color-bg); }

.topbar-spacer { flex: 1; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
}

.topbar-avatar {
  width: 34px; height: 34px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── Main Content ──────────────────────────────────────────── */
#main-wrapper {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  transition: margin-left var(--transition);
}

#sidebar.collapsed ~ #main-wrapper {
  margin-left: var(--sidebar-collapsed-width);
}

#content {
  padding: 24px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Buttons ─────────────────────────────────────────────────
   Override Bootstrap's default border-radius */
.btn { border-radius: var(--radius-btn) !important; }

.card-header {
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: transparent;
  padding: 16px 20px;
  font-weight: 600;
}

/* KPI Cards */
.kpi-card {
  border-radius: var(--radius-card);
  padding: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-icon {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  opacity: .2;
}
.kpi-card .kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.kpi-card .kpi-label {
  font-size: .8rem;
  color: rgba(255,255,255,.95); /* was opacity:.85 — on lighter grads (#6c757d,#495057) that could fail 4.5:1 */
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kpi-yoy {
  font-size: .72rem;
  font-weight: 600;
  margin-top: .3rem;
}
/* Bright enough to pass on all KPI card gradients including kpi-secondary (#6c757d→#495057) */
.kpi-yoy-up   { color: #c8fce0; } /* was #a8f0c6 — brighter for sufficient contrast on mid-gray bg */
.kpi-yoy-down { color: #ffd0d0; } /* was #ffb3b3 — brighter for sufficient contrast on mid-gray bg */
.kpi-yoy-label {
  font-weight: 400;
  color: rgba(255,255,255,.88); /* was opacity:.75 — fails on lighter gradient backgrounds */
  margin-left: .15rem;
}

.kpi-blue      { background: linear-gradient(135deg, #164281, #2451a3); }
.kpi-orange    { background: linear-gradient(135deg, #F4831F, #e06000); }
.kpi-green     { background: linear-gradient(135deg, #198754, #0f5c38); }
.kpi-teal      { background: linear-gradient(135deg, #0d6efd, #0a58ca); }
.kpi-secondary { background: linear-gradient(135deg, #6c757d, #495057); }

/* ── Tables ────────────────────────────────────────────────── */
.table-responsive-fixed {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 280px);
}

/* Scrollbar horizontal fija al fondo de la ventana */
.hscroll-fixed {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  height: 12px;
  background: #e9ecef;
  z-index: 1010;
  overflow-x: auto;
  overflow-y: hidden;
  transition: left var(--transition);
}
#sidebar.collapsed ~ #main-wrapper .hscroll-fixed,
#sidebar.collapsed ~ .hscroll-fixed {
  left: var(--sidebar-collapsed-width);
}
.hscroll-inner { height: 1px; }

.table { font-size: .83rem; }
.table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  padding: 10px 12px;
}
.table tbody tr:hover { background: rgba(22,66,129,.04); }
.table td { vertical-align: middle; padding: 8px 12px; }

/* ── Badges / Tags ─────────────────────────────────────────── */
.badge-convenio    { background: #d4edda; color: #155724; }
.badge-no-convenio { background: #f8d7da; color: #721c24; }

/* ── Catalog Cards (home) ──────────────────────────────────── */
.catalog-card {
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}
.catalog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.catalog-card .catalog-icon {
  width: 48px; height: 48px;
  background: rgba(22,66,129,.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* ── Progress Bars ─────────────────────────────────────────── */
.progress {
  height: 8px;
  border-radius: 4px;
}
.progress-bar-custom {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* ── Filters Bar ───────────────────────────────────────────── */
.filters-bar {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: 20px;
  position: sticky;
  top: var(--topbar-height);
  z-index: 100;
}
.filters-bar .form-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5a6370; /* darkened from #6c757d for WCAG AA at small uppercase text */
  margin-bottom: 4px;
}
.filters-bar .form-select, .filters-bar .form-control {
  font-size: .83rem;
}

/* ── Page Title ────────────────────────────────────────────── */
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
}
.page-title .breadcrumb {
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ── Button colors ─────────────────────────────────────────── */
.btn-primary   { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); }
.btn-accent    { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }

/* ── Login Page ────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2451a3 50%, #1a2a4a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 40px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-logo {
  width: 64px; height: 64px;
  background: var(--color-accent);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 900;
  margin: 0 auto 20px;
}

/* ── Alerts & Messages ─────────────────────────────────────── */
.messages-container {
  position: fixed;
  top: calc(var(--topbar-height) + 12px);
  right: 20px;
  z-index: 1050;
  min-width: 300px;
  max-width: 420px;
}

/* ── TomSelect en barra de filtros ────────────────────────── */
.ts-wrap .ts-control {
  font-size: .83rem !important;
  min-height: 31px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border-color: #dee2e6 !important;
}
.ts-wrap .ts-control input { font-size: .83rem !important; }
.ts-wrap .ts-control .item {
  font-size: .75rem;
  padding: 1px 4px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  margin: 1px 2px 1px 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-wrap .ts-control .item .remove {
  color: rgba(255,255,255,.8) !important;
  border-left: 1px solid rgba(255,255,255,.3) !important;
  margin-left: 3px !important;
  padding-left: 3px !important;
}
.ts-dropdown { font-size: .83rem !important; z-index: 1060 !important; }
.form-label-xs {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5a6370; /* darkened from #6c757d for WCAG AA compliance at small font size */
  margin-bottom: 2px;
  display: block;
}
.ts-dropdown .option { padding: 5px 10px; }
.ts-dropdown .option.active { background: rgba(22,66,129,.1); color: var(--color-primary); }
.ts-dropdown .option.selected { background: var(--color-primary); color: #fff; }

/* ── Excel-style filter dropdown ──────────────────────────── */
.ef-wrap { position: relative; display: inline-block; }

.ef-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 4px 26px 4px 10px;
  cursor: pointer;
  min-width: 96px;
  max-width: 165px;
  position: relative;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.3;
}
.ef-btn:hover { border-color: #adb5bd; }
.ef-btn.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(22,66,129,.15); }
.ef-btn.ef-locked { background: #f8f9fa; border-color: #dee2e6; cursor: not-allowed; opacity: .75; }
.ef-btn.ef-locked .ef-btn-value { color: #6c757d; }
.ef-btn.ef-locked .ef-btn-arrow { display: none; }

.ef-btn-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a6370; /* darkened from #6c757d for WCAG AA compliance at small font size */
  white-space: nowrap;
  pointer-events: none;
}
.ef-btn-value {
  font-size: .78rem;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  pointer-events: none;
}
.ef-btn-value.has-selection { color: var(--color-primary); font-weight: 600; }
.ef-btn-arrow {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .6rem;
  color: #adb5bd;
  pointer-events: none;
}

.ef-panel {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 1070;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 6px 28px rgba(0,0,0,.18);
  min-width: 230px;
  max-width: 300px;
}
.ef-panel-header {
  padding: 8px 12px 6px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ef-panel-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.ef-panel-count { font-size: .72rem; color: #5a6370; } /* darkened from #6c757d for WCAG AA at small size */

.ef-search {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #f0f2f5;
  padding: 7px 12px;
  font-size: .82rem;
  outline: none;
  background: #fafbfc;
}
.ef-search::placeholder { color: #adb5bd; font-style: italic; }

/* Sel. todo / Ninguno actions bar */
.ef-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid #f0f2f5;
  background: #fafbfc;
}
.ef-action-btn {
  font-size: .70rem;
  color: var(--color-primary);
  background: none;
  border: 1px solid #d0d8e8;
  border-radius: 4px;
  padding: 2px 9px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  transition: background .12s;
}
.ef-action-btn:hover { background: rgba(22,66,129,.09); }

.ef-items-wrap { max-height: 260px; overflow-y: auto; }
.ef-items-wrap::-webkit-scrollbar { width: 5px; }
.ef-items-wrap::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; }

.ef-item {
  display: flex;
  align-items: center;
  padding: 4px 10px 4px 12px;
  gap: 8px;
  font-size: .82rem;
  user-select: none;
}
.ef-item:hover { background: rgba(22,66,129,.05); }
.ef-item input[type=checkbox] {
  width: 14px; height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
/* label wrapping text + amount */
.ef-item-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  margin: 0;
  font-size: .82rem;
}
.ef-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ef-item-amt {
  font-size: .72rem;
  color: #5a6370; /* darkened from #6c757d for WCAG AA at small font size */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* "Solo" button — visible only on row hover */
.ef-item-only {
  display: none;
  font-size: .66rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(22,66,129,.08);
  border: 1px solid rgba(22,66,129,.18);
  border-radius: 3px;
  padding: 1px 7px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  transition: background .1s;
}
.ef-item:hover .ef-item-only { display: block; }
.ef-item-only:hover { background: rgba(22,66,129,.18); }

/* ── Preset panel ──────────────────────────────────────────── */
.preset-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1080;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  width: 280px;
  padding: 10px;
}
.preset-item {
  border-radius: 5px;
  padding: 5px 6px;
}
.preset-item:hover { background: #f0f4ff; }
.preset-item-name { font-size: .82rem; }

/* ── Tabulator custom theme ────────────────────────────────── */
.tabulator { border-radius: 0 0 12px 12px; }
.tabulator .tabulator-header {
  background: var(--color-primary) !important;
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: .8rem;
}
.tabulator .tabulator-row:hover { background: rgba(22,66,129,.04) !important; }

/* ── Contrast fixes ───────────────────────────────────────── */

/* Bootstrap text-warning (#ffc107) on white has ~1.07:1 ratio — unusable.
   Override to a dark amber that meets WCAG AA 4.5:1 on white backgrounds.
   Applies inside cards, tables, and content areas (not inside dark KPI cards). */
.card .text-warning,
.table .text-warning,
.modal .text-warning,
.alert .text-warning {
  color: #a06000 !important; /* dark amber — ratio ~5.6:1 on white ✓ */
}

/* Bootstrap's text-muted (#6c757d on white = ratio ~4.49:1) is borderline.
   Override to our darker --color-text-muted (#5a6370, ratio ~5.0:1) everywhere. */
.text-muted {
  color: var(--color-text-muted) !important; /* #5a6370, ratio ~5.0:1 on white ✓ */
}

/* ══════════════════════════════════════════════════════════════
   CLASES UTILITARIAS REUTILIZABLES
   (Reemplazan inline styles repetidos en múltiples templates)
   ══════════════════════════════════════════════════════════════ */

/* ── Encabezado de tabla ─────────────────────────────────────── */
.table-header {
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  padding: 10px 12px;
}
.table-header-sm {
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  padding: 7px 10px;
  font-size: var(--font-xs);
}

/* ── Etiquetas de sección y formulario ─────────────────────────── */
.label-section {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9ca3af;
}
.label-xs {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.label-xxs {
  font-size: var(--font-xxs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}

/* ── Contenedor scrollable con altura dinámica ─────────────────── */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
}
.scroll-container-sm  { max-height: 260px; }
.scroll-container-md  { max-height: 400px; }
.scroll-container-lg  { max-height: 600px; }

/* ── KPI card dorado (variante faltante) ───────────────────────── */
.kpi-gold {
  background: linear-gradient(135deg, var(--color-warning) 0%, #8b6914 100%);
  color: #fff;
}
.kpi-gold .kpi-icon  { background: rgba(0,0,0,.20); color: #fff; }
.kpi-gold .kpi-label { color: rgba(255,255,255,.85); }
.kpi-gold .kpi-value { color: #fff; }
.kpi-gold:hover { box-shadow: 0 14px 36px rgba(184,134,11,.45); }

/* ── Badge de nivel de banda ────────────────────────────────────── */
.badge-band-gold   { background: var(--color-warning); color: #fff; }
.badge-band-silver { background: var(--color-band-silver); color: #fff; }

/* ── Accesibilidad: estado con ícono (no solo color) ──────────── */
.status-up   { color: var(--color-success); }
.status-down { color: var(--color-danger); }
.status-up::before   { content: '▲ '; font-size: .75em; }
.status-down::before { content: '▼ '; font-size: .75em; }

/* ── Sidebar: sección header con contraste WCAG AA ────────────── */
.sidebar-section-header {
  /* Aumentado de rgba(255,255,255,.65) a .85 para cumplir WCAG AA */
  color: rgba(255,255,255,.88) !important;
}

/* ── Touch targets mínimos 44px (WCAG 2.1 SC 2.5.5) ──────────── */
.btn-touch {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Empty state genérico ──────────────────────────────────────── */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: #9ca3af;
}
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.empty-state p { font-size: .85rem; margin: 0; }

/* ── Responsive ────────────────────────────────────────────── */
/* ── Hamburger button (solo visible en mobile) ─────────────── */
#btn-hamburger {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1100;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── Overlay oscuro cuando el sidebar está abierto en mobile ── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
}
#sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
  /* En mobile el sidebar arranca oculto (off-canvas) */
  #sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 1000;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Cuando está colapsado mantenemos el mismo comportamiento */
  #sidebar.collapsed { width: var(--sidebar-width); transform: translateX(-100%); }
  #main-wrapper { margin-left: 0; }
  #sidebar.collapsed ~ #main-wrapper { margin-left: 0; }
  #topbar { left: 0; }
  #sidebar ~ #topbar { left: 0; }
  #btn-hamburger { display: flex; }
  #toggle-sidebar { display: none; }  /* Ocultar el botón de colapso desktop */
  #content { padding: 12px; }
  /* KPI cards: max 2 columnas en mobile */
  .kpi-card { min-width: 0; }
  /* Home banner: stack vertical en mobile */
  .home-banner { flex-direction: column; text-align: center; }
  .hb-right { text-align: center; }
  /* Filtros: wrap en mobile */
  .filters-bar .d-flex { flex-wrap: wrap; }
}

@media (min-width: 769px) {
  #btn-hamburger { display: none !important; }
  #sidebar-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   UX ENHANCEMENTS — animaciones, micro-interacciones, gamificación
   ══════════════════════════════════════════════════════════════ */

/* ── 1. KPI card hover lift + glow ──────────────────────────── */
.kpi-card {
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: default;
}
.kpi-card:hover { transform: translateY(-6px) scale(1.015); }
.kpi-blue:hover     { box-shadow: 0 14px 36px rgba(22,66,129,.45); }
.kpi-orange:hover   { box-shadow: 0 14px 36px rgba(244,131,31,.45); }
.kpi-green:hover    { box-shadow: 0 14px 36px rgba(25,135,84,.42); }
.kpi-teal:hover     { box-shadow: 0 14px 36px rgba(13,110,253,.42); }
.kpi-secondary:hover{ box-shadow: 0 14px 36px rgba(73,80,87,.35); }
.kpi-card .kpi-icon { transition: opacity .22s ease, transform .22s ease; }
.kpi-card:hover .kpi-icon { opacity:.35; transform:translateY(-50%) scale(1.2); }

/* ── 2. Skeleton shimmer para KPIs durante carga AJAX ───────── */
@keyframes shimmer {
  0%   { background-position:-600px 0; }
  100% { background-position: 600px 0; }
}
.kpi-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.10) 25%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,.10) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
  display: inline-block;
  color: transparent !important;
  min-width: 130px;
  height: 1.5em;
  vertical-align: middle;
  pointer-events: none;
}

/* ── 3. Slide-up fade-in de entrada ─────────────────────────── */
@keyframes slideUpFadeIn {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim-entry {
  opacity: 0;
  animation: slideUpFadeIn .48s ease forwards;
}

/* ── 4. Podio visual top 3 en tablas de ranking ─────────────── */
.ranking-pos-1 {
  background: linear-gradient(90deg,rgba(255,215,0,.14) 0%,transparent 65%) !important;
  border-left: 3px solid #FFD700;
}
.ranking-pos-2 {
  background: linear-gradient(90deg,rgba(192,192,192,.14) 0%,transparent 65%) !important;
  border-left: 3px solid #C0C0C0;
}
.ranking-pos-3 {
  background: linear-gradient(90deg,rgba(205,127,50,.14) 0%,transparent 65%) !important;
  border-left: 3px solid #CD7F32;
}
.ranking-pos-1 td:first-child { font-size:1.3rem !important; line-height:1; }
.ranking-pos-2 td:first-child { font-size:1.12rem !important; line-height:1; }
.ranking-pos-3 td:first-child { font-size:1rem !important; line-height:1; }
.ranking-pos-1:hover { background:linear-gradient(90deg,rgba(255,215,0,.24) 0%,rgba(255,215,0,.04) 65%) !important; }
.ranking-pos-2:hover { background:linear-gradient(90deg,rgba(192,192,192,.24) 0%,rgba(192,192,192,.04) 65%) !important; }
.ranking-pos-3:hover { background:linear-gradient(90deg,rgba(205,127,50,.24) 0%,rgba(205,127,50,.04) 65%) !important; }

/* ── 5. Barra de progreso con transición animada (Metas) ─────── */
.progress-bar-anim {
  transition: width 1.2s cubic-bezier(.25,.46,.45,.94);
}

/* ── 6. Badge "En línea" home ────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity:1; }
  50%       { opacity:.35; }
}
.online-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ══ Layout Controls (Sortable / Edge-Resize / Minimize) ════════════════ */

/* Each sortable card needs position:relative for the resize handle */
.layout-card { position: relative; }

/* Strip for home.html cards (above the partial) */
.lc-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 2px 3px 0;
  margin-bottom: 4px;
  font-size: .72rem;
  color: #9ca3af;
  user-select: none;
}
.lc-card-label {
  flex: 1;
  font-weight: 600;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
}

/* Controls inside dashboard card-headers */
.lc-controls {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

/* Shared button style */
.lc-btn {
  background: none;
  border: none;
  padding: 2px 5px;
  cursor: pointer;
  color: #9ca3af;
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.4;
  transition: background .12s, color .12s;
}
.lc-btn:hover { background: #f1f5f9; color: #374151; }

/* Drag handle cursor */
.lc-drag-handle { cursor: grab; }
.lc-drag-handle:active { cursor: grabbing; }

/* ── Edge resize handle ───────────────────────────────────────────────── */
.lc-resize-handle {
  position: absolute;
  top: 0;
  right: 0;             /* flush with card right edge — stays inside card */
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* permanent subtle dots — always visible, communicates draggability */
.lc-resize-handle::before {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-primary, #164281);
  opacity: .18;
  box-shadow:
    0 -7px 0 0 var(--color-primary, #164281),
    0  7px 0 0 var(--color-primary, #164281);
  transition: opacity .18s, box-shadow .18s;
}
/* brighter on card hover */
.layout-card:hover .lc-resize-handle::before { opacity: .35; }
/* accent + larger dots on handle hover */
.lc-resize-handle:hover::before {
  opacity: .75 !important;
  box-shadow:
    0 -8px 0 0 var(--color-accent, #F4831F),
    0  8px 0 0 var(--color-accent, #F4831F);
  background: var(--color-accent, #F4831F);
}
/* accent + tall line while actively resizing */
.lc-resize-handle.resizing::before {
  opacity: 1 !important;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-accent, #F4831F);
  box-shadow: none;
}
/* freeze cursor + selection during drag */
body.lc-resizing {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}

/* ── Vertical (height) resize handle ─────────────────────────────────── */
.lc-body { position: relative; }

.lc-resize-handle-y {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 12px;
  cursor: row-resize;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* horizontal dots — permanent, subtle */
.lc-resize-handle-y::before {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-primary, #164281);
  opacity: .18;
  box-shadow:
    -8px 0 0 0 var(--color-primary, #164281),
     8px 0 0 0 var(--color-primary, #164281);
  transition: opacity .18s, box-shadow .18s, background .18s;
}
.layout-card:hover .lc-resize-handle-y::before { opacity: .35; }
.lc-resize-handle-y:hover::before {
  opacity: .75 !important;
  background: var(--color-accent, #F4831F);
  box-shadow:
    -10px 0 0 0 var(--color-accent, #F4831F),
     10px 0 0 0 var(--color-accent, #F4831F);
}
.lc-resize-handle-y.resizing::before {
  opacity: 1 !important;
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent, #F4831F);
  box-shadow: none;
}
body.lc-resizing-y {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: row-resize !important;
}

/* Sortable ghost / chosen feedback */
.layout-card.sortable-ghost   { opacity: .35; }
.layout-card.sortable-chosen  {
  box-shadow: 0 0 0 2px var(--color-primary, #164281);
  border-radius: var(--radius-card, 14px);
  z-index: 10;
}

/* KPI block minimize strip */
.kpi-block-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 6px;
}

/* ── Scrollbar horizontal siempre visible en tablas ──────────────────── */
/* Tabulator */
.tabulator .tabulator-tableHolder {
  overflow-x: scroll !important;
}
/* Bootstrap table-responsive (Renovaciones) */
.table-responsive {
  overflow-x: scroll !important;
}
/* Scrollbar visible en webkit (Chrome, Safari, Edge) */
.tabulator .tabulator-tableHolder::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.tabulator .tabulator-tableHolder::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.tabulator .tabulator-tableHolder::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.tabulator .tabulator-tableHolder::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}