/* ============================================================================
   Purchase App - Estilo corporativo limpio
   ============================================================================ */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #1f2937;
  --ink-soft: #4b5563;
  --ink-mute: #9ca3af;
  --line: #e5e7eb;
  --line-soft: #f1f3f5;
  /* Azul corporativo RTS (logo + estandar usado en FeedBack_APP/site.css) --
     paleta de marca estandar para todos los modulos migrados de aqui en adelante. */
  --brand: #0d4ea6;
  --brand-2: #079acf;
  --brand-light: #e6f2fa;
  --brand-light-border: #bcdcf0;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --radius: 6px;
  /* Botones editables desde Edición */
  --btn-radius: 4px;
  --btn-padding-y: 6px;
  --btn-padding-x: 12px;
  --btn-font-size: 12px;
  --btn-font-weight: 500;
  --btn-letter-spacing: 0px;
  --btn-hover-emphasis: #079acf;
  --btn-primary-bg: #0d4ea6;
  --btn-ok-bg: #15803d;
  --btn-warn-bg: #b45309;
  --btn-bad-bg: #b91c1c;
  --btn-transition: background 120ms ease, color 120ms ease, transform 60ms ease, box-shadow 120ms ease;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  /* Font crispness — evita el aspecto borroso en Windows/Chromium */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  font-kerning: normal;
}
button, input, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header -- degradado corporativo RTS (blanco a la izq., azul de marca a la
   der.) igual al usado en FeedBack_APP/site.css .custom-navbar. El logo cae
   sobre la parte blanca del degradado (buen contraste); el resto (.right)
   sigue en blanco porque cae sobre la parte azul. */
.app-header {
  background: linear-gradient(90deg, #fff 5%, var(--brand) 50%);
  color: #fff;
  padding: 14px 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 500; /* header y sus dropdowns SIEMPRE encima de .tabs (z:10), widgets (z:3), y contenido */
}
.app-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
  transition: opacity 120ms ease;
}
.app-header h1:hover { opacity: 0.85; }
.app-header-logo { height: 34px; width: auto; display: block; }

/* Popover con las pestañas al clickear el logotipo */
.logo-tabs-menu {
  position: absolute;
  top: 100%;
  left: 12px;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  padding: 8px;
  min-width: 240px;
  z-index: 10500; /* siempre por encima de header/tabs/widgets/modales no-editor */
  display: none;
  animation: appsMenuFade 140ms ease-out;
}
.logo-tabs-menu.open { display: block; }
.logo-tabs-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  transition: background 100ms ease;
}
.logo-tabs-menu button:hover { background: var(--line-soft); color: var(--brand-2); }
.logo-tabs-menu button.current { background: var(--line-soft); color: var(--brand); font-weight: 600; }
.logo-tabs-menu button .tab-badge { margin-left: auto; }
.app-header .right { display: flex; gap: 10px; align-items: center; font-size: 12px; position: relative; }
.user-pill {
  background: rgba(255,255,255,.15);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
}

/* Tabs — fondo consistente con la página (sin "cinta aparte") */
.tabs {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px 0;
  display: flex;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab {
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: color 140ms ease, border-bottom-color 140ms ease, background 140ms ease;
}
.tab:hover { color: var(--brand-2); background: rgba(13,78,166,0.08); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.view { display: none; padding: 14px 16px; }
.view.active { display: block; }

/* ==== Home / Inicio ==== */
/* Usa TODO el ancho disponible; escala tamaños con clamp() basado en viewport */
.home-wrap { max-width: 100%; margin: 0 auto; padding: 0 clamp(4px, 0.5vw, 12px); }
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(10px, 1vw, 20px);
  flex-wrap: wrap;
  gap: 12px;
}
.home-title { margin: 0; font-size: clamp(18px, 1.6vw, 30px); font-weight: 700; color: var(--ink); }
.home-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: clamp(11px, 0.9vw, 14px); }
.home-widget-title { font-size: clamp(11px, 0.85vw, 13px) !important; }
.home-widget .kpi { font-size: clamp(22px, 2vw, 36px); }
.home-widget .kpi.sm { font-size: clamp(16px, 1.4vw, 24px); }
.home-widget .kpi-sub { font-size: clamp(10px, 0.75vw, 12px); }

