/* ============================================================
   §181 — Admin "Eclipse" skin (panel de supervisor).
   TODO está scoped bajo body.admin-eclipse → solo aplica a admins.
   El panel de negocio (store-owner, apps Capacitor) NO lleva esta
   clase, así que queda 100% intacto.
   ============================================================ */

body.admin-eclipse {
  /* §181.5: TEMA OSCURO con acento naranja */
  --ec-bg:        #0f1115;  /* fondo de página */
  --ec-surface:   #181b22;  /* tarjetas / sidebar / topbar */
  --ec-surface-2: #20242d;  /* inputs / hover / filas alternas */
  --ec-ink:       #e6e8ec;  /* texto principal */
  --ec-ink-soft:  #9aa3b2;  /* texto secundario */
  --ec-muted:     #6b7280;  /* texto tenue */
  --ec-border:    #272b35;  /* bordes / divisores */
  /* paleta NARANJA (acento) */
  --ec-brand:      #f97316;
  --ec-brand-600:  #ea580c;
  --ec-brand-50:   #2a1c10;  /* tinte naranja sobre oscuro */
  --ec-brand-grad: linear-gradient(135deg, #fb923c 0%, #ef6c0b 100%);
  --ec-radius:    18px;
  --ec-radius-sm: 12px;
  --ec-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.25);
  --ec-shadow-md: 0 12px 32px rgba(0,0,0,0.45);
  --ec-sidebar-w: 260px;
  --ec-rail-w: 74px;
  --ec-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  background: var(--ec-bg) !important;
  font-family: var(--ec-font);
  color: var(--ec-ink);
  -webkit-font-smoothing: antialiased;
}

/* Oculta el navbar legacy si quedara (defensa) */
body.admin-eclipse > .navbar.navbar-dark { display: none !important; }

/* ── Shell ─────────────────────────────────────────────── */
.ec-shell { display: flex; min-height: 100vh; }

.ec-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--ec-sidebar-w);
  background: var(--ec-surface);
  border-right: 1px solid var(--ec-border);
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: width 0.2s ease, transform 0.25s ease;
}

.ec-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--ec-sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

/* ── Sidebar brand ─────────────────────────────────────── */
.ec-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
}
.ec-brand img { height: 30px; width: auto; }

/* ── Sidebar search ────────────────────────────────────── */
.ec-side-search {
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--ec-muted);
  font-size: 0.85rem;
  cursor: pointer;
  width: calc(100% - 32px);
  transition: border-color 0.15s, background 0.15s;
}
.ec-side-search:hover { border-color: var(--ec-brand); color: var(--ec-ink); background: var(--ec-surface-2); }
.ec-side-search i { font-size: 0.95rem; }
.ec-side-search kbd {
  margin-left: auto;
  font-size: 0.68rem;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--ec-muted);
}

/* ── Sidebar nav ───────────────────────────────────────── */
.ec-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 20px;
  -webkit-overflow-scrolling: touch;
}
.ec-nav::-webkit-scrollbar { width: 6px; }
.ec-nav::-webkit-scrollbar-thumb { background: var(--ec-border); border-radius: 3px; }

.ec-nav__section {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ec-muted);
  padding: 14px 12px 6px;
}

.ec-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ec-ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.ec-nav__item:hover { background: var(--ec-bg); color: var(--ec-ink); text-decoration: none; }
.ec-nav__item > i:first-child { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
/* §181.9: seleccionado fiel a la referencia — pill oscuro con CONTORNO naranja
   completo (anillo 1px) + acento izquierdo más marcado, ambos inset (siguen el
   border-radius, sin "cuña" suelta). Texto/icono naranja en negrita. */
.ec-nav__item.active {
  background: var(--ec-brand-50);
  color: var(--ec-brand);
  font-weight: 700;
  box-shadow: inset 0px 0 0 0 var(--ec-brand), inset 0 0 0 1px rgba(249,115,22,0.55);
}
.ec-nav__item.active:hover { background: var(--ec-brand-50); color: var(--ec-brand); }
.ec-nav__item.active > i:first-child { color: var(--ec-brand); }

/* Grupos colapsables */
.ec-nav__group > .ec-nav__item .ec-caret {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.2s;
}
.ec-nav__group.open > .ec-nav__item .ec-caret { transform: rotate(90deg); }
/* §181.6: el grupo con hijo activo mantiene gris (solo el item seleccionado
   va en naranja). El caret rotado ya indica que el grupo está abierto. */
.ec-nav__group.has-active > .ec-nav__item:not(.active) { color: var(--ec-ink); }
.ec-nav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.ec-nav__group.open .ec-nav__sub { max-height: 800px; }
.ec-nav__sub .ec-nav__item { padding-left: 44px; font-size: 0.84rem; }
.ec-nav__subhead {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ec-muted);
  padding: 8px 12px 2px 44px;
}
.ec-badge-new {
  margin-left: auto;
  background: var(--ec-brand);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}

/* ── §181.27: Modo RAIL (sidebar colapsado a iconos) ──────────
   Solo desktop (≥992px) + body.ec-rail. En móvil el sidebar es
   drawer, así que las reglas rail quedan inertes. Todo scoped a
   body.admin-eclipse → el panel de negocio NO se ve afectado.
   El flyout de sub-items se muestra/posiciona por JS (intent
   delay) para no perderse al cruzar el borde del rail. */
body.admin-eclipse .ec-brand__mark { display: none; }

body.admin-eclipse .ec-rail-toggle {
  display: none;            /* visible solo en desktop (media query abajo) */
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ec-ink-soft);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
body.admin-eclipse .ec-rail-toggle:hover { color: var(--ec-brand); border-color: var(--ec-brand); }

@media (min-width: 992px) {
  body.admin-eclipse .ec-rail-toggle { display: inline-flex; }

  /* Ancho colapsado */
  body.admin-eclipse.ec-rail .ec-sidebar { width: var(--ec-rail-w); }
  body.admin-eclipse.ec-rail .ec-main { margin-left: var(--ec-rail-w); }

  /* Brand → marca compacta */
  body.admin-eclipse.ec-rail .ec-brand { justify-content: center; padding: 18px 0 14px; }
  body.admin-eclipse.ec-rail .ec-brand__full { display: none; }
  body.admin-eclipse.ec-rail .ec-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--ec-brand-grad); color: #fff;
    font-weight: 800; font-size: 0.92rem; letter-spacing: 0.5px;
  }

  /* Buscador → solo icono */
  body.admin-eclipse.ec-rail .ec-side-search {
    justify-content: center; padding: 10px 0;
    width: calc(100% - 24px); margin: 0 12px 10px;
  }
  body.admin-eclipse.ec-rail .ec-side-search span,
  body.admin-eclipse.ec-rail .ec-side-search kbd { display: none; }
  body.admin-eclipse.ec-rail .ec-side-search i { font-size: 1.1rem; }

  /* Items → solo icono centrado (font-size:0 oculta el texto suelto, sin tocar el markup) */
  body.admin-eclipse.ec-rail .ec-nav__item {
    justify-content: center; gap: 0; font-size: 0; padding: 11px 0;
  }
  body.admin-eclipse.ec-rail .ec-nav__item > i:first-child { font-size: 1.15rem; width: auto; }
  body.admin-eclipse.ec-rail .ec-caret { display: none; }
  body.admin-eclipse.ec-rail .ec-nav > .ec-nav__subhead { display: none; }

  /* Grupo con hijo activo → el icono del rail toma el anillo naranja */
  body.admin-eclipse.ec-rail .ec-nav__group.has-active > .ec-nav__item {
    background: var(--ec-brand-50);
    box-shadow: inset 0 0 0 1px rgba(249,115,22,0.55);
  }
  body.admin-eclipse.ec-rail .ec-nav__group.has-active > .ec-nav__item,
  body.admin-eclipse.ec-rail .ec-nav__group.has-active > .ec-nav__item > i:first-child {
    color: var(--ec-brand) !important;
  }

  /* Flyout: el .ec-nav__sub se vuelve panel flotante (JS fija top/left + .ec-flyout-open) */
  body.admin-eclipse.ec-rail .ec-nav__sub {
    position: fixed;
    left: var(--ec-rail-w);
    top: 0;
    min-width: 224px; max-width: 280px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    box-shadow: var(--ec-shadow-md);
    padding: 8px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 1045;
  }
  body.admin-eclipse.ec-rail .ec-nav__sub.ec-flyout-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
  }
  body.admin-eclipse.ec-rail .ec-nav__sub::before {
    content: attr(data-label);
    position: sticky; top: 0;
    display: block;
    font-weight: 700; font-size: 0.78rem; color: var(--ec-ink);
    background: var(--ec-surface-2);
    padding: 4px 12px 9px; margin-bottom: 6px;
    border-bottom: 1px solid var(--ec-border);
  }
  /* A11y: apertura por foco (teclado) — el flyout se revela al tabular al grupo */
  body.admin-eclipse.ec-rail .ec-nav__group:focus-within > .ec-nav__sub {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
  }
  /* Defensa: un badge en un item de primer nivel no debe sobrevivir al colapso */
  body.admin-eclipse.ec-rail .ec-nav > a.ec-nav__item .ec-badge-new,
  body.admin-eclipse.ec-rail .ec-nav__group > .ec-nav__item .ec-badge-new { display: none; }
  body.admin-eclipse.ec-rail .ec-nav__sub .ec-nav__item {
    justify-content: flex-start; gap: 10px; font-size: 0.84rem; padding: 9px 12px;
  }
  body.admin-eclipse.ec-rail .ec-nav__sub .ec-nav__item > i:first-child { font-size: 1rem; }
  body.admin-eclipse.ec-rail .ec-nav__sub .ec-nav__subhead {
    display: block; padding: 8px 12px 2px;
  }

  /* Tooltip flotante para items de primer nivel (p.ej. Dashboard) */
  body.admin-eclipse .ec-rail-tip {
    position: fixed;
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
    padding: 7px 12px;
    font: 600 0.82rem var(--ec-font);
    color: var(--ec-ink);
    box-shadow: var(--ec-shadow-md);
    z-index: 1045;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; transform: translateX(-6px);
    transition: opacity 0.14s ease, transform 0.14s ease;
  }
  body.admin-eclipse .ec-rail-tip.show { opacity: 1; transform: translateX(0); }
}

/* Respeta prefers-reduced-motion: sin animaciones de rail/flyout/drawer */
@media (prefers-reduced-motion: reduce) {
  body.admin-eclipse .ec-sidebar,
  body.admin-eclipse .ec-main,
  body.admin-eclipse .ec-nav__sub,
  body.admin-eclipse .ec-rail-tip,
  body.admin-eclipse .ec-caret { transition: none !important; }
}

