/* ==========================================================================
   Xcaz Dark Theme — reskin global de mycfdi (sidebar, topbar, paneles, forms)
   Se carga DESPUES de custom.css para ganar la cascada. No toca ningun blade,
   solo reestiliza las clases ya existentes de Gentelella/Bootstrap 3.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Tokens tomados 1:1 del design system de hosting.xcaz.dev */
  --xz-bg:#050816;
  --xz-text:#f1f5fc;
  --xz-muted:#94a9c7;
  --xz-line:rgba(255,255,255,.1);
  --xz-line-2:rgba(255,255,255,.07);
  --xz-line-bright:rgba(255,255,255,.18);
  --xz-blue:#e07c27;
  --xz-blue-deep:#e07c27;
  --xz-violet:#c96e1f;
  --xz-violet-deep:#e07c27;
  --xz-pink:#e07c27;
  --xz-green:#22c55e;
  --xz-amber:#f59e0b;
  --xz-red:#ef4444;
  --xz-cyan:#e07c27;
  --xz-surface:rgba(8,12,28,.7);
  --xz-card:linear-gradient(180deg,rgba(255,255,255,.064),rgba(255,255,255,.024));
  --xz-panel-bg:rgba(4,8,20,.42);
  --xz-radius:28px;
  --xz-radius-sm:16px;
  --xz-shadow-card:0 30px 100px rgba(0,0,0,.55),0 8px 32px rgba(0,0,0,.35);
  --xz-shadow-glow:0 0 80px rgba(56,189,248,.13),0 0 160px rgba(139,92,246,.09);
  --xz-transition:.28s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