/* Vista principal también usa todo el ancho */
.view { padding: clamp(8px, 0.8vw, 20px) clamp(8px, 1vw, 24px); }
.home-grid {
  display: grid;
  /* Grid base: usa un tamaño de columna consistente y adaptable al viewport */
  --home-col-base: clamp(160px, 14vw, 220px);
  grid-template-columns: repeat(auto-fill, minmax(var(--home-col-base), 1fr));
  gap: clamp(10px, 1vw, 18px);
}
.home-widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(10px, 1vw, 16px);
  box-shadow: var(--shadow);
  min-height: 100px;
  transition: transform 140ms ease, box-shadow 140ms ease;
  position: relative;
  overflow: hidden;
}
/* Tamaños de widget — S (1 col), M (2 col), L (3 col), XL (4 col) */
.home-widget.w-sm { grid-column: span 1; }
.home-widget.w-md { grid-column: span 2; }
.home-widget.w-lg { grid-column: span 3; }
.home-widget.w-xl { grid-column: span 4; }
/* Fallback compat con clase legacy */
.home-widget.wide { grid-column: span 2; }
.home-widget.tall { grid-row: span 2; }
/* En pantallas angostas, todos los widgets caen a 1 columna del grid */
@media (max-width: 640px) {
  .home-widget.w-md, .home-widget.w-lg, .home-widget.w-xl { grid-column: span 1; }
}