/* ── Topbar ────────────────────────────────────────────── */
.ec-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(24,27,34,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ec-border);
  padding: 12px 24px;
}
.ec-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--ec-ink);
  cursor: pointer;
  padding: 4px;
}
.ec-topbar__spacer { flex: 1; }
.ec-topbar__btn {
  position: relative;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ec-ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.ec-topbar__btn:hover { color: var(--ec-brand); border-color: var(--ec-brand); }
.ec-topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  color: var(--ec-ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.ec-topbar__user:hover { text-decoration: none; color: var(--ec-ink); border-color: var(--ec-brand); }
.ec-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ec-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
  overflow: hidden;
}
.ec-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Content area ──────────────────────────────────────── */
body.admin-eclipse .page-content,
body.admin-eclipse .ec-content {
  padding: 24px !important;
  background: transparent !important;
  margin: 0 !important;
  max-width: 100% !important;
}
body.admin-eclipse .content-wrapper { background: transparent !important; }
body.admin-eclipse .content { padding: 0 !important; }

/* ── Card skin (afecta todas las vistas admin) ─────────── */
body.admin-eclipse .card {
  border: none !important;
  border-radius: var(--ec-radius) !important;
  box-shadow: var(--ec-shadow) !important;
  background: var(--ec-surface);
  margin-bottom: 20px;
}
body.admin-eclipse .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ec-border) !important;
  padding: 18px 20px;
  font-weight: 600;
}
body.admin-eclipse .card-body { padding: 20px; }
body.admin-eclipse .card-title { font-weight: 700; color: var(--ec-ink); }

/* ── Page header ───────────────────────────────────────── */
body.admin-eclipse .page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 18px 0 !important;
}
body.admin-eclipse .page-title h5 { font-weight: 800; color: var(--ec-ink); }

/* ── Tables ────────────────────────────────────────────── */
body.admin-eclipse .table { color: var(--ec-ink); }
body.admin-eclipse .table thead th {
  border-top: none;
  border-bottom: 1px solid var(--ec-border) !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  color: var(--ec-muted);
  font-weight: 700;
  padding: 12px 16px;
}
body.admin-eclipse .table td { padding: 12px 16px; border-color: var(--ec-border); vertical-align: middle; color: var(--ec-ink); }
body.admin-eclipse .table-striped tbody tr:nth-of-type(odd) { background: var(--ec-surface-2); }
body.admin-eclipse .table tbody tr:hover { background: var(--ec-surface-2); }
body.admin-eclipse .table-responsive { border-radius: var(--ec-radius); }

/* ── Buttons ───────────────────────────────────────────── */
body.admin-eclipse .btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 9px 16px;
  transition: all 0.15s;
}
body.admin-eclipse .btn-primary,
body.admin-eclipse .bg-primary {
  background-color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
}
body.admin-eclipse .btn-primary:hover { background-color: var(--ec-brand-600) !important; border-color: var(--ec-brand-600) !important; }
body.admin-eclipse .btn-outline-primary {
  color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
}
body.admin-eclipse .btn-outline-primary:hover { background-color: var(--ec-brand) !important; color: #fff !important; }
body.admin-eclipse .text-primary { color: var(--ec-brand) !important; }
/* §181.6: el acento naranja en enlaces SOLO dentro del contenido (no en el
   sidebar/topbar, cuyos items deben verse grises salvo el seleccionado).
   Se excluyen botones para no pisar el texto blanco de .btn-primary. */
body.admin-eclipse .ec-content a:not(.btn):not(.ec-nav__item):not(.nav-link) { color: var(--ec-brand); }
body.admin-eclipse .ec-content a:not(.btn):not(.ec-nav__item):not(.nav-link):hover { color: var(--ec-brand-600); }

/* ── Form controls ─────────────────────────────────────── */
body.admin-eclipse .form-control,
body.admin-eclipse .custom-select {
  border-radius: 10px;
  border: 1px solid var(--ec-border);
  padding: 9px 12px;
  font-size: 0.88rem;
}
body.admin-eclipse .form-control:focus {
  border-color: var(--ec-brand);
  box-shadow: 0 0 0 3px var(--ec-brand-50);
}

/* ── KPI cards (dashboard) ─────────────────────────────── */
body.admin-eclipse .ec-kpi {
  background: var(--ec-surface);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}
body.admin-eclipse .ec-kpi__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
body.admin-eclipse .ec-kpi__value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--ec-ink); }
body.admin-eclipse .ec-kpi__label { font-size: 0.8rem; color: var(--ec-ink-soft); }