html{background:var(--xz-bg)}
body{
  background:
    radial-gradient(circle at 8% -10%,rgba(56,189,248,.14),transparent 30%),
    radial-gradient(circle at 92% 8%,rgba(139,92,246,.14),transparent 32%),
    radial-gradient(circle at 55% 100%,rgba(236,72,153,.08),transparent 30%),
    var(--xz-bg) !important;
  color:var(--xz-text) !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
a{color:#e07c27}
a:hover,a:focus{color:#fff}
h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk','Inter',sans-serif;color:#fff}
hr{border-top-color:var(--xz-line)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Environment/demo banners ---------- */
.env-local,.env-demo{filter:saturate(1.2)}

/* ---------- Main content wrapper (Gentelella sets these opaque light-gray) ---------- */
.right_col,.main_container,.container.body,.login_content,.top_tiles{background:transparent !important}

/* BS5 convierte .container en caja centrada con max-width (1320px en desktop),
   dejando una franja a los lados. Pero la app usa <div class="container body">
   como wrapper de ancho completo. Lo devolvemos a ancho total para que el
   sidebar quede pegado a la izquierda. */
.container.body{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* custom.css fuerza fondo blanco + texto oscuro en móvil (<=767px) con estos mismos
   selectores; igualamos la especificidad y ganamos por orden de carga (este archivo
   se carga después). */

/* ===== PAGE HERO ORANGE CARD ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(224,124,39,.12) 0%, rgba(224,124,39,.06) 40%, rgba(15,16,17,1) 100%);
  border: 1px solid rgba(255,255,255,.07);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -30px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(224,124,39,.1) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.page-hero__text h1 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -.03em;
}
.page-hero__text p {
  color: #8a8f98;
  font-size: 13px;
  margin: 0;
}
.page-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page-hero__action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  transition: all .2s; border: none; cursor: pointer; line-height: 1.3;
}
.page-hero__action i { font-size: 15px; }
.page-hero__action--primary {
  background: linear-gradient(135deg, #e07c27, #c96e1f);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(224,124,39,.25);
}
.page-hero__action--primary:hover { box-shadow: 0 4px 16px rgba(224,124,39,.4); transform: translateY(-1px); }
.page-hero__action--excel {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(34,197,94,.2);
}
.page-hero__action--excel:hover { box-shadow: 0 4px 16px rgba(34,197,94,.35); transform: translateY(-1px); }
.page-hero__action--secondary {
  background: rgba(255,255,255,.06);
  color: #d1d5db !important;
  border: 1px solid rgba(255,255,255,.1);
}
.page-hero__action--secondary:hover { background: rgba(255,255,255,.1); color: #fff !important; }
.page-hero__stats { display: flex; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.page-hero__stat { text-align: center; }
.page-hero__stat-value { font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }
.page-hero__stat-label { font-size: 11px; color: #8a8f98; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* ===== FOOTER ===== */
.mcfdi-footer {
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  padding: 44px 32px 24px;
  color: #6b7280;
  font-size: 13px;
  margin-left: 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  left: 0;
  right: 0;
}
.mcfdi-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.mcfdi-footer__brand{display:flex;flex-direction:column;gap:14px}
.mcfdi-footer__logo{display:flex;align-items:center;gap:12px;text-decoration:none!important}
.mcfdi-footer__logo-icon{width:40px;height:40px;border-radius:10px;background:rgba(224,124,39,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mcfdi-footer__logo-text{display:flex;flex-direction:column;line-height:1.2}
.mcfdi-footer__logo-text strong{color:#fff;font-size:15px}
.mcfdi-footer__logo-text span{color:#e07c27;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.mcfdi-footer__tagline{font-size:12px;color:#6b7280;margin:0;line-height:1.5}
.mcfdi-footer__col{display:flex;flex-direction:column;gap:8px}
.mcfdi-footer__col h6{color:#9ca3af;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.mcfdi-footer__col a{color:#6b7280;text-decoration:none;font-size:12px;transition:color .2s}
.mcfdi-footer__col a:hover{color:#e07c27}
.mcfdi-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;margin-top:24px;border-top:1px solid rgba(255,255,255,.04);max-width:1200px;margin-left:auto;margin-right:auto;font-size:11px}
.mcfdi-footer__badges{display:flex;gap:8px}
.mcfdi-footer__badge{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:#6b7280;font-size:10px}
.mcfdi-footer__badge--accent{background:rgba(224,124,39,.12);color:#e07c27}

/* ===== NOTIFICATIONS ===== */
.app-notification-dropdown{position:absolute;top:100%;right:-10px;width:360px;background:var(--surface,#0f1011);border:1px solid rgba(255,255,255,.07);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.4);display:none;z-index:1000;max-height:400px;overflow-y:auto}
.app-notification-dropdown.show{display:block}.app-notification-dropdown.open{display:block}
.app-dropdown-header{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:600;color:#fff}
.app-dropdown-item{padding:12px 16px;display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;cursor:pointer}
.app-dropdown-item:hover{background:rgba(255,255,255,.04)}
.app-dropdown-item--unread{background:rgba(224,124,39,.06)}
.app-dropdown-item--view-all{justify-content:center;color:#e07c27;font-size:12px;font-weight:500;border-bottom:none}
.app-dropdown-item--view-all:hover{background:rgba(224,124,39,.08)}
.app-notification-count{position:absolute;top:-4px;right:-6px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}



/* ===== USER DROPDOWN ===== */
.app-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background: var(--surface, #0f1011);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none;
  z-index: 1000;
  overflow: hidden;
}
/* Position the user dropdown relative to its parent */
.app-topbar-user { position: relative; }
.app-topbar-notifications { position: relative; }
.app-dropdown.show, .app-dropdown.open { display: block; }
.app-dropdown-user {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.02);
}
.app-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.app-dropdown-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(224,124,39,.15);
  color: #e07c27;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.app-dropdown-user-info { flex: 1; min-width: 0; }
.app-dropdown-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.app-dropdown-user-email { font-size: 11px; color: #6b7280; }
.app-dropdown-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
}
.app-dropdown-role--admin { color: #e07c27; }
.app-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0;
}
.app-dropdown-item {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d1d5db;
  text-decoration: none !important;
  font-size: 13px;
  transition: all .1s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.app-dropdown-item:hover {
  background: rgba(224,124,39,.08);
  color: #e07c27;
}
.app-dropdown-item i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.app-dropdown-item--danger { color: #ef4444; }
.app-dropdown-item--danger:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.app-dropdown-mark-read {
  font-size: 11px;
  color: #e07c27;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .15s;
}
.app-dropdown-mark-read:hover { background: rgba(224,124,39,.1); }
.app-dropdown-time {
  font-size: 10px;
  color: #4b5563;
  white-space: nowrap;
}

/* Mobile adjustments */

/* ===== SIDEBAR ===== */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --sidebar-bg: #0c0d0e;
  --sidebar-hover: rgba(224,124,39,.08);
  --sidebar-active: rgba(224,124,39,.12);
}

/* App layout wrapper */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg, #08090a);
}

/* Sidebar */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg, #0c0d0e);
  border-right: 1px solid rgba(255,255,255,.06);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width .25s ease;
  overflow: hidden;
}
.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.app-sidebar-inner::-webkit-scrollbar { width: 3px; }
.app-sidebar-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 9px; }

/* Sidebar header */
.app-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 56px;
}
.app-sidebar-header .app-sidebar-logo {
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.app-sidebar-header .app-sidebar-brand {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* Sidebar user section */
.app-sidebar-user {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-sidebar-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(224,124,39,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #e07c27;
  flex-shrink: 0;
}
.app-sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.app-sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-user-role {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Sidebar nav */
.app-nav-menu {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
}
.app-nav-menu li {
  list-style: none;
}
.app-nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #9ca3af;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  border-left: 3px solid transparent;
}
.app-nav-menu > li > a:hover {
  color: #fff;
  background: rgba(224,124,39,.08);
}
.app-nav-menu > li.active > a,
.app-nav-menu > li > a.active {
  color: #e07c27;
  background: rgba(224,124,39,.12);
  border-left-color: #e07c27;
}
.app-nav-menu > li > a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.app-nav-menu > li > a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Submenu arrow */
.app-submenu-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform .2s;
  flex-shrink: 0;
}
.has-submenu.open > a .app-submenu-arrow {
  transform: rotate(90deg);
}
/* Submenu list */
.app-submenu {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  background: rgba(0,0,0,.15);
}
.has-submenu.open > .app-submenu {
  display: block;
}
.app-submenu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 8px 42px;
  color: #8a8f98;
  text-decoration: none;
  font-size: 12px;
  transition: color .15s;
}
.app-submenu li a:hover {
  color: #e07c27;
}
.app-submenu li.active > a {
  color: #e07c27;
}
.app-submenu li a i {
  font-size: 13px;
  width: 16px;
  text-align: center;
}
/* Collapsed sidebar */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
body.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
  background: var(--bg, #08090a);
}

/* Collapsed sidebar state */
body.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed);
}

/* Mobile sidebar overlay */
@media (max-width: 767px) {
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  body.sidebar-open .app-main {
    margin-left: 0;
  }
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-content > .right_col {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.app-content > .right_col.installations {
  max-width: 900px !important;
}

/* Mobile adjustments for right_col */
@media (max-width: 767px) {
  .app-content > .right_col {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
}

/* Ensure content doesn't overflow */
.app-content > .right_col > .row,
.app-content > .right_col > .x_panel,
.app-content > .right_col > .page-hero {
  width: 100%;
  box-sizing: border-box;
}

/* Page hero responsive */
@media (max-width: 767px) {
  .page-hero {
    padding: 20px 16px;
    border-radius: var(--radius);
  }
  .page-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }
  .page-hero__action {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 12px;
    min-height: 44px;
    color: #fff !important;
  }
  .page-hero__action--primary { color: #fff !important; }
  .page-hero__action--secondary { color: var(--text-bright) !important; }
  .page-hero__action--excel { color: #fff !important; }
}


.app-content {
  flex: 1;
  padding: 0;
}
.app-content > .right_col {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.app-content > .right_col.installations {
  max-width: 900px;
}

body.sidebar-collapsed .app-sidebar-user-info,
body.sidebar-collapsed .app-sidebar-header .app-sidebar-brand,
body.sidebar-collapsed .app-nav-menu > li > a span,
body.sidebar-collapsed .app-submenu-arrow { display: none; }
body.sidebar-collapsed .app-nav-menu > li > a { justify-content: center; padding: 12px; border-left: none; }
body.sidebar-collapsed .app-nav-menu > li > a i { font-size: 18px; width: auto; }
body.sidebar-collapsed .app-sidebar-user { justify-content: center; padding: 12px; }
body.sidebar-collapsed .app-sidebar-header { justify-content: center; }
body.sidebar-collapsed .app-submenu { display: none !important; }


.app-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 10px;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ===== TOPBAR ===== */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: var(--surface, #0f1011);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.app-menu-toggle {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all .15s;
}
.app-menu-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
  flex-wrap: wrap;
}
.app-breadcrumb-company {
  color: #e07c27;
  font-weight: 600;
  white-space: nowrap;
}
.app-breadcrumb-sep {
  color: #4b5563;
  font-size: 14px;
}
.app-breadcrumb-current {
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-breadcrumb-switch {
  background: rgba(224,124,39,.1);
  border: none;
  color: #e07c27;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
}
.app-breadcrumb-switch:hover {
  background: rgba(224,124,39,.2);
}
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.app-topbar-icon {
  position: relative;
  color: #9ca3af;
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all .15s;
}
.app-topbar-icon:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.app-topbar-icon .badge {
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none !important;
  color: #d1d5db;
  font-size: 13px;
}
.app-topbar-user:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}
.app-topbar-user .app-topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.app-topbar-user .app-topbar-avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(224,124,39,.15);
  color: #e07c27;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.app-topbar-user .app-topbar-user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-user .app-topbar-user-chevron {
  font-size: 10px;
  color: #6b7280;
  margin-left: 2px;
}
/* Notification bell */
.app-topbar-notifications {
  position: relative;
  cursor: pointer;
  color: #9ca3af;
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: all .15s;
}
.app-topbar-notifications:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.app-notification-count, .app-notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Sidebar toggle hover state */
.app-menu-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
body.sidebar-collapsed .app-menu-toggle svg { transform: rotate(180deg); }
.app-menu-toggle svg { transition: transform .2s ease; }

/* Sidebar transition smoothness */
.app-sidebar { transition: width .25s cubic-bezier(.4,0,.2,1); }
.app-main { transition: margin-left .25s cubic-bezier(.4,0,.2,1); }

@media (max-width: 767px) {
  .page-hero { padding: 20px 16px; border-radius: var(--radius); }
  .page-hero__inner { flex-direction: column; align-items: flex-start; }
  .page-hero__text h1 { font-size: 20px; }
  .page-hero__actions { width: 100%; justify-content: flex-start; }
  .page-hero__action { flex: 1; justify-content: center; padding: 10px 12px; font-size: 12px; min-height: 44px; color: #fff !important; }
  .page-hero__action--primary { color: #fff !important; }
  .page-hero__action--secondary { color: var(--text-bright) !important; }
  .page-hero__action--excel { color: #fff !important; }
  .app-notification-dropdown { right: -80px; width: 320px; }
  .app-topbar-notifications { margin-left: 8px; }
  .app-sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
}
  /* ==========================================================================
   Pulido global fino
   ========================================================================== */

/* Seleccion de texto y focus con el acento de marca */
::selection{background:rgba(56,189,248,.35);color:#fff}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(56,189,248,.55) !important;
  outline-offset:2px;
  border-radius:8px;
}

/* Tipografia: titulos con tracking apretado, jerarquia mas clara */
h1,h2,h3{letter-spacing:-.015em}
.x_title h2{font-size:17px !important}
.page-title h3,.right_col .page-title h3{
  font-weight:800;
  letter-spacing:-.02em;
}

/* Luz interior sutil en tarjetas (efecto vidrio premium) */
.x_panel,
.right_col .x_panel,
.tile,
.dashboard-summary-box,
.ym-trace-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 54px rgba(0,0,0,.22) !important;
}
.tile:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 60px rgba(0,0,0,.3),0 0 0 1px rgba(56,189,248,.18) !important;
}

/* Imagenes y avatares nunca deformados */
.right_col img{max-width:100%}
.img-circle{object-fit:cover}

/* Tablas: primera/ultima celda con respiro, filas mas altas y legibles */
.table > tbody > tr > td{padding-top:10px !important;padding-bottom:10px !important;vertical-align:middle !important}
.table > thead > tr > th{padding-bottom:10px !important}

/* Links de accion en tablas (iconos editar/borrar) mas suaves */
.table .btn-xs,.table .btn-sm{box-shadow:none !important}

/* Tooltips */
.tooltip-inner{background:#0b1220 !important;border:1px solid var(--xz-line);color:var(--xz-text) !important;border-radius:10px}
.tooltip.top .tooltip-arrow{border-top-color:#0b1220 !important}
.tooltip.bottom .tooltip-arrow{border-bottom-color:#0b1220 !important}

/* Popovers (BS5 usa .popover-header/.popover-body; BS3 .popover-title/content) */
.popover{background:#0b1220 !important;border:1px solid var(--xz-line) !important;color:var(--xz-text) !important;border-radius:14px !important}
.popover-title,.popover-header{background:rgba(255,255,255,.04) !important;border-bottom-color:var(--xz-line) !important;color:#fff !important}
.popover-content,.popover-body{color:var(--xz-text) !important}

/* Loader pace (barra de progreso de navegacion) con acento de marca */
.pace .pace-progress{background:linear-gradient(90deg,var(--xz-blue),var(--xz-violet)) !important;height:3px !important}
.pace .pace-activity{display:none !important}

/* List groups */
.list-group-item{
  background:rgba(255,255,255,.03) !important;
  border-color:var(--xz-line-2) !important;
  color:var(--xz-text) !important;
}
.list-group-item:hover{background:rgba(255,255,255,.06) !important}

/* Scrollbar fino tambien en Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}

/* Transicion de color suave global en enlaces */
a{transition:color .12s ease}

/* Movil: radios ligeramente menores para sensacion nativa */
@media (max-width:767px){
  .x_panel,.right_col .x_panel{border-radius:12px;padding:20px 22px}
  .tile{border-radius:16px !important}
  .btn-block{padding-top:11px;padding-bottom:11px}
  .modal-dialog{margin:10px}
  .modal-content{border-radius:20px !important}
}

/* ---------- Editor WYSIWYG toolbar ---------- */
.editor-wrapper .btn-toolbar.editor,
.editor .btn-toolbar{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.editor-wrapper .btn-toolbar .btn,
.editor .btn-toolbar .btn{
  color: var(--xz-text) !important;
  background: transparent !important;
}
.editor-wrapper .btn-toolbar .btn:hover,
.editor .btn-toolbar .btn:hover{
  background: rgba(255,255,255,.08) !important;
}
.editor-wrapper .btn-toolbar .btn.active,
.editor .btn-toolbar .btn.active{
  background: rgba(56,189,248,.18) !important;
  color: #e07c27 !important;
}

/* ---------- Image thumbnails (logo/icon uploads) ---------- */
.img-thumbnail{
  background: rgba(4,8,20,.65) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ---------- iCheck radio/checkbox helpers ---------- */
.iCheck-helper{
  background: rgba(255,255,255,.08) !important;
}

/* ---------- Editor toolbar (standalone, not inside .editor-wrapper) ---------- */
.btn-toolbar.editor{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.btn-toolbar.editor .btn{
  color: var(--xz-text) !important;
  background: transparent !important;
}
.btn-toolbar.editor .btn:hover{
  background: rgba(255,255,255,.08) !important;
}
.btn-toolbar.editor .btn.active{
  background: rgba(56,189,248,.18) !important;
  color: #e07c27 !important;
}
/* ===== WIZARD PROGRESS ===== */
.wizard-progress { margin-bottom: 32px; }
.wizard-progress__steps { display: flex; align-items: flex-start; gap: 0; background: var(--surface, #0f1011); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 24px 20px 20px; }
.wizard-progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.wizard-progress__icon-wrap { position: relative; z-index: 2; margin-bottom: 10px; }
.wizard-progress__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .3s ease; }
.wizard-progress__step.done .wizard-progress__icon { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 3px 12px rgba(34,197,94,.3); }
.wizard-progress__step.selected .wizard-progress__icon { background: linear-gradient(135deg, #e07c27, #c96e1f); color: #fff; box-shadow: 0 3px 14px rgba(224,124,39,.35); transform: scale(1.08); }
.wizard-progress__step.disabled .wizard-progress__icon { background: rgba(255,255,255,.05); color: #4b5563; border: 1px solid rgba(255,255,255,.06); }
.wizard-progress__line { position: absolute; top: 22px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: rgba(255,255,255,.06); z-index: 1; }
.wizard-progress__step:last-child .wizard-progress__line { display: none; }
.wizard-progress__step.done .wizard-progress__line { background: linear-gradient(90deg, #22c55e, rgba(34,197,94,.3)); }
.wizard-progress__step.selected .wizard-progress__line { background: linear-gradient(90deg, #e07c27, rgba(224,124,39,.2)); }
.wizard-progress__label { font-size: 11px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; max-width: 120px; }
.wizard-progress__step.done .wizard-progress__label { color: #22c55e; }
.wizard-progress__step.selected .wizard-progress__label { color: #e07c27; font-weight: 600; }
@keyframes wizard-pulse { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.12); opacity: .2; } }
.wizard-progress__step.selected .wizard-progress__icon-wrap::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid rgba(224,124,39,.3); animation: wizard-pulse 2s ease-in-out infinite; }
@media (max-width: 767px) { .wizard-progress { overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px; } .wizard-progress__steps { min-width: 600px; padding: 16px 12px; } .wizard-progress__icon { width: 36px; height: 36px; font-size: 15px; } .wizard-progress__label { font-size: 10px; max-width: 90px; } .wizard-progress__line { top: 18px; } }
/* ===== MISSING TOPBAR/DROPDOWN STYLES ===== */
.app-topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none !important;
  color: #d1d5db;
  font-size: 13px;
  background: none;
  border: none;
}
.app-topbar-user-btn:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}
.app-topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.app-topbar-badge--warning {
  background: rgba(224,124,39,.15);
  color: #e07c27;
}
.app-dropdown-role--dist { color: #60a5fa; }

/* Notification styles */
.app-notification-toggle {
  position: relative;
  cursor: pointer;
  color: #9ca3af;
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  transition: all .15s;
}
.app-notification-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.app-notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-notification-list {
  max-height: 340px;
  overflow-y: auto;
}
.app-notification-empty {
  padding: 32px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}
.app-notification-empty i {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
  opacity: .4;
}

/* Cart badge in topbar */
.app-topbar-icon .app-topbar-cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e07c27;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Company switch button */
.btn-user-company-search {
  background: rgba(224,124,39,.1);
  border: none;
  color: #e07c27;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .15s;
}
.btn-user-company-search:hover {
  background: rgba(224,124,39,.2);
}

/* Breadcrumb company name */
.app-breadcrumb-company {
  color: #e07c27;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.app-breadcrumb-sep {
  color: #4b5563;
  font-size: 14px;
  margin: 0 2px;
}
.app-breadcrumb-current {
  color: #9ca3af;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Topbar avatar */
.app-topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
/* ===== DROPDOWN POSITIONING FIXES ===== */
.app-topbar-user { position: relative; }
.app-topbar-notifications { position: relative; }

.app-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background: var(--surface, #0f1011);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none;
  z-index: 1000;
  overflow: hidden;
}

/* Show dropdown with both .show and .open classes for compatibility */
.app-dropdown.show, .app-dropdown.open { display: block; }

/* Position dropdowns correctly */
.app-topbar-user { position: relative; }
.app-topbar-notifications { position: relative; }

/* User dropdown header */
.app-dropdown-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.02);
}
.app-dropdown-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.app-dropdown-avatar-placeholder {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(224,124,39,.15);
  color: #e07c27;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.app-dropdown-user-info { flex: 1; min-width: 0; }
.app-dropdown-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.app-dropdown-user-email { font-size: 11px; color: #6b7280; }
.app-dropdown-role {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: #6b7280;
}
.app-dropdown-role--admin { color: #e07c27; }
.app-dropdown-role--dist { color: #60a5fa; }
.app-dropdown-divider {
  height: 1px; background: rgba(255,255,255,.06); margin: 0;
}
.app-dropdown-item {
  padding: 11px 16px;
  display: flex; align-items: center; gap: 10px;
  color: #d1d5db; text-decoration: none !important;
  font-size: 13px; transition: all .1s; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
}
.app-dropdown-item:hover { background: rgba(224,124,39,.08); color: #e07c27; }
.app-dropdown-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.app-dropdown-item--danger { color: #ef4444; }
.app-dropdown-item--danger:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.app-dropdown-mark-read { font-size: 11px; color: #e07c27; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background .15s; }
.app-dropdown-mark-read:hover { background: rgba(224,124,39,.1); }
.app-dropdown-time { font-size: 10px; color: #4b5563; white-space: nowrap; }

/* ===== SIDEBAR TOGGLE BUTTON ===== */
.app-menu-toggle {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .15s ease;
}
.app-menu-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.app-menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(224,124,39,.3);
}
body.sidebar-collapsed .app-menu-toggle svg {
  transform: rotate(180deg);
}
.app-menu-toggle svg {
  transition: transform .2s ease;
}
body.sidebar-collapsed .app-menu-toggle:hover {
  background: rgba(224,124,39,.15);
}
.app-menu-toggle svg {
  transition: transform .2s ease;
}
body.sidebar-collapsed .app-menu-toggle:hover {
  background: rgba(224,124,39,.15);
}

/* Sidebar transition smoothness */
.app-sidebar {
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.app-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
  background: var(--bg, #08090a);
}

/* Mobile sidebar overlay */
@media (max-width: 767px) {
  .app-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  body.sidebar-open .app-main {
    margin-left: 0;
  }
}

/* Collapsed sidebar state */
body.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-collapsed);
}
body.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed);
}

/* Collapsed sidebar content hiding */
body.sidebar-collapsed .app-sidebar-user-info,
body.sidebar-collapsed .app-sidebar-header .app-sidebar-brand,
body.sidebar-collapsed .app-nav-menu > li > a span,
body.sidebar-collapsed .app-submenu-arrow {
  display: none;
}
body.sidebar-collapsed .app-nav-menu > li > a {
  justify-content: center;
  padding: 12px;
  border-left: none;
}
body.sidebar-collapsed .app-nav-menu > li > a i {
  font-size: 18px;
  width: auto;
}
body.sidebar-collapsed .app-sidebar-user {
  justify-content: center;
  padding: 12px;
}
body.sidebar-collapsed .app-sidebar-header {
  justify-content: center;
}
body.sidebar-collapsed .app-submenu {
  display: none !important;
}
body.sidebar-collapsed .app-menu-toggle:hover {
  background: rgba(224,124,39,.15);
}
.app-menu-toggle svg {
  transition: transform .2s ease;
}
body.sidebar-collapsed .app-menu-toggle svg {
  transform: rotate(180deg);
}


/* Footer responsive adjustments */
@media (max-width: 767px) {
  .mcfdi-footer {
    padding: 32px 20px 20px;
  }
  .mcfdi-footer__inner {
    grid-template-columns: 1fr;
  }
  .mcfdi-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Footer full width handling for sidebar states */
.app-layout .mcfdi-footer {
  width: 100%;
  box-sizing: border-box;
}

/* When sidebar is expanded, footer should span full width including sidebar area */
body:not(.sidebar-collapsed) .mcfdi-footer {
  margin-left: calc(-1 * var(--sidebar-width));
  width: calc(100% + var(--sidebar-width));
  margin-left: auto;
}

/* When sidebar is collapsed, footer should still be full width but account for collapsed sidebar */
body.sidebar-collapsed .mcfdi-footer {
  margin-left: calc(-1 * var(--sidebar-collapsed));
  width: calc(100% + var(--sidebar-collapsed));
  margin-left: auto;
}

/* Mobile: footer full width */
@media (max-width: 767px) {
  .mcfdi-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   Paginas internas CRUD (paneles Gentelella .x_panel, tablas, DataTables,
   formularios y select2). El shell nuevo solo estilizaba el dashboard; estas
   paginas quedaban con el panel BLANCO de gentelella. Las alineamos al tema
   oscuro. mcfdi-dark.css se carga despues de custom.css/custom.min.css, asi
   que estos !important ganan la cascada. (agregado 2026-08-18)
   ========================================================================== */
.right_col .x_panel,
.app-content .x_panel{
  background:#0f1214 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  color:#f1f5fc !important;
}
.right_col .x_title,
.app-content .x_title{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.x_title h1,.x_title h2,.x_title h3,.x_title h4,
.x_title .x_title__title,.x_panel > .x_title span{
  color:#ffffff !important;
}
.right_col .x_content,
.app-content .x_content{
  background:transparent !important;
  color:#f1f5fc !important;
}
/* Cajas genericas de BS3 que a veces quedan claras */
.right_col .panel,.right_col .well,.right_col .card{
  background:#0f1214 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  color:#f1f5fc !important;
}
.right_col .panel-heading,.right_col .card-header{
  background:rgba(255,255,255,.03) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* --- Tablas --- */
.right_col table.table,
.app-content table.table,
.right_col .table-responsive > table{
  background:transparent !important;
  color:#f1f5fc !important;
  border-color:rgba(255,255,255,.07) !important;
}
.right_col .table > thead > tr > th,
.app-content .table > thead > tr > th{
  color:#cbd5e6 !important;
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  border-top:0 !important;
}
.right_col .table > tbody > tr > td,
.app-content .table > tbody > tr > td,
.right_col .table > tbody > tr > th{
  color:#f1f5fc !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
  background-color:transparent !important;
}
.right_col .table-striped > tbody > tr:nth-of-type(odd) > td,
.right_col .table-striped > tbody > tr:nth-of-type(odd) > th{
  background-color:rgba(255,255,255,.022) !important;
}
.right_col .table-hover > tbody > tr:hover > td,
.right_col .table-hover > tbody > tr:hover > th{
  background-color:rgba(224,124,39,.08) !important;
}
.right_col .table thead th a,
.right_col .table td a{ color:#e07c27 !important; }
.right_col .table .text-muted,.right_col small.text-muted{ color:#94a9c7 !important; }

/* --- Inputs / selects dentro de paneles --- */
.right_col .form-control,
.app-content .form-control,
.right_col select,
.right_col input[type=text],
.right_col input[type=search],
.right_col input[type=email],
.right_col input[type=number],
.right_col input[type=password],
.right_col textarea{
  background:#15181b !important;
  color:#f1f5fc !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:none !important;
}
.right_col .form-control:focus,
.right_col select:focus,
.right_col input:focus,
.right_col textarea:focus{
  border-color:rgba(224,124,39,.55) !important;
  box-shadow:0 0 0 3px rgba(224,124,39,.15) !important;
}
.right_col .form-control::placeholder,
.right_col input::placeholder,
.right_col textarea::placeholder{ color:#6b7787 !important; }
.right_col label,.right_col .control-label,.right_col .form-group label{ color:#cbd5e6 !important; }
.right_col .input-group-addon,.right_col .input-group-text{
  background:#1b1f23 !important;border:1px solid rgba(255,255,255,.1) !important;color:#94a9c7 !important;
}

/* --- DataTables (controles inyectados por JS) --- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper label{ color:#94a9c7 !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:#15181b !important;color:#f1f5fc !important;border:1px solid rgba(255,255,255,.1) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:#f1f5fc !important;background:transparent !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:8px !important;margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:rgba(224,124,39,.16) !important;border-color:rgba(224,124,39,.45) !important;color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.16) !important;color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  color:#5a6270 !important;background:transparent !important;border-color:rgba(255,255,255,.05) !important;
}

/* --- select2 (dropdowns de gentelella) --- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background:#15181b !important;border:1px solid rgba(255,255,255,.1) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:#f1f5fc !important; }
.select2-dropdown{ background:#15181b !important;border:1px solid rgba(255,255,255,.12) !important; }
.select2-container--default .select2-results__option{ color:#f1f5fc !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:rgba(224,124,39,.2) !important;color:#fff !important; }
.select2-search--dropdown .select2-search__field{ background:#0f1214 !important;color:#f1f5fc !important;border:1px solid rgba(255,255,255,.12) !important; }

/* Paginacion BS por si alguna vista usa .pagination en vez de DataTables */
.right_col .pagination > li > a,.right_col .pagination > li > span{
  background:transparent !important;border:1px solid rgba(255,255,255,.08) !important;color:#f1f5fc !important;
}
.right_col .pagination > .active > a,.right_col .pagination > .active > span{
  background:rgba(224,124,39,.16) !important;border-color:rgba(224,124,39,.45) !important;color:#fff !important;
}

/* ==========================================================================
   Pulido extra (2026-08-18): tabs, inputs file, autofill de Chrome y el
   dropdown de notificaciones (que no tenia estilos de item).
   ========================================================================== */

/* --- Pestañas Gentelella (.bar_tabs / .nav-tabs) --- */
.nav-tabs.bar_tabs,
.right_col .nav-tabs{
  border-bottom:1px solid rgba(255,255,255,.1) !important;
  background:transparent !important;
}
.nav-tabs > li > a,
.nav-tabs.bar_tabs > li > a,
.nav-tabs .nav-link{
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-bottom:none !important;
  color:#94a9c7 !important;
  border-radius:10px 10px 0 0 !important;
  margin-right:4px;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  background:#0f1214 !important;
  color:#e07c27 !important;
  border-color:rgba(255,255,255,.1) !important;
  border-bottom:1px solid #0f1214 !important;
}
.tab-content{
  background:transparent !important;
  color:#f1f5fc !important;
}

/* --- Inputs de archivo --- */
.right_col input[type=file],
.app-content input[type=file],
input[type=file].form-control{
  background:#15181b !important;
  color:#cbd5e6 !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:10px !important;
  padding:6px 8px !important;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  background:rgba(224,124,39,.15);
  color:#e8b489;
  border:1px solid rgba(224,124,39,.35);
  border-radius:8px;
  padding:6px 12px;
  margin-right:10px;
  cursor:pointer;
  transition:background .15s;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{
  background:rgba(224,124,39,.28);
}

/* --- Autofill de Chrome (evita el fondo blanco/amarillo) --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#f1f5fc !important;
  -webkit-box-shadow:0 0 0 1000px #15181b inset !important;
  box-shadow:0 0 0 1000px #15181b inset !important;
  caret-color:#f1f5fc !important;
  border:1px solid rgba(255,255,255,.1) !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* Red de seguridad: cualquier control dentro del contenido que se haya
   escapado del selector .right_col */
.app-content input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
.app-content select,
.app-content textarea{
  background:#15181b !important;
  color:#f1f5fc !important;
  border:1px solid rgba(255,255,255,.1) !important;
}

/* ==========================================================================
   Dropdown de NOTIFICACIONES — mismo acabado pulido que el de usuario
   ========================================================================== */
.app-notification-dropdown .app-dropdown-header{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.app-notification-dropdown .app-dropdown-header strong{
  font-size:14px;color:#fff;font-weight:600;
}
.app-dropdown-mark-read{
  font-size:11.5px !important;
  color:#e07c27 !important;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}
.app-dropdown-mark-read:hover{ color:#f0954a !important; text-decoration:underline; }

.app-notification-list{ padding:2px 0; }
.app-notification-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
  text-decoration:none;
  transition:background .15s;
}
.app-notification-item:hover{ background:rgba(255,255,255,.04); }
.app-notification-item.unread{ background:rgba(224,124,39,.06); }
.app-notification-item.unread:hover{ background:rgba(224,124,39,.1); }

.app-notification-icon{
  flex:0 0 34px;
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(224,124,39,.14);
  color:#e8b489;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.app-notification-icon svg{ width:16px;height:16px; }

.app-notification-content{ min-width:0;flex:1;display:flex;flex-direction:column;gap:2px; }
.app-notification-title{
  margin:0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#f1f5fc !important;
}
.app-notification-message{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  color:#94a9c7 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.app-notification-time{
  font-size:10.5px !important;
  color:#6b7787 !important;
  margin-top:2px;
}
.app-notification-empty{ padding:34px 16px !important; }
.app-notification-empty svg{ width:30px;height:30px;color:#4a5361;opacity:.7;margin-bottom:8px; }
.app-notification-empty p{ margin:0;color:#6b7787;font-size:13px; }

/* ==========================================================================
   Pagina "Mi perfil" (auth/users/edit-profile) — usa clases .ym-profile-*
   que custom.css pinta con fondo #fff. Las pasamos al tema oscuro. (2026-08-18)
   ========================================================================== */
.ym-profile-head,
.ym-edit-profile-head{
  background:#0f1214 !important;
  color:#f1f5fc !important;
}
.ym-profile-identity h4,
.ym-edit-profile-head .ym-profile-identity h4{ color:#ffffff !important; }
.ym-profile-identity small{ color:#94a9c7 !important; }
.ym-profile-avatar{ background:#0f1214 !important; border:5px solid #0f1214 !important; }

.ym-account-info-grid > div,
.ym-seed-box,
.ym-invite-box{
  background:#15181b !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
.ym-account-info-grid span,
.ym-seed-box span,
.ym-invite-box span{ color:#94a9c7 !important; }
.ym-account-info-grid strong,
.ym-invite-box strong,
.ym-seed-box strong{ color:#f1f5fc !important; }

.ym-seed-input{ border-radius:12px !important; }
.ym-seed-toggle{
  background:rgba(224,124,39,.15) !important;
  border:1px solid rgba(224,124,39,.35) !important;
  color:#e8b489 !important;
}
.ym-seed-toggle:hover,.ym-seed-toggle:focus{ background:rgba(224,124,39,.28) !important;color:#fff !important; }

/* etiquetas y texto del formulario horizontal del perfil */
.ym-edit-profile-body .control-label,
.ym-edit-profile-body label{ color:#cbd5e6 !important; }
.ym-edit-profile-body .form-text,
.ym-edit-profile-body .help-block,
.ym-edit-profile-body small{ color:#94a9c7 !important; }
.ym-profile-modal__role{
  background:rgba(224,124,39,.15) !important;color:#e8b489 !important;border:1px solid rgba(224,124,39,.3) !important;
}
.ym-profile-modal__role--superadmin{ background:rgba(245,158,11,.18) !important;color:#f3b64b !important;border-color:rgba(245,158,11,.35) !important; }
/* panel del formulario de perfil (era #fff / #f5f7fb) */
.ym-edit-profile-body.x_content{ background:transparent !important; }
.ym-edit-profile-form{
  background:#0f1214 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
.ym-edit-profile-form .control-label{ color:#cbd5e6 !important; }
.ym-edit-profile-form .form-control{ border-color:rgba(255,255,255,.1) !important; }

/* --- select2: cubrir TODOS los temas (default y bootstrap), no solo --default --- */
.select2-selection--single,
.select2-selection--multiple,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  background:#15181b !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:#f1f5fc !important;
}
.select2-selection--single .select2-selection__rendered,
.select2-selection__rendered{ color:#f1f5fc !important; }
.select2-selection__placeholder{ color:#6b7787 !important; }
.select2-selection--single .select2-selection__arrow b{ border-color:#94a9c7 transparent transparent transparent !important; }
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single{
  border-color:rgba(224,124,39,.5) !important;
}
.select2-dropdown{ background:#15181b !important;border:1px solid rgba(255,255,255,.12) !important; }
.select2-results__option{ color:#f1f5fc !important;background:transparent !important; }
.select2-results__option[aria-selected=true]{ background:rgba(255,255,255,.06) !important; }
.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:rgba(224,124,39,.2) !important;color:#fff !important;
}
.select2-search--dropdown .select2-search__field{
  background:#0f1214 !important;color:#f1f5fc !important;border:1px solid rgba(255,255,255,.12) !important;
}
.select2-selection--multiple .select2-selection__choice{
  background:rgba(224,124,39,.18) !important;border:1px solid rgba(224,124,39,.35) !important;color:#fff !important;
}

/* thead de las tablas de líneas de factura (se veía gris azulado) */
.right_col table thead,
.app-content table thead,
.right_col .table-data thead th{
  background:rgba(255,255,255,.03) !important;
  color:#cbd5e6 !important;
}

/* ==========================================================================
   RESPONSIVIDAD (2026-08-18): que las tablas anchas (lineas de factura, etc.)
   scrolleen DENTRO de su caja en vez de estirar toda la pagina en movil, sin
   afectar el desktop. La causa es que los hijos flex tienen min-width:auto
   (tamano del contenido) y no encogen; con min-width:0 si encogen y deja que
   .table-responsive haga su scroll horizontal.
   ========================================================================== */
.app-main,
.app-content,
.app-content > .right_col,
.app-content .x_panel,
.app-content .x_content,
.right_col .row,
.right_col [class*="col-"]{
  min-width:0;
}
.right_col .table-responsive,
.app-content .table-responsive{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
/* red de seguridad: la pagina nunca hace scroll horizontal completo */
html,body{ max-width:100%; overflow-x:hidden; }

/* Grids de tarjetas del perfil: una sola columna en movil */
@media (max-width: 767px){
  .ym-account-info-grid{ grid-template-columns:1fr !important; }
  .ym-profile-head{ grid-template-columns:1fr !important; text-align:center; }
  .ym-profile-avatar-wrap{ margin:-42px auto 0 !important; }
  /* hero del dashboard y KPIs ya apilan; reforzamos gaps comodos */
  .app-content .x_panel{ padding:16px 14px !important; }
}