/* Controles del widget (quitar + resize) — visibles al pasar mouse o en reorder */
.home-widget-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 140ms ease;
  z-index: 3;
}
.home-widget:hover .home-widget-controls,
body.home-reorder .home-widget-controls { opacity: 1; }
.home-widget-controls button {
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 3px 7px;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.home-widget-controls button:hover { background: rgba(0,0,0,.75); }
.home-widget-controls .hw-remove:hover { background: var(--bad); }
.home-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.home-widget-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.home-widget-icon { font-size: 16px; }
.home-widget-body { font-size: 13px; }
.home-widget .kpi { font-size: 28px; font-weight: 700; color: var(--brand); margin: 6px 0; }
.home-widget .kpi.sm { font-size: 20px; }
.home-widget .kpi-sub { font-size: 11px; color: var(--ink-mute); }
.home-widget ul.list { margin: 0; padding: 0; list-style: none; }
.home-widget ul.list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.home-widget ul.list li:last-child { border-bottom: none; }
.home-widget ul.list li b { color: var(--ink); }
.home-widget-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.home-widget-actions .btn { flex: 1; min-width: 100px; }

/* Reorder mode */
body.home-reorder .home-widget {
  cursor: grab;
  outline: 2px dashed rgba(13,78,166,.35);
  outline-offset: 3px;
}
body.home-reorder .home-widget:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.1); }
body.home-reorder .home-widget.dragging { opacity: 0.4; cursor: grabbing; }
body.home-reorder .home-widget.drag-over { outline-color: var(--brand-2); outline-width: 3px; }
.home-drag-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--ink-mute);
  cursor: grab;
  font-size: 14px;
  padding: 2px 4px;
  display: none;
}
body.home-reorder .home-drag-handle { display: block; }

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.panel-h {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-b { padding: 12px; }

/* Forms */
/* Bootstrap override: Bootstrap define su propio .row (flex + gutters
   negativos de su grid de 12 columnas) -- este .row es un grid propio de la
   app para layouts de campos (cols-2/3/4), sin relación con el de Bootstrap.
   Se resetea explícitamente para que los gutters/anchos de Bootstrap no se
   filtren a los hijos (.field). */
.row {
  display: grid;
  gap: 10px;
  margin: 0;
}
.row > * {
  width: auto;
  max-width: none;
  flex-shrink: initial;
  padding: 0;
  margin-top: 0;
}
.row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.field input, .field select, .field textarea {
  padding: 6px 8px;
  /*border: 1px solid var(--line);*/
  border: 1px solid #c3c3c3;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  /*background: #fff;  */
  color: var(--ink);
  background: #eff6ff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(13,78,166,.15);
}
.field input[readonly], .field input:disabled, .field select:disabled {
  background: #f9fafb;
  color: var(--ink-soft);
}
.field .hint { font-size: 11px; color: var(--ink-mute); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  font-family: inherit;
  transition: var(--btn-transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Hover default suave: usar filter brightness — funciona con cualquier color base y no
   pisa los overrides con !important. El override custom (checkbox "personalizar hover")
   emite reglas explícitas que sobrescriben esto cuando el usuario lo activa. */
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); }
.btn.primary { background: var(--btn-primary-bg); color: #fff; border-color: var(--btn-primary-bg); }
.btn.ok    { background: var(--btn-ok-bg);   color: #fff; border-color: var(--btn-ok-bg); }
.btn.warn  { background: var(--btn-warn-bg); color: #fff; border-color: var(--btn-warn-bg); }
.btn.bad   { background: var(--btn-bad-bg);  color: #fff; border-color: var(--btn-bad-bg); }
.btn.emphasis   { background: var(--btn-hover-emphasis);  color: #fff; border-color: var(--btn-bad-bg); }
.btn.sm { padding: calc(var(--btn-padding-y) * 0.5) calc(var(--btn-padding-x) * 0.67); font-size: calc(var(--btn-font-size) - 1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; color: inherit; border-color: inherit; }

/* Dropdown de acciones (Bootstrap JS -- bootstrap.bundle.min.js en index.html,
   sin bootstrap.css: el toggle reusa .btn de la app, el menú tiene su propio
   estilo aquí para no arrastrar el reset completo de Bootstrap sobre el resto
   de la app). Patrón estándar para agrupar botones de acción en tablas migradas. */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 5px;
  vertical-align: 2px;
  content: "";
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  min-width: 170px;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  font-size: 12.5px;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--brand-light); color: var(--brand); outline: none; }
.dropdown-item.text-danger { color: var(--bad); }
.dropdown-item.text-danger:hover { background: #fee2e2; color: var(--bad); }
.dropdown-divider { height: 0; margin: 4px 0; border-top: 1px solid var(--line); }

/* Button group (Bootstrap-style, sin bootstrap.css -- ver nota del dropdown
   arriba). Reusa .btn de la app; solo funde los bordes internos para que se
   vean como una sola barra conectada. Patrón estándar para agrupar acciones
   de fila en tablas migradas (ver AP, Drafts). */
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn {
  border-radius: 0;
  margin-left: -1px;
  position: relative;
}
.btn-group > .btn:first-child { margin-left: 0; border-top-left-radius: var(--btn-radius); border-bottom-left-radius: var(--btn-radius); }
.btn-group > .btn:last-child { border-top-right-radius: var(--btn-radius); border-bottom-right-radius: var(--btn-radius); }
.btn-group > .btn:hover, .btn-group > .btn:focus { z-index: 1; }

/* Apps grid menu (9 puntos, tipo Google) */
.apps-menu-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, transform 100ms ease;
}
.apps-menu-btn:hover { background: rgba(255,255,255,.22); }
.apps-menu-btn:active { transform: scale(0.94); }
.apps-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }

.apps-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  padding: 12px;
  min-width: 280px;
  z-index: 10500; /* siempre por encima de header/tabs/widgets/contenido */
  display: none;
  animation: appsMenuFade 140ms ease-out;
}
.apps-menu.open { display: block; }
@keyframes appsMenuFade {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Campanita de notificaciones (PO recien autorizada, ver po_notifications) */
.notif-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--bad, #d33);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 46px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  min-width: 350px;
  max-width: 390px;
  max-height: 500px;
  z-index: 10500;
  display: none;
  overflow: hidden;
  color: var(--ink);
}
.notif-panel.open { display: flex; flex-direction: column; }
.notif-panel-title { font-weight: 800; font-size: 17px; padding: 14px 16px 10px; }

/* Tabs tipo pill (Todas / No leídas de FB), con badge de color por categoría */
.notif-panel-tabs { display: flex; gap: 6px; padding: 0 12px 10px; }
.notif-panel-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-mute);
  background: var(--line-soft);
  transition: background 120ms ease, color 120ms ease;
}
.notif-panel-tab:hover { background: var(--line); }
.notif-panel-tab.active { background: var(--brand); color: #fff; }
.notif-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0,0,0,.08);
  color: inherit;
}
.notif-panel-tab.active .notif-tab-badge { background: rgba(255,255,255,.28); color: #fff; }
/* Colores por categoría (se conservan cuando la pestaña NO está activa) */
.notif-panel-tab:not(.active) .badge-new { background: var(--brand-light); color: var(--brand); }
.notif-panel-tab:not(.active) .badge-featured { background: #fef3c7; color: var(--warn); }
.notif-panel-tab:not(.active) .badge-archived { background: var(--line); color: var(--ink-mute); }

.notif-panel-list { overflow-y: auto; padding: 4px 8px 10px; border-top: 1px solid var(--line); }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  margin-top: 2px;
}
.notif-item:hover { background: var(--line-soft); }
.notif-item-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-po { font-weight: 600; font-size: 13px; line-height: 1.35; }
.notif-item-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.notif-item-actions { display: flex; gap: 6px; margin-top: 8px; }
.notif-item-actions .btn { border-radius: 999px; }
.notif-item-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 6px;
}
.notif-empty { text-align: center; padding: 28px 12px; color: var(--ink-mute); font-size: 12.5px; }
.apps-menu-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px 8px;
  text-align: center;
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.apps-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: none;
  transition: background 120ms ease, transform 100ms ease;
  font-family: inherit;
}
.apps-grid-item:hover { background: var(--line-soft); transform: translateY(-1px); }
.apps-grid-item:active { transform: translateY(0); }
.apps-grid-item .apps-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.apps-grid-item .apps-icon svg { width: 22px; height: 22px; fill: currentColor; }
.apps-grid-item .apps-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: 0.1px;
}
.apps-menu-status {
  padding: 8px 6px 2px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ==== Modo edición inline de botones ==== */
body.btn-edit-mode .btn[data-editable],
body.btn-edit-mode .apps-grid-item[data-editable],
body.btn-edit-mode .apps-menu-btn[data-editable],
body.btn-edit-mode .tab[data-editable] {
  position: relative;
  outline: 2px dashed rgba(13,78,166,.6);
  outline-offset: 2px;
  cursor: pointer;
}
body.btn-edit-mode .btn[data-editable]::after,
body.btn-edit-mode .apps-grid-item[data-editable]::after,
body.btn-edit-mode .apps-menu-btn[data-editable]::after,
body.btn-edit-mode .tab[data-editable]::after {
  content: '✏';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: var(--brand-2);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 5;
}
body.btn-edit-mode .btn[data-editable]:hover,
body.btn-edit-mode .apps-grid-item[data-editable]:hover,
body.btn-edit-mode .apps-menu-btn[data-editable]:hover,
body.btn-edit-mode .tab[data-editable]:hover {
  outline-color: var(--brand-2);
  transform: scale(1.02);
}

.btn-edit-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 9999;
  display: none;
  gap: 12px;
  align-items: center;
}
body.btn-edit-mode .btn-edit-banner { display: inline-flex; }
.btn-edit-banner button {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.btn-edit-banner button:hover { background: rgba(255,255,255,.35); }

.btn-edit-pop {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  padding: 14px;
  min-width: 300px;
  max-width: 340px;
  display: none;
  animation: appsMenuFade 160ms ease-out;
}
.btn-edit-pop.open { display: block; }
.btn-edit-pop h5 { margin: 0 0 8px; font-size: 13px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.btn-edit-pop h5 .close-x {
  cursor: pointer;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.btn-edit-pop h5 .close-x:hover { color: var(--bad); }
.btn-edit-pop .bep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.btn-edit-pop label { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; display: block; margin-bottom: 3px; }
.btn-edit-pop input[type="color"] { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 4px; padding: 2px; cursor: pointer; background: #fff; }
.btn-edit-pop input[type="text"], .btn-edit-pop input[type="file"] { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-family: inherit; }
.btn-edit-pop .bep-preview {
  padding: 10px;
  background: var(--line-soft);
  border-radius: 8px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.btn-edit-pop .bep-actions { display: flex; gap: 6px; margin-top: 10px; }
.btn-edit-pop .bep-actions button {
  flex: 1;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.btn-edit-pop .bep-actions .bep-save { background: #15803d; color: #fff; border-color: #15803d; }
.btn-edit-pop .bep-actions .bep-reset { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* Cuando el botón tiene ícono via override, alinear */
.btn-edit-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-edit-icon img { max-height: 16px; max-width: 16px; vertical-align: middle; }
.apps-grid-item .btn-edit-icon img { max-height: 22px; max-width: 22px; }

/* Tables */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.data th {
  text-align: left;
  padding: 6px 8px;
  background: #f9fafb;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .3px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data tr:hover td { background: #f9fafb; }
table.data th.num { text-align: center; }
table.data td.num { text-align: center; font-variant-numeric: tabular-nums; }
/* Sortable column headers */
table.data th.sortable {
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
}
table.data th.sortable:hover { background: #eef2f7; color: var(--brand-2); }
table.data th.sortable .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.35;
  font-size: 10px;
  transition: opacity 120ms ease;
}
table.data th.sortable.sorted-asc .sort-arrow,
table.data th.sortable.sorted-desc .sort-arrow { opacity: 1; color: var(--brand-2); }
table.data th.sortable.sorted-asc .sort-arrow::after { content: '▲'; }
table.data th.sortable.sorted-desc .sort-arrow::after { content: '▼'; }
table.data th.sortable:not(.sorted-asc):not(.sorted-desc) .sort-arrow::after { content: '↕'; }
table.data td input, table.data td select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 3px;
}
table.data td input:focus, table.data td select:focus {
  border-color: var(--line);
  background: #fff;
  outline: none;
}

/* Items table */
.items-table { width: 100%; border-collapse: collapse; }
.items-table th, .items-table td {
  border: 1px solid var(--line);
  padding: 0;
  font-size: 12px;
  vertical-align: middle;
}
.items-table th {
  background: #f9fafb;
  padding: 5px 6px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .3px;
}
.items-table td { padding: 0; }
.items-table input, .items-table select {
  width: 100%;
  border: none;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
  font-family: inherit;
}
.items-table input:focus { outline: none; background: #fff7d6; }
.items-table td.row-num {
  background: #f9fafb;
  text-align: center;
  color: var(--ink-mute);
  font-weight: 600;
  width: 30px;
}
.items-table td.num input { text-align: right; font-variant-numeric: tabular-nums; }
.items-table td.subtotal {
  text-align: right;
  padding: 6px 8px;
  background: #f9fafb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Totals box */
.totals {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  margin-top: 10px;
}
.totals .letras {
  padding: 12px;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-style: italic;
  color: var(--ink-soft);
}
.totals-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  font-size: 13px;
}
.totals-grid label { color: var(--ink-soft); font-weight: 500; }
.totals-grid .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals-grid .total {
  border-top: 2px solid var(--brand);
  padding-top: 6px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}

/* Actions bar */
.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Autocomplete */
.ac { position: relative; }
.ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  display: none;
}
.ac-list.open { display: block; }
.ac-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ac-item:hover, .ac-item.hover { background: var(--brand-light); }
.ac-item .meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.badge.Pending { background: #fff7e6; color: var(--warn); border: 1px solid #fde68a; }
.badge.Paid    { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }
.badge.Partial { background: var(--brand-light); color: var(--brand-2); border: 1px solid var(--brand-light-border); }
.badge.Overdue { background: #fee2e2; color: var(--bad); border: 1px solid #fecaca; }

/* Filter bar */
.filters {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  align-items: center;
  flex-wrap: wrap;
}
.filters input, .filters select {
  padding: 5px 8px;
  border: 1px solid #c3c3c3;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  min-width: 140px;
  background: #eff6ff;
}
.filters .summary { margin-left: auto; font-size: 12px; color: var(--ink-soft); }

/* Modal */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-bg.open { display: flex; }
.modal {
  /* Bootstrap override: Bootstrap tiene su propia .modal (position:fixed,
     display:none, width/height:100%, pensada como el wrapper de pantalla
     completa) -- aquí .modal es la TARJETA interna dentro de .modal-bg, así
     que se resetean esas propiedades a su comportamiento normal de antes. */
  position: static;
  display: block;
  top: auto;
  left: auto;
  z-index: auto;
  width: auto;
  height: auto;
  outline: 0;
  background: #fff;
  border-radius: 8px;
  min-width: 420px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
@media (max-width: 600px) {
  .modal { min-width: 0; width: 92vw; }
}
/* Variante grande -- se pide con showModal(..., { large: true }), ver
   openViewAPModal (detalle de orden en AP). */
.modal.modal-lg { width: 900px; }
@media (max-width: 600px) {
  .modal.modal-lg { width: 92vw; }
}
/* Variante extra grande -- se pide con showModal(..., { xlarge: true }), ver
   viewReportPO (detalle de orden en Reportes). */
.modal.modal-xl { width: 1100px; }
@media (max-width: 600px) {
  .modal.modal-xl { width: 92vw; }
}
.modal-h {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-h .close { cursor: pointer; color: var(--ink-mute); font-size: 18px; border: none; background: none; }
.modal-b { padding: 16px; }
.modal-f { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* Toast: reemplazado por iziToast (ver frontend/index.html + toast() en app.js) */

/* PO Preview (PDF look) */
.po-preview {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px;
  font-size: 11.5px;
  color: #111;
}
.po-preview h2 { text-align: center; margin: 0 0 14px; font-size: 18px; letter-spacing: 2px; color: var(--brand); }
.po-preview .header-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 12px; }
.po-preview .kv { display: grid; grid-template-columns: 100px 1fr; row-gap: 4px; column-gap: 8px; }
.po-preview .kv .k { color: var(--ink-soft); font-weight: 600; }
.po-preview table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; }
.po-preview table th, .po-preview table td { border: 1px solid #d1d5db; padding: 4px 6px; }
.po-preview table th { background: #f3f4f6; }

/* Empty & loading states */
.empty {
  padding: 40px;
  text-align: center;
  color: var(--ink-mute);
}
.loader {
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}

/* Tag chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 3px 8px;
  background: var(--brand-light);
  color: var(--brand-2);
  border: 1px solid var(--brand-light-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* Sub-tabs for Catalogs */
.subtabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.subtab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  background: #f9fafb;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px 4px 0 0;
  color: var(--ink-soft);
}
.subtab.active { background: #fff; color: var(--brand); font-weight: 600; border-bottom: 1px solid #fff; margin-bottom: -1px; }

/* Responsive small (tablet) */
@media (max-width: 900px) {
  .row.cols-4 { grid-template-columns: 1fr 1fr; }
  .row.cols-3 { grid-template-columns: 1fr 1fr; }
  .totals { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive mobile (telefono) */
@media (max-width: 600px) {
  .row.cols-2, .row.cols-3, .row.cols-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .filters { padding: 8px; }
  .filters input, .filters select { min-width: 0; flex: 1 1 130px; }
  .filters .summary { margin-left: 0; flex-basis: 100%; }

  /* Header: logo + controles se acomodan en 2 líneas si no caben en 1 */
  .app-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .app-header-logo { height: 26px; }
  .app-header .right { flex-wrap: wrap; gap: 6px; row-gap: 6px; }

  /* Tabs: scroll horizontal en vez de romper el layout o desbordar la página */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { height: 4px; }
  .tab { padding: 8px 12px; white-space: nowrap; flex-shrink: 0; }

  /* Modales y paneles: menos padding para aprovechar el ancho angosto */
  .modal-b, .modal-f { padding: 12px; }
  .panel-b { padding: 10px; }

  /* Popovers (menú de apps, menú de pestañas del logo): no exceder el viewport
     (cada uno conserva su lado de anclaje -- apps a la derecha, logo a la izq). */
  .apps-menu { min-width: 0; width: calc(100vw - 24px); max-width: 320px; }
  .logo-tabs-menu { min-width: 0; width: calc(100vw - 24px); max-width: 320px; }
}

/* Locks indicator */
.lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: var(--warn);
  font-size: 11px;
  border: 1px solid #fde68a;
}

/* Density modifiers (controladas por appTheme) */
body.density-compact .panel-b { padding: 8px; }
body.density-compact table.data td { padding: 3px 6px; }
body.density-compact table.data th { padding: 4px 6px; }
body.density-compact .field input,
body.density-compact .field select { padding: 4px 6px; }
body.density-compact .btn { padding: 4px 10px; font-size: 11.5px; }

body.density-comfortable .panel-b { padding: 18px; }
body.density-comfortable table.data td { padding: 9px 12px; }
body.density-comfortable table.data th { padding: 10px 12px; }
body.density-comfortable .field input,
body.density-comfortable .field select { padding: 9px 12px; }
body.density-comfortable .btn { padding: 8px 16px; }

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.stat {
  background: #fff;
  border-left: 5px solid rgb(13, 78, 166);
  border-radius: 6px;
  padding: 10px 12px;
}
.stat .label { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; font-weight: 600; letter-spacing: .3px; }
.stat .value { font-size: 18px; font-weight: 700; color: var(--brand); margin-top: 2px; }

/* Tracking: fila expandible */
.track-row { cursor: pointer; }
.track-row:hover { background: var(--brand-light); }
.track-row.expanded { background: var(--brand-light); }
.track-chevron { display: inline-block; color: var(--ink-soft); transition: transform .15s; }
.track-detail-cell { padding: 0 !important; background: #fafbfc; border-bottom: 2px solid var(--line); }
.track-loading { padding: 20px; text-align: center; color: var(--ink-soft); }
.track-detail { padding: 14px 18px; }
.track-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.track-detail-top-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
.track-detail-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 14px; }
.track-detail-col h4 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.track-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.track-list li { padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.track-list li:last-child { border-bottom: none; }

/* Tracking: línea de tiempo (eventos reales, no pasos fijos) */
.track-timeline { position: relative; margin: 14px 0; padding-left: 18px; }
.track-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--brand-light-border);
}
.track-tl-item { position: relative; padding: 0 0 14px 18px; }
.track-tl-item:last-child { padding-bottom: 0; }
.track-tl-dot {
  position: absolute;
  left: -18px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--brand);
}
.track-tl-label { font-weight: 600; font-size: 12.5px; }
.track-tl-meta { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

@media (max-width: 1100px) {
  .track-detail-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .track-detail-top-grid { grid-template-columns: 1fr; }
}
.stat .sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* Overlay global "Cargando..." -- ver apiFetch() en app.js. display:none
   por default (no solo opacity/visibility) para que NO intercepte clicks
   cuando no hay ninguna llamada en curso. */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.loading-overlay.active { display: flex; }
.loading-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 26px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--brand-light-border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: loading-spin .7s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.loading-text { font-weight: 600; font-size: 13px; color: var(--ink); }

/* ============================================================================
   Manual de usuario -- overlay de pantalla completa (ver #manualOverlay en
   index.html). display:none por default para no interceptar clicks ni
   quedar en el flujo del documento mientras esta cerrado.
   ============================================================================ */
.manual-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: var(--bg);
  overflow-y: auto;
}
.manual-overlay.active { display: block; }

.docs-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--brand);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}
.docs-header-title { font-size: 15px; font-weight: 700; }
.docs-header-close {
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  opacity: .9;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 5px 12px;
}
.docs-header-close:hover { opacity: 1; background: rgba(255,255,255,.12); }

.docs-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 220px;
  max-width: 1400px;
  margin: 0 auto;
}

.docs-sidebar {
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  align-self: start;
  position: sticky;
  top: 52px;
}
.docs-cat { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-mute); text-transform: uppercase; margin: 18px 8px 6px; }
.docs-cat:first-child { margin-top: 0; }
.docs-nav-link {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
}
.docs-nav-link:hover { background: var(--line-soft); color: var(--ink); }
.docs-nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 600; border-left-color: var(--brand); }

.docs-content { padding: 32px 40px; min-width: 0; }
.docs-section { display: none; max-width: 760px; }
.docs-section.active { display: block; }
.docs-section h1 { font-size: 26px; margin: 0 0 6px; color: var(--ink); }
.docs-lead { color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; }
.docs-section h2 { font-size: 18px; margin: 34px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }
.docs-section h2:first-of-type { border-top: none; padding-top: 0; }
.docs-section p { margin: 0 0 12px; }
.docs-section ul, .docs-section ol { margin: 0 0 14px; padding-left: 20px; }
.docs-section li { margin-bottom: 5px; }
.docs-note {
  background: var(--brand-light);
  border: 1px solid var(--brand-light-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin: 14px 0;
}
.docs-note b { color: var(--brand); }
.docs-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 13px; }
.docs-table th, .docs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-table th { color: var(--ink-mute); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.docs-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.docs-badge.ok { background: #ecfdf5; color: var(--ok); }
.docs-badge.warn { background: #fff7e6; color: var(--warn); }
.docs-badge.bad { background: #fee2e2; color: var(--bad); }
.docs-badge.brand { background: var(--brand-light); color: var(--brand); }
.docs-pager { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.docs-pager a { color: var(--brand); text-decoration: none; font-size: 13px; font-weight: 600; }
.docs-pager a:hover { text-decoration: underline; }

.docs-toc { padding: 22px 16px; align-self: start; position: sticky; top: 52px; }
.docs-toc-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 10px; }
.docs-toc a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 12.5px;
}
.docs-toc a:hover { color: var(--brand); }

@media (max-width: 1100px) {
  .docs-shell { grid-template-columns: 220px 1fr; }
  .docs-toc { display: none; }
}
@media (max-width: 760px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
  .docs-content { padding: 20px; }
}