/* KPI destacada con gradiente naranja (estilo Astro "Ventas totales") */
body.admin-eclipse .ec-kpi--featured {
  background: var(--ec-brand-grad);
  color: #fff;
  box-shadow: 0 12px 30px rgba(239,108,11,0.35);
}
body.admin-eclipse .ec-kpi--featured .ec-kpi__value,
body.admin-eclipse .ec-kpi--featured .ec-kpi__label { color: #fff; }
body.admin-eclipse .ec-kpi--featured .ec-kpi__icon { background: rgba(255,255,255,0.2); color: #fff; }

/* Pills de variación (+10% / -5%) estilo Astro */
body.admin-eclipse .ec-pill {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
body.admin-eclipse .ec-pill--up   { background: #dcfce7; color: #16a34a; }
body.admin-eclipse .ec-pill--down { background: #fee2e2; color: #dc2626; }
body.admin-eclipse .ec-pill--brand{ background: var(--ec-brand-50); color: var(--ec-brand-600); }

/* ── Tabla estilo Eclipse: estado, contacto, ingresos ──── */
body.admin-eclipse .ec-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.85rem;
}
body.admin-eclipse .ec-status .ec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
body.admin-eclipse .ec-status--ok   { color: #16a34a; }
body.admin-eclipse .ec-status--ok   .ec-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
body.admin-eclipse .ec-status--wait { color: #d97706; }
body.admin-eclipse .ec-status--wait .ec-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
body.admin-eclipse .ec-status__sub { font-size: 0.72rem; margin-top: 2px; }

body.admin-eclipse .ec-contact { display: flex; align-items: center; gap: 10px; }
body.admin-eclipse .ec-row-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ec-brand-50); color: var(--ec-brand);
  font-weight: 700; font-size: 0.82rem;
}
body.admin-eclipse .ec-contact__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body.admin-eclipse .ec-contact__name { font-weight: 600; color: var(--ec-ink); }
body.admin-eclipse .ec-contact__name:hover { color: var(--ec-brand); text-decoration: none; }
body.admin-eclipse .ec-contact__sub { font-size: 0.76rem; color: var(--ec-muted); }
body.admin-eclipse .ec-contact__sub:hover { color: var(--ec-ink-soft); text-decoration: none; }

body.admin-eclipse .ec-money { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
body.admin-eclipse .ec-money__value { font-weight: 700; color: var(--ec-ink); }
body.admin-eclipse .ec-money__sub { font-size: 0.72rem; color: var(--ec-muted); }

/* ── Overlay (drawer móvil) ────────────────────────────── */
.ec-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1025;
}
.ec-overlay.show { display: block; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .ec-sidebar { transform: translateX(-100%); box-shadow: var(--ec-shadow-md); }
  body.admin-eclipse.ec-drawer-open .ec-sidebar { transform: translateX(0); }
  .ec-main { margin-left: 0; }
  .ec-hamburger { display: inline-flex; align-items: center; }
}

@media (max-width: 575.98px) {
  body.admin-eclipse .page-content,
  body.admin-eclipse .ec-content { padding: 14px !important; }
  .ec-topbar { padding: 10px 14px; }
  .ec-topbar__user span { display: none; }
}

/* ============================================================
   §181.5 — Overrides de TEMA OSCURO para el Bootstrap legacy.
   Solo dentro de body.admin-eclipse. Evita texto/fondos claros
   heredados del tema Limitless que quedarían ilegibles en dark.
   ============================================================ */

/* Texto */
body.admin-eclipse,
body.admin-eclipse h1, body.admin-eclipse h2, body.admin-eclipse h3,
body.admin-eclipse h4, body.admin-eclipse h5, body.admin-eclipse h6,
body.admin-eclipse p, body.admin-eclipse span, body.admin-eclipse label,
body.admin-eclipse td, body.admin-eclipse th, body.admin-eclipse li,
body.admin-eclipse .text-dark, body.admin-eclipse .text-body,
body.admin-eclipse .text-black, body.admin-eclipse .text-default { color: var(--ec-ink); }
body.admin-eclipse .text-muted, body.admin-eclipse .text-secondary { color: var(--ec-ink-soft) !important; }

/* Superficies claras heredadas → oscuras */
body.admin-eclipse .bg-white,
body.admin-eclipse .bg-light,
body.admin-eclipse .bg-body { background-color: var(--ec-surface) !important; }
body.admin-eclipse .card,
body.admin-eclipse .card-body,
body.admin-eclipse .card-footer { background-color: var(--ec-surface); color: var(--ec-ink); }
body.admin-eclipse .card-footer { border-top-color: var(--ec-border); }
body.admin-eclipse hr { border-top-color: var(--ec-border); }

/* Formularios */
body.admin-eclipse .form-control,
body.admin-eclipse .custom-select,
body.admin-eclipse textarea,
body.admin-eclipse .input-group-text {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .form-control::placeholder { color: var(--ec-muted); }
body.admin-eclipse .form-control:focus { border-color: var(--ec-brand) !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.18) !important; }

/* Modales */
body.admin-eclipse .modal-content { background-color: var(--ec-surface); color: var(--ec-ink); border: 1px solid var(--ec-border); }
body.admin-eclipse .modal-header, body.admin-eclipse .modal-footer { border-color: var(--ec-border); }
body.admin-eclipse .close { color: var(--ec-ink); text-shadow: none; opacity: 0.8; }
body.admin-eclipse .close:hover { color: #fff; }

/* Dropdowns */
body.admin-eclipse .dropdown-menu {
  background-color: var(--ec-surface) !important;
  border: 1px solid var(--ec-border) !important;
  box-shadow: var(--ec-shadow-md);
}
body.admin-eclipse .dropdown-item { color: var(--ec-ink) !important; }
body.admin-eclipse .dropdown-item:hover, body.admin-eclipse .dropdown-item:focus { background-color: var(--ec-surface-2) !important; color: var(--ec-brand) !important; }
body.admin-eclipse .dropdown-divider { border-top-color: var(--ec-border); }
body.admin-eclipse .dropdown-header { color: var(--ec-muted); }

/* Listas / paneles */
body.admin-eclipse .list-group-item { background-color: var(--ec-surface); border-color: var(--ec-border); color: var(--ec-ink); }
body.admin-eclipse .nav-tabs { border-bottom-color: var(--ec-border); }
body.admin-eclipse .nav-tabs .nav-link { color: var(--ec-ink-soft); }
body.admin-eclipse .nav-tabs .nav-link.active { background: var(--ec-surface); border-color: var(--ec-border) var(--ec-border) var(--ec-surface); color: var(--ec-brand); }

/* Botones neutros heredados */
body.admin-eclipse .btn-light,
body.admin-eclipse .btn-default,
body.admin-eclipse .btn-outline-secondary {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .btn-outline-secondary:hover { background-color: var(--ec-border) !important; }
body.admin-eclipse .badge-light, body.admin-eclipse .badge-secondary {
  background-color: var(--ec-surface-2) !important; color: var(--ec-ink-soft) !important;
}

/* DataTables (controles comunes en muchas vistas admin) */
body.admin-eclipse .dataTables_wrapper,
body.admin-eclipse .dataTables_info,
body.admin-eclipse .dataTables_length,
body.admin-eclipse .dataTables_filter { color: var(--ec-ink-soft); }
body.admin-eclipse .dataTables_filter input,
body.admin-eclipse .dataTables_length select {
  background-color: var(--ec-surface-2) !important; border: 1px solid var(--ec-border) !important; color: var(--ec-ink) !important;
}
body.admin-eclipse .paginate_button { color: var(--ec-ink-soft) !important; }
body.admin-eclipse .paginate_button.current,
body.admin-eclipse .paginate_button.current:hover {
  background: var(--ec-brand) !important; border-color: var(--ec-brand) !important; color: #fff !important; border-radius: 8px;
}
body.admin-eclipse .paginate_button:hover { background: var(--ec-surface-2) !important; color: var(--ec-ink) !important; border-radius: 8px; }

/* Select2 (usado en formularios admin) */
body.admin-eclipse .select2-container--default .select2-selection--single,
body.admin-eclipse .select2-container--default .select2-selection--multiple {
  background-color: var(--ec-surface-2) !important; border-color: var(--ec-border) !important;
}
body.admin-eclipse .select2-container--default .select2-selection__rendered { color: var(--ec-ink) !important; }
body.admin-eclipse .select2-dropdown { background-color: var(--ec-surface) !important; border-color: var(--ec-border) !important; }
body.admin-eclipse .select2-results__option { color: var(--ec-ink); }
body.admin-eclipse .select2-results__option--highlighted { background-color: var(--ec-brand) !important; }
/* §181.29: variantes [aria-selected] de backend-custom (#8e1841 !important con
   especificidad (0,3,0)) vencían al override naranja → crimson al resaltar/
   seleccionar opción en select2. Se igualan al tema con mayor especificidad. */
body.admin-eclipse .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ec-brand) !important;
  color: #fff !important;
}
body.admin-eclipse .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--ec-brand-50) !important;
  color: var(--ec-brand) !important;
}
body.admin-eclipse .select2-search__field { background-color: var(--ec-surface-2) !important; color: var(--ec-ink) !important; }

/* Detalle: el badge "Aprobado/En espera" y montos ya usan vars (ink) → OK */

/* ============================================================
   §181.8 — Barrido anti fondos-claros (tema Limitless legacy).
   Remapea superficies NEUTRAS claras (estáticas y hover) a oscuro.
   Los tintes de COLOR semánticos (alertas amarillas/rojas/verdes)
   NO se tocan aquí (conservan su significado).
   ============================================================ */

/* ── Contenedores estructurales claros del tema ── */
body.admin-eclipse .panel,
body.admin-eclipse .panel-body,
body.admin-eclipse .panel-heading,
body.admin-eclipse .panel-footer,
body.admin-eclipse .well,
body.admin-eclipse .jumbotron,
body.admin-eclipse .thumbnail,
body.admin-eclipse .media,
body.admin-eclipse .tab-content,
body.admin-eclipse .tabbable,
body.admin-eclipse .popover,
body.admin-eclipse .popover-body,
body.admin-eclipse .popover-header,
body.admin-eclipse .toast,
body.admin-eclipse .toast-header,
body.admin-eclipse .breadcrumb,
body.admin-eclipse .pagination .page-link,
body.admin-eclipse .page-item.disabled .page-link,
body.admin-eclipse .content-group,
body.admin-eclipse .navbar-light,
body.admin-eclipse .navbar-collapse,
body.admin-eclipse .custom-file-label,
body.admin-eclipse .custom-control-label::before,
body.admin-eclipse .progress,
body.admin-eclipse .accordion .card,
body.admin-eclipse fieldset,
body.admin-eclipse .form-control-plaintext,
body.admin-eclipse code, body.admin-eclipse pre, body.admin-eclipse kbd,
body.admin-eclipse .table thead th,
body.admin-eclipse .thead-light th,
body.admin-eclipse .table-light,
body.admin-eclipse .table-light > td,
body.admin-eclipse .table-light > th {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink);
}
body.admin-eclipse code { color: #ff9e64 !important; }
body.admin-eclipse .table thead th, body.admin-eclipse .thead-light th { color: var(--ec-muted) !important; }

/* ── DataTables: encabezado/cuerpo/scroll ── */
body.admin-eclipse table.dataTable,
body.admin-eclipse .dataTables_scrollHead,
body.admin-eclipse .dataTables_scrollHeadInner,
body.admin-eclipse .dataTables_scrollBody,
body.admin-eclipse div.dataTables_scrollFoot,
body.admin-eclipse .dataTable thead,
body.admin-eclipse .dtfh-floatingparenthead {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
}

/* ── Estados HOVER claros → superficie oscura ── */
body.admin-eclipse .table-hover tbody tr:hover,
body.admin-eclipse table.dataTable.hover tbody tr:hover,
body.admin-eclipse table.dataTable.display tbody tr:hover,
body.admin-eclipse table.dataTable tbody tr:hover,
body.admin-eclipse .list-group-item-action:hover,
body.admin-eclipse .list-group-item-action:focus,
body.admin-eclipse .page-link:hover,
body.admin-eclipse .nav-tabs .nav-link:hover,
body.admin-eclipse .nav-pills .nav-link:hover,
body.admin-eclipse .daterangepicker td.available:hover,
body.admin-eclipse .daterangepicker .ranges li:hover,
body.admin-eclipse .media:hover,
body.admin-eclipse tr.shown:hover {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
}

/* ── Plugins que renderizan blanco ── */
/* Summernote */
body.admin-eclipse .note-editor,
body.admin-eclipse .note-editor .note-toolbar,
body.admin-eclipse .note-editor .note-editing-area,
body.admin-eclipse .note-editor .note-editable,
body.admin-eclipse .note-editor .note-codable,
body.admin-eclipse .note-btn,
body.admin-eclipse .note-popover .popover-content {
  background-color: var(--ec-surface) !important;
  color: var(--ec-ink) !important;
  border-color: var(--ec-border) !important;
}
/* Daterangepicker */
body.admin-eclipse .daterangepicker,
body.admin-eclipse .daterangepicker .calendar-table,
body.admin-eclipse .daterangepicker .ranges,
body.admin-eclipse .daterangepicker:after,
body.admin-eclipse .daterangepicker select {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
/* Dropzone / uploaders */
body.admin-eclipse .dropzone,
body.admin-eclipse .dz-message,
body.admin-eclipse .uploader {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink-soft) !important;
}
/* Bootstrap-select / spectrum / tooltips */
body.admin-eclipse .bootstrap-select .dropdown-toggle,
body.admin-eclipse .sp-container,
body.admin-eclipse .daterangepicker .drp-buttons {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
}

/* ── Fondos claros NEUTROS inline (en vistas) → oscuro.
      Solo neutros (blanco/grises); se respetan los tintes de color. ── */
body.admin-eclipse [style*="background:#fff"],
body.admin-eclipse [style*="background: #fff"],
body.admin-eclipse [style*="background:#FFF"],
body.admin-eclipse [style*="background: #FFF"],
body.admin-eclipse [style*="background-color:#fff"],
body.admin-eclipse [style*="background-color: #fff"],
body.admin-eclipse [style*="background:white"],
body.admin-eclipse [style*="background: white"],
body.admin-eclipse [style*="background-color:white"],
body.admin-eclipse [style*="background-color: white"],
body.admin-eclipse [style*="background:#fafafa"],
body.admin-eclipse [style*="background: #fafafa"],
body.admin-eclipse [style*="background:#fafbfc"],
body.admin-eclipse [style*="background: #fafbfc"],
body.admin-eclipse [style*="background:#f8f8f8"],
body.admin-eclipse [style*="background: #f8f8f8"],
body.admin-eclipse [style*="background:#f8f9fa"],
body.admin-eclipse [style*="background: #f8f9fa"],
body.admin-eclipse [style*="background:#f9fafb"],
body.admin-eclipse [style*="background: #f9fafb"],
body.admin-eclipse [style*="background:#f7f8fb"],
body.admin-eclipse [style*="background: #f7f8fb"],
body.admin-eclipse [style*="background:#f2f2f7"],
body.admin-eclipse [style*="background: #f2f2f7"],
body.admin-eclipse [style*="background:#f0f0f0"],
body.admin-eclipse [style*="background: #f0f0f0"],
body.admin-eclipse [style*="background:#f5f5f5"],
body.admin-eclipse [style*="background: #f5f5f5"],
body.admin-eclipse [style*="background:#e8e8ed"],
body.admin-eclipse [style*="background: #e8e8ed"],
body.admin-eclipse [style*="background:#e5e5ea"],
body.admin-eclipse [style*="background: #e5e5ea"],
body.admin-eclipse [style*="background:#e5e7eb"],
body.admin-eclipse [style*="background: #e5e7eb"],
body.admin-eclipse [style*="background-color:#fafafa"],
body.admin-eclipse [style*="background-color: #fafafa"],
body.admin-eclipse [style*="background-color:#f7f8fb"],
body.admin-eclipse [style*="background-color: #f7f8fb"] {
  background-color: var(--ec-surface-2) !important;
}

/* ============================================================
   §181.11 — Pulido integral: botones unificados, crimson→naranja,
   clases compartidas del dashboard, congruencia general (dark).
   ============================================================ */

/* ── Botones: radio y peso unificados en TODO el panel ── */
body.admin-eclipse .btn,
body.admin-eclipse .btn-sm,
body.admin-eclipse .btn-lg {
  border-radius: 10px !important;
  font-weight: 600;
  letter-spacing: 0.1px;
}
body.admin-eclipse .btn-lg { border-radius: 12px !important; }
body.admin-eclipse .btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.admin-eclipse .btn-group > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* variantes de color coherentes */
body.admin-eclipse .btn-success { background-color: #16a34a !important; border-color: #16a34a !important; }
body.admin-eclipse .btn-danger  { background-color: #dc2626 !important; border-color: #dc2626 !important; }
body.admin-eclipse .btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #1a1a1a !important; }
body.admin-eclipse .btn-info    { background-color: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
body.admin-eclipse .btn-link    { color: var(--ec-brand) !important; }

/* ── Crimson (#8e1841 brand viejo) → naranja, scoped y SIN solapes ── */
/* texto crimson: excluye elementos con fondo (evita naranja-sobre-naranja) */
body.admin-eclipse [style*="color:#8e1841"]:not([style*="background"]),
body.admin-eclipse [style*="color: #8e1841"]:not([style*="background"]) { color: var(--ec-brand) !important; }
/* fondo crimson sólido */
body.admin-eclipse [style*="background:#8e1841"],
body.admin-eclipse [style*="background: #8e1841"],
body.admin-eclipse [style*="background-color:#8e1841"],
body.admin-eclipse [style*="background-color: #8e1841"] { background-color: var(--ec-brand) !important; }
/* gradiente crimson → gradiente naranja */
body.admin-eclipse [style*="linear-gradient"][style*="#8e1841"] { background-image: var(--ec-brand-grad) !important; }
/* bordes crimson */
body.admin-eclipse [style*="border-color:#8e1841"],
body.admin-eclipse [style*="border-color: #8e1841"],
body.admin-eclipse [style*="border:1px solid #8e1841"],
body.admin-eclipse [style*="border: 1px solid #8e1841"] { border-color: var(--ec-brand) !important; }

/* ── Clases compartidas del dashboard (y vistas que las reusan) ── */
body.admin-eclipse .stat-card { background: var(--ec-surface) !important; border-radius: var(--ec-radius) !important; box-shadow: var(--ec-shadow) !important; }
body.admin-eclipse .stat-value { color: var(--ec-ink) !important; }       /* el #1a1a2e original = invisible en dark */
body.admin-eclipse .stat-label { color: var(--ec-ink-soft) !important; }
body.admin-eclipse .section-title { color: var(--ec-ink) !important; border-bottom-color: var(--ec-border) !important; }
body.admin-eclipse .section-title::first-letter { color: inherit; }
body.admin-eclipse .quick-actions .qa-link { background: var(--ec-brand-50) !important; color: var(--ec-brand) !important; border-radius: 10px !important; }
body.admin-eclipse .quick-actions .qa-link:hover { background: var(--ec-brand) !important; color: #fff !important; }
body.admin-eclipse .plan-bar { background: var(--ec-surface-2) !important; }
body.admin-eclipse .collection-item { border-bottom-color: var(--ec-border) !important; }
body.admin-eclipse .badge-brand { background: var(--ec-brand) !important; color: #fff !important; }
body.admin-eclipse .badge-outline-brand { border-color: var(--ec-brand) !important; color: var(--ec-brand) !important; }
/* iconos circulares con tinte de color (KPI): respetar su color de fondo */

/* ── Encabezados de tarjeta / títulos con color de marca viejo ── */
body.admin-eclipse .text-brand, body.admin-eclipse .brand-text { color: var(--ec-brand) !important; }

/* ── Inputs de búsqueda redondeados (congruencia) ── */
body.admin-eclipse .form-control { border-radius: 10px; }

/* ── Tablas: scroll horizontal limpio y momentum en móvil para las que
      no tienen layout de cards propio (la de negocios sí lo tiene §181.3) ── */
@media (max-width: 767px) {
  body.admin-eclipse .table-responsive,
  body.admin-eclipse .dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
  }
  body.admin-eclipse .dataTables_wrapper .row { margin: 0; }
  body.admin-eclipse .dataTables_filter, body.admin-eclipse .dataTables_length { float: none !important; text-align: left !important; margin-bottom: 8px; }
  body.admin-eclipse .dataTables_filter input { width: 100%; }
}

/* ============================================================
   §181.12 — Overrides de clases CUSTOM por-vista (auditoría).
   Lo que el barrido inline no toca: reglas dentro de <style> de
   cada vista. Crimson→naranja, fondos claros→surface, texto
   oscuro→ink, botones/pills custom unificados, anchos fijos
   fluidos en móvil. Centralizado aquí (no en 30 vistas).
   ============================================================ */

/* — Fondos crimson (pills/badges/botones brand) → naranja — */
body.admin-eclipse .brand-bg, body.admin-eclipse .btn-brand, body.admin-eclipse .badge-brand,
body.admin-eclipse .filter-pill.active, body.admin-eclipse .pill-plans .nav-link.active,
body.admin-eclipse .pr-pill.active, body.admin-eclipse .chip.active,
body.admin-eclipse .tl-filter-chips .chip.active, body.admin-eclipse .edit-nav .nav-link.active,
body.admin-eclipse .vr-bg-brand, body.admin-eclipse .vr-pill--active, body.admin-eclipse .vr-rank-num,
body.admin-eclipse .cal-day__badge--today, body.admin-eclipse .so-tab.active {
  background-color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
  color: #fff !important;
}
/* — Texto crimson → naranja — */
body.admin-eclipse .brand-text, body.admin-eclipse .text-brand,
body.admin-eclipse .vr-brand, body.admin-eclipse .vr-stat-value, body.admin-eclipse .vr-rank-value,
body.admin-eclipse .pill-plans .nav-link, body.admin-eclipse .timeline-card details summary {
  color: var(--ec-brand) !important;
}
/* — Bordes crimson → naranja — */
body.admin-eclipse .brand-border, body.admin-eclipse .cal-day--today,
body.admin-eclipse .timeline-entry .timeline-icon,
body.admin-eclipse .plans-card-brand, body.admin-eclipse .card.brand-top { border-color: var(--ec-brand) !important; }

/* — Tarjetas/tablas custom con fondo claro → superficie oscura — */
body.admin-eclipse .so-stat-card, body.admin-eclipse .so-detail-card, body.admin-eclipse .so-feedback-table,
body.admin-eclipse .so-banner-card, body.admin-eclipse .so-card, body.admin-eclipse .pr-stat,
body.admin-eclipse .pr-table, body.admin-eclipse .vr-section, body.admin-eclipse .vr-card,
body.admin-eclipse .vr-stat, body.admin-eclipse .stats-card, body.admin-eclipse .siml-kpi,
body.admin-eclipse .siml-controls, body.admin-eclipse .siml-panel, body.admin-eclipse .tl-table,
body.admin-eclipse .timeline-card, body.admin-eclipse .cal-day, body.admin-eclipse .cal-item,
body.admin-eclipse .compare-picker-card, body.admin-eclipse .compare-table th,
body.admin-eclipse .compare-table td, body.admin-eclipse .ph-heatmap th, body.admin-eclipse .ph-heatmap td,
body.admin-eclipse .metric-card, body.admin-eclipse .so-meta-item {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink);
}
/* tintes claros de color en clases custom → tinte oscuro */
body.admin-eclipse .cal-item__outstanding { background-color: rgba(249,115,22,0.12) !important; color: var(--ec-brand) !important; }

/* — Texto oscuro hardcodeado en clases custom → ink claro — */
body.admin-eclipse .page-header-row .page-title, body.admin-eclipse .stats-number,
body.admin-eclipse .vr-section h5, body.admin-eclipse .timeline-card .title,
body.admin-eclipse .compare-header-name, body.admin-eclipse .so-meta-item span,
body.admin-eclipse .metric-label, body.admin-eclipse .filter-pill,
body.admin-eclipse .filter-pills .pill, body.admin-eclipse .edit-nav .nav-link,
body.admin-eclipse .tl-filter-chips .chip, body.admin-eclipse .so-tab,
body.admin-eclipse .ph-heatmap th.ph-row-label, body.admin-eclipse .vr-stat-label,
body.admin-eclipse .so-meta-item label { color: var(--ec-ink) !important; }
body.admin-eclipse .vr-section h5, body.admin-eclipse .so-meta-item label,
body.admin-eclipse .metric-label { color: var(--ec-ink-soft) !important; }

/* — Botones/pills custom → radio del sistema — */
body.admin-eclipse .so-btn, body.admin-eclipse .pr-btn, body.admin-eclipse .filter-pill,
body.admin-eclipse .vr-pill, body.admin-eclipse .chip, body.admin-eclipse .pr-pill,
body.admin-eclipse .pill-plans .nav-link, body.admin-eclipse .so-tab,
body.admin-eclipse .edit-nav .nav-link { border-radius: 10px !important; font-weight: 600; }

/* — Móvil: anchos fijos → fluidos + tablas custom con scroll + modales stack — */
@media (max-width: 767px) {
  body.admin-eclipse [style*="width:250px"], body.admin-eclipse [style*="width: 250px"],
  body.admin-eclipse [style*="width:300px"], body.admin-eclipse [style*="width: 300px"],
  body.admin-eclipse [style*="width:220px"], body.admin-eclipse [style*="width: 220px"] {
    max-width: 100% !important; width: 100% !important;
  }
  body.admin-eclipse .compare-table, body.admin-eclipse .tl-table, body.admin-eclipse .ph-heatmap {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.admin-eclipse .modal-lg [class*="col-lg-"],
  body.admin-eclipse .modal-lg [class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* — Extiende allowlist de fondos claros inline (valores extra hallados) — */
body.admin-eclipse [style*="background:#fdf2f5"], body.admin-eclipse [style*="background: #fdf2f5"],
body.admin-eclipse [style*="background:#fef3f7"], body.admin-eclipse [style*="background: #fef3f7"],
body.admin-eclipse [style*="background:#f1f3f5"], body.admin-eclipse [style*="background: #f1f3f5"],
body.admin-eclipse [style*="background:#fcfcfc"], body.admin-eclipse [style*="background: #fcfcfc"],
body.admin-eclipse [style*="background:#fbfbfd"], body.admin-eclipse [style*="background: #fbfbfd"] {
  background-color: var(--ec-surface-2) !important;
}

/* ============================================================
   §181.14 — Blindaje de superficies (!important) + Chart.js dark.
   ============================================================ */
body.admin-eclipse .card, body.admin-eclipse .card-body, body.admin-eclipse .card-footer,
body.admin-eclipse .panel, body.admin-eclipse .panel-body, body.admin-eclipse .well,
body.admin-eclipse .box, body.admin-eclipse .widget, body.admin-eclipse .portlet {
  background-color: var(--ec-surface) !important;
}
/* el canvas hereda el card oscuro; aseguramos contenedor sin blanco */
body.admin-eclipse canvas { background: transparent !important; }

/* ============================================================
   §181.15 — Redefinir los tokens --sv-* de admin-override.css a
   oscuro/naranja. Esto vuelve TODA esa capa (40KB, incl. .content
   con var(--sv-bg)) coherente con el tema, en un solo lugar.
   (causa raíz del fondo claro en .content / .main-content)
   ============================================================ */
body.admin-eclipse {
  --sv-bg:           #0f1115;
  --sv-card:         #181b22;
  --sv-navbar:       #181b22;
  --sv-accent:       #f97316;   /* era crimson #8e1841 */
  --sv-accent-hover: #ea580c;
  --sv-text:         #e6e8ec;
  --sv-text-sec:     #9aa3b2;
  --sv-text-muted:   #6b7280;
  --sv-border:       #272b35;
  --sv-row-hover:    #20242d;
  --sv-row-divider:  #272b35;
  /* success/warning/danger/info se conservan (semánticos) */
}

/* ============================================================
   §181.17 — Botones del dashboard que quedaban blancos + títulos
   navy (#1a1a2e) inline invisibles en oscuro.
   ============================================================ */
/* Quick-actions strip (.qa-strip-btn: background:#fff hardcodeado, no token) */
body.admin-eclipse .qa-strip-btn {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .qa-strip-btn i { color: var(--ec-brand) !important; }
body.admin-eclipse .qa-strip-btn:hover,
body.admin-eclipse .qa-strip-btn:focus {
  border-color: var(--ec-brand) !important;
  color: var(--ec-brand) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,0.18) !important;
}
/* Botones de acción del dashboard ("Este mes", etc.) */
body.admin-eclipse .btn-action-secondary,
body.admin-eclipse .btn-action-primary {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .btn-action-primary { background-color: var(--ec-brand) !important; border-color: var(--ec-brand) !important; color: #fff !important; }

/* Texto oscuro navy inline (títulos como "Panel de Control") → ink,
   sin tocar chips que llevan fondo propio */
body.admin-eclipse [style*="color:#1a1a2e"]:not([style*="background"]),
body.admin-eclipse [style*="color: #1a1a2e"]:not([style*="background"]),
body.admin-eclipse [style*="color:#1c1c1e"]:not([style*="background"]),
body.admin-eclipse [style*="color: #1c1c1e"]:not([style*="background"]),
body.admin-eclipse [style*="color:#1f2937"]:not([style*="background"]),
body.admin-eclipse [style*="color: #1f2937"]:not([style*="background"]),
body.admin-eclipse [style*="color:#212529"]:not([style*="background"]),
body.admin-eclipse [style*="color: #212529"]:not([style*="background"]) {
  color: var(--ec-ink) !important;
}

/* ============================================================
   §181.18 — Residuos puntuales + badges de color a tinte oscuro.
   ============================================================ */
/* .filter-row (inline en vista), .order-dashboard-time (backend-custom),
   .admin-breadcrumb (admin-override): fondos claros → surface */
body.admin-eclipse .filter-row {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  box-shadow: var(--ec-shadow) !important;
}
body.admin-eclipse .order-dashboard-time {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink-soft) !important;
}
body.admin-eclipse .admin-breadcrumb {
  background-color: transparent !important;
  border-bottom-color: var(--ec-border) !important;
}

/* Badges de color: tinte CLARO (legacy) → tinte OSCURO legible en dark.
   Se respetan los colores semánticos pero adaptados al fondo oscuro. */
body.admin-eclipse .badge-warning, body.admin-eclipse .badge-bg-warning {
  background-color: rgba(245,158,11,0.18) !important; color: #fbbf24 !important;
}
body.admin-eclipse .badge-success, body.admin-eclipse .badge-bg-success {
  background-color: rgba(16,185,129,0.18) !important; color: #34d399 !important;
}
body.admin-eclipse .badge-danger, body.admin-eclipse .badge-bg-danger {
  background-color: rgba(239,68,68,0.18) !important; color: #f87171 !important;
}
body.admin-eclipse .badge-info, body.admin-eclipse .badge-bg-info {
  background-color: rgba(59,130,246,0.18) !important; color: #60a5fa !important;
}
body.admin-eclipse .badge-primary {
  background-color: rgba(249,115,22,0.18) !important; color: #fb923c !important;
}

/* ============================================================
   §181.19 — CIERRE: barrido exhaustivo (auditoría 4 agentes).
   Cubre los 150 fondos claros + 72 textos oscuros restantes,
   sobrescribiendo por clase (no se editan las hojas compartidas).
   Intencionalmente claros: .google-serp-* (preview de Google),
   .cropper-crop-box (editor), @media print.
   ============================================================ */

/* ── Contenedores claros → superficie oscura ── */
body.admin-eclipse .admin-search-panel, body.admin-eclipse .admin-search-footer,
body.admin-eclipse .dashboard-display, body.admin-eclipse .dashboard-main-col,
body.admin-eclipse .alert-update,
body.admin-eclipse .dashboard-recent-orders-block, body.admin-eclipse .dashboard-new-users-block,
body.admin-eclipse .dashboard-top-stores, body.admin-eclipse .dashboard-latest-reviews,
body.admin-eclipse .dashboard-todoNotes, body.admin-eclipse .recent-order-card,
body.admin-eclipse .new-users, body.admin-eclipse .editItem-slide-content-block,
body.admin-eclipse .newItem-slide-content-block, body.admin-eclipse #orderUpdatesFloat,
body.admin-eclipse .navSearchUl, body.admin-eclipse .dashboard-drag-toggle,
body.admin-eclipse .ol-popup, body.admin-eclipse .bannerButton,
body.admin-eclipse #fullScreenLoadingOverlay > #loadingMessage,
body.admin-eclipse .vr-stat-card, body.admin-eclipse .timeline-card,
body.admin-eclipse .timeline-entry .timeline-icon, body.admin-eclipse .timeline-card pre,
body.admin-eclipse .siml-kpi, body.admin-eclipse .danger-zone {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse .ol-popup:after { border-top-color: var(--ec-surface) !important; }
body.admin-eclipse .restaurant-timeline::before, body.admin-eclipse .vr-delivery-bar { background-color: var(--ec-border) !important; }

/* ── Inputs / botones neutros / processing / kbd → surface-2 ── */
body.admin-eclipse .btn-action, body.admin-eclipse .btn-action-secondary,
body.admin-eclipse input#todo_data, body.admin-eclipse .bulk-actions-bar .form-control-sm,
body.admin-eclipse .buttons-csv, body.admin-eclipse .buttons-print,
body.admin-eclipse .dataTables_processing, body.admin-eclipse .translation-section-btn,
body.admin-eclipse .stacked::before, body.admin-eclipse .edit-item-sticky-header,
body.admin-eclipse .assigning-checkboxes label, body.admin-eclipse .modal-content,
body.admin-eclipse .modal-header, body.admin-eclipse .siml-controls select,
body.admin-eclipse .siml-controls button,
body.admin-eclipse .admin-search-input-wrap kbd, body.admin-eclipse .admin-search-footer kbd,
body.admin-eclipse .admin-shortcuts-table kbd {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}

/* ── Hovers claros → surface-2 ── */
body.admin-eclipse .navSearchUl li:hover, body.admin-eclipse .navSearchUl--hover li,
body.admin-eclipse .navSearchUl--hover li:hover, body.admin-eclipse .admin-search-item:hover,
body.admin-eclipse .admin-search-item.selected, body.admin-eclipse .so-feedback-table tr:hover td,
body.admin-eclipse .pr-table tr:hover td, body.admin-eclipse .vr-pill:hover,
body.admin-eclipse .pr-pill:hover { background-color: var(--ec-surface-2) !important; }

/* ── Velo de carga blanco → oscuro ── */
body.admin-eclipse .admin-loading::before { background: rgba(15,17,21,0.75) !important; }

/* ── Texto oscuro (contenedores/títulos/labels) → ink ── */
body.admin-eclipse .empty-state-title, body.admin-eclipse .admin-breadcrumb .breadcrumb-item.active,
body.admin-eclipse .admin-search-input-wrap input, body.admin-eclipse .admin-search-item,
body.admin-eclipse .admin-shortcuts-table td, body.admin-eclipse .recent-order-card > a,
body.admin-eclipse .new-users > a, body.admin-eclipse .so-status-card__header,
body.admin-eclipse .so-status-row__name, body.admin-eclipse .so-summary-pill__value,
body.admin-eclipse .so-realtime-time, body.admin-eclipse .so-menu-tab,
body.admin-eclipse .bannerButton, body.admin-eclipse .stats-card .stats-number,
body.admin-eclipse .linked-item, body.admin-eclipse .compare-empty h5,
body.admin-eclipse .compare-header-name, body.admin-eclipse .compare-table .metric-label,
body.admin-eclipse .timeline-card .title, body.admin-eclipse .ph-heatmap th.ph-row-label,
body.admin-eclipse .edit-nav .nav-link, body.admin-eclipse .vr-section h5,
body.admin-eclipse .page-header-row .page-title, body.admin-eclipse .stat-card .stat-value {
  color: var(--ec-ink) !important;
}

/* ── Alertas (tinte claro → tinte oscuro legible) ── */
body.admin-eclipse .alert-success { background-color: rgba(16,185,129,0.15) !important; color: #34d399 !important; border-color: rgba(16,185,129,0.3) !important; }
body.admin-eclipse .alert-danger, body.admin-eclipse .alert-error { background-color: rgba(239,68,68,0.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.3) !important; }
body.admin-eclipse .alert-warning { background-color: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.3) !important; }
body.admin-eclipse .alert-info { background-color: rgba(59,130,246,0.15) !important; color: #60a5fa !important; border-color: rgba(59,130,246,0.3) !important; }

/* ── jGrowl toasts ── */
body.admin-eclipse .jGrowl-notification.admin-toast-success { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; }
body.admin-eclipse .jGrowl-notification.admin-toast-error { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
body.admin-eclipse .jGrowl-notification.admin-toast-warning { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
body.admin-eclipse .jGrowl-notification.admin-toast-info { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; }

/* ── Badges de estado por familia (clase) → tinte oscuro + texto claro ── */
/* verde */
body.admin-eclipse .vr-tool-active, body.admin-eclipse .so-badge-resolved, body.admin-eclipse .pr-badge--approved,
body.admin-eclipse .cal-item__outstanding--zero, body.admin-eclipse .compare-table .metric-best {
  background-color: rgba(16,185,129,0.18) !important; color: #34d399 !important;
}
/* ámbar */
body.admin-eclipse .vr-plan-pro, body.admin-eclipse .so-badge-open, body.admin-eclipse .so-badge-usability,
body.admin-eclipse .pr-badge--pending, body.admin-eclipse .tl-severity-tag.warning, body.admin-eclipse .cal-unconfigured,
body.admin-eclipse .siml-banner, body.admin-eclipse .compare-header-badge.plan-premium, body.admin-eclipse .override-badge {
  background-color: rgba(245,158,11,0.18) !important; color: #fbbf24 !important;
}
/* rojo */
body.admin-eclipse .so-badge-bug, body.admin-eclipse .pr-badge--rejected, body.admin-eclipse .tl-severity-tag.critical,
body.admin-eclipse .cal-item__outstanding {
  background-color: rgba(239,68,68,0.18) !important; color: #f87171 !important;
}
/* azul */
body.admin-eclipse .so-badge-in_progress, body.admin-eclipse .so-badge-suggestion, body.admin-eclipse .tl-severity-tag.info,
body.admin-eclipse .compare-header-badge.plan-pro {
  background-color: rgba(59,130,246,0.18) !important; color: #60a5fa !important;
}
/* neutro */
body.admin-eclipse .vr-plan-basic, body.admin-eclipse .vr-tool-inactive, body.admin-eclipse .so-badge-dismissed,
body.admin-eclipse .so-badge-other, body.admin-eclipse .tl-plan-badge, body.admin-eclipse .compare-header-badge,
body.admin-eclipse .compare-header-badge.plan-basic, body.admin-eclipse .cal-day__badge--count,
body.admin-eclipse .ph-heatmap td.ph-empty, body.admin-eclipse .vr-rank-num.dim,
body.admin-eclipse .so-message-box {
  background-color: var(--ec-surface-2) !important; color: var(--ec-ink-soft) !important;
}
/* tabla feedback/pr/compare th claros */
body.admin-eclipse .so-feedback-table th, body.admin-eclipse .pr-table th,
body.admin-eclipse .compare-table th, body.admin-eclipse .compare-picker-card .card-header {
  background-color: var(--ec-surface-2) !important; color: var(--ec-ink-soft) !important;
}

/* ── Texto oscuro inline extra (grises navy) → ink, sin tocar chips con fondo ── */
body.admin-eclipse [style*="color:#333"]:not([style*="background"]),
body.admin-eclipse [style*="color: #333"]:not([style*="background"]),
body.admin-eclipse [style*="color:#555"]:not([style*="background"]),
body.admin-eclipse [style*="color: #555"]:not([style*="background"]),
body.admin-eclipse [style*="color:#2d3748"]:not([style*="background"]),
body.admin-eclipse [style*="color: #2d3748"]:not([style*="background"]),
body.admin-eclipse [style*="color:#181c32"]:not([style*="background"]),
body.admin-eclipse [style*="color:#293a50"]:not([style*="background"]),
body.admin-eclipse [style*="color:#37474f"]:not([style*="background"]),
body.admin-eclipse [style*="color:#4e535a"]:not([style*="background"]) {
  color: var(--ec-ink) !important;
}

/* ── Badges INLINE de color (bg+texto en el mismo elemento) → tinte oscuro ── */
body.admin-eclipse [style*="background:#fff3cd"], body.admin-eclipse [style*="background: #fff3cd"],
body.admin-eclipse [style*="background-color:#ffc107"], body.admin-eclipse [style*="background-color: #ffc107"],
body.admin-eclipse [style*="background-color:#ffe08a"], body.admin-eclipse [style*="background:#fff3e0"] {
  background-color: rgba(245,158,11,0.18) !important; color: #fbbf24 !important;
}
body.admin-eclipse [style*="background-color:#8fd19e"], body.admin-eclipse [style*="background-color: #8fd19e"] {
  background-color: rgba(16,185,129,0.18) !important; color: #34d399 !important;
}
body.admin-eclipse [style*="background-color:#f5a0a0"], body.admin-eclipse [style*="background:#f3e5ec"] {
  background-color: rgba(239,68,68,0.18) !important; color: #f87171 !important;
}
body.admin-eclipse [style*="background-color:#e9ecef"], body.admin-eclipse [style*="background-color: #e9ecef"],
body.admin-eclipse [style*="background-color:#ececec"], body.admin-eclipse [style*="background:#f0f0f0"] {
  background-color: var(--ec-surface-2) !important; color: var(--ec-ink-soft) !important;
}

/* ============================================================
   §181.20 — Nav-pills/tabs verticales (edit user/restaurant):
   el activo era naranja-sobre-naranja (invisible) y los inactivos
   naranja. Inactivo → gris; activo → naranja con texto/icono blanco.
   ============================================================ */
body.admin-eclipse .nav-pills .nav-link,
body.admin-eclipse .nav-pills-main .nav-link {
  color: var(--ec-ink-soft) !important;
  border-radius: 10px;
}
body.admin-eclipse .nav-pills .nav-link i,
body.admin-eclipse .nav-pills-main .nav-link i { color: var(--ec-ink-soft) !important; }
body.admin-eclipse .nav-pills .nav-link:hover:not(.active),
body.admin-eclipse .nav-pills-main .nav-link:hover:not(.active) {
  color: var(--ec-ink) !important;
  background-color: var(--ec-surface-2) !important;
}
body.admin-eclipse .nav-pills .nav-link.active,
body.admin-eclipse .nav-pills-main .nav-link.active,
body.admin-eclipse .edit-nav .nav-link.active {
  background-color: var(--ec-brand) !important;
  color: #fff !important;
}
body.admin-eclipse .nav-pills .nav-link.active i,
body.admin-eclipse .nav-pills-main .nav-link.active i,
body.admin-eclipse .edit-nav .nav-link.active i { color: #fff !important; }

/* ============================================================
   §181.21 — Pills/tabs/chips: estados activo e inactivo legibles
   (auditoría). Cubre AMBAS convenciones (.active y --active BEM),
   fondos claros hardcodeados de inactivos, y botones de acción.
   ============================================================ */
/* INACTIVOS (estado base): fondo oscuro + texto gris + borde */
body.admin-eclipse .filter-pill,
body.admin-eclipse .filter-pills .pill,
body.admin-eclipse .pr-pill,
body.admin-eclipse .vr-pill,
body.admin-eclipse .so-tab {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink-soft) !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse .so-tabs { background-color: var(--ec-surface-2) !important; }
body.admin-eclipse .filter-pill i, body.admin-eclipse .filter-pills .pill i,
body.admin-eclipse .pr-pill i, body.admin-eclipse .vr-pill i, body.admin-eclipse .so-tab i {
  color: var(--ec-ink-soft) !important;
}

/* ACTIVOS (.active Y --active BEM): naranja + texto/icono BLANCO.
   Mayor especificidad que el base → ganan; #fff !important vence a la
   regla de enlaces .ec-content a. */
body.admin-eclipse .filter-pill.active,
body.admin-eclipse .filter-pills .pill.active,
body.admin-eclipse .pr-pill.active, body.admin-eclipse .pr-pill--active,
body.admin-eclipse .vr-pill.active, body.admin-eclipse .vr-pill--active,
body.admin-eclipse .so-tab.active, body.admin-eclipse .so-tab--active,
body.admin-eclipse .chip.active, body.admin-eclipse .tl-filter-chips .chip.active {
  background-color: var(--ec-brand) !important;
  color: #fff !important;
  border-color: var(--ec-brand) !important;
}
body.admin-eclipse .filter-pill.active i, body.admin-eclipse .filter-pills .pill.active i,
body.admin-eclipse .pr-pill.active i, body.admin-eclipse .pr-pill--active i,
body.admin-eclipse .vr-pill.active i, body.admin-eclipse .vr-pill--active i,
body.admin-eclipse .so-tab.active i, body.admin-eclipse .so-tab--active i { color: #fff !important; }

/* Botones de acción custom (anchors) que tomaban color naranja de la
   regla de enlaces: neutro legible o color sólido con texto blanco */
body.admin-eclipse .so-btn, body.admin-eclipse .so-btn-view {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse .so-btn-approve { background-color: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }
body.admin-eclipse .so-btn-reject  { background-color: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; }

/* ============================================================
   §181.22 — Botones: fix icono-encima-de-texto (.btn-labeled),
   paginación blanca, y .btn-secondary neutro.
   ============================================================ */
/* .btn-labeled (icono en <b> posicionado absoluto) → flex inline con gap,
   sin solape. Quita el bloque/posición absoluta del <b>. */
body.admin-eclipse .btn-labeled {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
}
body.admin-eclipse .btn-labeled > b {
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
}
body.admin-eclipse .btn-labeled > b > i { margin: 0 !important; }

/* .btn-secondary (Agregar Usuario / Roles / Reiniciar) → neutro oscuro */
body.admin-eclipse .btn-secondary {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .btn-secondary:hover { background-color: var(--ec-border) !important; color: #fff !important; }

/* Paginación: botones base (prev/next/números) tenían fondo blanco → oscuro */
body.admin-eclipse .paginate_button,
body.admin-eclipse .dataTables_paginate .paginate_button,
body.admin-eclipse .pagination .page-link {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  border-radius: 8px !important;
  margin: 0 2px;
}
body.admin-eclipse .paginate_button.current,
body.admin-eclipse .paginate_button.current:hover,
body.admin-eclipse .pagination .page-item.active .page-link {
  background-color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
  color: #fff !important;
}
body.admin-eclipse .paginate_button.disabled,
body.admin-eclipse .paginate_button.disabled:hover { opacity: 0.4 !important; }

/* ============================================================
   §181.23 — Cierre de botones (auditoría): variantes dark/outline
   no remapeadas, tonos coral viejos, customs crimson, iconos.
   ============================================================ */
/* .btn-dark / .btn-outline-dark: navy del tema viejo = invisible en dark */
body.admin-eclipse .btn-dark {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .btn-dark:hover { border-color: var(--ec-brand) !important; color: #fff !important; background-color: var(--ec-border) !important; }
body.admin-eclipse .btn-outline-dark {
  background-color: transparent !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .btn-outline-dark:hover { background-color: var(--ec-surface-2) !important; color: #fff !important; border-color: var(--ec-brand) !important; }

/* .btn-outline-warning: alinear al ámbar del sistema (no el coral #ff7043) */
body.admin-eclipse .btn-outline-warning { color: #fbbf24 !important; border-color: #f59e0b !important; }
body.admin-eclipse .btn-outline-warning:hover { background-color: #f59e0b !important; color: #1a1a1a !important; border-color: #f59e0b !important; }

/* .btn-outline-success / -danger / -info: alinear a familias dark */
body.admin-eclipse .btn-outline-success { color: #34d399 !important; border-color: #16a34a !important; }
body.admin-eclipse .btn-outline-success:hover { background-color: #16a34a !important; color: #fff !important; }
body.admin-eclipse .btn-outline-danger { color: #f87171 !important; border-color: #dc2626 !important; }
body.admin-eclipse .btn-outline-danger:hover { background-color: #dc2626 !important; color: #fff !important; }
body.admin-eclipse .btn-outline-info { color: #60a5fa !important; border-color: #2563eb !important; }
body.admin-eclipse .btn-outline-info:hover { background-color: #2563eb !important; color: #fff !important; }

/* Icono del botón warning (impersonar) forzado a blanco → oscuro legible sobre ámbar */
body.admin-eclipse .btn-warning .text-white, body.admin-eclipse .btn-warning i { color: #1a1a1a !important; }

/* Botones custom de feedback: .so-btn-save (acción primaria) → naranja */
body.admin-eclipse .so-btn-save { background-color: var(--ec-brand) !important; border-color: var(--ec-brand) !important; color: #fff !important; }
body.admin-eclipse .so-btn-back { color: var(--ec-brand) !important; }

/* .pr-btn--approve / --reject: color sólido coherente */
body.admin-eclipse .pr-btn--approve { background-color: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
body.admin-eclipse .pr-btn--reject  { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }

/* Filtro 'Beta Testers' (morado inline #7c3aed) inactivo: subir a morado claro
   legible sobre oscuro; el activo conserva su inline (#fff sobre morado). */
body.admin-eclipse [data-role="beta"]:not(.active) { color: #a78bfa !important; border-color: #a78bfa !important; }

/* ============================================================
   §181.24 — Comparador y otros: breadcrumb-line blanco + headers
   de tarjeta full-crimson/naranja (muy pesados) → oscuros con acento.
   ============================================================ */
/* Breadcrumb del tema legacy (.breadcrumb-line / -light): fondo blanco → oscuro */
body.admin-eclipse .breadcrumb-line,
body.admin-eclipse .breadcrumb-line-light,
body.admin-eclipse .breadcrumb {
  background-color: transparent !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse .breadcrumb-item.active { color: var(--ec-ink-soft) !important; }

/* Card-headers que traían fondo crimson/naranja inline (barra sólida pesada)
   → header oscuro con título claro e icono naranja (más específico que el
   remap genérico de §181.11, por eso gana). */
body.admin-eclipse .card-header[style*="#8e1841"],
body.admin-eclipse .card-header[style*="background-color:#8e1841"],
body.admin-eclipse .card-header[style*="background-color: #8e1841"],
body.admin-eclipse .card-header[style*="background:#8e1841"] {
  background-color: var(--ec-surface) !important;
  background-image: none !important;
  color: var(--ec-ink) !important;
  border-bottom: 1px solid var(--ec-border) !important;
}
body.admin-eclipse .card-header[style*="8e1841"] i { color: var(--ec-brand) !important; }

/* .compare-card-header / .compare-picker-card header con tinte claro → oscuro */
body.admin-eclipse .compare-card-header {
  background-color: var(--ec-surface) !important;
  color: var(--ec-ink) !important;
  border-bottom-color: var(--ec-border) !important;
}

/* ============================================================
   §181.25 — Foco: UN solo anillo naranja (sin doble/rojo) + más
   controles de formulario en oscuro.
   ============================================================ */
/* El anillo accesible de admin-override (outline crimson + box-shadow crimson,
   L1249) se sumaba a mi ring naranja y al rojo de Firefox. Unificar: */
body.admin-eclipse .form-control:focus,
body.admin-eclipse .form-control:focus-visible,
body.admin-eclipse .custom-select:focus,
body.admin-eclipse textarea:focus {
  border-color: var(--ec-brand) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.25) !important;
  outline: none !important;
}
/* Botones/links/dropdown: anillo accesible naranja (un solo trazo, sin box-shadow) */
body.admin-eclipse .btn:focus-visible,
body.admin-eclipse .dropdown-item:focus-visible,
body.admin-eclipse .breadcrumb-item a:focus-visible,
body.admin-eclipse .ec-nav__item:focus-visible {
  outline: 2px solid var(--ec-brand) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* Firefox: quitar el anillo ROJO de campos requeridos inválidos → solo el naranja */
body.admin-eclipse .form-control:-moz-ui-invalid { box-shadow: none !important; }
body.admin-eclipse .form-control:focus:-moz-ui-invalid {
  border-color: var(--ec-brand) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.25) !important;
}

/* Selects nativos + opciones del dropdown → oscuro */
body.admin-eclipse select, body.admin-eclipse select.form-control,
body.admin-eclipse .custom-select {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse select option, body.admin-eclipse optgroup {
  background-color: var(--ec-surface) !important;
  color: var(--ec-ink) !important;
}

/* Checkboxes/radios uniform.js (.checker/.choice) + Bootstrap custom-control + file */
body.admin-eclipse .checker > span, body.admin-eclipse .choice > span {
  background: var(--ec-surface-2) !important;
  border: 1px solid var(--ec-border) !important;
}
body.admin-eclipse .custom-control-label::before {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
}
body.admin-eclipse .custom-file-label, body.admin-eclipse .uploader,
body.admin-eclipse .uploader .filename {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .form-check-input, body.admin-eclipse input[type="checkbox"], body.admin-eclipse input[type="radio"] {
  accent-color: var(--ec-brand);
}

/* ============================================================
   §181.26 — Cierre auditoría formularios (controles que el
   navegador/plugin dibuja con chrome propio claro y que ninguna
   regla .form-control alcanza). Todo scoped body.admin-eclipse.
   ============================================================ */

/* --- Select2 multiple: pills internas + placeholder --- */
body.admin-eclipse .select2-selection__choice {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .select2-selection__choice__remove { color: var(--ec-ink-soft) !important; }
body.admin-eclipse .select2-selection__choice__remove:hover { color: var(--ec-brand) !important; }
body.admin-eclipse .select2-selection__placeholder { color: var(--ec-muted) !important; }

/* --- Buscador de ubicación Google Maps (editRestaurant/restaurants/popularGeoLocations) --- */
body.admin-eclipse .gllpSearchField {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .gllpSearchField::placeholder { color: var(--ec-muted) !important; }
body.admin-eclipse .gllpSearchButton {
  background-color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
  color: #fff !important;
}

/* --- Placeholders con prefijo de vendor + nota del dashboard --- */
body.admin-eclipse .form-control::-webkit-input-placeholder { color: var(--ec-muted) !important; }
body.admin-eclipse .form-control::-moz-placeholder { color: var(--ec-muted) !important; }
body.admin-eclipse .form-control:-ms-input-placeholder { color: var(--ec-muted) !important; }
body.admin-eclipse input#todo_data::placeholder { color: var(--ec-muted) !important; }

/* --- Select de filtro custom (defensivo: hoy sin uso en views admin) --- */
body.admin-eclipse .select-filter-dropdown {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}

/* --- daterangepicker: inputs de texto del rango (por si una vista los reactiva) --- */
body.admin-eclipse .daterangepicker .input-mini,
body.admin-eclipse .daterangepicker .drp-calendar input {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}

/* --- Switchery (decenas de toggles en Ajustes): track en OFF era pastilla blanca --- */
body.admin-eclipse .switchery {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  box-shadow: none !important;
}

/* --- Spectrum colorpicker: botón visible + input hex del popup --- */
body.admin-eclipse .sp-replacer {
  background: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .sp-replacer:hover { border-color: var(--ec-brand) !important; }
body.admin-eclipse .sp-input {
  background: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}

/* --- input[type=color] nativo: quitar marco blanco interno de la swatch --- */
body.admin-eclipse input[type="color"] {
  padding: 2px !important;
  background: var(--ec-surface-2) !important;
}
body.admin-eclipse input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
body.admin-eclipse input[type="color"]::-webkit-color-swatch { border: 1px solid var(--ec-border); }

/* --- Caja de mensaje en detalle de feedback (regla en <style>, no inline) --- */
body.admin-eclipse .so-message-box {
  background: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
  border-left-color: var(--ec-brand) !important;
}

/* --- Estados disabled/readonly: Bootstrap forzaba gris claro #fafafa por clase --- */
body.admin-eclipse .form-control:disabled,
body.admin-eclipse .form-control[readonly],
body.admin-eclipse textarea:disabled,
body.admin-eclipse textarea[readonly] {
  background-color: var(--ec-bg) !important;
  color: var(--ec-ink-soft) !important;
  opacity: 0.7 !important;
}
body.admin-eclipse .custom-select:disabled,
body.admin-eclipse select:disabled,
body.admin-eclipse .select2-container--disabled .select2-selection--single {
  background-color: var(--ec-bg) !important;
  color: var(--ec-ink-soft) !important;
}

/* --- Validación: preservar borde rojo/verde AL ENFOCAR (el anillo naranja lo pisaba) --- */
body.admin-eclipse .form-control.is-invalid:focus {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 3px rgba(244,67,54,0.25) !important;
}
body.admin-eclipse .form-control.is-valid:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.25) !important;
}

/* --- Ace editor (Custom CSS / Admin Custom CSS en Ajustes): theme textmate era blanco --- */
body.admin-eclipse .ace_editor,
body.admin-eclipse .ace_gutter {
  background: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .ace_gutter { color: var(--ec-muted) !important; }
body.admin-eclipse .ace_cursor { color: var(--ec-brand) !important; }
body.admin-eclipse .ace_marker-layer .ace_active-line,
body.admin-eclipse .ace_marker-layer .ace_selection {
  background: var(--ec-surface) !important;
}
body.admin-eclipse .ace_gutter-active-line { background: var(--ec-surface) !important; }

/* --- Toggle "Mostrar" contraseña (editUser/users): grises claros casi invisibles --- */
body.admin-eclipse #showPassword {
  border-color: var(--ec-border) !important;
  background: var(--ec-surface-2) !important;
  color: var(--ec-ink-soft) !important;
}
body.admin-eclipse #showPassword:hover { color: var(--ec-brand) !important; }

/* --- Texto de ayuda alterno (.help-text, 34 usos) --- */
body.admin-eclipse .help-text { color: var(--ec-ink-soft) !important; }

/* --- Summernote: dropdowns/paleta/modales desplegados seguían blancos --- */
body.admin-eclipse .note-dropdown-menu,
body.admin-eclipse .note-modal-content,
body.admin-eclipse .note-color-palette {
  background-color: var(--ec-surface) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}
body.admin-eclipse .note-dropdown-item:hover { background-color: var(--ec-surface-2) !important; }
body.admin-eclipse .note-modal-content .form-control {
  background-color: var(--ec-surface-2) !important;
  color: var(--ec-ink) !important;
}

/* --- Textarea del widget de feedback flotante (master.blade) --- */
body.admin-eclipse #fbMessage {
  background-color: var(--ec-surface-2) !important;
  border-color: var(--ec-border) !important;
  color: var(--ec-ink) !important;
}

/* ============================================================
   §181.30 — Cierre barrido crimson en el panel supervisor.
   Sweep adversarial: 15 fugas reales de #8e1841 (la mayoría SIN
   !important, por eso no las tocaba el remap [style*=]) + hovers
   en crimson OSCURO (#6d123x) + un spinner latente, todo visible
   en el shell eclipse. Scoped body.admin-eclipse con mayor
   especificidad → los archivos compartidos y la marca crimson de
   la app de Negocio quedan INTACTOS.
   ============================================================ */

/* — admin-override.css (compartido) — */
body.admin-eclipse .admin-breadcrumb .breadcrumb-item a { color: var(--ec-brand) !important; }
body.admin-eclipse .admin-breadcrumb .breadcrumb-item a:hover { color: var(--ec-brand-600) !important; }
body.admin-eclipse .admin-search-item:hover > i,
body.admin-eclipse .admin-search-item.selected > i { color: var(--ec-brand) !important; }
body.admin-eclipse .bulk-actions-bar { background: var(--ec-brand) !important; }
/* Halo de foco por mouse (:focus, no :focus-visible) en botones → naranja */
body.admin-eclipse .btn:focus,
body.admin-eclipse .btn:active:focus { box-shadow: 0 0 0 3px rgba(249,115,22,0.22) !important; }
/* Spinner AJAX (admin-loading) — sin uso hoy, cubierto preventivamente */
body.admin-eclipse .admin-loading::after { border-top-color: var(--ec-brand) !important; }

/* — vistas admin/** (reglas por-clase en <style>, no inline) — */
body.admin-eclipse .vr-plan-premium {
  background-image: var(--ec-brand-grad) !important;
  background-color: var(--ec-brand) !important;
  color: #fff !important;
}
body.admin-eclipse .timeline-entry .timeline-icon { color: var(--ec-brand) !important; }
body.admin-eclipse .plan-card { border-top-color: var(--ec-brand) !important; }
body.admin-eclipse .pill-plans .nav-link:hover {
  background-color: var(--ec-brand) !important;
  border-color: var(--ec-brand) !important;
  color: #fff !important;
}
body.admin-eclipse .siml-kpi.r { color: var(--ec-brand) !important; }
body.admin-eclipse .siml-legend .dot.r { background: var(--ec-brand) !important; }
body.admin-eclipse .so-stat-number,
body.admin-eclipse .pr-stat-num { color: var(--ec-brand) !important; }
body.admin-eclipse .edit-nav .nav-link:hover:not(.active) { background: var(--ec-brand-50) !important; }
body.admin-eclipse .bulk-bar-sticky { background: var(--ec-brand) !important; }
body.admin-eclipse #bulkSelectAll:focus-visible,
body.admin-eclipse .alert-select-row:focus-visible { outline-color: var(--ec-brand) !important; }

/* — hovers en crimson OSCURO (#6d123x) → naranja-600 (congruente) — */
body.admin-eclipse .filter-pill.active:hover { background: var(--ec-brand-600) !important; }
body.admin-eclipse .btn-brand:hover {
  background-color: var(--ec-brand-600) !important;
  border-color: var(--ec-brand-600) !important;
}
body.admin-eclipse .so-btn-save:hover,
body.admin-eclipse .so-btn-view:hover { background: var(--ec-brand-600) !important; }

/* ============================================================
   §181.31 — Adaptación MÓVIL del panel supervisor (eclipse).
   1) Contexto en el topbar: marca + título de página (qué app /
      dónde estoy), visibles solo en móvil (en desktop el sidebar
      ya los da).
   2) DataTables densas usables: celdas en una línea + scroll
      horizontal con momentum (adiós al wrapping carácter-por-
      carácter) + controles touch apilados.
   Scoped al shell admin → la app de Negocio NO se ve afectada.
   ============================================================ */

/* — Topbar: marca compacta + título de página — */
.ec-topbar__brand { display: none; align-items: center; flex-shrink: 0; text-decoration: none; }
.ec-topbar__brand img { height: 24px; width: auto; }
.ec-topbar__title {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ec-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
  body.admin-eclipse .ec-topbar { gap: 10px; }
  body.admin-eclipse .ec-topbar__brand { display: inline-flex; }
  body.admin-eclipse .ec-topbar__title { display: block; }
}

@media (max-width: 767px) {
  /* — DataTables: celdas en una sola línea + scroll horizontal con momentum.
       (la tabla de Negocios tiene su propio layout de cards §181.3 y lo
       conserva porque sus celdas declaran white-space:normal !important) — */
  body.admin-eclipse table.dataTable td,
  body.admin-eclipse table.dataTable th { white-space: nowrap; }
  body.admin-eclipse .dataTables_scroll,
  body.admin-eclipse .dataTables_scrollBody,
  body.admin-eclipse .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  /* columna de acción fija (fixedColumns) en oscuro */
  body.admin-eclipse .DTFC_LeftWrapper, body.admin-eclipse .DTFC_RightWrapper,
  body.admin-eclipse .DTFC_LeftBodyLiner, body.admin-eclipse .DTFC_RightBodyLiner,
  body.admin-eclipse .DTFC_RightWrapper table.dataTable td,
  body.admin-eclipse .DTFC_LeftWrapper table.dataTable td { background: var(--ec-surface) !important; }

  /* — controles del DataTable: apilados, full-width, touch — */
  body.admin-eclipse .dataTables_wrapper .dataTables_filter,
  body.admin-eclipse .dataTables_wrapper .dataTables_length,
  body.admin-eclipse .dataTables_wrapper .dataTables_info,
  body.admin-eclipse .dataTables_wrapper .dt-buttons {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin: 0 0 10px !important;
  }
  body.admin-eclipse .dataTables_filter input { width: 100% !important; margin: 6px 0 0 !important; min-height: 42px; }
  body.admin-eclipse .dataTables_length select { min-height: 42px; }
  body.admin-eclipse .dataTables_wrapper .dt-buttons .btn { display: block; width: 100%; min-height: 42px; }
  body.admin-eclipse .dataTables_paginate { float: none !important; text-align: center !important; padding-top: 8px; }
  body.admin-eclipse .dataTables_paginate .paginate_button { min-width: 40px; padding: 8px 12px !important; }

  /* — inputs touch-friendly + separación cómoda de cards — */
  body.admin-eclipse .form-control, body.admin-eclipse .custom-select { min-height: 42px; }
  body.admin-eclipse .card { margin-bottom: 14px; }
}

/* ============================================================
   §181.32 — Cierre auditoría móvil (390px) del panel supervisor.
   25 hallazgos: form-inline/controles que no colapsan, tablas
   PLANAS (no DataTable) que parten texto, anchos fijos inline,
   daterangepicker y banner-card que desbordan. Todo scoped a
   body.admin-eclipse + @media móvil → la app de Negocio intacta.
   ============================================================ */
@media (max-width: 767px) {
  /* 1) .form-inline (Bootstrap no colapsa solo) → 1 columna */
  body.admin-eclipse .form-inline { flex-direction: column; align-items: stretch; }
  body.admin-eclipse .form-inline > .btn-group,
  body.admin-eclipse .form-inline > select,
  body.admin-eclipse .form-inline > label,
  body.admin-eclipse .form-inline > .form-control,
  body.admin-eclipse .form-inline > .input-group { width: 100% !important; margin-right: 0 !important; }
  body.admin-eclipse .form-inline .btn-group .btn { flex: 1; }
  body.admin-eclipse .form-inline .ml-auto { margin-left: 0 !important; }

  /* 2) Simulador en Vivo: controles que no envuelven */
  body.admin-eclipse .siml-controls { flex-wrap: wrap; }
  body.admin-eclipse .siml-controls select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  body.admin-eclipse .siml-controls button { flex: 1 1 auto; }

  /* 3) Tablas PLANAS (no DataTable): celdas en una línea + scroll horizontal,
        igual que las DataTables §181.31. Cubre zones/addons/collections/
        combos/boosts/coupons/sliders/driver-cash/etc. de una sola vez.
        (La de Negocios es .dataTable → excluida; ya es cards §181.3) */
  body.admin-eclipse .table-responsive table.table:not(.dataTable) td,
  body.admin-eclipse .table-responsive table.table:not(.dataTable) th { white-space: nowrap; }
  body.admin-eclipse .table-responsive table.table:not(.dataTable) th[style*="width"] { width: auto !important; }
  /* tabla custom de Feedback (no usa .table) */
  body.admin-eclipse .so-feedback-table td,
  body.admin-eclipse .so-feedback-table th { white-space: nowrap; }

  /* 4) Celdas de acción con btn-group-justified: no estirar botones diminutos */
  body.admin-eclipse .table .btn-group-justified {
    display: inline-flex !important; width: auto !important; gap: 8px; align-items: center;
  }
  body.admin-eclipse .table .btn-group-justified .btn { min-width: 38px; min-height: 38px; }

  /* 5) Anchos FIJOS inline que desbordan + padding de tabs */
  body.admin-eclipse .btn-group-justified[style*="width: 300px"],
  body.admin-eclipse .btn-group-justified[style*="width:300px"] { width: 100% !important; max-width: 100% !important; }
  body.admin-eclipse .tab-content[style*="25px"] { padding-left: 0 !important; padding-right: 0 !important; }
  body.admin-eclipse .each-slide .btn-group[style*="150px"] { width: 100% !important; }

  /* 6) Barras de acciones masivas: envolver en vez de desbordar */
  body.admin-eclipse .bulk-actions-bar { flex-wrap: wrap; gap: 8px; }
  body.admin-eclipse .bulk-actions-bar .btn-group { flex-wrap: wrap; width: 100%; }
  body.admin-eclipse .bulk-actions-bar .btn-group .btn { flex: 1 1 auto; }
  body.admin-eclipse .bulk-bar-sticky { flex-wrap: wrap; gap: 8px; padding: 8px 12px !important; }
  body.admin-eclipse #bulkAckForm { padding-bottom: 72px; }

  /* 7) daterangepicker (2 calendarios lado a lado) → cabe en el viewport */
  body.admin-eclipse .daterangepicker {
    max-width: calc(100vw - 24px) !important;
    left: 12px !important; right: 12px !important;
  }
  body.admin-eclipse .daterangepicker .drp-calendar { max-width: 100% !important; float: none !important; clear: both; }
  body.admin-eclipse .daterangepicker .ranges { float: none; width: 100%; }

  /* 8) Banners: card en columna (imagen full-width, acciones abajo) */
  body.admin-eclipse .so-banner-card { flex-direction: column; align-items: stretch; }
  body.admin-eclipse .so-banner-img { width: 100% !important; height: 120px; }
  body.admin-eclipse .so-banner-actions { justify-content: flex-end; }
  body.admin-eclipse .so-banner-actions .so-btn { flex: 1; }

  /* 9) Mapa Eagle View: no acaparar la pantalla */
  body.admin-eclipse #map { height: 55vh !important; min-height: 340px; }
}