/* CONNECTIO sync/status panels */
.tuu-evidence-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dce8f8;
  border-radius: 12px;
  background: #fff;
}

.tuu-evidence-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.tuu-evidence-head strong {
  color: #0f2b4d;
  font-weight: 900;
}

.tuu-evidence-head span,
.tuu-evidence-actions small {
  color: #5f6f8c;
  font-size: 12px;
}

.tuu-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tuu-evidence-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dce8f8;
  border-radius: 8px;
  background: #f8fbff;
}

.tuu-evidence-card.missing {
  border-color: #fed7aa;
  background: #fff7ed;
}

.tuu-evidence-card-head,
.tuu-evidence-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.tuu-evidence-card-head strong {
  color: #111827;
  font-size: 13px;
}

.tuu-evidence-card-head span,
.tuu-evidence-actions a {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.tuu-evidence-card img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.sales-sync-card {
  margin-bottom: 16px;
}

/* CONNECTIO layout correction v8b
   La barra superior queda en una sola linea visible, sin recortar acciones. */
.smart-topbar.cx-header,
.smart-topbar,
.cx-header,
.topbar,
.app-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 10px 14px !important;
  overflow: visible !important;
}

.topbar-left {
  order: 1 !important;
  flex: 0 1 430px !important;
  min-width: 180px !important;
  max-width: 430px !important;
}

.topbar-search {
  order: 2 !important;
  flex: 1 1 360px !important;
  min-width: 220px !important;
  max-width: 720px !important;
}

.topbar-actions {
  order: 3 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

.topbar-actions > * {
  flex-shrink: 1 !important;
}

.user-chip,
.profile-menu {
  max-width: 360px !important;
}

@media (max-width: 1440px) {
  .topbar-left {
    max-width: 300px !important;
  }

  .topbar-search {
    max-width: 520px !important;
    min-width: 180px !important;
  }

  .topbar-actions > button:not(.user-chip):not(.profile-menu) {
    max-width: 110px !important;
  }

  .user-chip,
  .profile-menu {
    max-width: 260px !important;
  }
}

.sync-status-card {
  background: linear-gradient(135deg, rgba(239, 249, 255, .96), rgba(255, 255, 255, .94));
  border: 1px solid rgba(14, 165, 233, .24);
  border-left: 5px solid #0ea5e9;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
  color: #0f172a;
  display: grid;
  gap: 5px;
  margin: 14px 0 16px;
  padding: 14px 18px;
}

.sync-status-card strong {
  font-size: .98rem;
}

.sync-status-card span,
.sync-status-card small {
  color: #526985;
}

.sync-status-card small {
  font-weight: 800;
  letter-spacing: .02em;
}

.sync-history-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 12px;
}

.sync-history-item {
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,248,255,.9));
  border: 1px solid rgba(14,165,233,.2);
  border-left: 5px solid #22c55e;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.sync-history-item.error {
  border-left-color: #ef4444;
}

.sync-history-item strong {
  color: #0f172a;
  display: block;
  font-size: .95rem;
}

.sync-history-item small,
.sync-history-item p {
  color: #57708f;
  margin: 0;
}

.sync-history-item span {
  background: rgba(34,197,94,.14);
  border-radius: 999px;
  color: #047857;
  font-size: .72rem;
  font-weight: 900;
  justify-self: start;
  letter-spacing: .08em;
  padding: 5px 10px;
  text-transform: uppercase;
}

.sync-history-item.error span {
  background: rgba(239,68,68,.14);
  color: #b91c1c;
}

/* CONNECTIO agenda tabs v2: una sola vista activa, pestañas compactas y sin cascadas verticales. */
.module-tabbed-panel [data-income-panel]:not(.active),
.module-tabbed-panel [data-iccid-panel]:not(.active),
.module-tabbed-panel [data-fuentes-panel]:not(.active),
.module-tabbed-panel [data-procedimientos-panel]:not(.active),
.routes-panel [data-routes-panel]:not(.active),
.inventory-web-panel [data-inventory-panel]:not(.active),
.catalog-panel [data-catalog-panel]:not(.active),
.tuu-panel [data-tuu-panel]:not(.active),
.profit-panel [data-profit-panel]:not(.active),
.rendiciones-panel [data-rendiciones-panel]:not(.active),
.rrhh-panel [data-rrhh-panel]:not(.active),
.commerce-panel [data-coverage-panel]:not(.active),
.time-view:not(.active),
.planes-entel-view:not(.active) {
  display: none !important;
}

.module-tabbed-panel [data-income-panel].active,
.module-tabbed-panel [data-iccid-panel].active,
.module-tabbed-panel [data-fuentes-panel].active,
.module-tabbed-panel [data-procedimientos-panel].active,
.routes-panel [data-routes-panel].active,
.inventory-web-panel [data-inventory-panel].active,
.catalog-panel [data-catalog-panel].active,
.tuu-panel [data-tuu-panel].active,
.profit-panel [data-profit-panel].active,
.rendiciones-panel [data-rendiciones-panel].active,
.rrhh-panel [data-rrhh-panel].active,
.commerce-panel [data-coverage-panel].active,
.time-view.active,
.planes-entel-view.active {
  display: grid !important;
}

.module-subtabs,
.inventory-tabs,
.catalog-tabs,
.tuu-tabs,
.routes-tabs,
.profit-tabs,
.rendiciones-tabs,
.rrhh-tabs,
.planes-entel-tabs,
.time-tabs,
.commerce-tabs,
.admin-tabs {
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  max-height: 68px;
  min-height: 54px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
}

.module-subtabs button,
.inventory-tabs button,
.catalog-tabs button,
.tuu-tabs button,
.routes-tabs button,
.profit-tabs button,
.rendiciones-tabs button,
.rrhh-tabs button,
.planes-entel-tabs button,
.time-tabs button,
.commerce-tabs button,
.admin-tabs button {
  height: 44px;
  margin-top: 4px;
  max-width: 220px;
  min-width: max-content;
  scroll-snap-align: start;
}

.module-subtabs button.active,
.inventory-tabs button.active,
.catalog-tabs button.active,
.tuu-tabs button.active,
.routes-tabs button.active,
.profit-tabs button.active,
.rendiciones-tabs button.active,
.rrhh-tabs button.active,
.planes-entel-tabs button.active,
.time-tabs button.active,
.commerce-tabs button.active,
.admin-tabs button.active {
  transform: translateY(-3px);
}
/* CONNECTIO home redesign: portada ejecutiva limpia y sin listas duplicadas */
.connectio-home {
  width: min(100%, 1680px);
  margin: 0 auto;
  gap: 18px;
}

.connectio-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
  gap: 18px;
  align-items: stretch;
}

.connectio-home-greeting,
.connectio-home-status,
.connectio-home-card,
.connectio-home-board {
  border: 1px solid rgba(148, 202, 255, .55);
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .08);
}

.connectio-home-greeting {
  min-height: 250px;
  padding: clamp(26px, 4vw, 46px);
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(34, 211, 238, .32), transparent 32%),
    linear-gradient(135deg, #071b3b 0%, #0b4b86 54%, #08a5d6 100%);
  overflow: hidden;
  position: relative;
}

.connectio-home-greeting::after {
  content: "";
  position: absolute;
  inset: auto -90px -130px auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.connectio-home-greeting .eyebrow,
.connectio-home-greeting p,
.connectio-home-greeting h3,
.connectio-home-actions {
  position: relative;
  z-index: 1;
}

.connectio-home-greeting .eyebrow {
  color: #80eaff;
}

.connectio-home-greeting h3 {
  margin: 10px 0 12px;
  max-width: 780px;
  color: #fff;
  font-size: clamp(36px, 5vw, 66px);
  line-height: .96;
  letter-spacing: -.06em;
}

.connectio-home-greeting p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 17px;
  line-height: 1.65;
}

.connectio-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.connectio-home-actions button,
.connectio-home-card-head button,
.connectio-home-area-foot button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  color: #08213f;
  background: #fff;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(2, 8, 23, .16);
}

.connectio-home-status {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.connectio-home-status article {
  min-height: 74px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 2px 12px;
  align-items: center;
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(135deg, #f8fbff, #edf8ff);
}

.connectio-home-status span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #0284c7;
  background: #e0f7ff;
  font-weight: 950;
}

.connectio-home-status strong {
  color: #081a36;
  font-size: 14px;
}

.connectio-home-status small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.connectio-home-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.connectio-home-kpis .ops-kpi,
.connectio-home-kpis > article {
  min-height: 132px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #fff, #f4fbff);
  box-shadow: 0 15px 34px rgba(15, 23, 42, .06);
}

.connectio-home-kpis strong {
  color: #0b1533;
  font-size: clamp(28px, 3vw, 42px);
  line-height: .95;
  letter-spacing: -.05em;
}

.connectio-home-kpis span,
.connectio-home-kpis small {
  color: #64748b;
  font-weight: 900;
}

.connectio-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 16px;
}

.connectio-home-card {
  padding: 22px;
}

.connectio-home-card-wide {
  min-width: 0;
}

.connectio-home-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.connectio-home-card-head h3 {
  margin: 4px 0 0;
  color: #0b1533;
  font-size: 22px;
}

.connectio-home-card-head p,
.connectio-home-card-head small {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 800;
}

.connectio-home-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.connectio-home-quick button,
.connectio-home-suggestions button {
  width: 100%;
  min-height: 72px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 14px 16px;
  text-align: left;
  color: #0f172a;
  background: linear-gradient(135deg, #fff, #eff9ff);
  box-shadow: none;
}

.connectio-home-quick strong,
.connectio-home-quick span,
.connectio-home-suggestions strong,
.connectio-home-suggestions span {
  display: block;
}

.connectio-home-quick span,
.connectio-home-suggestions span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.connectio-home-alerts {
  display: grid;
  gap: 10px;
}

.connectio-home-alerts .ops-alert {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 13px;
  background: #f8fbff;
}

.connectio-home-board {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.connectio-home-board-main {
  border-radius: 22px;
  padding: 24px;
  color: #fff;
  background: linear-gradient(160deg, #071b3b, #075985);
}

.connectio-home-board-main .eyebrow {
  color: #67e8f9;
}

.connectio-home-board-main h3 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: 30px;
  letter-spacing: -.04em;
}

.connectio-home-board-main p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  line-height: 1.6;
}

.connectio-home-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.connectio-home-area {
  min-height: 190px;
  border: 1px solid color-mix(in srgb, var(--group-accent, #0ea5e9) 35%, #dbeafe);
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 10px;
  background: linear-gradient(135deg, #fff, var(--group-soft, #eefaff));
}

.connectio-home-area-top,
.connectio-home-area-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.connectio-home-area-top span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.connectio-home-area-top small,
.connectio-home-area-foot b,
.connectio-home-area-foot span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.connectio-home-area h4 {
  margin: 0;
  color: #0b1533;
  font-size: 19px;
}

.connectio-home-area p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.connectio-home-area-foot button {
  padding: 9px 14px;
  color: #fff;
  background: var(--group-accent, #0ea5e9);
  box-shadow: 0 12px 22px rgba(14, 165, 233, .22);
}

.connectio-home-tabs {
  position: sticky;
  top: 74px;
  z-index: 5;
  padding: 8px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}

.connectio-home-tabs button {
  min-height: 44px;
}

.connectio-home .home-tab-panel {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Rutas: mapa y simulacion de recorrido comercial */
.routes-map-head {
  position: sticky;
  top: 74px;
  z-index: 4;
  margin: -4px -4px 14px;
  border: 1px solid #bae6fd;
  border-radius: 20px;
  padding: 16px;
  background: rgba(248, 252, 255, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.routes-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.routes-map-actions select {
  min-width: 240px;
  max-width: min(52vw, 520px);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 11px 14px;
  color: #0f172a;
  background: #fff;
  font-weight: 900;
}

.routes-map-actions #routesMapDate {
  min-width: 210px;
  max-width: 260px;
}

.routes-map-actions #routesMapVendor {
  min-width: 320px;
  flex: 1 1 320px;
}

.routes-map-actions button {
  border-radius: 14px;
  padding: 12px 16px;
  white-space: nowrap;
}

.routes-route-summary {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.routes-route-summary article {
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, #fff, #f0f9ff);
}

.routes-route-summary strong,
.routes-route-summary span {
  display: block;
}

.routes-route-summary strong {
  color: #0b1533;
  font-size: 22px;
  line-height: 1;
}

.routes-route-summary span {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.routes-route-summary .routes-selected-vendor {
  background: linear-gradient(135deg, #071b3b, #075985);
}

.routes-route-summary .routes-selected-vendor strong,
.routes-route-summary .routes-selected-vendor span {
  color: #fff;
}

.routes-map-selected-banner {
  margin: 4px 0 14px;
  border: 1px solid #bae6fd;
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, #f8fcff, #e0f7ff);
}

.routes-map-selected-banner span,
.routes-map-selected-banner strong,
.routes-map-selected-banner small {
  display: block;
}

.routes-map-selected-banner span {
  color: #0284c7;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.routes-map-selected-banner strong {
  margin-top: 4px;
  color: #0b1533;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.05;
}

.routes-map-selected-banner small {
  margin-top: 4px;
  color: #64748b;
  font-weight: 850;
}

.routes-map-banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.routes-map-banner-actions a,
.routes-map-banner-actions button,
.routes-map-selected-banner a {
  border-radius: 999px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}

.routes-map-banner-actions button {
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #0f172a, #2563eb);
}

.routes-map-duo {
  display: grid;
  grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: stretch;
}

.routes-google-embed {
  overflow: hidden;
  border: 1px solid #bae6fd;
  border-radius: 26px;
  min-height: 460px;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #eff8ff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.routes-google-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.routes-google-embed small {
  padding: 10px 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .88);
}

.routes-route-map {
  overflow: hidden;
  border: 1px solid #bae6fd;
  border-radius: 26px;
  background:
    radial-gradient(circle at 14% 16%, rgba(34, 197, 94, .18), transparent 14rem),
    radial-gradient(circle at 84% 12%, rgba(14, 165, 233, .20), transparent 16rem),
    #eff8ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 18px 42px rgba(15, 23, 42, .08);
}

.routes-route-map svg {
  display: block;
  width: 100%;
  min-height: 420px;
}

.routes-route-map-real {
  position: relative;
  min-height: 560px;
  background: #eaf8ff;
}

.routes-route-map-real svg {
  min-height: 560px;
  background: #eaf8ff;
}

.routes-route-map-real image {
  image-rendering: auto;
}

.routes-map-attribution {
  display: block;
  border-top: 1px solid rgba(186, 230, 253, .9);
  padding: 10px 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  background: rgba(255, 255, 255, .92);
}

.routes-route-map a {
  cursor: pointer;
}

.routes-route-map .route-map-point {
  cursor: pointer;
  outline: none;
}

.routes-route-map .route-map-point.active circle,
.routes-route-map .route-map-point:hover circle,
.routes-route-map .route-map-point:focus circle {
  stroke: #0f172a;
  stroke-width: 5;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .28));
}

.routes-route-map .route-map-label {
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .18));
}

.route-point-detail {
  margin-top: 14px;
  border: 1px solid #bae6fd;
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.route-point-detail.empty {
  color: #64748b;
  font-weight: 850;
}

.route-point-detail header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.route-point-detail header span {
  color: #0284c7;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.route-point-detail h4 {
  margin: 4px 0;
  color: #0b1533;
  font-size: 22px;
}

.route-point-detail p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.route-point-detail header a {
  border-radius: 999px;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}

.route-point-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.route-point-grid div {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 10px;
  background: #fff;
}

.route-point-grid b,
.route-point-grid strong {
  display: block;
}

.route-point-grid b {
  color: #64748b;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.route-point-grid strong {
  margin-top: 4px;
  color: #0f172a;
  font-size: 14px;
}

.route-point-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.route-point-notes p,
.route-point-evidence {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.route-point-notes b,
.route-point-notes span,
.route-point-evidence b {
  display: block;
}

.route-point-notes b,
.route-point-evidence b {
  color: #0f172a;
  font-weight: 950;
}

.route-point-notes span {
  margin-top: 6px;
  color: #475569;
  font-size: 13px;
}

.route-point-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.route-point-evidence b {
  flex: 1 0 100%;
}

.route-point-evidence a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  padding: 8px 10px;
  color: #075985;
  background: #f0f9ff;
  text-decoration: none;
  font-weight: 900;
}

.route-point-evidence img {
  width: 56px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.routes-route-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.routes-route-timeline button {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.routes-route-timeline button:hover,
.routes-route-timeline button.active {
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(14, 165, 233, .12);
}

.routes-route-timeline span {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  font-weight: 950;
}

.routes-route-timeline strong,
.routes-route-timeline small {
  display: block;
}

.routes-route-timeline strong {
  color: #0f172a;
  font-size: 13px;
}

.routes-route-timeline small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

/* Dashboard TV: recorridos diarios por vendedor */
.tv-route-slide {
  overflow: hidden;
}

.tv-route-board {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, .62fr);
  gap: 18px;
  align-items: stretch;
}

.tv-route-map-wrap {
  min-width: 0;
}

.tv-route-map-wrap .routes-map-selected-banner {
  margin-top: 0;
  padding: 12px 14px;
}

.tv-route-map-wrap .routes-route-map-real {
  min-height: 430px;
  border-radius: 24px;
}

.tv-route-map-wrap .routes-route-map-real svg {
  min-height: 430px;
  max-height: 46vh;
}

.tv-route-map-wrap .routes-route-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 180px;
  overflow: auto;
}

.tv-route-map-wrap .route-point-detail {
  max-height: 230px;
  overflow: auto;
}

.tv-route-map-wrap .route-point-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tv-route-map-wrap .route-point-notes {
  grid-template-columns: 1fr;
}

.tv-route-side {
  border: 1px solid rgba(186, 230, 253, .85);
  border-radius: 28px;
  padding: 20px;
  color: #e0f2fe;
  background:
    radial-gradient(circle at 15% 15%, rgba(34, 211, 238, .22), transparent 13rem),
    linear-gradient(145deg, rgba(8, 47, 73, .96), rgba(15, 23, 42, .98));
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.tv-route-side h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(24px, 2vw, 34px);
}

.tv-route-side p {
  color: #bae6fd;
  line-height: 1.45;
}

.tv-route-side .tv-alerts {
  margin: 18px 0;
}

.tv-route-meta {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.tv-route-meta span {
  color: #67e8f9;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tv-route-meta strong {
  color: #fff;
  font-size: 17px;
}

/* Dashboard TV compacto 50 pulgadas
   La sala de control se proyecta en TV grande, pero a distancia los numeros
   anteriores ocupaban demasiado espacio. Esta capa reduce escala sin cambiar datos. */
.tv-55-panel .tv-stage {
  padding: 14px 16px;
  gap: 8px;
}

.tv-55-panel .tv-control-bar {
  padding: 10px 14px;
  border-radius: 18px;
}

.tv-55-panel .tv-control-bar strong {
  font-size: 20px;
}

.tv-55-panel .tv-control-bar small {
  font-size: 11px;
}

.tv-55-panel .tv-broadcast-strip {
  gap: 8px;
  margin-bottom: 8px;
}

.tv-55-panel .tv-broadcast-strip article {
  min-height: auto;
  padding: 8px 10px;
}

.tv-55-panel .tv-broadcast-strip span {
  font-size: 9px;
}

.tv-55-panel .tv-broadcast-strip strong {
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: .95;
}

.tv-55-panel .tv-slide {
  gap: 8px;
  min-height: auto;
  padding: 14px;
  border-radius: 24px;
}

.tv-55-panel .tv-slide-head {
  gap: 10px;
  margin-bottom: 6px;
}

.tv-55-panel .tv-slide-head h2 {
  font-size: clamp(28px, 3vw, 54px);
  line-height: .92;
}

.tv-55-panel .tv-slide-head p {
  max-width: 940px;
  font-size: clamp(13px, 1.05vw, 20px);
}

.tv-55-panel .tv-slide-head > strong {
  width: 54px;
  height: 54px;
  font-size: 17px;
}

.tv-55-panel .tv-area-context,
.tv-55-panel .tv-signal-strip {
  gap: 8px;
  margin: 8px 0;
}

.tv-55-panel .tv-area-badge,
.tv-55-panel .tv-area-context em,
.tv-55-panel .tv-area-context strong {
  padding: 6px 9px;
  font-size: 10px;
}

.tv-55-panel .tv-signal-strip article {
  min-height: auto;
  padding: 8px 10px;
}

.tv-55-panel .tv-signal-strip strong {
  font-size: clamp(15px, 1.25vw, 24px);
}

.tv-55-panel .tv-metrics {
  gap: 8px;
  margin: 8px 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tv-55-panel .tv-metrics article {
  min-height: 84px;
  padding: 10px 12px;
}

.tv-55-panel .tv-metrics strong {
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: .92;
}

.tv-55-panel .tv-metrics span {
  font-size: 10px;
}

.tv-55-panel .tv-content-grid {
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tv-55-panel .tv-chart,
.tv-55-panel .tv-list,
.tv-55-panel .tv-alerts article {
  min-height: auto;
  padding: 12px;
  border-radius: 18px;
}

.tv-55-panel .tv-chart h4 {
  margin-bottom: 8px;
  font-size: 16px;
}

.tv-55-panel .tv-bar {
  min-height: 28px;
  margin: 7px 0;
  gap: 8px;
  grid-template-columns: minmax(96px, .9fr) minmax(0, 1.5fr) 68px;
}

.tv-55-panel .tv-bar span,
.tv-55-panel .tv-bar strong {
  font-size: 11px;
}

.tv-55-panel .tv-bar div {
  height: 9px;
}

.tv-55-panel .tv-pie-card {
  min-height: auto;
  padding: 12px;
}

.tv-55-panel .tv-pie-layout {
  gap: 10px;
  grid-template-columns: minmax(145px, .55fr) 1fr;
}

.tv-55-panel .tv-pie-orbit {
  min-height: 150px;
}

.tv-55-panel .tv-pie-orbit::before {
  width: 150px;
  height: 150px;
}

.tv-55-panel .tv-pie-orbit::after {
  width: 118px;
  height: 118px;
}

.tv-55-panel .tv-pie {
  width: 126px;
  min-height: 126px;
}

.tv-55-panel .tv-pie strong {
  font-size: 20px;
}

.tv-55-panel .tv-pie-legend span {
  min-height: 24px;
  font-size: 11px;
}

.tv-55-panel .tv-tabs {
  gap: 5px;
  margin-bottom: 5px;
  padding: 4px 0;
}

.tv-55-panel .tv-tabs button {
  width: 18px;
  height: 5px;
}

.tv-55-panel .tv-ticker {
  min-height: 34px;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

.tv-55-panel .tv-ticker span {
  font-size: 14px;
}

.tv-55-panel .tv-route-board {
  gap: 10px;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, .5fr);
}

.tv-55-panel .tv-route-map-wrap .routes-map-selected-banner {
  margin-bottom: 8px;
  padding: 8px 10px;
}

.tv-55-panel .tv-route-map-wrap .routes-map-selected-banner strong {
  font-size: clamp(18px, 1.6vw, 28px);
}

.tv-55-panel .tv-route-map-wrap .routes-map-selected-banner small {
  font-size: 11px;
}

.tv-55-panel .tv-route-map-wrap .routes-map-banner-actions a,
.tv-55-panel .tv-route-map-wrap .routes-map-banner-actions button {
  padding: 8px 10px;
  font-size: 12px;
}

.tv-55-panel .tv-route-map-wrap .routes-route-map-real {
  min-height: 330px;
  border-radius: 18px;
}

.tv-55-panel .tv-route-map-wrap .routes-route-map-real svg {
  min-height: 330px;
  max-height: 36vh;
}

.tv-55-panel .tv-route-map-wrap .routes-route-timeline {
  gap: 6px;
  max-height: 118px;
  margin-top: 8px;
}

.tv-55-panel .tv-route-map-wrap .routes-route-timeline button {
  gap: 7px;
  padding: 7px;
  border-radius: 12px;
  grid-template-columns: 30px 1fr;
}

.tv-55-panel .tv-route-map-wrap .routes-route-timeline span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 11px;
}

.tv-55-panel .tv-route-map-wrap .routes-route-timeline strong {
  font-size: 11px;
}

.tv-55-panel .tv-route-map-wrap .routes-route-timeline small {
  font-size: 9px;
}

.tv-55-panel .tv-route-map-wrap .route-point-detail {
  max-height: 170px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 16px;
}

.tv-55-panel .tv-route-map-wrap .route-point-detail h4 {
  font-size: 16px;
}

.tv-55-panel .tv-route-map-wrap .route-point-detail p {
  font-size: 11px;
}

.tv-55-panel .tv-route-map-wrap .route-point-grid {
  gap: 6px;
}

.tv-55-panel .tv-route-map-wrap .route-point-grid div {
  padding: 6px;
  border-radius: 10px;
}

.tv-55-panel .tv-route-map-wrap .route-point-grid b {
  font-size: 8px;
}

.tv-55-panel .tv-route-map-wrap .route-point-grid strong {
  font-size: 11px;
}

.tv-55-panel .tv-route-map-wrap .route-point-notes {
  gap: 6px;
}

.tv-55-panel .tv-route-map-wrap .route-point-notes p {
  padding: 6px;
  border-radius: 10px;
}

.tv-55-panel .tv-route-map-wrap .route-point-notes span {
  display: block;
  max-height: 34px;
  overflow: auto;
  font-size: 10px;
}

.tv-55-panel .tv-route-map-wrap .route-point-evidence {
  max-height: 54px;
  padding: 6px;
  overflow: auto;
}

.tv-55-panel .tv-route-map-wrap .route-point-evidence a {
  padding: 5px;
  font-size: 10px;
}

.tv-55-panel .tv-route-map-wrap .route-point-evidence img {
  width: 40px;
  height: 30px;
}

.tv-55-panel .tv-route-side {
  padding: 12px;
  border-radius: 20px;
}

.tv-55-panel .tv-route-side h3 {
  font-size: clamp(18px, 1.6vw, 28px);
}

.tv-55-panel .tv-route-side p {
  font-size: 12px;
}

.tv-55-panel .tv-route-side .tv-alerts {
  margin: 10px 0;
}

.tv-55-panel .tv-route-side .tv-alerts article {
  padding: 9px;
}

.tv-55-panel .tv-route-meta {
  gap: 4px;
  margin-top: 10px;
}

.tv-55-panel .tv-route-meta strong {
  font-size: 13px;
}

/* Pantalla completa compacta: evita que los KPIs se vuelvan gigantes en TV. */
.tv-55-panel .tv-stage:fullscreen {
  padding: 12px 16px 14px;
}

.tv-55-panel .tv-stage:fullscreen .tv-broadcast-strip {
  gap: 8px;
  margin-bottom: 6px;
}

.tv-55-panel .tv-stage:fullscreen .tv-broadcast-strip article {
  padding: 8px 10px;
}

.tv-55-panel .tv-stage:fullscreen .tv-broadcast-strip strong {
  font-size: clamp(16px, 1.2vw, 24px);
}

.tv-55-panel .tv-stage:fullscreen .tv-slide {
  padding: 14px;
}

.tv-55-panel .tv-stage:fullscreen .tv-slide-head h2 {
  font-size: clamp(30px, 3vw, 58px);
}

.tv-55-panel .tv-stage:fullscreen .tv-slide-head p {
  font-size: clamp(13px, 1.05vw, 20px);
}

.tv-55-panel .tv-stage:fullscreen .tv-area-context {
  margin-top: 6px;
}

.tv-55-panel .tv-stage:fullscreen .tv-signal-strip {
  gap: 8px;
  margin: 8px 0;
}

.tv-55-panel .tv-stage:fullscreen .tv-signal-strip article {
  padding: 8px 10px;
}

.tv-55-panel .tv-stage:fullscreen .tv-signal-strip strong {
  font-size: clamp(15px, 1.25vw, 24px);
}

.tv-55-panel .tv-stage:fullscreen .tv-metrics {
  gap: 8px;
  margin: 8px 0;
}

.tv-55-panel .tv-stage:fullscreen .tv-metrics strong {
  font-size: clamp(24px, 2.5vw, 48px);
}

.tv-55-panel .tv-stage:fullscreen .tv-content-grid {
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tv-55-panel .tv-stage:fullscreen .tv-chart,
.tv-55-panel .tv-stage:fullscreen .tv-list,
.tv-55-panel .tv-stage:fullscreen .tv-alerts article {
  padding: 12px;
}

.tv-55-panel .tv-stage:fullscreen .tv-chart h4 {
  font-size: 16px;
}

.tv-55-panel .tv-stage:fullscreen .tv-bar {
  margin: 7px 0;
  grid-template-columns: minmax(96px, .9fr) minmax(0, 1.5fr) 68px;
}

.tv-55-panel .tv-stage:fullscreen .tv-bar span,
.tv-55-panel .tv-stage:fullscreen .tv-bar strong {
  font-size: 11px;
}

.tv-55-panel .tv-stage:fullscreen .tv-bar div {
  height: 9px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie-layout {
  min-height: auto;
  grid-template-columns: minmax(145px, .55fr) 1fr;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie-orbit {
  min-height: 150px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie-orbit::before {
  width: 150px;
  height: 150px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie-orbit::after {
  width: 118px;
  height: 118px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie {
  width: 126px;
  min-height: 126px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie strong {
  font-size: 20px;
}

.tv-55-panel .tv-stage:fullscreen .tv-pie-legend span {
  min-height: 24px;
  font-size: 11px;
}

.tv-55-panel .tv-stage:fullscreen .tv-ticker {
  min-height: 34px;
  margin-top: 6px;
}

.tv-55-panel .tv-stage:fullscreen .tv-ticker span {
  font-size: 14px;
}

/* Graficos claros: se descartan circulares 3D y se marca el resultado lider con flecha. */
.distribution-card header,
.tv-distribution-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.distribution-card header h4,
.tv-distribution-card header h4 {
  margin: 0;
}

.distribution-card header small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.distribution-leader,
.tv-distribution-card header strong {
  display: inline-flex;
  align-items: center;
  max-width: 46%;
  padding: 7px 10px;
  border: 1px solid rgba(34, 211, 238, .35);
  border-radius: 999px;
  color: #075985;
  background: rgba(224, 242, 254, .82);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.distribution-bars,
.tv-distribution-bars {
  display: grid;
  gap: 9px;
}

.distribution-row,
.tv-distribution-bars .tv-bar,
.bar-row.leader {
  position: relative;
}

.distribution-row {
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(0, 1.35fr) minmax(78px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.distribution-row.leader,
.tv-distribution-bars .tv-bar.leader,
.bar-row.leader {
  border-color: rgba(34, 197, 94, .42);
  background: linear-gradient(90deg, rgba(236, 253, 245, .94), rgba(240, 249, 255, .76));
  box-shadow: 0 12px 28px rgba(14, 165, 233, .12);
}

.distribution-row span,
.distribution-row strong,
.distribution-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-row span {
  color: #0f2240;
  font-weight: 950;
}

.distribution-row div {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(203, 213, 225, .72);
}

.distribution-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.distribution-row strong {
  color: #0f2240;
  font-weight: 950;
  text-align: right;
}

.ranking-layout {
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
}

.ranking-panel .colored-panel {
  border-width: 2px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.ranking-panel .accent-blue {
  border-color: rgba(14, 165, 233, .5);
  background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 52%, #eef2ff 100%);
}

.ranking-panel .accent-green {
  border-color: rgba(34, 197, 94, .5);
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 55%, #ecfeff 100%);
}

.ranking-dimensions {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.ranking-dimension-card {
  min-height: 190px;
  border-left: 7px solid #0ea5e9 !important;
}

.ranking-dimension-card:nth-child(2) {
  border-left-color: #22c55e !important;
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 54%, #ecfeff 100%) !important;
}

.ranking-dimension-card:nth-child(3) {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 54%, #ecfeff 100%) !important;
}

.ranking-dimension-card:nth-child(4) {
  border-left-color: #7c3aed !important;
  background: linear-gradient(135deg, #ede9fe 0%, #ffffff 54%, #ecfeff 100%) !important;
}

.distribution-row.compact {
  grid-template-columns: minmax(92px, 1fr) minmax(90px, 1fr) auto;
  gap: 8px;
  margin-top: 9px;
}

.distribution-row.compact span {
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-row.compact strong {
  font-size: .8rem;
}

.leaderboard-list {
  display: grid;
  gap: 10px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, .45);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(224, 242, 254, .72));
}

.leaderboard-row.leader {
  border-color: rgba(245, 158, 11, .74);
  background: linear-gradient(135deg, rgba(254, 243, 199, .98), rgba(236, 253, 245, .78));
}

.leaderboard-row > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #22c55e);
  font-weight: 950;
}

.leaderboard-row.leader > span {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.leaderboard-row b,
.leaderboard-row strong {
  color: #0f172a;
  font-weight: 950;
}

.leaderboard-row small {
  display: block;
  color: #475569;
  font-size: 11px;
  margin-top: 3px;
}

@media (max-width: 980px) {
  .ranking-layout {
    grid-template-columns: 1fr;
  }
}

/* Ranking comercial order pass v1
   Tablero ejecutivo de vendedores: periodo, dimensiones, leaderboard y tabla segura. */
.ranking-panel {
  --ranking-blue: #0ea5e9;
  --ranking-green: #10b981;
  --ranking-amber: #f59e0b;
  --ranking-violet: #7c3aed;
  --ranking-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.35vw, 24px) !important;
  padding: clamp(16px, 1.5vw, 26px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(14, 165, 233, .42) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 23rem),
    radial-gradient(circle at 96% 5%, rgba(16, 185, 129, .16), transparent 22rem),
    linear-gradient(180deg, #e0f4ff 0%, #f6fbff 48%, #eef8ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .78),
    0 26px 68px rgba(8, 47, 73, .12) !important;
}

.ranking-panel .sales-module-hero {
  min-height: 230px !important;
  border-radius: 30px !important;
  border: 2px solid rgba(14, 165, 233, .55) !important;
  border-left: 12px solid var(--ranking-blue) !important;
  background:
    radial-gradient(circle at 92% 22%, rgba(34, 197, 94, .26), transparent 20rem),
    linear-gradient(135deg, #081a33 0%, #0b4f7c 56%, #0ea5e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 56px rgba(2, 132, 199, .22) !important;
}

.ranking-panel .sales-module-hero :where(h3, p, span, small, strong) {
  color: #fff !important;
}

.ranking-panel .sales-module-hero h3 {
  font-size: clamp(38px, 3.4vw, 66px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

.ranking-panel .sales-module-hero p {
  max-width: 850px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.55 !important;
}

.ranking-panel .sales-period-card {
  min-width: min(320px, 100%) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

.ranking-panel .sales-toolbar-primary {
  border-radius: 24px !important;
  border: 1px solid rgba(245, 158, 11, .58) !important;
  border-left: 12px solid var(--ranking-amber) !important;
  background: linear-gradient(135deg, #fff7ed, #eff6ff 62%, #ecfeff) !important;
  box-shadow: 0 16px 34px rgba(180, 83, 9, .09) !important;
}

.ranking-panel .sales-toolbar-primary label {
  color: #334155 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.ranking-panel .sales-toolbar-primary :where(input, select) {
  min-height: 48px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.ranking-panel button[data-ranking-action="buscar"] {
  min-height: 48px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #0ea5e9, #10b981) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 30px rgba(2, 132, 199, .18) !important;
}

.ranking-panel .sales-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}

.ranking-panel .sales-kpis article {
  min-height: 126px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(14, 165, 233, .35) !important;
  border-left: 9px solid var(--ranking-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .13), transparent 11rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.ranking-panel .sales-kpis article:nth-child(2) { border-left-color: var(--ranking-green) !important; }
.ranking-panel .sales-kpis article:nth-child(3) { border-left-color: var(--ranking-violet) !important; }
.ranking-panel .sales-kpis article:nth-child(4) { border-left-color: var(--ranking-amber) !important; }
.ranking-panel .sales-kpis article:nth-child(5) { border-left-color: #ef4444 !important; }

.ranking-panel .sales-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2vw, 40px) !important;
}

.ranking-panel .ranking-dimensions {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}

.ranking-panel .ranking-dimension-card {
  min-height: 230px !important;
  border-radius: 24px !important;
  border-width: 2px !important;
  border-left-width: 10px !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.ranking-panel .ranking-layout {
  grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr) !important;
  gap: clamp(16px, 1.2vw, 22px) !important;
}

.ranking-panel .colored-panel {
  border-radius: 26px !important;
  border-width: 2px !important;
  border-left-width: 10px !important;
}

.ranking-panel .accent-blue {
  border-left-color: var(--ranking-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .16), transparent 13rem),
    linear-gradient(135deg, #e0f2fe, #ffffff 52%, #eff6ff) !important;
}

.ranking-panel .accent-green {
  border-left-color: var(--ranking-green) !important;
  background:
    radial-gradient(circle at right top, rgba(16, 185, 129, .16), transparent 13rem),
    linear-gradient(135deg, #dcfce7, #ffffff 55%, #ecfeff) !important;
}

.ranking-panel .leaderboard-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding: 13px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: inset 0 -3px 0 rgba(14, 165, 233, .10) !important;
}

.ranking-panel .leaderboard-row.leader {
  border-color: rgba(245, 158, 11, .55) !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

.ranking-panel .leaderboard-row > span {
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}

.ranking-panel .leaderboard-row div {
  min-width: 0 !important;
}

.ranking-panel .leaderboard-row b,
.ranking-panel .leaderboard-row small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ranking-panel .leaderboard-row strong {
  color: #047857 !important;
  font-weight: 950 !important;
}

.ranking-panel .source-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  border-left: 8px solid var(--ranking-blue) !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  color: #075985 !important;
  font-weight: 900 !important;
}

.ranking-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .45) !important;
  background: rgba(255, 255, 255, .70) !important;
  -webkit-overflow-scrolling: touch !important;
}

.ranking-panel .sales-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.ranking-panel .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #fff !important;
}

.ranking-panel .sales-table td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .90) !important;
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
}

@media (max-width: 1080px) {
  .ranking-panel .ranking-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Procedimientos order pass v1
   Control de procesos: crear, validar, ejecutar, historial y plantillas sin paneles largos. */
.procedure-panel {
  --proc-blue: #0ea5e9;
  --proc-green: #10b981;
  --proc-amber: #f59e0b;
  --proc-violet: #7c3aed;
  --proc-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.35vw, 24px) !important;
  padding: clamp(16px, 1.45vw, 26px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(124, 58, 237, .34) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(124, 58, 237, .16), transparent 22rem),
    radial-gradient(circle at 96% 6%, rgba(14, 165, 233, .16), transparent 22rem),
    linear-gradient(180deg, #f3e8ff 0%, #f8fbff 48%, #eaf7ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .82),
    0 26px 68px rgba(49, 46, 129, .11) !important;
}

.procedure-panel .module-subtabs {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(124, 58, 237, .34) !important;
  border-left: 10px solid var(--proc-violet) !important;
  background: linear-gradient(135deg, #ede9fe, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 14px 30px rgba(49, 46, 129, .09) !important;
}

.procedure-panel .module-subtabs button {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.procedure-panel .module-subtabs button.active {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
  border-color: rgba(124, 58, 237, .70) !important;
  color: #fff !important;
}

.procedure-panel .source-status,
.procedure-panel .modal-inline-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  border-left: 8px solid var(--proc-violet) !important;
  background: linear-gradient(135deg, #ede9fe, #e0f2fe) !important;
  color: #075985 !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.procedure-panel .module-subpanel.active {
  border-radius: 26px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--proc-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .12), transparent 13rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.procedure-panel [data-procedimientos-panel="validar"].active {
  border-left-color: var(--proc-green) !important;
}

.procedure-panel [data-procedimientos-panel="ejecutar"].active {
  border-left-color: var(--proc-amber) !important;
}

.procedure-panel [data-procedimientos-panel="historial"].active {
  border-left-color: var(--proc-violet) !important;
}

.procedure-panel .form-launch-card,
.procedure-panel .ops-card,
.procedure-panel .source-form {
  border-radius: 26px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--proc-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .14), transparent 13rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.procedure-panel .form-launch-card h3,
.procedure-panel .source-form h3,
.procedure-panel .section-head h3 {
  color: #071733 !important;
  font-size: clamp(24px, 1.9vw, 38px) !important;
  letter-spacing: -.035em !important;
}

.procedure-panel .form-launch-card p,
.procedure-panel .source-form p,
.procedure-panel .section-head p {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.procedure-panel .source-form label {
  color: #334155 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.procedure-panel .source-form :where(input, select, textarea) {
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.procedure-panel .import-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.procedure-panel .import-actions button,
.procedure-panel button[data-procedure-action],
.procedure-panel button[data-procedimientos-tab] {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.procedure-panel .import-actions button,
.procedure-panel button[data-procedure-action] {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
  color: #fff !important;
  border: 1px solid rgba(124, 58, 237, .34) !important;
  box-shadow: 0 14px 28px rgba(49, 46, 129, .14) !important;
}

.procedure-panel .procedure-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  gap: 12px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
}

.procedure-panel .procedure-summary article {
  min-height: 108px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-left: 8px solid var(--proc-violet) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: inset 0 -4px 0 rgba(124, 58, 237, .10) !important;
}

.procedure-panel .procedure-summary strong {
  color: #071733 !important;
  font-size: clamp(28px, 2.2vw, 42px) !important;
}

.procedure-panel .module-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap: 14px !important;
}

.procedure-panel .import-table,
.procedure-panel .sales-table,
.procedure-panel #procedureList,
.procedure-panel #procedureHistory,
.procedure-panel #procedureTemplates {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.procedure-panel .import-table {
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .42) !important;
  background: rgba(255, 255, 255, .74) !important;
}

.procedure-panel .import-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.procedure-panel .import-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
  color: #fff !important;
}

.procedure-panel .import-table td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .90) !important;
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
}

.procedure-panel .source-map-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.procedure-panel .platform-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 23, 51, .56) !important;
  backdrop-filter: blur(9px) !important;
}

#procedureEditorModal .platform-modal-card {
  width: min(1160px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 920px) !important;
  overflow: auto !important;
  border-radius: 28px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  border-left: 12px solid var(--proc-violet) !important;
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  box-shadow: 0 34px 90px rgba(8, 33, 63, .34) !important;
}

#procedureEditorModal .platform-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: linear-gradient(135deg, rgba(245, 243, 255, .98), rgba(255, 255, 255, .98)) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .24) !important;
}

#procedureEditorModal .data-editor-body {
  display: grid !important;
  gap: 14px !important;
}

@media (max-width: 900px) {
  .procedure-panel {
    padding: 12px !important;
    border-radius: 22px !important;
  }
}

/* Produccion y analisis por vendedor order pass v1
   Vista operativa de empresa y trabajador con KPIs, barras, tablas y evidencias ordenadas. */
.production-panel {
  --prod-blue: #0ea5e9;
  --prod-green: #10b981;
  --prod-amber: #f59e0b;
  --prod-violet: #7c3aed;
  --prod-red: #ef4444;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.35vw, 24px) !important;
  padding: clamp(16px, 1.45vw, 26px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(14, 165, 233, .40) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 22rem),
    radial-gradient(circle at 96% 6%, rgba(16, 185, 129, .16), transparent 22rem),
    linear-gradient(180deg, #e0f4ff 0%, #f8fbff 48%, #edf8ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .82),
    0 26px 68px rgba(8, 47, 73, .12) !important;
}

.production-panel.my-panel {
  border-color: rgba(124, 58, 237, .38) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(124, 58, 237, .16), transparent 22rem),
    radial-gradient(circle at 96% 6%, rgba(14, 165, 233, .16), transparent 22rem),
    linear-gradient(180deg, #f3e8ff 0%, #f8fbff 48%, #edf8ff 100%) !important;
}

.production-panel .production-hero {
  min-height: 235px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr) !important;
  gap: clamp(16px, 2vw, 34px) !important;
  align-items: center !important;
  padding: clamp(22px, 2.4vw, 42px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(14, 165, 233, .55) !important;
  border-left: 12px solid var(--prod-blue) !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(16, 185, 129, .26), transparent 20rem),
    linear-gradient(135deg, #081a33 0%, #0b4f7c 56%, #0ea5e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 56px rgba(2, 132, 199, .22) !important;
}

.production-panel.my-panel .production-hero {
  border-left-color: var(--prod-violet) !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(14, 165, 233, .26), transparent 20rem),
    linear-gradient(135deg, #1e1b4b 0%, #5b21b6 52%, #0ea5e9 100%) !important;
}

.production-panel .production-hero :where(h3, p, span, label) {
  color: #fff !important;
}

.production-panel .production-hero h3 {
  font-size: clamp(36px, 3.35vw, 64px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

.production-panel .production-hero p {
  max-width: 900px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.55 !important;
}

.production-panel .production-period {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .10) !important;
}

.production-panel .production-period label {
  display: grid !important;
  gap: 7px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.production-panel .production-period :where(select, input, button) {
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.production-panel .production-period button,
.production-panel button[data-production-action],
.production-panel button[data-my-action],
.production-panel button[data-report-action] {
  min-height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #0ea5e9, #10b981) !important;
  color: #fff !important;
  font-weight: 950 !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  box-shadow: 0 14px 28px rgba(2, 132, 199, .18) !important;
}

.production-panel .production-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}

.production-panel .production-kpis article {
  min-height: 124px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(14, 165, 233, .34) !important;
  border-left: 9px solid var(--prod-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .13), transparent 11rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.production-panel .production-kpis article:nth-child(2) { border-left-color: var(--prod-green) !important; }
.production-panel .production-kpis article:nth-child(3) { border-left-color: var(--prod-violet) !important; }
.production-panel .production-kpis article:nth-child(4) { border-left-color: var(--prod-amber) !important; }
.production-panel .production-kpis article:nth-child(5) { border-left-color: #06b6d4 !important; }
.production-panel .production-kpis article:nth-child(6) { border-left-color: #22c55e !important; }

.production-panel .production-kpis strong {
  color: #071733 !important;
  font-size: clamp(28px, 2.2vw, 44px) !important;
}

.production-panel .production-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.2vw, 22px) !important;
}

.production-panel .sales-card {
  border-radius: 26px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--prod-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .12), transparent 13rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.production-panel .production-grid .sales-card:nth-child(2),
.production-panel .sales-card.dark-card {
  border-left-color: var(--prod-green) !important;
}

.production-panel .sales-card.dark-card {
  background:
    radial-gradient(circle at right top, rgba(16, 185, 129, .14), transparent 13rem),
    linear-gradient(135deg, #08213f, #0f3b5f 58%, #075985) !important;
  color: #fff !important;
}

.production-panel .sales-card.dark-card :where(h3, p, span, strong, small) {
  color: #fff !important;
}

.production-panel .section-head h3,
.production-panel .sales-card > h3 {
  color: #071733 !important;
  font-size: clamp(22px, 1.55vw, 34px) !important;
  letter-spacing: -.035em !important;
}

.production-panel .inventory-bars {
  min-height: 230px !important;
}

.production-panel .source-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  border-left: 8px solid var(--prod-blue) !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  color: #075985 !important;
  font-weight: 900 !important;
}

.production-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .42) !important;
  background: rgba(255, 255, 255, .74) !important;
  -webkit-overflow-scrolling: touch !important;
}

.production-panel .sales-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.production-panel .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #fff !important;
}

.production-panel .sales-table td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .90) !important;
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
}

.production-panel .sales-table td small,
.production-panel .sales-table td strong {
  display: block !important;
}

.production-panel .seller-quick-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 10px !important;
}

.production-panel #myExecutiveSummary,
.production-panel #myEvidenceMap {
  min-width: 0 !important;
  overflow-x: auto !important;
}

@media (max-width: 1120px) {
  .production-panel .production-hero,
  .production-panel .production-grid {
    grid-template-columns: 1fr !important;
  }
}

.distribution-row small {
  display: block;
  color: #64748b;
  font-size: 10px;
}

.tv-distribution-total {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 16px;
  background: rgba(8, 47, 73, .42);
}

.tv-distribution-total span,
.tv-distribution-total small {
  color: #bae6fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tv-distribution-total b {
  color: #fff;
  font-size: clamp(20px, 1.7vw, 32px);
  line-height: 1;
}

.tv-distribution-bars .tv-bar.leader strong,
.tv-bar.leader strong {
  color: #bbf7d0;
}

.tv-vendor-route-card {
  grid-column: span 2;
}

.tv-vendor-route-card > p {
  margin: -4px 0 10px;
  color: #bae6fd;
  font-size: 12px;
  font-weight: 800;
}

.tv-vendor-route-map .routes-map-selected-banner {
  padding: 8px 10px;
  margin-bottom: 8px;
}

.tv-vendor-route-map .routes-map-selected-banner strong {
  font-size: clamp(16px, 1.4vw, 24px);
}

.tv-vendor-route-map .routes-map-selected-banner small,
.tv-vendor-route-map .routes-map-selected-banner a,
.tv-vendor-route-map .routes-map-selected-banner button {
  font-size: 10px;
}

.tv-vendor-route-map .routes-route-map-real {
  min-height: 250px;
  border-radius: 16px;
}

.tv-vendor-route-map .routes-route-map-real svg {
  min-height: 250px;
  max-height: 28vh;
}

.tv-vendor-route-map .route-point-detail {
  max-height: 120px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  overflow: auto;
}

.tv-vendor-route-map .route-point-detail h4 {
  font-size: 14px;
}

.tv-vendor-route-map .route-point-grid,
.tv-vendor-route-map .route-point-notes,
.tv-vendor-route-map .route-point-evidence {
  display: none;
}

.tv-vendor-route-map .routes-route-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 86px;
  margin-top: 8px;
  overflow: auto;
}

.tv-vendor-route-map .routes-route-timeline button {
  padding: 6px;
}

.tv-vendor-route-map .routes-route-timeline span {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.tv-vendor-route-map .routes-route-timeline strong {
  font-size: 10px;
}

.tv-vendor-route-map .routes-route-timeline small,
.tv-vendor-route-map .hint {
  display: none;
}

/* Navegacion interna v3: menos pagina larga, mas pestañas laterales/horizontales y panel activo unico. */
.module-active .workbench {
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, .08), transparent 18rem),
    linear-gradient(180deg, rgba(248, 252, 255, .98), rgba(239, 247, 255, .94));
}

.module-tabbed-panel,
.inventory-web-panel,
.catalog-panel,
.tuu-panel,
.routes-panel,
.profit-panel,
.rendiciones-panel,
.rrhh-panel,
.commerce-panel,
.source-panel,
.sales-panel {
  --panel-line: #0ea5e9;
  border: 1px solid rgba(125, 211, 252, .72);
  border-left: 7px solid var(--panel-line);
  border-radius: 26px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-line) 8%, transparent), transparent 18rem),
    rgba(255, 255, 255, .88);
  box-shadow: 0 22px 58px rgba(8, 28, 66, .11);
}

.routes-panel { --panel-line: #14b8a6; }
.profit-panel { --panel-line: #f59e0b; }
.inventory-web-panel,
.catalog-panel { --panel-line: #8b5cf6; }
.rendiciones-panel { --panel-line: #22c55e; }
.rrhh-panel { --panel-line: #ec4899; }
.commerce-panel { --panel-line: #0ea5e9; }
.source-panel,
.module-tabbed-panel { --panel-line: #6366f1; }

.module-subtabs,
.inventory-tabs,
.catalog-tabs,
.tuu-tabs,
.routes-tabs,
.profit-tabs,
.rendiciones-tabs,
.rrhh-tabs,
.planes-entel-tabs,
.time-tabs,
.commerce-tabs,
.admin-tabs {
  position: sticky !important;
  top: 76px !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 10px 12px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(125, 211, 252, .72) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, .98), rgba(255, 255, 255, .94)) !important;
  box-shadow: 0 16px 34px rgba(8, 28, 66, .09) !important;
  scrollbar-width: thin;
}

.module-subtabs::before,
.inventory-tabs::before,
.catalog-tabs::before,
.tuu-tabs::before,
.routes-tabs::before,
.profit-tabs::before,
.rendiciones-tabs::before,
.rrhh-tabs::before,
.planes-entel-tabs::before,
.time-tabs::before,
.commerce-tabs::before,
.admin-tabs::before {
  content: "Secciones";
  position: sticky;
  left: 0;
  z-index: 2;
  align-self: center;
  flex: 0 0 auto;
  margin-right: 4px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #075985;
  background: rgba(224, 242, 254, .96);
  box-shadow: 8px 0 16px rgba(255, 255, 255, .9);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.module-subtabs button,
.inventory-tabs button,
.catalog-tabs button,
.tuu-tabs button,
.routes-tabs button,
.profit-tabs button,
.rendiciones-tabs button,
.rrhh-tabs button,
.planes-entel-tabs button,
.time-tabs button,
.commerce-tabs button,
.admin-tabs button {
  --agenda-accent: #0ea5e9;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: 240px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 16px 9px !important;
  border: 1px solid color-mix(in srgb, var(--agenda-accent) 48%, #dbeafe) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  color: #0f2742 !important;
  background:
    linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--agenda-accent) 10%, #f8fbff)) !important;
  box-shadow:
    inset 0 4px 0 var(--agenda-accent),
    0 10px 22px rgba(8, 28, 66, .07) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.module-subtabs button.active,
.inventory-tabs button.active,
.catalog-tabs button.active,
.tuu-tabs button.active,
.routes-tabs button.active,
.profit-tabs button.active,
.rendiciones-tabs button.active,
.rrhh-tabs button.active,
.planes-entel-tabs button.active,
.time-tabs button.active,
.commerce-tabs button.active,
.admin-tabs button.active {
  color: #fff !important;
  border-color: var(--agenda-accent) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .28), transparent 4.8rem),
    linear-gradient(135deg, color-mix(in srgb, var(--agenda-accent) 86%, #0f172a), #071124) !important;
  transform: translateY(-3px) !important;
}

/* Una sola subvista visible por modulo: corrige apilamiento hacia abajo. */
.module-subpanel:not(.active),
.inventory-view:not(.active),
.catalog-view:not(.active),
.tuu-view:not(.active),
.routes-view:not(.active),
.profit-view:not(.active),
.rendiciones-view:not(.active),
.rrhh-view:not(.active),
.coverage-view:not(.active),
.commerce-view:not(.active),
.time-view:not(.active),
.planes-entel-view:not(.active),
[data-income-panel]:not(.active),
[data-iccid-panel]:not(.active),
[data-fuentes-panel]:not(.active),
[data-procedimientos-panel]:not(.active),
[data-inventory-panel]:not(.active),
[data-catalog-panel]:not(.active),
[data-routes-panel]:not(.active),
[data-profit-panel]:not(.active),
[data-rendiciones-panel]:not(.active),
[data-rrhh-panel]:not(.active),
[data-tuu-panel]:not(.active) {
  display: none !important;
}

.module-subpanel.active,
.inventory-view.active,
.catalog-view.active,
.tuu-view.active,
.routes-view.active,
.profit-view.active,
.rendiciones-view.active,
.rrhh-view.active,
.coverage-view.active,
.commerce-view.active,
.time-view.active,
.planes-entel-view.active,
[data-income-panel].active,
[data-iccid-panel].active,
[data-fuentes-panel].active,
[data-procedimientos-panel].active,
[data-inventory-panel].active,
[data-catalog-panel].active,
[data-routes-panel].active,
[data-profit-panel].active,
[data-rendiciones-panel].active,
[data-rrhh-panel].active,
[data-tuu-panel].active {
  display: grid !important;
  border-top: 4px solid var(--panel-line, #0ea5e9);
  border-radius: 0 0 24px 24px;
  padding-top: 14px;
}

/* Bordes con mas color: menos blanco plano, mas estructura visual por tarjeta. */
:where(.sales-card, .routes-card, .inventory-card, .catalog-card, .control-card, .pie3d-card, .profit-source-item, .profit-component, .sync-status-card, .source-status-card, .connectio-home-card, .connectio-home-board, .board-card, .modal-card, .editor-card, .source-card) {
  border: 1px solid rgba(56, 189, 248, .42) !important;
  border-left: 6px solid var(--card-accent, #0ea5e9) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card-accent, #0ea5e9) 7%, transparent), transparent 17rem),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 252, 255, .92)) !important;
  box-shadow:
    0 20px 48px rgba(8, 28, 66, .09),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

:where(.sales-card, .control-card, .board-card):nth-of-type(2n) { --card-accent: #22c55e; }
:where(.sales-card, .control-card, .board-card):nth-of-type(3n) { --card-accent: #f59e0b; }
:where(.sales-card, .control-card, .board-card):nth-of-type(4n) { --card-accent: #8b5cf6; }
:where(.routes-card) { --card-accent: #14b8a6; }
:where(.inventory-card, .catalog-card) { --card-accent: #8b5cf6; }
:where(.profit-source-item, .profit-component) { --card-accent: #f59e0b; }
:where(.sync-status-card, .source-status-card, .source-card) { --card-accent: #6366f1; }

:where(.sales-table, .inventory-table, .catalog-table, .routes-table) {
  border: 1px solid rgba(56, 189, 248, .36) !important;
  border-top: 5px solid var(--panel-line, #0ea5e9) !important;
  background: linear-gradient(180deg, #ffffff, #f8fcff) !important;
}

/* Pestañas internas arriba: evita páginas largas y subpestañas duplicadas hacia abajo. */
.connectio-promoted-tabs {
  position: sticky !important;
  top: 72px !important;
  z-index: 18 !important;
  margin: 0 0 18px !important;
  padding: 10px !important;
  border: 1px solid rgba(56, 189, 248, .42) !important;
  border-left: 7px solid var(--panel-line, #0ea5e9) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, .12), rgba(255, 255, 255, .96) 36%),
    rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 38px rgba(8, 28, 66, .08) !important;
}

.connectio-promoted-tabs::before {
  content: "Secciones";
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.connectio-promoted-tabs button {
  min-height: 40px !important;
  border-width: 2px !important;
}

.connectio-promoted-tabs button.active,
.connectio-promoted-tabs button[aria-selected="true"] {
  box-shadow: 0 12px 26px rgba(14, 165, 233, .18) !important;
}

.connectio-secondary-tab-link {
  min-height: 34px !important;
  padding: 8px 13px !important;
  border: 1px dashed rgba(14, 165, 233, .55) !important;
  border-radius: 999px !important;
  color: #075985 !important;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, .96), rgba(255, 255, 255, .9)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.connectio-secondary-tab-link::before {
  content: "↗ ";
  font-weight: 950;
}

.connectio-secondary-tab-link:hover {
  color: #0f172a !important;
  border-style: solid !important;
  transform: translateY(-1px);
}

.connectio-period-select {
  min-height: 42px !important;
  padding: 9px 38px 9px 14px !important;
  border: 1px solid rgba(56, 189, 248, .55) !important;
  border-radius: 14px !important;
  color: #0f2742 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 249, 255, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  font-weight: 800 !important;
}

.connectio-period-select:focus {
  outline: 3px solid rgba(14, 165, 233, .18) !important;
  border-color: #0ea5e9 !important;
}

.connectio-assisted-filter {
  border-color: rgba(14, 165, 233, .58) !important;
  background:
    linear-gradient(90deg, rgba(224, 242, 254, .72), rgba(255, 255, 255, .96) 36%) !important;
  box-shadow:
    inset 4px 0 0 rgba(14, 165, 233, .72),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.connectio-assisted-filter:focus {
  outline: 3px solid rgba(14, 165, 233, .18) !important;
  border-color: #0284c7 !important;
}

/* Ventanas emergentes profesionales: centradas, claras y sin paneles cortados. */
.platform-modal,
.approval-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(14px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(14, 165, 233, .20), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(34, 197, 94, .13), transparent 25%),
    rgba(226, 238, 250, .70) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  overflow: hidden !important;
}

.platform-modal[hidden] {
  display: none !important;
}

.platform-modal-card,
.approval-modal > div {
  width: min(1120px, calc(100vw - 42px)) !important;
  max-height: min(820px, calc(100dvh - 42px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(56, 189, 248, .46) !important;
  border-left: 7px solid var(--panel-line, #0ea5e9) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 248, 255, .97)) !important;
  color: #0f172a !important;
  box-shadow:
    0 30px 80px rgba(8, 28, 66, .22),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

.platform-modal-head {
  flex: 0 0 auto !important;
  align-items: center !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid rgba(125, 211, 252, .55) !important;
  background:
    linear-gradient(90deg, rgba(224, 242, 254, .88), rgba(255, 255, 255, .96)) !important;
}

.platform-modal-head .eyebrow,
.platform-modal-head span:first-child {
  color: #0284c7 !important;
}

.platform-modal-card :where(.data-editor-body, .source-form, .compact-modal-form, form, [data-inventory-modal-view]) {
  min-height: 0 !important;
}

.platform-modal-card > :where(.data-editor-body, .source-form, .compact-modal-form, form),
.platform-modal-card [data-inventory-modal-view] {
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 18px 22px !important;
  scrollbar-width: thin;
}

.platform-modal-card .modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-top: 1px solid rgba(125, 211, 252, .55) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), #ffffff) !important;
}

.platform-modal-card .modal-inline-status {
  order: -1;
  margin: 12px 22px 0 !important;
  border-left: 5px solid #0ea5e9 !important;
}

.modal-close {
  min-height: 40px !important;
  border-radius: 14px !important;
}

body.modal-open {
  overflow: hidden !important;
}

/* Formularios criticos: usuario y catalogo mas claros, con etiquetas visibles. */
#adminUserForm,
#catalogEditorModal .catalog-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  border: 0 !important;
  background: transparent !important;
}

#adminUserForm label,
#catalogEditorModal .catalog-form label {
  min-height: auto !important;
  display: grid !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(125, 211, 252, .50) !important;
  border-left: 4px solid rgba(14, 165, 233, .72) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94)) !important;
  color: #0f2742 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#adminUserForm label span,
#catalogEditorModal .catalog-form label span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

#adminUserForm input,
#adminUserForm select,
#catalogEditorModal .catalog-form input,
#catalogEditorModal .catalog-form select,
#catalogEditorModal .catalog-form textarea {
  min-height: 42px !important;
  border: 1px solid rgba(203, 213, 225, .92) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

#adminUserForm .time-category-check,
#adminUserForm .preview-note,
#catalogEditorModal .catalog-form-wide {
  grid-column: 1 / -1 !important;
}

#adminUserForm .preview-note {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px dashed rgba(14, 165, 233, .48) !important;
  border-radius: 16px !important;
  background: rgba(224, 242, 254, .58) !important;
  color: #334155 !important;
}

#catalogEditorModal .platform-modal-card > h4 {
  flex: 0 0 auto !important;
  margin: 2px 22px 10px !important;
  padding: 12px 14px !important;
  border-left: 5px solid #8b5cf6 !important;
  border-radius: 16px !important;
  background: rgba(245, 243, 255, .84) !important;
}

#catalogEditorModal .catalog-chip-grid {
  flex: 1 1 auto !important;
  overflow: auto !important;
  margin: 0 22px !important;
  padding: 12px !important;
  border: 1px solid rgba(167, 139, 250, .38) !important;
  border-radius: 18px !important;
  background: rgba(250, 245, 255, .50) !important;
}

#catalogEditorModal .catalog-note {
  flex: 0 0 auto !important;
  margin: 12px 22px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(240, 249, 255, .74) !important;
}

/* Formularios operativos: Inventario y Rendiciones con campos guiados. */
#inventoryEditorModal .inventory-form,
#rendicionEditorModal .rendiciones-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#inventoryEditorModal .inventory-form label,
#rendicionEditorModal .rendiciones-form label {
  min-height: auto !important;
  display: grid !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(125, 211, 252, .48) !important;
  border-left: 4px solid #14b8a6 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .78)) !important;
  color: #0f2742 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#inventoryEditorModal .inventory-form label span,
#rendicionEditorModal .rendiciones-form label {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

#rendicionEditorModal .rendiciones-form label input,
#rendicionEditorModal .rendiciones-form label textarea,
#inventoryEditorModal .inventory-form input,
#inventoryEditorModal .inventory-form select,
#inventoryEditorModal .inventory-form textarea {
  min-height: 42px !important;
  border: 1px solid rgba(203, 213, 225, .92) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

#inventoryEditorModal .inventory-form-wide,
#rendicionEditorModal .rendiciones-form .span-2 {
  grid-column: 1 / -1 !important;
}

#inventoryEditorModal [data-inventory-modal-view] > .muted {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px dashed rgba(20, 184, 166, .48) !important;
  border-radius: 16px !important;
  background: rgba(240, 253, 250, .70) !important;
}

#rendicionEditorModal .rendiciones-form-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

/* Formularios de datos: Rutas y Fuentes con carga guiada. */
.routes-form,
#fuenteEditorModal .source-form,
.source-form.wide-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.routes-form label,
#fuenteEditorModal .source-form label,
.source-form.wide-form label {
  min-height: auto !important;
  display: grid !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(125, 211, 252, .48) !important;
  border-left: 4px solid #6366f1 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(238, 242, 255, .72)) !important;
  color: #0f2742 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.routes-form label span,
#fuenteEditorModal .source-form label,
.source-form.wide-form label {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.routes-form input,
.routes-form select,
.routes-form textarea,
#fuenteEditorModal .source-form input,
#fuenteEditorModal .source-form select,
#fuenteEditorModal .source-form textarea,
.source-form.wide-form input,
.source-form.wide-form select,
.source-form.wide-form textarea {
  min-height: 42px !important;
  border: 1px solid rgba(203, 213, 225, .92) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.routes-form-wide,
.routes-form textarea,
#fuenteEditorModal .source-form h3,
#fuenteEditorModal .source-form p,
#fuenteEditorModal .source-governance-note,
.source-form.wide-form h3,
.source-form.wide-form p,
.source-form.wide-form small,
.source-form.wide-form .import-actions,
.source-form.wide-form .source-row {
  grid-column: 1 / -1 !important;
}

.routes-card > [data-routes-action="guardar"] {
  margin-top: 12px !important;
  min-height: 44px !important;
}

/* Finanzas y aprobaciones: filtros sensibles con lectura guiada. */
.analysis-filter-panel,
.approval-filter-panel,
.liquidaciones-panel .sales-toolbar,
.goals-approval-panel .sales-toolbar,
.profit-panel .sales-toolbar,
.module-tabbed-panel .source-form[data-income-section],
.approval-form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 14px !important;
  border: 1px solid rgba(251, 191, 36, .42) !important;
  border-left: 6px solid #f59e0b !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .88), rgba(255, 255, 255, .96)) !important;
}

.analysis-filter-panel label,
.approval-filter-panel label,
.liquidaciones-panel .sales-toolbar label,
.goals-approval-panel .sales-toolbar label,
.profit-panel .sales-toolbar label,
.approval-form label {
  min-height: auto !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(251, 191, 36, .36) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #0f2742 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.analysis-filter-panel label span,
.approval-filter-panel label span,
.liquidaciones-panel .sales-toolbar label,
.goals-approval-panel .sales-toolbar label span,
.profit-panel .sales-toolbar label span,
.approval-form label span {
  color: #92400e !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.analysis-filter-panel input,
.analysis-filter-panel select,
.approval-filter-panel input,
.approval-filter-panel select,
.liquidaciones-panel .sales-toolbar input,
.liquidaciones-panel .sales-toolbar select,
.goals-approval-panel .sales-toolbar input,
.goals-approval-panel .sales-toolbar select,
.profit-panel .sales-toolbar input,
.profit-panel .sales-toolbar select,
.approval-form input,
.approval-form select {
  min-height: 42px !important;
  border: 1px solid rgba(203, 213, 225, .92) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.analysis-filter-panel button,
.approval-filter-panel button,
.liquidaciones-panel .sales-toolbar button,
.goals-approval-panel .sales-toolbar button,
.profit-panel .sales-toolbar button,
.approval-form button {
  min-height: 44px !important;
  align-self: end !important;
}

.approval-form button {
  grid-column: 1 / -1 !important;
}

.compact-card {
  border: 1px solid rgba(14, 165, 233, 0.28) !important;
  border-left: 6px solid #0ea5e9 !important;
  box-shadow: 0 18px 44px rgba(14, 165, 233, 0.08) !important;
}

.soft-divider {
  border: 0 !important;
  border-top: 1px solid rgba(14, 165, 233, 0.22) !important;
  margin: 18px 0 !important;
}

@media (min-width: 1280px) {
  .module-tabbed-panel,
  .inventory-web-panel,
  .catalog-panel,
  .tuu-panel,
  .routes-panel,
  .profit-panel,
  .rendiciones-panel,
  .rrhh-panel,
  .commerce-panel,
  .source-panel,
  .sales-panel {
    padding: 20px !important;
  }
}

@media (max-width: 1380px) {
  .connectio-home-hero,
  .connectio-home-grid,
  .connectio-home-board {
    grid-template-columns: 1fr;
  }

  .connectio-home-area-grid,
  .connectio-home-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routes-route-summary,
  .routes-route-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routes-map-duo {
    grid-template-columns: 1fr;
  }

  .tv-route-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .connectio-home-kpis,
  .connectio-home-area-grid,
  .connectio-home-quick {
    grid-template-columns: 1fr;
  }

  .connectio-home-status {
    grid-template-columns: 1fr;
  }

  .connectio-home-tabs {
    position: static;
  }

  .routes-route-summary,
  .routes-route-timeline {
    grid-template-columns: 1fr;
  }

  .routes-map-selected-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .routes-map-actions {
    justify-content: stretch;
  }

  .routes-map-actions select,
  .routes-map-actions button {
    width: 100%;
  }
}

/* CONNECTIO visual clarity v2: menos blanco plano, mas separacion operativa. */
.goals-panel {
  background:
    radial-gradient(circle at 8% 4%, rgba(14, 165, 233, .13), transparent 19rem),
    radial-gradient(circle at 95% 5%, rgba(16, 185, 129, .12), transparent 18rem),
    linear-gradient(180deg, #eaf6ff 0%, #f3f9ff 42%, #eef6ff 100%) !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 20px 55px rgba(8, 47, 73, .10) !important;
}

.saas-goals-panel {
  gap: 18px !important;
}

.saas-goals-hero {
  background:
    linear-gradient(135deg, rgba(226, 244, 255, .96), rgba(232, 255, 246, .94)),
    #e7f7ff !important;
  border: 1px solid rgba(14, 165, 233, .45) !important;
  border-left: 8px solid #0ea5e9 !important;
  box-shadow: 0 20px 50px rgba(14, 116, 144, .13) !important;
}

.saas-goals-status article {
  background: linear-gradient(135deg, #e0f2fe, #eef6ff) !important;
  border: 1px solid rgba(14, 165, 233, .38) !important;
  box-shadow: 0 12px 28px rgba(14, 116, 144, .08) !important;
}

.saas-goals-status article:nth-child(2) {
  background: linear-gradient(135deg, #dcfce7, #effff7) !important;
  border-color: rgba(16, 185, 129, .38) !important;
}

.saas-goals-status article:nth-child(3) {
  background: linear-gradient(135deg, #fef3c7, #fff8e7) !important;
  border-color: rgba(245, 158, 11, .42) !important;
}

.saas-goals-kpis article {
  color: #082f49 !important;
  border: 1px solid color-mix(in srgb, var(--goals-tone, #2563eb) 45%, #ffffff) !important;
  border-left: 8px solid var(--goals-tone, #2563eb) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--goals-tone, #2563eb) 18%, #ffffff), color-mix(in srgb, var(--goals-tone, #2563eb) 7%, #ffffff)),
    #eef8ff !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--goals-tone, #2563eb) 16%, transparent) !important;
}

.saas-goals-kpis article > span {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--goals-tone, #2563eb) 35%, transparent) !important;
}

.saas-goals-progress,
.saas-goals-ranking,
.saas-goals-chart,
.goals-panel .sales-card,
.goals-panel .sync-status-card {
  background:
    linear-gradient(135deg, rgba(239, 249, 255, .98), rgba(255, 255, 255, .92)),
    #eff8ff !important;
  border: 1px solid rgba(14, 165, 233, .42) !important;
  border-left: 8px solid #0ea5e9 !important;
  box-shadow: 0 18px 42px rgba(14, 116, 144, .10) !important;
}

.saas-goals-ranking {
  border-left-color: #10b981 !important;
  background: linear-gradient(135deg, #ecfdf5, #f7fffb) !important;
}

.saas-goals-chart {
  border-left-color: #6366f1 !important;
  background: linear-gradient(135deg, #eef2ff, #f8fbff) !important;
}

.saas-goals-progress {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, #fff7ed, #f8fbff) !important;
}

.goals-panel .sales-toolbar,
.goals-panel .sales-toolbar-primary {
  background: linear-gradient(135deg, #fff7ed, #eff6ff) !important;
  border: 1px solid rgba(245, 158, 11, .46) !important;
  border-left: 8px solid #f59e0b !important;
  box-shadow: 0 16px 36px rgba(245, 158, 11, .10) !important;
}

.goals-panel .sales-layout {
  gap: 16px !important;
}

.goals-panel .sales-table {
  background: #eaf6ff !important;
  border: 1px solid rgba(14, 165, 233, .46) !important;
  border-left: 8px solid #6366f1 !important;
  border-radius: 22px !important;
  padding: 12px !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, .10) !important;
}

.goals-panel .sales-table table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

.goals-panel .sales-table thead th,
.goals-panel .inventory-bars table thead th {
  background: linear-gradient(135deg, #0f7cc8, #0ea5e9) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 12px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11px !important;
}

.goals-panel .sales-table thead th:first-child {
  border-radius: 14px 0 0 14px !important;
}

.goals-panel .sales-table thead th:last-child {
  border-radius: 0 14px 14px 0 !important;
}

.goals-panel .sales-table tbody tr {
  background: linear-gradient(135deg, #ffffff, #f0f9ff) !important;
  box-shadow: 0 8px 22px rgba(14, 116, 144, .08) !important;
}

.goals-panel .sales-table tbody td {
  border-top: 1px solid rgba(14, 165, 233, .20) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .20) !important;
  padding: 12px 10px !important;
  vertical-align: middle !important;
}

.goals-panel .sales-table tbody td:first-child {
  border-left: 1px solid rgba(14, 165, 233, .20) !important;
  border-radius: 14px 0 0 14px !important;
}

.goals-panel .sales-table tbody td:last-child {
  border-right: 1px solid rgba(14, 165, 233, .20) !important;
  border-radius: 0 14px 14px 0 !important;
}

.goals-panel .inventory-bars > div,
.goals-panel .inventory-bars span,
.goals-panel .saas-goals-company-bars span,
.goals-panel .saas-goals-bars span {
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(14, 165, 233, .14) !important;
  border-radius: 13px !important;
  padding: 7px 9px !important;
}

/* CONNECTIO visual clarity global v1: replica el lenguaje de bloques coloreados en toda la plataforma. */
:where(
  .source-panel,
  .admin-panel,
  .audit-panel,
  .import-panel,
  .inventory-panel,
  .catalog-panel,
  .sales-panel,
  .rendiciones-panel,
  .planes-entel-panel,
  .product-intel-panel,
  .coverage-panel,
  .tuu-panel,
  .profit-panel,
  .routes-panel,
  .cap-panel,
  .tv-panel,
  .liquidaciones-panel,
  .connectio-time-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel,
  .ops-panel,
  .quality-panel
) {
  background:
    radial-gradient(circle at 6% 5%, rgba(14, 165, 233, .12), transparent 18rem),
    radial-gradient(circle at 96% 2%, rgba(16, 185, 129, .10), transparent 17rem),
    linear-gradient(180deg, #eaf6ff 0%, #f5fbff 48%, #edf7ff 100%) !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .70), 0 20px 55px rgba(8, 47, 73, .09) !important;
}

:where(
  .sales-card,
  .routes-card,
  .inventory-card,
  .catalog-card,
  .control-card,
  .source-card,
  .source-status-card,
  .sync-status-card,
  .board-card,
  .editor-card,
  .profit-source-item,
  .profit-component,
  .tuu-card,
  .rrhh-card,
  .coverage-card,
  .procedure-card,
  .quality-card,
  .admin-card,
  .audit-card
) {
  --connectio-card-accent: var(--card-accent, #0ea5e9);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--connectio-card-accent) 13%, #ffffff), #f8fcff),
    #eef8ff !important;
  border: 1px solid color-mix(in srgb, var(--connectio-card-accent) 34%, #dbeafe) !important;
  border-left: 8px solid var(--connectio-card-accent) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--connectio-card-accent) 12%, transparent) !important;
}

:where(.sales-card:nth-of-type(3n+1), .inventory-card:nth-of-type(3n+1), .catalog-card:nth-of-type(3n+1), .routes-card:nth-of-type(3n+1)) {
  --card-accent: #0ea5e9;
}

:where(.sales-card:nth-of-type(3n+2), .inventory-card:nth-of-type(3n+2), .catalog-card:nth-of-type(3n+2), .routes-card:nth-of-type(3n+2)) {
  --card-accent: #10b981;
}

:where(.sales-card:nth-of-type(3n), .inventory-card:nth-of-type(3n), .catalog-card:nth-of-type(3n), .routes-card:nth-of-type(3n)) {
  --card-accent: #f59e0b;
}

:where(.profit-panel .sales-card, .profit-component, .profit-source-item) {
  --card-accent: #f59e0b;
}

:where(.routes-panel .sales-card, .routes-card, .coverage-panel .sales-card) {
  --card-accent: #10b981;
}

:where(.catalog-panel .sales-card, .inventory-panel .sales-card, .inventory-card, .catalog-card) {
  --card-accent: #8b5cf6;
}

:where(.connectio-time-panel .sales-card, .rrhh-panel .sales-card) {
  --card-accent: #06b6d4;
}

:where(.admin-panel .sales-card, .source-panel .sales-card, .source-card, .sync-status-card) {
  --card-accent: #6366f1;
}

:where(
  .sales-toolbar,
  .routes-toolbar-primary,
  .sales-toolbar-primary,
  .inventory-toolbar,
  .catalog-toolbar,
  .tuu-toolbar,
  .rrhh-filters,
  .source-form,
  .admin-toolbar,
  .approval-filter-panel,
  .analysis-filter-panel
) {
  background: linear-gradient(135deg, #fff7ed, #eff6ff) !important;
  border: 1px solid rgba(245, 158, 11, .42) !important;
  border-left: 8px solid #f59e0b !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(245, 158, 11, .09) !important;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table
) {
  background: #eaf6ff !important;
  border: 1px solid rgba(14, 165, 233, .42) !important;
  border-left: 8px solid #0ea5e9 !important;
  border-radius: 22px !important;
  padding: 10px !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, .09) !important;
  overflow: auto !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) table {
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th {
  background: linear-gradient(135deg, #0f7cc8, #0ea5e9) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 12px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th:first-child {
  border-radius: 14px 0 0 14px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th:last-child {
  border-radius: 0 14px 14px 0 !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr {
  background: linear-gradient(135deg, #ffffff, #f1f9ff) !important;
  box-shadow: 0 8px 22px rgba(14, 116, 144, .075) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody td {
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
  padding: 11px 10px !important;
  vertical-align: middle !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody td:first-child {
  border-left: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 14px 0 0 14px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody td:last-child {
  border-right: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 0 14px 14px 0 !important;
}

:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis) article {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #0ea5e9) 16%, #ffffff), #f8fcff),
    #eef8ff !important;
  border: 1px solid color-mix(in srgb, var(--card-accent, #0ea5e9) 34%, #dbeafe) !important;
  border-left: 8px solid var(--card-accent, #0ea5e9) !important;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--card-accent, #0ea5e9) 13%, transparent) !important;
}

/* CONNECTIO workspace density v1: aprovechar ancho de escritorio y eliminar espacio muerto lateral. */
@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: clamp(188px, 13.5vw, 232px) minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .content {
    padding: 8px 10px 18px !important;
    max-width: none !important;
    width: 100% !important;
  }

  .smart-topbar {
    min-height: 58px !important;
    margin: -8px -10px 10px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(150px, .45fr) minmax(360px, 1fr) auto !important;
    gap: 10px !important;
  }

  .topbar-search input {
    min-height: 38px !important;
  }

  .topbar-actions {
    gap: 6px !important;
  }

  .module-active .workbench {
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    width: 100% !important;
  }

  .module-active .workbench-head {
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  :where(
    .source-panel,
    .admin-panel,
    .audit-panel,
    .import-panel,
    .inventory-panel,
    .catalog-panel,
    .sales-panel,
    .rendiciones-panel,
    .planes-entel-panel,
    .product-intel-panel,
    .coverage-panel,
    .tuu-panel,
    .profit-panel,
    .routes-panel,
    .cap-panel,
    .tv-panel,
    .liquidaciones-panel,
    .connectio-time-panel,
    .rrhh-panel,
    .module-tabbed-panel,
    .procedure-panel,
    .source-governed-panel,
    .ops-panel,
    .quality-panel,
    .goals-panel
  ) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  :where(.sales-layout, .inventory-layout, .catalog-layout, .routes-layout, .profit-layout, .coverage-layout, .tuu-layout, .rrhh-layout) {
    width: 100% !important;
    max-width: none !important;
  }

  :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) {
    width: 100% !important;
    max-width: none !important;
  }

  :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) table {
    width: 100% !important;
    min-width: 980px;
  }

  .goals-panel .sales-table table {
    min-width: 1120px !important;
  }

  .saas-goals-hero,
  .saas-goals-kpis,
  .saas-goals-grid,
  .connectio-home-board,
  .connectio-home-grid {
    width: 100% !important;
    max-width: none !important;
  }
}

/* CONNECTIO adaptive color v2: bloques mas marcados y grillas realmente adaptables. */
:root {
  --connectio-strong-blue: #0ea5e9;
  --connectio-strong-green: #10b981;
  --connectio-strong-violet: #8b5cf6;
  --connectio-strong-amber: #f59e0b;
  --connectio-strong-cyan: #06b6d4;
}

:where(
  .source-panel,
  .admin-panel,
  .audit-panel,
  .import-panel,
  .inventory-panel,
  .catalog-panel,
  .sales-panel,
  .rendiciones-panel,
  .planes-entel-panel,
  .product-intel-panel,
  .coverage-panel,
  .tuu-panel,
  .profit-panel,
  .routes-panel,
  .cap-panel,
  .tv-panel,
  .liquidaciones-panel,
  .connectio-time-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel,
  .ops-panel,
  .quality-panel,
  .goals-panel
) {
  background:
    radial-gradient(circle at 7% 3%, rgba(14, 165, 233, .20), transparent 20rem),
    radial-gradient(circle at 92% 8%, rgba(16, 185, 129, .18), transparent 18rem),
    linear-gradient(180deg, #dff3ff 0%, #edf9ff 44%, #e4f3ff 100%) !important;
}

:where(
  .sales-card,
  .routes-card,
  .inventory-card,
  .catalog-card,
  .control-card,
  .source-card,
  .source-status-card,
  .sync-status-card,
  .board-card,
  .editor-card,
  .profit-source-item,
  .profit-component,
  .tuu-card,
  .rrhh-card,
  .coverage-card,
  .procedure-card,
  .quality-card,
  .admin-card,
  .audit-card
) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--connectio-card-accent, #0ea5e9) 26%, #ffffff), color-mix(in srgb, var(--connectio-card-accent, #0ea5e9) 12%, #ffffff)),
    color-mix(in srgb, var(--connectio-card-accent, #0ea5e9) 18%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--connectio-card-accent, #0ea5e9) 58%, #ffffff) !important;
  border-left-width: 10px !important;
  box-shadow: 0 20px 44px color-mix(in srgb, var(--connectio-card-accent, #0ea5e9) 22%, transparent) !important;
}

:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 12vw, 230px), 1fr)) !important;
  gap: clamp(10px, 1vw, 16px) !important;
}

:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #0ea5e9) 30%, #ffffff), color-mix(in srgb, var(--card-accent, #0ea5e9) 13%, #ffffff)),
    #dff3ff !important;
  border-color: color-mix(in srgb, var(--card-accent, #0ea5e9) 60%, #ffffff) !important;
  border-left-width: 10px !important;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--card-accent, #0ea5e9) 22%, transparent) !important;
}

:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article:nth-child(5n+1) { --card-accent: var(--connectio-strong-blue); }
:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article:nth-child(5n+2) { --card-accent: var(--connectio-strong-green); }
:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article:nth-child(5n+3) { --card-accent: var(--connectio-strong-violet); }
:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article:nth-child(5n+4) { --card-accent: var(--connectio-strong-amber); }
:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article:nth-child(5n) { --card-accent: var(--connectio-strong-cyan); }

:where(.sales-kpis, .inventory-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis) article > span,
:where(.saas-goals-kpis article > span) {
  background: linear-gradient(135deg, var(--card-accent, #0ea5e9), color-mix(in srgb, var(--card-accent, #0ea5e9) 72%, #111827)) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--card-accent, #0ea5e9) 35%, transparent) !important;
}

:where(.sales-layout, .inventory-layout, .catalog-layout, .routes-layout, .profit-layout, .coverage-layout, .tuu-layout, .rrhh-layout, .saas-goals-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)) !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
}

:where(.sales-toolbar, .routes-toolbar-primary, .sales-toolbar-primary, .inventory-toolbar, .catalog-toolbar, .tuu-toolbar, .rrhh-filters, .source-form, .admin-toolbar, .approval-filter-panel, .analysis-filter-panel) {
  background: linear-gradient(135deg, #ffedd5, #dbeafe) !important;
  border-color: rgba(245, 158, 11, .68) !important;
  border-left-width: 10px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) {
  background: linear-gradient(135deg, #dff3ff, #eef7ff) !important;
  border-color: rgba(14, 165, 233, .62) !important;
  border-left-width: 10px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th {
  background: linear-gradient(135deg, #075985, #0284c7 55%, #06b6d4) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr {
  background: linear-gradient(135deg, #ffffff, #e0f2fe) !important;
}

@media (min-width: 1500px) {
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .module-active .workbench {
    padding: 12px !important;
  }

  :where(.sales-panel, .goals-panel, .routes-panel, .inventory-panel, .catalog-panel, .profit-panel, .rrhh-panel, .module-tabbed-panel) {
    padding: 16px !important;
  }
}

@media (max-width: 1180px) {
  .smart-topbar {
    grid-template-columns: 1fr !important;
  }

  .topbar-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) table {
    min-width: 820px !important;
  }
}

.sync-center-panel {
  --sync-blue: #0284c7;
  --sync-green: #16a34a;
  --sync-amber: #f59e0b;
  --sync-red: #ef4444;
  background: linear-gradient(135deg, #dbeafe, #ecfeff 45%, #dcfce7) !important;
  border: 2px solid rgba(14, 165, 233, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 24px 55px rgba(2, 132, 199, .18) !important;
}

.sync-center-hero {
  background:
    radial-gradient(circle at right top, rgba(34, 197, 94, .34), transparent 24rem),
    linear-gradient(135deg, #0f2a44, #075985 58%, #0891b2) !important;
  color: #fff !important;
  border-color: rgba(14, 165, 233, .7) !important;
}

.sync-center-hero h3,
.sync-center-hero p,
.sync-center-hero .eyebrow {
  color: #fff !important;
}

.sync-center-hero .sources-governance-cards article {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  color: #fff !important;
}

.sync-center-filters {
  background: linear-gradient(135deg, #fef3c7, #dbeafe) !important;
  border-left: 12px solid #f59e0b !important;
}

.sync-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(14px, 1.2vw, 20px);
}

.sync-domain-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  padding: clamp(18px, 1.4vw, 24px);
  border-radius: 24px;
  border: 2px solid rgba(14, 165, 233, .56);
  border-left-width: 12px;
  background: linear-gradient(135deg, #e0f2fe, #ffffff 48%, #dcfce7);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .09);
}

.sync-domain-card.sync-ok {
  border-left-color: var(--sync-green);
  background: linear-gradient(135deg, #bbf7d0, #ecfeff 52%, #ffffff);
}

.sync-domain-card.sync-warning {
  border-left-color: var(--sync-amber);
  background: linear-gradient(135deg, #fef3c7, #eff6ff 52%, #ffffff);
}

.sync-domain-card.sync-danger {
  border-left-color: var(--sync-red);
  background: linear-gradient(135deg, #fee2e2, #eff6ff 52%, #ffffff);
}

.sync-domain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-domain-head strong {
  color: #081a33;
  font-size: clamp(18px, 1.35vw, 24px);
}

.sync-domain-card p {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.sync-domain-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sync-domain-flow span,
.sync-domain-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(125, 211, 252, .65);
}

.sync-domain-flow b,
.sync-domain-metrics small {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sync-domain-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}

.sync-domain-metrics strong {
  color: #082f49;
  font-size: 22px;
}

.sync-domain-foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
}

.sync-domain-foot small {
  color: #475569;
}

.sync-preview-box {
  display: block;
}

.sync-preview-card {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 1.5vw, 24px);
  border-radius: 24px;
  border: 2px solid rgba(14, 165, 233, .75);
  border-left: 12px solid #2563eb;
  background: linear-gradient(135deg, #dbeafe, #ffffff 46%, #dcfce7);
  box-shadow: 0 22px 48px rgba(2, 132, 199, .18);
}

.sync-preview-card.danger {
  border-color: rgba(239, 68, 68, .7);
  border-left-color: #ef4444;
  background: linear-gradient(135deg, #fee2e2, #ffffff);
}

.sync-preview-card.success {
  border-color: rgba(34, 197, 94, .72);
  border-left-color: #16a34a;
  background: linear-gradient(135deg, #bbf7d0, #ffffff 48%, #dbeafe);
}

.sync-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sync-preview-head h4 {
  margin: 0;
  color: #082f49;
  font-size: clamp(22px, 1.7vw, 30px);
}

.sync-preview-head p {
  margin: 6px 0 0;
  color: #475569;
}

.sync-preview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.sync-preview-metrics span {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(14, 165, 233, .55);
  background: rgba(255, 255, 255, .82);
}

.sync-preview-metrics strong {
  color: #0f172a;
  font-size: 24px;
}

.sync-preview-metrics small {
  color: #0369a1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sync-preview-table {
  max-height: 330px;
  overflow: auto;
  border: 1px solid rgba(14, 165, 233, .45);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
}

.sync-preview-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.sync-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0284c7;
  color: #fff;
}

.sync-preview-table th,
.sync-preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(125, 211, 252, .45);
  text-align: left;
}

@media (max-width: 760px) {
  .sync-domain-flow {
    grid-template-columns: 1fr;
  }

  .sync-domain-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-preview-head {
    flex-direction: column;
  }
}

/* Sync center and importador order pass v1
   Sincronizacion, plan de carga, preview, commit y modales tecnicos con lectura controlada. */
.sync-center-panel,
.import-panel {
  --tech-blue: #0284c7;
  --tech-cyan: #0ea5e9;
  --tech-green: #10b981;
  --tech-amber: #f59e0b;
  --tech-violet: #7c3aed;
  --tech-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.4vw, 22px) !important;
  padding: clamp(16px, 1.4vw, 24px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(14, 165, 233, .44) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .20), transparent 23rem),
    radial-gradient(circle at 94% 8%, rgba(16, 185, 129, .18), transparent 22rem),
    linear-gradient(180deg, #dff4ff 0%, #f4fbff 48%, #eaf7ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .80),
    0 28px 70px rgba(8, 47, 73, .13) !important;
}

.sync-center-panel .sync-center-hero,
.import-panel .form-launch-card {
  min-height: 210px !important;
  border-radius: 28px !important;
  border: 2px solid rgba(14, 165, 233, .58) !important;
  border-left: 12px solid var(--tech-blue) !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(16, 185, 129, .28), transparent 18rem),
    linear-gradient(135deg, #08213f 0%, #0b5b8f 58%, #0ea5e9 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 54px rgba(2, 132, 199, .22) !important;
}

.sync-center-panel .sync-center-hero :where(h3, p, span, strong),
.import-panel .form-launch-card :where(h3, p, span, strong) {
  color: #fff !important;
}

.sync-center-panel .sync-center-hero h3,
.import-panel .form-launch-card h3 {
  font-size: clamp(34px, 3.2vw, 60px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.sync-center-panel .sync-center-hero p,
.import-panel .form-launch-card p {
  max-width: 850px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.55 !important;
}

.sync-center-panel .sources-governance-cards article {
  min-width: 150px !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

.sync-center-panel .sync-center-filters,
.import-panel .source-form,
.import-panel .import-form {
  border-radius: 24px !important;
  border: 1px solid rgba(245, 158, 11, .58) !important;
  border-left: 12px solid var(--tech-amber) !important;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, .98), rgba(240, 249, 255, .98)) !important;
  box-shadow: 0 16px 34px rgba(180, 83, 9, .09) !important;
}

.sync-center-panel :where(label, .eyebrow),
.import-panel :where(label, .eyebrow) {
  color: #334155 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.sync-center-panel :where(input, select, textarea),
.import-panel :where(input, select, textarea) {
  min-height: 46px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.sync-center-panel .import-actions,
.import-panel .import-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.sync-center-panel .import-actions button,
.import-panel .import-actions button,
.import-panel .primary-btn {
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(2, 132, 199, .42) !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(2, 132, 199, .17) !important;
}

.sync-center-panel .import-actions button:nth-child(2n),
.import-panel .import-actions button:nth-child(2n) {
  background: linear-gradient(135deg, #10b981, #0284c7) !important;
}

.sync-center-panel .source-status,
.import-panel .source-status,
.import-panel .modal-inline-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .38) !important;
  border-left: 8px solid var(--tech-cyan) !important;
  background: linear-gradient(135deg, #e0f2fe, #f8fbff) !important;
  color: #075985 !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.sync-domain-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)) !important;
}

.sync-domain-card {
  min-height: 320px !important;
  border-radius: 26px !important;
  border-width: 2px !important;
  border-left-width: 12px !important;
  box-shadow: 0 24px 50px rgba(15, 23, 42, .11) !important;
}

.sync-domain-card p {
  font-size: 15px !important;
}

.sync-domain-flow span,
.sync-domain-metrics span,
.sync-preview-metrics span {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(14, 165, 233, .35) !important;
  box-shadow: inset 0 -3px 0 rgba(14, 165, 233, .13) !important;
}

.sync-preview-card {
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, .98), rgba(255, 255, 255, .98) 48%, rgba(220, 252, 231, .96)) !important;
}

.sync-preview-table,
.import-panel .import-results,
.import-panel #importPreview,
.import-panel .data-editor-body {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.sync-preview-table table,
.import-panel #importPreview table,
.import-panel .import-results table,
.import-panel .data-editor-body table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.sync-preview-table th,
.import-panel #importPreview th,
.import-panel .import-results th,
.import-panel .data-editor-body th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #fff !important;
}

.sync-preview-table td,
.import-panel #importPreview td,
.import-panel .import-results td,
.import-panel .data-editor-body td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .88) !important;
  border-top: 1px solid rgba(14, 165, 233, .20) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .20) !important;
}

.import-panel .platform-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 23, 51, .56) !important;
  backdrop-filter: blur(9px) !important;
}

.import-panel .platform-modal-card {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 920px) !important;
  overflow: auto !important;
  border-radius: 28px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  border-left: 12px solid var(--tech-violet) !important;
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  box-shadow: 0 34px 90px rgba(8, 33, 63, .34) !important;
}

.import-panel .platform-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: linear-gradient(135deg, rgba(240, 249, 255, .98), rgba(255, 255, 255, .98)) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .24) !important;
}

.import-panel .data-editor-body {
  display: grid !important;
  gap: 14px !important;
}

.import-panel textarea#importContenido {
  min-height: 260px !important;
  font-family: Consolas, "Courier New", monospace !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px) {
  .sync-center-panel,
  .import-panel {
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .sync-center-panel .sync-center-hero,
  .import-panel .form-launch-card {
    min-height: auto !important;
  }
}

/* ==========================================================================
   CONNECTIO DESIGN SYSTEM v1
   Base SaaS B2B: tokens, componentes reutilizables y mapeo de clases legacy.
   Prioriza consistencia sobre decoracion. No depende de frameworks externos.
   ========================================================================== */
:root {
  color-scheme: light;
  --cx-blue-950: #071a33;
  --cx-blue-900: #0b2447;
  --cx-blue-800: #12345f;
  --cx-blue-700: #0f5f9f;
  --cx-blue-600: #087ac2;
  --cx-blue-500: #0ea5e9;
  --cx-blue-100: #e0f2fe;
  --cx-blue-50: #f0f9ff;
  --cx-gray-950: #0f172a;
  --cx-gray-800: #1e293b;
  --cx-gray-700: #334155;
  --cx-gray-600: #475569;
  --cx-gray-500: #64748b;
  --cx-gray-300: #cbd5e1;
  --cx-gray-200: #e2e8f0;
  --cx-gray-100: #f1f5f9;
  --cx-gray-50: #f8fafc;
  --cx-white: #ffffff;
  --cx-bg: #f4f7fb;
  --cx-surface: #ffffff;
  --cx-surface-soft: #f8fafc;
  --cx-surface-raised: #ffffff;
  --cx-text: #0f172a;
  --cx-text-soft: #475569;
  --cx-text-muted: #64748b;
  --cx-border: #dbe7f3;
  --cx-border-strong: #b9d4ec;
  --cx-success: #16a34a;
  --cx-success-soft: #dcfce7;
  --cx-warning: #d97706;
  --cx-warning-soft: #fef3c7;
  --cx-danger: #dc2626;
  --cx-danger-soft: #fee2e2;
  --cx-info: #0284c7;
  --cx-info-soft: #e0f2fe;
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 20px;
  --cx-space-6: 24px;
  --cx-space-8: 32px;
  --cx-radius-sm: 10px;
  --cx-radius-md: 14px;
  --cx-radius-lg: 18px;
  --cx-radius-xl: 24px;
  --cx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --cx-shadow-md: 0 12px 30px rgba(15, 23, 42, .08);
  --cx-shadow-lg: 0 22px 60px rgba(15, 23, 42, .10);
  --cx-font-xs: 11px;
  --cx-font-sm: 12px;
  --cx-font-md: 14px;
  --cx-font-lg: 18px;
  --cx-font-xl: 24px;
  --cx-font-2xl: 32px;
  --cx-header-height: 72px;
  --cx-sidebar-width: 260px;
  --cx-z-header: 30;
  --cx-z-modal: 80;
}

[data-theme="dark"] {
  color-scheme: dark;
  --cx-bg: #07111f;
  --cx-surface: #0f1b2d;
  --cx-surface-soft: #111f33;
  --cx-surface-raised: #13243a;
  --cx-text: #e5edf7;
  --cx-text-soft: #cbd5e1;
  --cx-text-muted: #94a3b8;
  --cx-border: #27415f;
  --cx-border-strong: #365a80;
  --cx-blue-50: #082f49;
  --cx-blue-100: #0b3b5f;
  --cx-gray-50: #0f1b2d;
  --cx-gray-100: #13243a;
  --cx-gray-200: #27415f;
  --cx-white: #0f1b2d;
  --cx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --cx-shadow-md: 0 14px 34px rgba(0, 0, 0, .34);
  --cx-shadow-lg: 0 24px 70px rgba(0, 0, 0, .42);
}

body {
  background: var(--cx-bg);
  color: var(--cx-text);
}

.cx-shell,
.app-shell {
  background: var(--cx-bg);
}

.cx-sidebar,
.sidebar {
  background: linear-gradient(180deg, var(--cx-blue-950), var(--cx-blue-900));
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.cx-header,
.smart-topbar {
  min-height: var(--cx-header-height);
  background: color-mix(in srgb, var(--cx-surface) 92%, transparent);
  border-bottom: 1px solid var(--cx-border);
  box-shadow: var(--cx-shadow-sm);
  backdrop-filter: blur(12px);
}

.cx-card,
:where(.workbench, .access-gate, .search-card, .module-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .modal-card, .editor-card, .profit-component, .profit-source-item) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-xl);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-sm);
  color: var(--cx-text);
}

:where(.sales-card, .inventory-card, .inventory-hero-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .profit-component, .profit-source-item, .time-filters, .rendiciones-period, .ops-card) {
  padding: var(--cx-space-5);
}

.cx-module-header,
:where(.sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-xl);
  background: linear-gradient(135deg, var(--cx-surface), var(--cx-blue-50));
  box-shadow: var(--cx-shadow-sm);
  color: var(--cx-text);
}

.cx-kpi,
:where(.kpis article, .sales-kpis article, .inventory-kpis article, .time-kpis article, .production-kpis article, .catalog-kpis article, .saas-goals-kpis article, .saas-inventory-kpis article) {
  border: 1px solid var(--cx-border);
  border-left: 4px solid var(--cx-blue-500);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-sm);
  color: var(--cx-text);
}

:where(.sales-kpis, .inventory-kpis, .time-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis, .saas-inventory-kpis) article strong,
.cx-kpi strong {
  color: var(--cx-text);
  letter-spacing: -.03em;
}

:where(.sales-kpis, .inventory-kpis, .time-kpis, .production-kpis, .catalog-kpis, .saas-goals-kpis, .saas-inventory-kpis) article span,
.cx-kpi span {
  color: var(--cx-text-muted);
}

.cx-button,
:where(button, .primary-btn, .secondary-btn, .google-login-btn, .connectia-btn) {
  min-height: 40px;
  border-radius: var(--cx-radius-md);
  border: 1px solid var(--cx-border-strong);
  background: var(--cx-surface);
  color: var(--cx-blue-800);
  font-weight: 850;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.cx-button:hover,
:where(button, .primary-btn, .secondary-btn, .google-login-btn, .connectia-btn):hover {
  border-color: var(--cx-blue-500);
  background: var(--cx-blue-50);
  transform: translateY(-1px);
}

.cx-button-primary,
:where(.primary-btn, button[data-sales-action="buscar"], button[data-ranking-action="buscar"], button[data-rendiciones-action="actualizar"]) {
  border-color: var(--cx-blue-600);
  background: var(--cx-blue-600);
  color: #fff;
}

.cx-button-secondary,
:where(.secondary-btn, .theme-toggle-btn) {
  border-color: var(--cx-border);
  background: var(--cx-surface-soft);
  color: var(--cx-text);
}

.cx-input,
.cx-select,
:where(input, select, textarea) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  background: var(--cx-surface);
  color: var(--cx-text);
  outline: none;
}

:where(input, select, textarea):focus {
  border-color: var(--cx-blue-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-blue-500) 18%, transparent);
}

.cx-tabs,
:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-sm);
}

:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs) button {
  border-radius: var(--cx-radius-md);
  color: var(--cx-text-soft);
}

:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs) button.active {
  border-color: var(--cx-blue-500);
  background: var(--cx-blue-50);
  color: var(--cx-blue-800);
}

.cx-table,
:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-sm);
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) table {
  border-collapse: separate;
  border-spacing: 0;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th {
  background: var(--cx-blue-50);
  color: var(--cx-blue-900);
  border-bottom: 1px solid var(--cx-border);
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr {
  background: var(--cx-surface);
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody td {
  border-bottom: 1px solid var(--cx-border);
  color: var(--cx-text);
}

.cx-badge,
:where(.status-pill, .rendiciones-state, .source-status, .module-action-hint) {
  border-radius: 999px;
  border: 1px solid var(--cx-border);
  background: var(--cx-surface-soft);
  color: var(--cx-text-soft);
}

.cx-alert {
  border: 1px solid var(--cx-border);
  border-left: 4px solid var(--cx-info);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-info-soft);
  color: var(--cx-text);
  padding: var(--cx-space-4);
}

.cx-loading-state,
.cx-empty-state,
:where(.source-status, .sales-saas-dashboard-loading) {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface-soft);
  color: var(--cx-text-soft);
}

.cx-dashboard-grid,
:where(.module-grid, .sales-layout, .rendiciones-grid) {
  gap: var(--cx-space-5);
}

.analysis-filter-panel,
.sales-toolbar,
.rendiciones-filters,
.routes-map-actions,
.approval-filter-panel {
  border: 1px solid var(--cx-border);
  border-left: 4px solid var(--cx-blue-500);
  border-radius: var(--cx-radius-lg);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-sm);
}

.hero {
  background: linear-gradient(135deg, var(--cx-blue-950), var(--cx-blue-800));
  border-radius: var(--cx-radius-xl);
  box-shadow: var(--cx-shadow-md);
}

.theme-toggle-btn {
  padding-inline: var(--cx-space-4);
  white-space: nowrap;
}

[data-theme="dark"] :where(.topbar-search input, .login-panel input, input, select, textarea) {
  background: var(--cx-surface-raised);
}

[data-theme="dark"] :where(.sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) {
  background: linear-gradient(135deg, var(--cx-surface), #0b2740);
}

[data-theme="dark"] :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th {
  background: #102b45;
  color: #dbeafe;
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #06101f, #0b2447);
}

/* ==========================================================================
   CONNECTIO DESIGN SYSTEM coverage v1.1
   Capa puente para modulos secundarios: mas contraste, menos blanco plano,
   pestañas compactas y paneles con acento visual sin tocar logica.
   ========================================================================== */
:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) {
  width: min(100%, 100%);
  border: 1px solid color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 42%, var(--cx-border));
  border-radius: var(--cx-radius-xl);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--cx-blue-50) 70%, #fff), var(--cx-surface-soft));
  box-shadow: var(--cx-shadow-md);
}

:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) :where(.sales-card, .routes-card, .source-card, .control-card, .board-card, .ops-card, .sync-status-card, .profit-source-item, .profit-component, .kpi-card, .metric-card) {
  border: 1px solid color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 34%, var(--cx-border));
  border-left: 5px solid var(--panel-line, var(--cx-blue-500));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 8%, var(--cx-surface)), var(--cx-surface));
  box-shadow: var(--cx-shadow-sm);
}

:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) :where(.module-subtabs, .routes-tabs, .tuu-tabs, .rrhh-tabs, .planes-entel-tabs, .commerce-tabs, .profit-tabs) {
  display: flex;
  align-items: center;
  gap: var(--cx-space-2);
  overflow-x: auto;
  flex-wrap: nowrap;
  padding: var(--cx-space-2);
  border-color: color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 42%, var(--cx-border));
  background: color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 9%, var(--cx-surface));
}

:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) :where(.module-subtabs, .routes-tabs, .tuu-tabs, .rrhh-tabs, .planes-entel-tabs, .commerce-tabs, .profit-tabs) button {
  flex: 0 0 auto;
  min-width: max-content;
  border: 1px solid color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 32%, var(--cx-border));
  background: var(--cx-surface);
}

:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) :where(.module-subtabs, .routes-tabs, .tuu-tabs, .rrhh-tabs, .planes-entel-tabs, .commerce-tabs, .profit-tabs) button.active {
  background: linear-gradient(135deg, var(--panel-line, var(--cx-blue-600)), var(--cx-blue-600));
  border-color: var(--panel-line, var(--cx-blue-600));
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 24%, transparent);
}

:where(.module-subpanel.active, .routes-panel [data-routes-panel].active, .tuu-panel [data-tuu-panel].active, .rrhh-panel [data-rrhh-panel].active, .commerce-panel [data-coverage-panel].active) {
  border: 1px solid color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 36%, var(--cx-border));
  border-radius: var(--cx-radius-xl);
  background: color-mix(in srgb, var(--cx-surface) 86%, var(--cx-blue-50));
  box-shadow: var(--cx-shadow-sm);
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--cx-blue-50) 42%, var(--cx-surface));
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr:hover {
  background: color-mix(in srgb, var(--cx-blue-100) 54%, var(--cx-surface));
}

.workbench {
  max-width: none;
}

.workbench > :where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) {
  inline-size: 100%;
}

@media (min-width: 1280px) {
  .workbench {
    padding-inline: clamp(18px, 2vw, 34px);
  }

  :where(.sales-layout, .inventory-layout, .routes-layout, .rendiciones-grid, .profit-summary-grid, .control-dashboard) {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  }
}

[data-theme="dark"] :where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel
) {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 24%, transparent), transparent 34%),
    linear-gradient(135deg, var(--cx-surface), var(--cx-surface-soft));
}

[data-theme="dark"] :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--cx-blue-100) 20%, var(--cx-surface));
}

[data-theme="dark"] :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr:hover {
  background: color-mix(in srgb, var(--cx-blue-100) 34%, var(--cx-surface));
}

/* ==========================================================================
   CONNECTIO DESIGN SYSTEM workspace fit v1.2
   Mejor uso de escritorio: menos aire perdido, titulos contenidos y tarjetas
   con lectura mas fuerte para operacion diaria.
   ========================================================================== */
@media (min-width: 1180px) {
  .app-shell {
    grid-template-columns: clamp(204px, 12vw, 238px) minmax(0, 1fr) !important;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  .module-active .workbench,
  .workbench {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: clamp(12px, 1.25vw, 22px) !important;
  }

  .module-active .workbench-head,
  .workbench-head {
    margin-bottom: clamp(10px, 1vw, 16px) !important;
  }

  .smart-topbar {
    min-height: clamp(54px, 4.8vw, 66px) !important;
    padding-block: 8px !important;
  }
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) {
  padding: clamp(18px, 2vw, 30px) !important;
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) h1,
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) h2,
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero) h3,
.module-active .workbench-head h2 {
  font-size: clamp(24px, 2.6vw, 44px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

:where(.cx-kpi, .sales-kpis article, .inventory-kpis article, .time-kpis article, .catalog-kpis article, .saas-goals-kpis article, .saas-inventory-kpis article) {
  min-height: auto !important;
  padding: clamp(14px, 1.25vw, 20px) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cx-blue-500) 10%, var(--cx-surface)), var(--cx-surface)) !important;
}

:where(.cx-kpi, .sales-kpis article, .inventory-kpis article, .time-kpis article, .catalog-kpis article, .saas-goals-kpis article, .saas-inventory-kpis article) strong {
  font-size: clamp(24px, 2.1vw, 36px) !important;
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .profit-component, .profit-source-item, .ops-card) {
  border-color: color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 26%, var(--cx-border)) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) {
  overflow: auto;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) th,
:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) td {
  padding-block: clamp(8px, .7vw, 12px) !important;
  padding-inline: clamp(10px, .85vw, 14px) !important;
  vertical-align: middle;
}

:where(.analysis-filter-panel, .sales-toolbar, .rendiciones-filters, .routes-map-actions, .approval-filter-panel, .inventory-toolbar) {
  gap: var(--cx-space-3) !important;
  padding: var(--cx-space-4) !important;
}

:where(.analysis-filter-panel, .sales-toolbar, .rendiciones-filters, .routes-map-actions, .approval-filter-panel, .inventory-toolbar) :where(input, select, button) {
  min-height: 42px;
}

/* Back Office TUU: legibilidad reforzada para tablas y fuentes.
   Evita que los textos queden lavados sobre fondos celestes/blancos. */
.tuu-table {
  background: #f8fbff !important;
  border-color: rgba(14, 165, 233, .78) !important;
}

.tuu-table table {
  min-width: 1180px;
}

.tuu-table thead th {
  background: linear-gradient(135deg, #0b88c9, #0ea5e9) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

.tuu-table tbody tr {
  background: #ffffff !important;
  box-shadow: inset 0 -1px 0 rgba(14, 165, 233, .24) !important;
}

.tuu-table tbody tr:nth-child(even) {
  background: #eefaff !important;
}

.tuu-table tbody tr:hover {
  background: #dff4ff !important;
}

.tuu-table tbody td,
.tuu-table tbody td strong,
.tuu-table tbody td b {
  color: #071733 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.tuu-table tbody td {
  font-weight: 700 !important;
}

.tuu-table tbody td small {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.tuu-table :where(button, .status-pill, .tuu-badge) {
  opacity: 1 !important;
}

.tuu-toolbar :where(label span, input, select, button),
.tuu-state-chips button,
#tuuCounter,
#tuuTaxControlStatus {
  color: #071733 !important;
  opacity: 1 !important;
}

.tuu-point-chart {
  width: 100%;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, .42);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #e9f8ff);
}

.tuu-point-chart svg {
  width: 100%;
  min-width: 680px;
  height: auto;
  display: block;
}

.tuu-point-chart .grid-line {
  stroke: rgba(14, 165, 233, .22);
  stroke-width: 1.5;
}

.tuu-point-chart .point-line {
  fill: none;
  stroke: url(#tuuCommerceLineGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 14px rgba(14, 116, 144, .28));
}

.tuu-point-chart .point-node circle {
  fill: #ffffff;
  stroke: #0284c7;
  stroke-width: 5;
}

.tuu-point-chart .point-node text {
  fill: #071733;
  font-size: 16px;
  font-weight: 900;
  text-anchor: middle;
}

@media (min-width: 1440px) {
  :where(.module-grid, .sales-layout, .inventory-layout, .routes-layout, .rendiciones-grid, .profit-summary-grid, .control-dashboard) {
    gap: clamp(16px, 1.35vw, 26px) !important;
  }

  :where(.module-card, .cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card) {
    border-radius: clamp(18px, 1.2vw, 24px) !important;
  }
}

/* ==========================================================================
   CONNECTIO DESIGN SYSTEM critical modules v1.3
   Ajuste puntual para Ventas, Metas, Rutas y Dashboard TV.
   ========================================================================== */
.sales-panel {
  --panel-line: #2563eb;
}

.goals-panel {
  --panel-line: #f59e0b;
}

.routes-panel {
  --panel-line: #14b8a6;
}

.tv-panel {
  --panel-line: #8b5cf6;
}

:where(.sales-panel, .goals-panel, .routes-panel) :where(.sales-module-hero, .goals-hero, .routes-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero) {
  border: 1px solid color-mix(in srgb, var(--panel-line) 36%, var(--cx-border));
  border-left: 8px solid var(--panel-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-line) 14%, var(--cx-surface)), var(--cx-surface));
  box-shadow: var(--cx-shadow-md);
}

:where(.sales-panel, .goals-panel, .routes-panel) :where(.sales-module-hero, .goals-hero, .routes-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero) p {
  max-width: 78ch;
  color: var(--cx-text-soft);
}

:where(.sales-panel, .goals-panel, .routes-panel) :where(.sales-kpis, .routes-kpis, .saas-sales-kpis, .saas-goals-kpis, .saas-routes-kpis) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 1vw, 16px);
}

:where(.sales-panel, .goals-panel, .routes-panel) :where(.sales-kpis, .routes-kpis, .saas-sales-kpis, .saas-goals-kpis, .saas-routes-kpis) article {
  border: 1px solid color-mix(in srgb, var(--panel-line) 30%, var(--cx-border));
  border-left: 6px solid var(--panel-line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-line) 12%, var(--cx-surface)), var(--cx-surface));
  box-shadow: var(--cx-shadow-sm);
}

.sales-panel :where(.sales-pie-section, .sales-card, .saas-sales-chart, .saas-sales-ranking, .saas-sales-alerts),
.goals-panel :where(.sales-card, .saas-goals-progress, .saas-goals-ranking, .saas-goals-chart),
.routes-panel :where(.routes-card, .saas-routes-chart, .saas-routes-ranking, .saas-routes-summary) {
  border: 1px solid color-mix(in srgb, var(--panel-line) 28%, var(--cx-border));
  border-top: 4px solid var(--panel-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-line) 7%, var(--cx-surface)), var(--cx-surface));
}

.goals-panel :where(.sales-table, .inventory-bars, .saas-goals-company-bars, .saas-goals-bars) {
  border-color: color-mix(in srgb, var(--panel-line) 34%, var(--cx-border)) !important;
}

.goals-panel :where(.sales-table th, .inventory-bars table thead th) {
  background: color-mix(in srgb, var(--panel-line) 18%, var(--cx-blue-50)) !important;
}

.routes-panel .routes-map-actions {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) auto auto;
  align-items: end;
  background: color-mix(in srgb, var(--panel-line) 9%, var(--cx-surface));
}

.routes-panel .routes-map-duo {
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(0, 1.35fr);
  gap: clamp(14px, 1.2vw, 22px);
}

.routes-panel .routes-google-embed,
.routes-panel .routes-route-map-real {
  min-height: clamp(360px, 44vh, 620px);
  border: 1px solid color-mix(in srgb, var(--panel-line) 36%, var(--cx-border));
  border-radius: var(--cx-radius-xl);
  overflow: hidden;
}

.routes-panel .routes-route-timeline {
  max-height: clamp(150px, 18vh, 230px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--panel-line) 28%, var(--cx-border));
  border-radius: var(--cx-radius-lg);
  background: color-mix(in srgb, var(--panel-line) 6%, var(--cx-surface));
}

.routes-panel .route-point-detail {
  border-left: 6px solid var(--panel-line);
}

.tv-55-panel {
  background: radial-gradient(circle at top left, rgba(59, 130, 246, .16), transparent 35%), #07111f !important;
}

.tv-55-panel .tv-stage {
  padding: clamp(14px, 1.35vw, 26px) !important;
}

.tv-55-panel .tv-broadcast-strip {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: clamp(8px, .8vw, 14px) !important;
}

.tv-55-panel .tv-broadcast-strip article,
.tv-55-panel .tv-metrics article,
.tv-55-panel .tv-chart,
.tv-55-panel .tv-list,
.tv-55-panel .tv-alerts article {
  border-color: rgba(125, 211, 252, .24) !important;
  background: rgba(15, 35, 60, .88) !important;
}

.tv-55-panel .tv-slide-head h2 {
  font-size: clamp(28px, 3vw, 54px) !important;
}

.tv-55-panel .tv-slide-head p {
  font-size: clamp(13px, 1.05vw, 18px) !important;
}

.tv-55-panel .tv-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: clamp(10px, .9vw, 16px) !important;
}

.tv-55-panel .tv-metrics strong {
  font-size: clamp(28px, 2.8vw, 48px) !important;
}

.tv-55-panel .tv-content-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr) !important;
  gap: clamp(12px, 1.1vw, 22px) !important;
}

.tv-55-panel .tv-route-board {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr) !important;
  gap: clamp(12px, 1vw, 20px) !important;
}

.tv-55-panel .tv-route-map-wrap .routes-route-map-real,
.tv-vendor-route-map .routes-route-map-real {
  min-height: clamp(320px, 46vh, 620px) !important;
}

.tv-55-panel .tv-route-side {
  max-height: clamp(360px, 62vh, 720px);
  overflow: auto;
}

@media (max-width: 1350px) {
  .routes-panel .routes-map-actions,
  .routes-panel .routes-map-duo,
  .tv-55-panel .tv-content-grid,
  .tv-55-panel .tv-route-board {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   CONNECTIO DESIGN SYSTEM route-tv visual QA v1.4
   Pulido final para que Rutas y TV sean mas claros en revision operativa.
   ========================================================================== */
.routes-panel .routes-module-hero {
  position: relative;
  overflow: hidden;
}

.routes-panel .routes-module-hero::after {
  content: "Mapa · Visitas · Evidencias · Productividad";
  position: absolute;
  right: clamp(18px, 2vw, 34px);
  bottom: clamp(14px, 1.4vw, 22px);
  max-width: min(360px, 38%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-line) 36%, var(--cx-border));
  background: color-mix(in srgb, var(--panel-line) 12%, var(--cx-surface));
  color: var(--cx-text-soft);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.routes-panel .routes-map-selected-banner {
  border: 1px solid color-mix(in srgb, var(--panel-line) 46%, var(--cx-border));
  border-left: 8px solid var(--panel-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-line) 16%, var(--cx-surface)), var(--cx-surface));
}

.routes-panel .routes-map-selected-banner strong {
  font-size: clamp(20px, 1.8vw, 34px);
}

.routes-panel .routes-map-banner-actions a,
.routes-panel .routes-map-banner-actions button {
  min-height: 38px;
  border-radius: 999px;
}

.routes-panel .routes-route-map-real svg {
  width: 100%;
  height: 100%;
}

.routes-panel .routes-route-map-real .route-map-label {
  font-size: clamp(12px, .9vw, 18px);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .82);
  stroke-width: 3px;
}

.tv-55-panel .tv-control-bar {
  border: 1px solid rgba(125, 211, 252, .24);
  background: rgba(7, 17, 31, .86);
  border-radius: 18px;
}

.tv-55-panel .tv-tabs {
  display: none !important;
}

.tv-55-panel .tv-ticker {
  max-height: 42px;
  overflow: hidden;
}

.tv-55-panel .tv-chart h4,
.tv-55-panel .tv-list h4,
.tv-55-panel .tv-route-side h3 {
  font-size: clamp(16px, 1.15vw, 24px) !important;
}

.tv-55-panel .tv-bar {
  min-height: 38px;
}

.tv-55-panel .tv-bar div {
  min-height: 10px;
}

.tv-55-panel .tv-route-map-wrap .routes-map-selected-banner {
  padding: clamp(10px, .9vw, 16px) !important;
}

.tv-55-panel .tv-route-map-wrap .routes-map-selected-banner::after {
  display: none;
}

.tv-55-panel .tv-route-map-wrap .route-point-detail {
  max-height: clamp(180px, 26vh, 320px);
  overflow: auto;
}

@media (max-width: 1100px) {
  .routes-panel .routes-module-hero::after {
    position: static;
    display: inline-flex;
    max-width: 100%;
    margin-top: 12px;
  }
}

/* Dashboard TV order pass v2
   Sala 55 pulgadas: lectura compacta, contrastada y sin pestañas invasivas. */
.tv-55-panel {
  --tv-blue: #38bdf8;
  --tv-green: #22c55e;
  --tv-amber: #f59e0b;
  --tv-violet: #8b5cf6;
  --tv-red: #fb7185;
  width: min(100%, 1920px) !important;
  max-width: none !important;
  padding: 10px !important;
  border: 1px solid rgba(56, 189, 248, .28) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(56, 189, 248, .20), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(34, 197, 94, .14), transparent 28%),
    linear-gradient(135deg, #06111f, #0b1f38 56%, #06111f) !important;
  box-shadow: 0 28px 70px rgba(2, 6, 23, .28) !important;
}

.tv-55-panel .tv-stage {
  min-height: clamp(660px, 78vh, 920px) !important;
  padding: clamp(12px, 1vw, 20px) !important;
  border: 1px solid rgba(125, 211, 252, .22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(rgba(125, 211, 252, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .055) 1px, transparent 1px),
    rgba(5, 15, 30, .92) !important;
  background-size: 56px 56px, 56px 56px, auto !important;
}

.tv-55-panel .tv-control-bar {
  min-height: 60px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(125, 211, 252, .3) !important;
  border-left: 7px solid var(--tv-blue) !important;
  border-radius: 18px !important;
  background: rgba(8, 25, 48, .92) !important;
  box-shadow: 0 16px 34px rgba(2, 6, 23, .22) !important;
}

.tv-55-panel .tv-control-bar strong {
  color: #ffffff !important;
  font-size: clamp(18px, 1.4vw, 26px) !important;
  letter-spacing: -.02em !important;
}

.tv-55-panel .tv-control-bar small {
  color: #bae6fd !important;
  font-size: clamp(11px, .85vw, 14px) !important;
  font-weight: 760 !important;
}

.tv-55-panel .tv-live-dot {
  color: #052e16 !important;
  background: linear-gradient(135deg, #86efac, #22c55e) !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, .34) !important;
}

.tv-55-panel .tv-control-actions {
  gap: 8px !important;
}

.tv-55-panel .tv-control-actions button {
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-radius: 999px !important;
  color: #e0f2fe !important;
  background: rgba(15, 45, 78, .92) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.tv-55-panel .tv-control-actions button:hover {
  color: #06111f !important;
  background: linear-gradient(135deg, #bae6fd, #67e8f9) !important;
}

.tv-55-panel .tv-refresh-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(125, 211, 252, .14) !important;
}

.tv-55-panel .tv-refresh-track i {
  background: linear-gradient(90deg, var(--tv-blue), var(--tv-green)) !important;
}

.tv-55-panel .tv-broadcast-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}

.tv-55-panel .tv-broadcast-strip article {
  min-height: 78px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-left: 6px solid var(--tv-blue) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 45, 78, .96), rgba(15, 35, 60, .92)) !important;
}

.tv-55-panel .tv-broadcast-strip article:nth-child(2) {
  border-left-color: var(--tv-green) !important;
}

.tv-55-panel .tv-broadcast-strip article:nth-child(3) {
  border-left-color: var(--tv-violet) !important;
}

.tv-55-panel .tv-broadcast-strip article:nth-child(4) {
  border-left-color: var(--tv-amber) !important;
}

.tv-55-panel .tv-broadcast-strip span,
.tv-55-panel .tv-metrics span,
.tv-55-panel .tv-count-card span {
  color: #93c5fd !important;
  font-size: clamp(10px, .72vw, 12px) !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.tv-55-panel .tv-broadcast-strip strong {
  color: #ffffff !important;
  font-size: clamp(20px, 1.6vw, 30px) !important;
  letter-spacing: -.035em !important;
}

.tv-55-panel .tv-tabs {
  display: none !important;
}

.tv-55-panel .tv-slide {
  min-height: clamp(500px, 57vh, 700px) !important;
  padding: clamp(14px, 1vw, 22px) !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-radius: 22px !important;
  background: rgba(7, 20, 39, .74) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

.tv-55-panel .tv-slide-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.tv-55-panel .tv-slide-head h2 {
  max-width: 1080px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3.05vw, 58px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.tv-55-panel .tv-slide-head p {
  max-width: 980px !important;
  color: #bae6fd !important;
  font-size: clamp(12px, .92vw, 17px) !important;
  font-weight: 760 !important;
}

.tv-55-panel .tv-slide-head > strong {
  min-width: 74px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  color: #06111f !important;
  background: linear-gradient(135deg, #bae6fd, #22c55e) !important;
  font-size: clamp(18px, 1.4vw, 28px) !important;
  text-align: center !important;
}

.tv-55-panel .tv-area-context,
.tv-55-panel .tv-signal-strip {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.tv-55-panel .tv-area-context {
  padding: 8px !important;
  border: 1px solid rgba(125, 211, 252, .2) !important;
  border-radius: 16px !important;
  background: rgba(15, 35, 60, .72) !important;
}

.tv-55-panel .tv-area-badge,
.tv-55-panel .tv-area-context em,
.tv-55-panel .tv-area-context strong {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: clamp(10px, .72vw, 12px) !important;
  font-weight: 950 !important;
}

.tv-55-panel .tv-signal-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
}

.tv-55-panel .tv-signal-strip article {
  min-height: 70px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(125, 211, 252, .22) !important;
  border-left: 6px solid var(--tv-green) !important;
  border-radius: 16px !important;
  background: rgba(15, 45, 78, .9) !important;
}

.tv-55-panel .tv-signal-strip strong {
  color: #ffffff !important;
  font-size: clamp(17px, 1.35vw, 26px) !important;
}

.tv-55-panel .tv-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

.tv-55-panel .tv-metrics article,
.tv-55-panel .tv-count-card {
  min-height: 96px !important;
  padding: 14px !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-left: 6px solid var(--tv-blue) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 45, 78, .96), rgba(10, 30, 54, .92)) !important;
  box-shadow: 0 14px 32px rgba(2, 6, 23, .22) !important;
}

.tv-55-panel .tv-metrics article:nth-child(2n) {
  border-left-color: var(--tv-green) !important;
}

.tv-55-panel .tv-metrics article:nth-child(3n) {
  border-left-color: var(--tv-amber) !important;
}

.tv-55-panel .tv-metrics strong,
.tv-55-panel .tv-count-card strong {
  color: #ffffff !important;
  font-size: clamp(28px, 2.45vw, 46px) !important;
  letter-spacing: -.05em !important;
}

.tv-55-panel .tv-content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
  gap: 14px !important;
}

.tv-55-panel .tv-chart,
.tv-55-panel .tv-list,
.tv-55-panel .tv-alerts article {
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-left: 7px solid var(--tv-blue) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 45, 78, .94), rgba(10, 30, 54, .9)) !important;
  box-shadow: 0 14px 32px rgba(2, 6, 23, .22) !important;
}

.tv-55-panel .tv-chart h4,
.tv-55-panel .tv-list h4,
.tv-55-panel .tv-route-side h3 {
  color: #ffffff !important;
  font-size: clamp(18px, 1.25vw, 25px) !important;
  letter-spacing: -.025em !important;
}

.tv-55-panel .tv-bar {
  min-height: 42px !important;
  gap: 10px !important;
}

.tv-55-panel .tv-bar span,
.tv-55-panel .tv-bar strong {
  color: #e0f2fe !important;
  font-size: clamp(11px, .78vw, 14px) !important;
  font-weight: 900 !important;
}

.tv-55-panel .tv-bar div {
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(125, 211, 252, .16) !important;
}

.tv-55-panel .tv-bar i {
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--tv-blue), var(--tv-green)) !important;
}

.tv-55-panel .tv-bar.leader i {
  background: linear-gradient(90deg, var(--tv-amber), var(--tv-green)) !important;
}

.tv-55-panel .tv-list article {
  min-height: 52px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(125, 211, 252, .14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.tv-55-panel .tv-list strong,
.tv-55-panel .tv-list em {
  color: #ffffff !important;
}

.tv-55-panel .tv-list span {
  color: #bae6fd !important;
  font-weight: 740 !important;
}

.tv-55-panel .tv-alerts {
  gap: 10px !important;
}

.tv-55-panel .tv-alerts article {
  min-height: 76px !important;
  border-left-color: var(--tv-amber) !important;
}

.tv-55-panel .tv-alerts article.critico,
.tv-55-panel .tv-alerts article.high,
.tv-55-panel .tv-alerts article.error {
  border-left-color: var(--tv-red) !important;
}

.tv-55-panel .tv-alerts strong {
  color: #ffffff !important;
}

.tv-55-panel .tv-alerts span {
  color: #bae6fd !important;
  font-weight: 740 !important;
}

.tv-55-panel .tv-route-board {
  display: grid !important;
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, .62fr) !important;
  gap: 14px !important;
}

.tv-55-panel .tv-route-map-wrap,
.tv-55-panel .tv-route-side {
  border: 1px solid rgba(125, 211, 252, .24) !important;
  border-left: 7px solid var(--tv-green) !important;
  border-radius: 18px !important;
  background: rgba(10, 30, 54, .9) !important;
  box-shadow: 0 14px 32px rgba(2, 6, 23, .22) !important;
}

.tv-55-panel .tv-route-map-wrap .routes-route-map-real,
.tv-vendor-route-map .routes-route-map-real {
  min-height: clamp(330px, 44vh, 610px) !important;
  border-radius: 16px !important;
}

.tv-55-panel .tv-route-side {
  max-height: clamp(360px, 58vh, 690px) !important;
  overflow: auto !important;
}

.tv-55-panel .tv-route-side p,
.tv-55-panel .tv-route-meta span {
  color: #bae6fd !important;
  font-weight: 740 !important;
}

.tv-55-panel .tv-route-meta strong {
  color: #ffffff !important;
  font-size: clamp(15px, 1vw, 20px) !important;
}

.tv-55-panel .tv-ticker {
  min-height: 38px !important;
  max-height: 38px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(125, 211, 252, .18) !important;
  border-radius: 999px !important;
  background: rgba(8, 25, 48, .92) !important;
}

.tv-55-panel .tv-ticker span {
  color: #e0f2fe !important;
  font-size: clamp(11px, .76vw, 14px) !important;
  font-weight: 850 !important;
}

.tv-55-panel .tv-stage:fullscreen {
  padding: 10px !important;
}

.tv-55-panel .tv-stage:fullscreen .tv-slide {
  min-height: calc(100vh - 238px) !important;
}

.tv-55-panel .tv-stage:fullscreen .tv-slide-head h2 {
  font-size: clamp(28px, 2.75vw, 52px) !important;
}

.tv-55-panel .tv-stage:fullscreen .tv-metrics strong {
  font-size: clamp(26px, 2.1vw, 42px) !important;
}

@media (max-width: 1350px) {
  .tv-55-panel .tv-content-grid,
  .tv-55-panel .tv-route-board {
    grid-template-columns: 1fr !important;
  }

  .tv-55-panel .tv-broadcast-strip,
  .tv-55-panel .tv-signal-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .tv-55-panel .tv-control-bar,
  .tv-55-panel .tv-slide-head {
    flex-direction: column !important;
  }

  .tv-55-panel .tv-broadcast-strip,
  .tv-55-panel .tv-signal-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Calidad de datos order pass v1
   Semaforo maestro: veredicto, matriz, bloqueos y fuentes con alerta visible. */
.quality-panel {
  --quality-blue: #0ea5e9;
  --quality-green: #10b981;
  --quality-amber: #f59e0b;
  --quality-red: #ef4444;
  --quality-violet: #7c3aed;
  --quality-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
}

.quality-panel .quality-module-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .45fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-left: 10px solid var(--quality-blue) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(14, 165, 233, .18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(16, 185, 129, .14), transparent 28%),
    linear-gradient(135deg, rgba(224, 242, 254, .98), rgba(255, 255, 255, .96) 52%, rgba(236, 253, 245, .82)) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08) !important;
}

.quality-panel .quality-module-hero h3 {
  max-width: 980px !important;
  margin: 8px 0 12px !important;
  color: var(--quality-ink) !important;
  font-size: clamp(44px, 4vw, 74px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

.quality-panel .quality-module-hero p {
  max-width: 920px !important;
  color: #334155 !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  font-weight: 790 !important;
  line-height: 1.55 !important;
}

.quality-panel .quality-score-card {
  display: grid !important;
  align-content: center !important;
  min-height: 190px !important;
  padding: 20px !important;
  border: 1px solid rgba(16, 185, 129, .26) !important;
  border-left: 8px solid var(--quality-green) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #ffffff, rgba(209, 250, 229, .82)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .065) !important;
}

.quality-panel .quality-score-card span,
.quality-panel .quality-score-card small {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.quality-panel .quality-score-card strong {
  color: var(--quality-ink) !important;
  font-size: clamp(48px, 4.2vw, 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
}

.quality-panel .sales-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

.quality-panel .sales-kpis article {
  min-height: 106px !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--quality-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #ffffff, rgba(224, 242, 254, .8)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.quality-panel .sales-kpis article:nth-child(2) {
  border-left-color: var(--quality-green) !important;
  background: linear-gradient(145deg, #ffffff, rgba(209, 250, 229, .8)) !important;
}

.quality-panel .sales-kpis article:nth-child(3) {
  border-left-color: var(--quality-violet) !important;
  background: linear-gradient(145deg, #ffffff, rgba(237, 233, 254, .82)) !important;
}

.quality-panel .sales-kpis article:nth-child(4) {
  border-left-color: var(--quality-amber) !important;
  background: linear-gradient(145deg, #ffffff, rgba(254, 243, 199, .86)) !important;
}

.quality-panel .sales-kpis strong {
  color: var(--quality-ink) !important;
  font-size: clamp(30px, 2.25vw, 50px) !important;
  letter-spacing: -.045em !important;
}

.quality-panel .sales-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.quality-panel .sales-card {
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-left: 9px solid var(--quality-blue) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(224, 242, 254, .7)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
}

.quality-panel .sales-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.quality-panel .quality-verdict,
.quality-panel .quality-next-action {
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--quality-amber) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .86)) !important;
}

.quality-panel .quality-verdict.ok {
  border-left-color: var(--quality-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .86)) !important;
}

.quality-panel .quality-verdict.danger,
.quality-panel .quality-verdict.error {
  border-left-color: var(--quality-red) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 226, 226, .86)) !important;
}

.quality-panel .quality-verdict h3,
.quality-panel .quality-next-action h3,
.quality-panel .section-head.compact h3,
.quality-panel .sales-card > h3 {
  color: var(--quality-ink) !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  letter-spacing: -.035em !important;
}

.quality-panel .quality-next-action button,
.quality-panel .quality-blocker button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--quality-blue), var(--quality-green)) !important;
  font-weight: 950 !important;
}

.quality-panel .quality-matrix {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}

.quality-panel .quality-module {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 112px !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--quality-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .76)) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .05) !important;
}

.quality-panel .quality-module.ok,
.quality-panel .quality-module.ready {
  border-left-color: var(--quality-green) !important;
}

.quality-panel .quality-module.warn,
.quality-panel .quality-module.warning,
.quality-panel .quality-module.data {
  border-left-color: var(--quality-amber) !important;
}

.quality-panel .quality-module.danger,
.quality-panel .quality-module.blocked {
  border-left-color: var(--quality-red) !important;
}

.quality-panel .quality-module strong {
  color: var(--quality-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.quality-panel .quality-module span,
.quality-panel .quality-module small {
  display: block !important;
  color: #475569 !important;
  font-weight: 760 !important;
}

.quality-panel .quality-module b {
  color: var(--quality-ink) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

.quality-panel .quality-module i {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 6px !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(90deg, var(--quality-blue), var(--quality-green)) !important;
}

.quality-panel .quality-check,
.quality-panel .quality-blocker {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(14, 165, 233, .2) !important;
  border-left: 7px solid var(--quality-green) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .76)) !important;
}

.quality-panel .quality-check.danger,
.quality-panel .quality-blocker.alta,
.quality-panel .quality-blocker.critica,
.quality-panel .quality-blocker.high {
  border-left-color: var(--quality-red) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 226, 226, .82)) !important;
}

.quality-panel .quality-blocker.media,
.quality-panel .quality-blocker.medium {
  border-left-color: var(--quality-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .84)) !important;
}

.quality-panel .quality-check strong,
.quality-panel .quality-blocker strong {
  color: var(--quality-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.quality-panel .quality-check span,
.quality-panel .quality-blocker span,
.quality-panel .quality-check small,
.quality-panel .quality-blocker small {
  color: #475569 !important;
  font-weight: 760 !important;
}

.quality-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.quality-panel .sales-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.quality-panel .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--quality-blue), var(--quality-green)) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.quality-panel .sales-table td {
  padding: 14px 16px !important;
  color: var(--quality-ink) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.quality-panel .sales-table td strong,
.quality-panel .sales-table td small {
  display: block !important;
}

.quality-panel .sales-table td small {
  margin-top: 4px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.quality-panel .quality-source-review td {
  background: rgba(254, 242, 242, .72) !important;
}

.quality-panel .quality-source-ok td {
  background: rgba(236, 253, 245, .62) !important;
}

.quality-panel #qualityStatus {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--quality-blue) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

@media (max-width: 1280px) {
  .quality-panel .quality-module-hero,
  .quality-panel .sales-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .quality-panel {
    padding: 12px !important;
  }

  .quality-panel .quality-module-hero h3 {
    font-size: clamp(38px, 13vw, 56px) !important;
  }

  .quality-panel .quality-module {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO DESIGN SYSTEM action hygiene v1.5 */
.action-grid-polished .action-technical,
.action-grid-polished .action-report,
.action-grid-polished .action-quiet,
.action-grid-polished .action-secondary {
  border-color: color-mix(in srgb, var(--cx-border-strong) 52%, transparent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cx-surface-soft) 82%, white),
      color-mix(in srgb, var(--cx-surface) 88%, var(--cx-panel-blue))) !important;
  color: var(--cx-text-soft) !important;
  box-shadow: none !important;
}

.action-grid-polished .action-technical {
  border-style: dashed !important;
}

.module-action-more,
.inline-action-more,
.advanced-tools {
  border: 1px solid color-mix(in srgb, var(--cx-border-strong) 58%, transparent) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cx-panel-blue) 82%, white),
      color-mix(in srgb, var(--cx-panel-cyan) 36%, var(--cx-surface))) !important;
  box-shadow: var(--cx-shadow-sm) !important;
}

.module-action-more summary,
.inline-action-more summary,
.advanced-tools summary {
  min-height: 40px;
  padding: 10px 14px !important;
  color: var(--cx-text) !important;
  font-weight: 900 !important;
  letter-spacing: .03em;
}

.module-action-more summary span,
.inline-action-more summary span {
  background: var(--cx-primary) !important;
  color: #fff !important;
}

.module-action-more-body,
.inline-action-more-body {
  max-height: min(360px, 50vh);
  overflow: auto;
  border-color: color-mix(in srgb, var(--cx-primary) 24%, var(--cx-border)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, white 88%, var(--cx-panel-blue)),
      color-mix(in srgb, white 78%, var(--cx-panel-cyan))) !important;
  box-shadow: var(--cx-shadow-lg) !important;
}

.module-action-more-body .module-action-button,
.inline-action-more-body button {
  justify-content: flex-start !important;
  min-height: 38px !important;
  border-radius: 12px !important;
}

.source-actions .inline-action-more,
.admin-actions .inline-action-more,
.modal-actions .inline-action-more {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cx-panel-amber) 68%, white),
      color-mix(in srgb, var(--cx-panel-blue) 40%, white)) !important;
}

/* CONNECTIO commerce 360 v1 */
.commerce-360-panel {
  --panel-line: #14b8a6;
}

.commerce-360-result {
  display: grid;
  gap: var(--cx-space-4);
}

.commerce-360-head {
  display: flex;
  justify-content: space-between;
  gap: var(--cx-space-4);
  align-items: flex-start;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid color-mix(in srgb, var(--panel-line) 44%, var(--cx-border));
  border-left: 8px solid var(--panel-line);
  border-radius: var(--cx-radius-lg);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel-line) 14%, white),
      color-mix(in srgb, var(--cx-panel-blue) 62%, white));
}

.commerce-360-head h3 {
  margin: 4px 0;
  font-size: clamp(24px, 2vw, 40px);
}

.commerce-360-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.commerce-360-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commerce-360-presence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.commerce-360-presence article {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-line) 30%, var(--cx-border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--cx-panel-cyan) 56%, white);
}

.commerce-360-presence strong,
.commerce-360-presence span {
  display: block;
}

.commerce-360-presence span {
  margin-top: 4px;
  color: var(--cx-text-soft);
}

@media (max-width: 980px) {
  .commerce-360-head,
  .commerce-360-grid {
    display: block;
  }

  .commerce-360-grid > * + * {
    margin-top: var(--cx-space-4);
  }
}

/* CONNECTIO cobros nacionales v1 */
.cobros-panel {
  --panel-line: #f59e0b;
  --cobros-blue: #0ea5e9;
  --cobros-green: #10b981;
  --cobros-amber: #f59e0b;
  --cobros-violet: #7c3aed;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.35vw, 24px) !important;
  padding: clamp(16px, 1.45vw, 26px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(245, 158, 11, .36) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(245, 158, 11, .18), transparent 22rem),
    radial-gradient(circle at 96% 6%, rgba(16, 185, 129, .14), transparent 22rem),
    linear-gradient(180deg, #fff7ed 0%, #f8fbff 48%, #eaf7ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .82),
    0 26px 68px rgba(120, 53, 15, .11) !important;
}

.cobros-panel .commerce-control-hero {
  min-height: 230px !important;
  border-radius: 30px !important;
  border: 2px solid rgba(245, 158, 11, .52) !important;
  border-left: 12px solid var(--panel-line) !important;
  background:
    radial-gradient(circle at 90% 22%, rgba(16, 185, 129, .24), transparent 20rem),
    linear-gradient(135deg, #431407 0%, #9a3412 45%, #0e7490 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 56px rgba(180, 83, 9, .22) !important;
}

.cobros-panel .commerce-control-hero :where(h3, p, span, strong) {
  color: #fff !important;
}

.cobros-panel .commerce-control-hero h3 {
  font-size: clamp(38px, 3.4vw, 66px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

.cobros-panel .commerce-control-hero p {
  max-width: 880px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.55 !important;
}

.cobros-panel .commerce-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.cobros-panel .commerce-hero-stats article {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .17) !important;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .12) !important;
}

.cobros-panel .commerce-toolbar {
  border-radius: 24px !important;
  border: 1px solid rgba(245, 158, 11, .62) !important;
  border-left: 12px solid var(--cobros-amber) !important;
  background: linear-gradient(135deg, #fffbeb, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 16px 34px rgba(180, 83, 9, .09) !important;
}

.cobros-panel .commerce-toolbar label {
  color: #334155 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.cobros-panel .commerce-toolbar :where(input, select) {
  min-height: 48px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(14, 165, 233, .48) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.cobros-panel .cx-button-primary,
.cobros-panel button[data-cobros-action] {
  min-height: 48px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(245, 158, 11, .36) !important;
  background: linear-gradient(135deg, #f59e0b, #0ea5e9) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 30px rgba(180, 83, 9, .16) !important;
}

.cobros-panel .source-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  border-left: 8px solid var(--cobros-amber) !important;
  background: linear-gradient(135deg, #fff7ed, #e0f2fe) !important;
  color: #075985 !important;
  font-weight: 900 !important;
}

.cobros-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.2vw, 22px) !important;
}

.cobros-panel .inventory-bars {
  min-height: 250px !important;
}

.cobros-panel .sales-card {
  border-radius: 26px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--cobros-blue) !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .13), transparent 13rem),
    linear-gradient(135deg, #ffffff, #eff6ff 58%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.cobros-panel .cobros-grid .sales-card:nth-child(1) {
  border-left-color: var(--cobros-green) !important;
}

.cobros-panel .cobros-grid .sales-card:nth-child(2) {
  border-left-color: var(--cobros-violet) !important;
}

.cobros-panel .sales-table table thead th {
  background: linear-gradient(135deg, #f59e0b, #0ea5e9) !important;
  color: #fff !important;
}

.cobros-panel .commerce-kpis article {
  min-height: 118px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 8px solid var(--panel-line) !important;
  border-top: 0 !important;
  background: linear-gradient(135deg, #ffffff, #fff7ed 54%, #ecfeff) !important;
  box-shadow: 0 14px 30px rgba(120, 53, 15, .08) !important;
}

.cobros-panel .commerce-kpis article:nth-child(2) { border-left-color: var(--cobros-green) !important; }
.cobros-panel .commerce-kpis article:nth-child(3) { border-left-color: #ef4444 !important; }
.cobros-panel .commerce-kpis article:nth-child(4) { border-left-color: var(--cobros-blue) !important; }
.cobros-panel .commerce-kpis article:nth-child(5) { border-left-color: var(--cobros-violet) !important; }
.cobros-panel .commerce-kpis article:nth-child(6) { border-left-color: #22c55e !important; }

.cobros-panel .commerce-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2vw, 40px) !important;
}

.cobros-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .45) !important;
  background: rgba(255, 255, 255, .72) !important;
  -webkit-overflow-scrolling: touch !important;
}

.cobros-panel .sales-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.cobros-panel .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.cobros-panel .sales-table td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .90) !important;
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
}

.cobros-panel .sales-table td small,
.cobros-panel .sales-table td strong {
  display: block !important;
}

@media (max-width: 980px) {
  .cobros-grid {
    display: block;
  }

  .cobros-grid > * + * {
    margin-top: var(--cx-space-4);
  }
}

/* CONNECTIO backoffice incidentes v1 */
.incidentes-panel {
  --panel-line: #ef4444;
  --panel-accent: #f97316;
  --inc-blue: #0ea5e9;
  --inc-green: #10b981;
  --inc-amber: #f59e0b;
  --inc-violet: #7c3aed;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.35vw, 24px) !important;
  padding: clamp(16px, 1.45vw, 26px) !important;
  border-radius: 30px !important;
  border: 2px solid rgba(239, 68, 68, .34) !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(239, 68, 68, .16), transparent 22rem),
    radial-gradient(circle at 96% 6%, rgba(245, 158, 11, .14), transparent 22rem),
    linear-gradient(180deg, #fff1f2 0%, #f8fbff 48%, #edf8ff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .82),
    0 26px 68px rgba(127, 29, 29, .11) !important;
}

.incidentes-panel .incidentes-hero,
.incidentes-panel .commerce-control-hero {
  min-height: 235px !important;
  border-radius: 30px !important;
  border: 2px solid rgba(239, 68, 68, .54) !important;
  border-left: 12px solid var(--panel-line) !important;
  background:
    radial-gradient(circle at 90% 22%, rgba(245, 158, 11, .24), transparent 20rem),
    linear-gradient(135deg, #450a0a 0%, #991b1b 46%, #0e7490 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 56px rgba(127, 29, 29, .22) !important;
}

.incidentes-panel .commerce-control-hero :where(h3, p, span, strong) {
  color: #fff !important;
}

.incidentes-panel .commerce-control-hero h3 {
  font-size: clamp(38px, 3.4vw, 66px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

.incidentes-panel .commerce-control-hero p {
  max-width: 900px !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.55 !important;
}

.incidentes-panel .commerce-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.incidentes-panel .commerce-hero-stats article,
.incidentes-panel .commerce-kpis article {
  border-top: 0 !important;
  border-left: 8px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #fff7ed 76%, white),
      color-mix(in srgb, #e0f2fe 48%, white)) !important;
  box-shadow: 0 14px 30px rgba(127, 29, 29, .08) !important;
}

.incidentes-panel .commerce-hero-stats article {
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-left: 8px solid rgba(255, 255, 255, .56) !important;
  background: rgba(255, 255, 255, .17) !important;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .10) !important;
}

.incidentes-toolbar {
  border-radius: 24px !important;
  border: 1px solid rgba(249, 115, 22, .54) !important;
  border-left: 12px solid var(--panel-accent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #fff7ed 72%, white),
      color-mix(in srgb, #fef2f2 60%, white)) !important;
  box-shadow: 0 16px 34px rgba(127, 29, 29, .08) !important;
}

.incidentes-panel .commerce-toolbar label {
  color: #334155 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.incidentes-panel .commerce-toolbar :where(input, select, textarea) {
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(14, 165, 233, .45) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #071733 !important;
  font-size: 15px !important;
}

.incidentes-panel .cx-button,
.incidentes-panel button[data-incidentes-action],
.incidentes-panel button[data-incidentes-select] {
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(239, 68, 68, .34) !important;
  background: linear-gradient(135deg, #ef4444, #f59e0b) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 28px rgba(127, 29, 29, .14) !important;
}

.incidentes-panel .source-status {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  border-left: 8px solid var(--panel-line) !important;
  background: linear-gradient(135deg, #fee2e2, #e0f2fe) !important;
  color: #075985 !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.incidentes-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.2vw, 22px) !important;
}

.incidentes-panel .inventory-bars {
  min-height: 245px !important;
}

.incidentes-panel .sales-card {
  border-radius: 26px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--panel-line) !important;
  background:
    radial-gradient(circle at right top, rgba(239, 68, 68, .12), transparent 13rem),
    linear-gradient(135deg, #ffffff, #fff7ed 54%, #ecfeff) !important;
  box-shadow: 0 18px 38px rgba(8, 47, 73, .09) !important;
}

.incidentes-grid .sales-card:nth-child(2) {
  border-left-color: var(--inc-amber) !important;
}

.incidentes-sync-card {
  border-left: 10px solid var(--panel-line) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #fee2e2 62%, white),
      color-mix(in srgb, #ecfeff 52%, white)) !important;
}

.incidentes-resolution-card {
  border-left: 10px solid #7c3aed !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #ede9fe 72%, white),
      color-mix(in srgb, #cffafe 42%, white)) !important;
}

.incidentes-resolution-form {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
  align-items: end;
  gap: 12px !important;
  border-radius: 22px !important;
  border-left: 10px solid var(--inc-violet) !important;
  border: 1px solid color-mix(in srgb, #7c3aed 34%, var(--cx-border)) !important;
}

.incidentes-resolution-form .wide {
  grid-column: 1 / -2;
}

.incidentes-resolution-form textarea {
  resize: vertical;
  min-height: 76px;
}

.incidentes-table table thead th {
  background: linear-gradient(135deg, #ef4444, #f59e0b) !important;
  color: #fff !important;
}

.incidentes-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(14, 165, 233, .42) !important;
  background: rgba(255, 255, 255, .74) !important;
  -webkit-overflow-scrolling: touch !important;
}

.incidentes-table table {
  width: max-content !important;
  min-width: min(1280px, 100%) !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.incidentes-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.incidentes-table td {
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .90) !important;
  border-top: 1px solid rgba(14, 165, 233, .18) !important;
  border-bottom: 1px solid rgba(14, 165, 233, .18) !important;
}

.incidentes-table td small,
.incidentes-table td strong {
  display: block !important;
}

.incidentes-table table tbody tr {
  border-left: 4px solid color-mix(in srgb, var(--panel-line) 42%, transparent);
}

.incidentes-table a {
  display: inline-flex;
  margin-top: 4px;
  color: #b91c1c;
  font-weight: 900;
}

@media (max-width: 980px) {
  .incidentes-grid {
    display: block;
  }

  .incidentes-resolution-form {
    display: block !important;
  }

  .incidentes-resolution-form > * + * {
    margin-top: 10px;
  }

  .incidentes-grid > * + * {
    margin-top: var(--cx-space-4);
  }
}

/* ==========================================================================
   CONNECTIO UX polish v2 - menus claros, tarjetas con color y mas espacio util
   Objetivo: plataforma menos blanca, mas orientada por areas y mas facil de usar.
   ========================================================================== */
:root {
  --connectio-area-blue: #0ea5e9;
  --connectio-area-green: #10b981;
  --connectio-area-orange: #f97316;
  --connectio-area-purple: #8b5cf6;
  --connectio-area-money: #16a34a;
  --connectio-area-cyan: #06b6d4;
  --connectio-area-gray: #64748b;
  --connectio-area-red: #e11d48;
}

@media (min-width: 1320px) {
  .app-shell {
    grid-template-columns: clamp(218px, 13vw, 252px) minmax(0, 1fr) !important;
  }

  .module-active .workbench,
  .workbench {
    padding: clamp(10px, 1vw, 18px) clamp(14px, 1.4vw, 26px) !important;
  }

  .workbench > :where(
    .sales-panel,
    .ranking-panel,
    .routes-panel,
    .goals-panel,
    .inventory-web-panel,
    .catalog-web-panel,
    .coverage-panel,
    .source-panel,
    .module-tabbed-panel,
    .tv-panel,
    .rrhh-panel,
    .liquidaciones-panel,
    .rendiciones-panel
  ) {
    max-width: none !important;
    width: 100% !important;
  }
}

.sidebar {
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, .18), transparent 32%),
    linear-gradient(180deg, #061529 0%, #071e38 48%, #061529 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, .18) !important;
}

.side-nav {
  gap: 8px !important;
}

.side-group {
  border-radius: 18px;
  padding: 4px;
  background: color-mix(in srgb, var(--nav-accent, #38bdf8) 8%, rgba(255, 255, 255, .025));
  border: 1px solid color-mix(in srgb, var(--nav-accent, #38bdf8) 20%, rgba(255, 255, 255, .08));
}

.side-group.open {
  background: color-mix(in srgb, var(--nav-accent, #38bdf8) 15%, rgba(255, 255, 255, .04));
  box-shadow: inset 4px 0 0 var(--nav-accent, #38bdf8), 0 12px 26px rgba(0, 0, 0, .16);
}

.side-group-toggle {
  min-height: 48px !important;
  border-radius: 15px !important;
}

.side-group-toggle.active,
.side-group.open .side-group-toggle {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nav-accent, #38bdf8) 32%, rgba(15, 23, 42, .84)),
      rgba(15, 23, 42, .72)) !important;
  border-color: color-mix(in srgb, var(--nav-accent, #38bdf8) 50%, rgba(255, 255, 255, .12)) !important;
}

.side-group-caption {
  display: none !important;
}

.side-submenu {
  margin: 2px 0 4px 10px !important;
  padding: 6px 0 6px 10px !important;
  gap: 5px !important;
}

.side-subitem {
  min-height: 38px !important;
  grid-template-columns: 25px minmax(0, 1fr) auto !important;
  border-radius: 12px !important;
  padding: 7px 8px !important;
  background: rgba(255, 255, 255, .055) !important;
}

.side-subitem strong {
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

.side-subitem small {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-subitem.active {
  color: #fff !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nav-accent, #38bdf8) 42%, rgba(255, 255, 255, .09)),
      color-mix(in srgb, var(--nav-accent, #38bdf8) 20%, rgba(255, 255, 255, .05))) !important;
  border-color: color-mix(in srgb, var(--nav-accent, #38bdf8) 70%, rgba(255, 255, 255, .2)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--nav-accent, #38bdf8) 18%, transparent);
}

.module-focus-grid,
.module-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: clamp(14px, 1.25vw, 22px) !important;
}

.module-card {
  min-height: 230px;
  border: 1px solid color-mix(in srgb, var(--group-accent, #0ea5e9) 36%, var(--cx-border)) !important;
  border-top: 7px solid var(--group-accent, #0ea5e9) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--group-accent, #0ea5e9) 20%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--group-soft, #e0f2fe) 78%, #ffffff),
      color-mix(in srgb, var(--group-accent, #0ea5e9) 8%, #ffffff 88%)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--group-accent, #0ea5e9) 18%, rgba(15, 23, 42, .12)) !important;
}

.module-card .module-icon {
  background: var(--group-accent, #0ea5e9) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--group-accent, #0ea5e9) 28%, transparent);
}

.module-card .module-readiness-badge,
.module-readiness-badge {
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
  font-weight: 950 !important;
}

.module-card button,
.module-tab-open,
:where(.sales-card, .inventory-card, .catalog-card, .routes-card, .source-card, .control-card) button:not(.ghost):not(.secondary) {
  box-shadow: 0 12px 24px rgba(14, 165, 233, .14);
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .profit-component, .profit-source-item, .ops-card) {
  border-width: 1.5px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 8%, var(--cx-surface)),
      var(--cx-surface) 58%,
      color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 5%, var(--cx-surface))) !important;
}

:where(.sales-kpis article, .inventory-kpis article, .time-kpis article, .catalog-kpis article, .saas-goals-kpis article, .saas-inventory-kpis article, .cx-kpi) {
  border-left: 6px solid var(--panel-line, var(--cx-blue-500)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 18%, #fff),
      #fff 62%,
      color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 10%, #fff)) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) thead th {
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #fff !important;
  border: 0 !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr {
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .15);
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody td {
  background: color-mix(in srgb, #e0f2fe 38%, #fff) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table) tbody tr:nth-child(even) td {
  background: color-mix(in srgb, #dcfce7 26%, #fff) !important;
}

.module-active .workbench-head {
  border-left: 8px solid var(--panel-line, var(--cx-blue-500)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel-line, var(--cx-blue-500)) 12%, var(--cx-surface)),
      var(--cx-surface)) !important;
}

.module-active #moduleActions {
  background: color-mix(in srgb, var(--cx-blue-50) 52%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--cx-blue-500) 20%, var(--cx-border)) !important;
  border-radius: 18px !important;
  padding: 8px !important;
}

@media (max-width: 1100px) {
  .module-focus-grid,
  .module-card-grid,
  .ranking-dimensions {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .side-subitem small {
    display: none;
  }
}

/* CONNECTIO brand context v1 - logos por modulo y compania */
.brand-mark-logo {
  background: #ffffff !important;
  border: 1px solid rgba(14, 165, 233, 0.35);
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.2);
  overflow: hidden;
}

.brand-mark-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-brand-watermark {
  position: absolute;
  right: 28px;
  bottom: -34px;
  width: clamp(110px, 14vw, 190px);
  height: clamp(110px, 14vw, 190px);
  object-fit: contain;
  opacity: 0.1;
  filter: saturate(1.25);
  pointer-events: none;
}

.connectio-home-greeting {
  background:
    radial-gradient(circle at 84% 18%, rgba(34, 211, 238, 0.34), transparent 34%),
    linear-gradient(135deg, #071b3b 0%, #0b3f78 50%, #0487b8 100%) !important;
  color: #ffffff !important;
}

.connectio-home-greeting h3,
.connectio-home-greeting p {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.35);
}

.connectio-home-greeting .eyebrow {
  color: #67e8f9 !important;
}

.brand-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 132px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-tone, #0ea5e9) 38%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-tone, #0ea5e9) 13%, white), rgba(255, 255, 255, 0.96));
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.07);
  vertical-align: middle;
}

.brand-logo-pill img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 999px;
  background: #ffffff;
  padding: 2px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  flex: 0 0 auto;
}

.brand-logo-pill em {
  display: inline-block;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-logo-pill.compact {
  min-height: 22px;
  padding: 2px 6px;
  gap: 4px;
}

.brand-logo-pill.compact img {
  width: 17px;
  height: 17px;
  padding: 1px;
}

.brand-logo-pill.compact em {
  max-width: 58px;
  font-size: 0.58rem;
}

.brand-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand-label > b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.saas-company-bars .brand-label {
  min-width: 150px;
}

.sales-top-list em .brand-label {
  gap: 6px;
}

.sales-top-list em .brand-logo-pill {
  max-width: 92px;
}

@media (max-width: 900px) {
  .hero-brand-watermark {
    width: 96px;
    height: 96px;
    right: 12px;
    bottom: -22px;
  }

  .saas-company-bars .brand-label {
    min-width: 120px;
  }
}

/* Company analysis 360 */
.company-analysis-panel {
  --company-blue: #0ea5e9;
  --company-green: #10b981;
  --company-orange: #f59e0b;
  --company-purple: #8b5cf6;
  --company-cyan: #06b6d4;
}

.company-analysis-hero {
  border: 1px solid rgba(14, 165, 233, 0.45);
  background: radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.18), transparent 34%), linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(255, 255, 255, 0.96) 48%, rgba(139, 92, 246, 0.12));
}

.company-brand-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 260px;
}

.company-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.company-analysis-card {
  padding: 18px;
  border-width: 2px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 249, 255, 0.78));
  box-shadow: 0 18px 45px rgba(15, 42, 68, 0.08);
}

.company-analysis-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.company-analysis-card header h3 {
  margin: 2px 0 0;
  color: #0f1f3d;
}

.company-analysis-card header small {
  color: #52627a;
  font-weight: 700;
  text-align: right;
}

.company-analysis-card.accent-blue { border-color: rgba(14, 165, 233, 0.75) !important; }
.company-analysis-card.accent-green { border-color: rgba(16, 185, 129, 0.75) !important; }
.company-analysis-card.accent-orange { border-color: rgba(245, 158, 11, 0.75) !important; }
.company-analysis-card.accent-purple { border-color: rgba(139, 92, 246, 0.75) !important; }
.company-analysis-card.accent-cyan { border-color: rgba(6, 182, 212, 0.75) !important; }

.company-kpi {
  border-width: 2px !important;
  color: #0f1f3d;
}

.company-kpi.blue { background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(255, 255, 255, 0.92)); border-color: rgba(14, 165, 233, 0.55) !important; }
.company-kpi.green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(255, 255, 255, 0.92)); border-color: rgba(16, 185, 129, 0.55) !important; }
.company-kpi.purple { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(255, 255, 255, 0.92)); border-color: rgba(139, 92, 246, 0.55) !important; }
.company-kpi.cyan { background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(255, 255, 255, 0.92)); border-color: rgba(6, 182, 212, 0.55) !important; }
.company-kpi.orange { background: linear-gradient(135deg, rgba(245, 158, 11, 0.23), rgba(255, 255, 255, 0.92)); border-color: rgba(245, 158, 11, 0.58) !important; }

.company-analysis-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 2fr minmax(80px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.company-analysis-bar:last-child { border-bottom: 0; }
.company-analysis-bar div { display: grid; gap: 3px; }
.company-analysis-bar small { color: #64748b; font-weight: 700; }

.company-analysis-bar > span {
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 42, 68, 0.08);
  overflow: hidden;
}

.company-analysis-bar i {
  display: block;
  min-width: 8px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.company-analysis-bar.green i { background: linear-gradient(90deg, #10b981, #84cc16); }
.company-analysis-bar.orange i { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.company-analysis-bar.purple i { background: linear-gradient(90deg, #8b5cf6, #06b6d4); }
.company-analysis-bar strong { justify-self: end; color: #0f1f3d; font-size: 1.05rem; }

.company-analysis-table {
  overflow-x: auto;
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 18px;
}

.company-analysis-table table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.86);
}

.company-analysis-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(90deg, #0f2a44, #0ea5e9);
  color: #ffffff;
  text-align: left;
  padding: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.company-analysis-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  color: #0f1f3d;
}

@media (max-width: 1100px) {
  .company-analysis-grid { grid-template-columns: 1fr; }
  .company-analysis-bar { grid-template-columns: 1fr; }
  .company-analysis-bar strong { justify-self: start; }
}

/* CONNECTIO fixed structure tabs v1: no floating/overlay tab bars */
:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .connectio-promoted-tabs) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  margin: 12px 0 0 !important;
  border: 1px solid rgba(125, 211, 252, .72) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .connectio-promoted-tabs) button,
:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .connectio-promoted-tabs) button.active,
:where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .connectio-promoted-tabs) button[aria-selected="true"] {
  transform: none !important;
}

:where(.routes-panel, .catalog-panel, .inventory-web-panel, .profit-panel, .rendiciones-panel, .rrhh-panel, .module-tabbed-panel, .tuu-panel, .commerce-panel, .planes-entel-panel, .connectio-time-panel) > :where(.module-subtabs, .inventory-tabs, .catalog-tabs, .tuu-tabs, .routes-tabs, .profit-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .connectio-promoted-tabs) + :where(.module-subpanel, [data-routes-panel], [data-catalog-panel], [data-inventory-panel], [data-profit-panel], [data-rendiciones-panel], [data-rrhh-panel], [data-tuu-panel], [data-coverage-panel], .time-view, .planes-entel-view) {
  margin-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.routes-panel .routes-tabs {
  margin-top: 0 !important;
}

/* CONNECTIO Inicio Ejecutivo v2: dashboard gerencial compacto y con contraste */
.connectio-home {
  width: min(100%, 1800px) !important;
  gap: 14px !important;
}

.connectio-home-hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .4fr) !important;
  gap: 14px !important;
}

.connectio-home-greeting {
  min-height: 220px !important;
  border: 1px solid rgba(34, 211, 238, .38) !important;
  background:
    linear-gradient(135deg, rgba(3, 10, 31, .96), rgba(8, 47, 91, .95) 48%, rgba(5, 150, 180, .92)),
    radial-gradient(circle at 86% 18%, rgba(34, 211, 238, .32), transparent 35%) !important;
}

.connectio-home-greeting h3 {
  max-width: 920px !important;
  font-size: clamp(34px, 4vw, 58px) !important;
}

.connectio-home-period {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(130px, 170px) auto;
  gap: 10px;
  align-items: end;
  max-width: 680px;
  margin-top: 22px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, .32);
  border-radius: 20px;
  background: rgba(2, 8, 23, .24);
  backdrop-filter: blur(12px);
}

.connectio-home-period label {
  display: grid;
  gap: 5px;
  color: rgba(224, 242, 254, .9);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.connectio-home-period select {
  min-height: 42px;
  border-color: rgba(125, 211, 252, .55) !important;
  color: #08213f !important;
  background: rgba(255, 255, 255, .96) !important;
}

.connectio-home-actions { margin-top: 18px !important; }
.connectio-home-actions button { box-shadow: none !important; }

.connectio-home-status {
  border: 1px solid rgba(14, 165, 233, .42) !important;
  background: linear-gradient(180deg, #e0f2fe, #f8fbff) !important;
}

.connectio-home-kpis {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

.connectio-home-kpis .ops-kpi,
.connectio-home-kpis > article {
  min-height: 120px !important;
  position: relative;
  overflow: hidden;
  border-width: 2px !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .09) !important;
}

.connectio-home-kpis .ops-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--ops-tone, #0ea5e9);
}

.connectio-home-kpis .ops-kpi.blue { --ops-tone: #2563eb; background: linear-gradient(135deg, #dbeafe, #f8fbff) !important; border-color: rgba(37, 99, 235, .58) !important; }
.connectio-home-kpis .ops-kpi.ok { --ops-tone: #10b981; background: linear-gradient(135deg, #d1fae5, #f8fbff) !important; border-color: rgba(16, 185, 129, .58) !important; }
.connectio-home-kpis .ops-kpi.warn { --ops-tone: #f59e0b; background: linear-gradient(135deg, #fef3c7, #fffaf0) !important; border-color: rgba(245, 158, 11, .62) !important; }
.connectio-home-kpis .ops-kpi.danger { --ops-tone: #ef4444; background: linear-gradient(135deg, #fee2e2, #fff7f7) !important; border-color: rgba(239, 68, 68, .62) !important; }
.connectio-home-kpis .ops-kpi.neutral { --ops-tone: #64748b; background: linear-gradient(135deg, #e2e8f0, #f8fafc) !important; border-color: rgba(100, 116, 139, .42) !important; }

.ops-kpi-line {
  display: block;
  width: min(100%, 150px);
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ops-tone, #0ea5e9), #22c55e);
}

.connectio-home-pulse {
  padding: 22px !important;
  border: 2px solid rgba(14, 165, 233, .42) !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(236, 253, 245, .94)),
    radial-gradient(circle at 98% 2%, rgba(34, 211, 238, .26), transparent 36%) !important;
}

.connectio-home-pulse-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.connectio-home-pulse-head h3 {
  margin: 5px 0 4px;
  color: #071b3b;
  font-size: clamp(24px, 2vw, 34px);
  letter-spacing: -.045em;
}

.connectio-home-pulse-head p {
  margin: 0;
  max-width: 820px;
  color: #475569;
  font-weight: 750;
}

.connectio-home-pulse-head > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 10px 14px;
  color: #08213f;
  background: #e0f2fe;
  border: 1px solid rgba(14, 165, 233, .35);
}

.connectio-home-pulse-head > strong.ok { color: #065f46; background: #d1fae5; border-color: rgba(16, 185, 129, .45); }
.connectio-home-pulse-head > strong.warn { color: #92400e; background: #fef3c7; border-color: rgba(245, 158, 11, .45); }
.connectio-home-pulse-head > strong.danger { color: #991b1b; background: #fee2e2; border-color: rgba(239, 68, 68, .45); }

.connectio-home-pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.executive-meter {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .36);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
}

.executive-meter > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.executive-meter strong { color: #0f172a; font-size: 13px; }
.executive-meter span { color: #475569; font-size: 12px; font-weight: 900; }

.executive-meter-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .22);
  overflow: hidden;
}

.executive-meter-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--meter-a, #0ea5e9), var(--meter-b, #22c55e));
}

.executive-meter.blue { --meter-a: #2563eb; --meter-b: #06b6d4; }
.executive-meter.green { --meter-a: #059669; --meter-b: #22c55e; }
.executive-meter.amber { --meter-a: #f59e0b; --meter-b: #f97316; }
.executive-meter.red { --meter-a: #ef4444; --meter-b: #f97316; }

.connectio-home-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important; }

.connectio-home-card,
.connectio-home-board,
.connectio-home-area,
.latest-loads-card,
.quick-search-panel {
  border-width: 2px !important;
  border-color: rgba(14, 165, 233, .35) !important;
  background: linear-gradient(135deg, #f8fbff, #eef8ff) !important;
}

.connectio-home-quick button,
.connectio-home-suggestions button {
  border-width: 2px !important;
  border-color: rgba(14, 165, 233, .32) !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
}

.connectio-home-alerts .ops-alert {
  border-width: 2px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

.connectio-home-area-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

@media (max-width: 1180px) {
  .connectio-home-hero,
  .connectio-home-grid,
  .connectio-home-board { grid-template-columns: 1fr !important; }
  .connectio-home-kpis,
  .connectio-home-pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .connectio-home-period,
  .connectio-home-kpis,
  .connectio-home-pulse-grid,
  .connectio-home-quick { grid-template-columns: 1fr !important; }
}

/* CONNECTIO Modulos operativos v2: Ventas, Metas, Rutas y Rentabilidad con lenguaje ejecutivo */
:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) {
  width: min(100%, 1800px) !important;
  margin-inline: auto !important;
  gap: clamp(14px, 1vw, 20px) !important;
  --module-accent: var(--panel-line, #0ea5e9);
  --module-soft: color-mix(in srgb, var(--module-accent) 12%, #eff6ff);
}

.sales-panel { --module-accent: #2563eb; }
.goals-panel { --module-accent: #f59e0b; }
.routes-panel { --module-accent: #14b8a6; }
.profit-panel { --module-accent: #d97706; --panel-line: #d97706; }

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-module-hero, .goals-hero, .routes-module-hero, .profit-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero) {
  position: relative;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--module-accent) 38%, #bfdbfe) !important;
  border-left: 10px solid var(--module-accent) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 15%, #ffffff), #f8fbff 58%, color-mix(in srgb, var(--module-accent) 10%, #ecfeff)) !important;
  box-shadow: 0 22px 50px rgba(15, 23, 42, .10) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-module-hero, .goals-hero, .routes-module-hero, .profit-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero)::after {
  content: "";
  position: absolute;
  inset: auto -90px -130px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--module-accent) 22%, transparent);
  pointer-events: none;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-module-hero, .goals-hero, .routes-module-hero, .profit-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero) h3 {
  color: #061735 !important;
  font-size: clamp(32px, 3.2vw, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-module-hero, .goals-hero, .routes-module-hero, .profit-module-hero, .saas-sales-hero, .saas-goals-hero, .saas-routes-hero) p {
  max-width: 82ch !important;
  color: #334155 !important;
  font-weight: 750 !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.analysis-filter-panel, .sales-toolbar, .sales-toolbar-primary, .routes-map-actions, .profit-tabs, .routes-tabs) {
  border: 2px solid color-mix(in srgb, var(--module-accent) 35%, #bfdbfe) !important;
  border-left: 8px solid var(--module-accent) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 9%, #ffffff), #f8fbff) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.analysis-filter-panel, .sales-toolbar, .sales-toolbar-primary) label span {
  color: #334155 !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.analysis-filter-panel, .sales-toolbar, .sales-toolbar-primary) :where(input, select) {
  min-height: 44px !important;
  border: 1px solid color-mix(in srgb, var(--module-accent) 32%, #cbd5e1) !important;
  background: rgba(255, 255, 255, .96) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-kpis, .routes-kpis, .saas-sales-kpis, .saas-goals-kpis, .saas-routes-kpis, .profit-summary-grid) {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-kpis, .routes-kpis, .saas-sales-kpis, .saas-goals-kpis, .saas-routes-kpis, .profit-summary-grid) article,
:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.sales-period-card, .sales-card, .routes-card, .profit-component, .profit-source-item, .sync-status-card) {
  border: 2px solid color-mix(in srgb, var(--module-accent) 30%, #dbeafe) !important;
  border-top: 6px solid var(--module-accent) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 13%, #ffffff), #f8fbff) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel)
:where(.sales-kpis, .routes-kpis, .saas-sales-kpis, .saas-goals-kpis, .saas-routes-kpis, .profit-summary-grid) article strong {
  color: #071b3b !important;
  letter-spacing: -.04em !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.sales-card h3, .routes-card h3, .profit-component h3, .section-head h3) {
  color: #071b3b !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.sales-table, .cx-table, .inventory-bars, .routes-route-timeline, .profit-table) {
  border: 2px solid color-mix(in srgb, var(--module-accent) 28%, #dbeafe) !important;
  border-radius: 20px !important;
  background: #f8fbff !important;
  overflow: auto !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(table thead th, .sales-table thead th) {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #08213f !important;
  background: color-mix(in srgb, var(--module-accent) 22%, #e0f2fe) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--module-accent) 30%, #bfdbfe) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(table tbody tr, .sales-table tbody tr) {
  background: rgba(255, 255, 255, .82) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(table tbody tr:nth-child(even), .sales-table tbody tr:nth-child(even)) {
  background: color-mix(in srgb, var(--module-accent) 6%, #ffffff) !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.module-subtabs, .routes-tabs, .profit-tabs) {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  margin: 0 0 12px !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.module-subtabs button, .routes-tabs button, .profit-tabs button) {
  border: 1px solid color-mix(in srgb, var(--module-accent) 35%, #bfdbfe) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #08213f !important;
  transform: none !important;
}

:where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.module-subtabs button.active, .routes-tabs button.active, .profit-tabs button.active) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--module-accent), color-mix(in srgb, var(--module-accent) 65%, #22c55e)) !important;
}

.routes-panel .routes-map-duo {
  grid-template-columns: minmax(420px, .9fr) minmax(0, 1.4fr) !important;
}

.routes-panel .routes-google-embed,
.routes-panel .routes-route-map-real {
  border-width: 2px !important;
  min-height: clamp(390px, 50vh, 680px) !important;
  background: #dff6ff !important;
}

@media (max-width: 1180px) {
  :where(.sales-panel, .goals-panel, .routes-panel, .profit-panel) :where(.sales-layout, .routes-map-duo, .profit-summary-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO TUU / Haulmer: portal POS profesional, pestañas ancladas y acciones ordenadas */
.tuu-haulmer-panel {
  --tuu-blue: #2448ff;
  --tuu-cyan: #0ea5e9;
  --tuu-green: #10b981;
  --tuu-orange: #f59e0b;
  width: min(100%, 1820px) !important;
  margin-inline: auto !important;
  display: grid !important;
  gap: 12px !important;
}

.tuu-haulmer-hero {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .62fr) !important;
  gap: 24px !important;
  padding: clamp(26px, 2.4vw, 42px) !important;
  overflow: hidden;
  border: 2px solid rgba(36, 72, 255, .24) !important;
  border-left: 10px solid var(--tuu-blue) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(36, 72, 255, .08), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 62%, #f8fffc 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

.tuu-haulmer-hero h3 {
  margin: 10px 0 14px !important;
  color: #071733 !important;
  font-size: clamp(44px, 4.2vw, 76px) !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
}

.tuu-haulmer-hero .module-eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 0 !important;
  border: 0 !important;
  color: #075985 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
}

.tuu-haulmer-hero p {
  max-width: 82ch;
  color: #1f3351 !important;
  font-size: clamp(17px, 1.1vw, 20px) !important;
  font-weight: 820 !important;
  line-height: 1.6 !important;
}

.tuu-service-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tuu-service-strip span {
  padding: 10px 14px;
  border: 1px solid rgba(36, 72, 255, .22);
  border-radius: 999px;
  color: #08213f;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
}

.tuu-brand-card {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 240px;
  padding: 26px;
  border: 2px solid rgba(36, 72, 255, .20);
  border-top: 8px solid var(--tuu-blue);
  border-radius: 28px;
  background: #ffffff;
  color: #071733;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
}

.tuu-brand-card .brand-logo-pill {
  width: fit-content;
  min-height: 54px !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  border-color: rgba(36, 72, 255, .20) !important;
  box-shadow: 0 10px 24px rgba(36, 72, 255, .10) !important;
}

.tuu-brand-card .brand-logo-pill img {
  width: 76px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.tuu-brand-card .brand-logo-pill em {
  font-size: 18px !important;
  font-weight: 950 !important;
}

.tuu-brand-card strong {
  font-size: 24px;
  line-height: 1.15;
}

.tuu-brand-card span,
.tuu-brand-card small {
  color: #475569;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 820;
}

.tuu-panel > .source-status {
  padding: 8px 12px !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 14px !important;
  color: #075985 !important;
  background: #f8fbff !important;
  box-shadow: none !important;
}

.tuu-haulmer-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
}

.tuu-haulmer-tabs::before {
  content: "Secciones";
  padding: 10px 14px;
  border-radius: 14px;
  color: #075985;
  background: #f0f9ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tuu-haulmer-tabs button {
  min-height: 48px !important;
  padding-inline: 22px !important;
  border: 1px solid rgba(36, 72, 255, .24) !important;
  border-radius: 16px !important;
  color: #08213f !important;
  background: #ffffff !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transform: none !important;
}

.tuu-haulmer-tabs button.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--tuu-blue), #0891b2) !important;
}

.tuu-section-head,
.tuu-tax-card .table-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(14, 165, 233, .20);
  border-left: 8px solid rgba(14, 165, 233, .70);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.tuu-section-head h3,
.tuu-tax-card h3 {
  margin: 4px 0;
  color: #071733;
  font-size: clamp(20px, 1.6vw, 28px);
  letter-spacing: -.04em;
}

.tuu-section-head p,
.tuu-tax-card p {
  margin: 0;
  color: #475569;
  font-weight: 760;
}

.tuu-search-toolbar,
.tuu-tax-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.2fr) minmax(170px, .4fr) minmax(220px, .55fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 14px !important;
  border: 1px solid rgba(245, 158, 11, .24) !important;
  border-left: 8px solid rgba(245, 158, 11, .75) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
}

.tuu-tax-toolbar {
  grid-template-columns: minmax(220px, .6fr) minmax(220px, .5fr) auto auto !important;
}

.tuu-toolbar label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.tuu-toolbar label span {
  color: #334155;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tuu-toolbar :where(input, select) {
  min-height: 46px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .98) !important;
}

.tuu-overview-kpis,
.tuu-panel .production-kpis {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 10px !important;
}

.tuu-overview-kpis article,
.tuu-panel .production-kpis article {
  border: 1px solid rgba(14, 165, 233, .20) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
}

.tuu-overview-kpis article > span,
.tuu-panel .production-kpis article > span {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #475569 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.tuu-overview-kpis article > strong,
.tuu-panel .production-kpis article > strong {
  display: block !important;
  color: #071733 !important;
  font-size: clamp(30px, 2.2vw, 44px) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

.tuu-overview-kpis article:nth-child(2),
.tuu-panel .production-kpis article:nth-child(2) { border-left-color: var(--tuu-green) !important; }
.tuu-overview-kpis article:nth-child(3),
.tuu-panel .production-kpis article:nth-child(3) { border-left-color: #8b5cf6 !important; }
.tuu-overview-kpis article:nth-child(4),
.tuu-panel .production-kpis article:nth-child(4) { border-left-color: var(--tuu-orange) !important; }

.tuu-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}

.tuu-state-chips button {
  min-height: 40px;
  border: 1px solid rgba(14, 165, 233, .30);
  border-radius: 999px;
  color: #08213f;
  background: #ffffff;
}

.tuu-state-chips button.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #2448ff, #10b981);
}

.tuu-table {
  border: 2px solid rgba(14, 165, 233, .35) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
}

.tuu-table table {
  min-width: 1220px;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

.tuu-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #08213f !important;
  background: #eaf6ff !important;
  border-bottom: 2px solid rgba(14, 165, 233, .28) !important;
}

.tuu-table tbody tr {
  background: #ffffff !important;
  box-shadow: none;
}

.tuu-table tbody tr:nth-child(even) {
  background: #f8fbff !important;
}

.tuu-table td:last-child {
  min-width: 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tuu-table td:last-child button {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 12px;
}

.compact-ranking {
  display: grid;
  gap: 10px;
}

.compact-ranking article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, .25);
  border-left: 5px solid var(--tuu-blue);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #eef9ff);
}

.compact-ranking article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2448ff, #10b981);
  font-weight: 1000;
}

.compact-ranking strong,
.compact-ranking small {
  display: block;
}

.compact-ranking small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.compact-ranking b {
  color: #075985;
  font-size: 13px;
  white-space: nowrap;
}

.compact-ranking a {
  color: #0369a1;
  font-size: 12px;
  font-weight: 1000;
  text-decoration: none;
  white-space: nowrap;
}

.tuu-table .status-pill.base {
  color: #075985;
  border: 1px solid rgba(14, 165, 233, .25);
  background: #e0f2fe;
}

.tuu-tax-card {
  border: 2px solid rgba(36, 72, 255, .26) !important;
  border-top: 8px solid var(--tuu-blue) !important;
  border-radius: 26px !important;
  background: #ffffff !important;
}

.tuu-view:not(.active) {
  display: none !important;
}

/* CONNECTIO responsive tables v1: las tablas no deben romper la pantalla al usar zoom/fuentes grandes. */
:where(
  .sales-card,
  .inventory-card,
  .catalog-card,
  .routes-card,
  .profit-card,
  .tuu-card,
  .tuu-tax-card,
  .tuu-view,
  .module-subpanel,
  [data-tuu-panel],
  [data-routes-panel],
  [data-catalog-panel],
  [data-inventory-panel],
  [data-profit-panel],
  [data-rendiciones-panel],
  [data-rrhh-panel],
  [data-coverage-panel]
) {
  min-width: 0 !important;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable,
  #tuuPartnerRanking,
  #tuuPartnerTicketRanking,
  #tuuPartnerSources,
  #tuuPartnerHistory
) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
)::-webkit-scrollbar {
  height: 12px;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
)::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #dff3ff;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
)::-webkit-scrollbar-thumb {
  border: 3px solid #dff3ff;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5e9, #10b981);
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
) table {
  width: max-content !important;
  min-width: min(1120px, 100%) !important;
  max-width: none !important;
}

:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
) th,
:where(
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .cap-table,
  .import-table,
  .tuu-table,
  .sync-preview-table,
  .company-analysis-table,
  #tuuPartnerPreview,
  #tuuPartnerTable
) td {
  white-space: nowrap;
}

:where(.tuu-table, #tuuPartnerTable, #tuuPartnerPreview) td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: inherit;
  box-shadow: -10px 0 18px rgba(8, 33, 63, .08);
}

@media (max-width: 1180px) {
  .tuu-haulmer-hero,
  .tuu-search-toolbar,
  .tuu-tax-toolbar {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO TUU Partner sources v1 */
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.inline-actions a,
.inline-actions button,
.danger-btn {
  min-height: 34px;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
}

.danger-btn {
  border: 1px solid rgba(239, 68, 68, .35);
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.danger-btn:hover {
  background: linear-gradient(135deg, #fecaca, #fca5a5);
}

/* CONNECTIO visual order pass v1
   Regla base para revisar módulos uno por uno: pestañas ancladas, no flotantes,
   textos legibles y avisos/fuentes con presencia clara. */
:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 12px 14px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: linear-gradient(135deg, #f8fbff, #e4f6ff) !important;
  border: 1px solid rgba(14, 165, 233, .46) !important;
  border-bottom: 4px solid rgba(14, 165, 233, .72) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: none !important;
  transform: none !important;
  scrollbar-gutter: stable;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
)::before {
  position: static !important;
  left: auto !important;
  z-index: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 4px 10px 0 !important;
  background: #dff3ff !important;
  color: #075985 !important;
  box-shadow: none !important;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) button {
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
  margin: 0 !important;
  color: #071733 !important;
  opacity: 1 !important;
  font-size: clamp(13px, .82vw, 15px) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
  background: #ffffff !important;
  border-color: rgba(14, 165, 233, .56) !important;
  box-shadow: none !important;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #075985, #0284c7) !important;
  border-color: #0284c7 !important;
  transform: none !important;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .22) !important;
}

:where(.source-status, .cx-loading-state, .modal-inline-status, .module-action-hint) {
  color: #073763 !important;
  opacity: 1 !important;
  font-size: clamp(14px, .9vw, 16px) !important;
  font-weight: 850 !important;
  line-height: 1.42 !important;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
  border: 1px solid rgba(14, 165, 233, .46) !important;
  border-left: 6px solid #38bdf8 !important;
  border-radius: 16px !important;
  text-shadow: none !important;
}

:where(.source-status.warning, .cx-loading-state.warning) {
  color: #78350f !important;
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: rgba(245, 158, 11, .54) !important;
  border-left-color: #f59e0b !important;
}

:where(.source-status.error, .cx-loading-state.error) {
  color: #7f1d1d !important;
  background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  border-color: rgba(239, 68, 68, .54) !important;
  border-left-color: #ef4444 !important;
}

:where(.source-status.success, .cx-loading-state.success) {
  color: #064e3b !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border-color: rgba(16, 185, 129, .54) !important;
  border-left-color: #10b981 !important;
}

:where(.sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .tuu-tax-card, .profit-component, .ops-card) {
  color: #071733 !important;
}

:where(.sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .tuu-tax-card, .profit-component, .ops-card) :where(h1, h2, h3, h4, strong, b) {
  color: #071733 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:where(.sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .tuu-tax-card, .profit-component, .ops-card) :where(p, small, span, label) {
  color: #334155 !important;
  opacity: 1 !important;
}

/* CONNECTIO Back Office TUU order pass v4
   Separa análisis operativo de fuentes/cargas y deja pestañas como barra de sección real. */
.tuu-haulmer-panel {
  gap: 18px !important;
}

.tuu-haulmer-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0 !important;
  border-width: 2px !important;
  border-left-width: 8px !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #eef8ff 100%) !important;
  box-shadow: none !important;
  scrollbar-gutter: stable;
}

.tuu-haulmer-tabs::before {
  flex: 0 0 auto !important;
  color: #064e78 !important;
  background: #dff3ff !important;
  border: 1px solid rgba(14, 165, 233, .26) !important;
}

.tuu-haulmer-tabs button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  color: #08213f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.tuu-view.active {
  margin-top: -18px !important;
  padding: 24px !important;
  border: 2px solid rgba(14, 165, 233, .34) !important;
  border-top: 0 !important;
  border-left: 8px solid #0ea5e9 !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #f7fcff 0%, #ffffff 52%, #f2fff9 100%) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .06) !important;
}

.tuu-view[data-tuu-view="fuentes"].active {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 48%, #eef9ff 100%) !important;
}

.tuu-view[data-tuu-view="partner"].active {
  border-left-color: #2448ff !important;
}

.tuu-view[data-tuu-view="tributario"].active {
  border-left-color: #8b5cf6 !important;
}

.tuu-view[data-tuu-view="evolutivo"].active,
.tuu-view[data-tuu-view="evolutivo-comercio"].active {
  border-left-color: #10b981 !important;
}

.tuu-view > .source-status,
.tuu-panel .source-status {
  margin-block: 10px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 8px solid #0ea5e9 !important;
  border-radius: 18px !important;
  color: #064e78 !important;
  background: linear-gradient(135deg, #e8f7ff 0%, #f8fcff 100%) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

.tuu-panel .source-status.warning {
  border-color: rgba(245, 158, 11, .42) !important;
  border-left-color: #f59e0b !important;
  color: #7c3f00 !important;
  background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%) !important;
}

.tuu-panel .source-status.error {
  border-color: rgba(239, 68, 68, .38) !important;
  border-left-color: #ef4444 !important;
  color: #7f1d1d !important;
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
}

.tuu-partner-import {
  grid-template-columns: minmax(360px, 1.3fr) minmax(160px, .35fr) minmax(160px, .35fr) auto auto !important;
  border-left-color: #f59e0b !important;
  background: #fffdfa !important;
}

.tuu-partner-import .primary-btn:disabled,
.tuu-partner-import button:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

#tuuPartnerSources .compact-ranking article,
#tuuPartnerHistory .compact-ranking article {
  border-left-width: 8px !important;
  background: #ffffff !important;
}

#tuuPartnerSources .compact-ranking small,
#tuuPartnerHistory .compact-ranking small {
  color: #1f3351 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#tuuPartnerPreview {
  background: #ffffff !important;
  border: 2px solid rgba(245, 158, 11, .28) !important;
  border-left: 8px solid #f59e0b !important;
  border-radius: 22px !important;
}

@media (max-width: 1180px) {
  .tuu-partner-import {
    grid-template-columns: 1fr !important;
  }

  .tuu-view.active {
    padding: 16px !important;
  }
}

/* CONNECTIO Rutas order pass v1
   El mapa no debe quedar tapado por pestañas o cabeceras flotantes. */
.routes-panel {
  gap: 18px !important;
}

.routes-panel .routes-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 2px solid rgba(20, 184, 166, .32) !important;
  border-left: 8px solid #14b8a6 !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.routes-panel .routes-tabs::before {
  position: static !important;
  flex: 0 0 auto !important;
  color: #0f766e !important;
  background: #ccfbf1 !important;
  border: 1px solid rgba(20, 184, 166, .25) !important;
  box-shadow: none !important;
}

.routes-panel .routes-tabs button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  transform: none !important;
  font-weight: 950 !important;
}

.routes-panel [data-routes-panel].active {
  margin-top: -18px !important;
  padding: 22px !important;
  border: 2px solid rgba(20, 184, 166, .32) !important;
  border-top: 0 !important;
  border-left: 8px solid #14b8a6 !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 52%, #eff8ff 100%) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .06) !important;
}

.routes-panel .routes-card {
  min-width: 0 !important;
}

.routes-panel .routes-map-head {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 16px !important;
  border: 1px solid rgba(20, 184, 166, .32) !important;
  border-left: 8px solid #14b8a6 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.routes-panel .routes-map-head h3 {
  color: #071733 !important;
  font-size: clamp(22px, 1.8vw, 34px) !important;
}

.routes-panel .routes-map-head p {
  max-width: 72ch !important;
  color: #334155 !important;
  font-weight: 780 !important;
}

.routes-panel .routes-map-actions {
  display: grid !important;
  grid-template-columns: minmax(170px, .5fr) minmax(280px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: min(100%, 760px) !important;
}

.routes-panel .routes-map-actions select,
.routes-panel .routes-map-actions button {
  width: 100% !important;
  max-width: none !important;
  min-height: 44px !important;
}

.routes-panel .routes-route-summary {
  grid-template-columns: minmax(260px, 1.25fr) repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.routes-panel .routes-map-duo {
  grid-template-columns: minmax(360px, .72fr) minmax(520px, 1.28fr) !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
}

.routes-panel .routes-google-embed,
.routes-panel .routes-route-map-real {
  min-height: clamp(460px, 58vh, 720px) !important;
}

.routes-panel .routes-route-map-real svg {
  min-height: clamp(460px, 58vh, 720px) !important;
}

.routes-panel .routes-map-selected-banner {
  border-left-color: #14b8a6 !important;
  background: linear-gradient(135deg, #ecfeff, #ffffff) !important;
}

.routes-panel .route-point-detail {
  border-left: 8px solid #14b8a6 !important;
  background: #ffffff !important;
}

@media (max-width: 1180px) {
  .routes-panel .routes-map-actions,
  .routes-panel .routes-map-duo {
    grid-template-columns: 1fr !important;
  }

  .routes-panel [data-routes-panel].active {
    padding: 16px !important;
  }
}

/* CONNECTIO Metas order pass v1
   Metas debe leerse como tablero gerencial: filtros claros, tablas legibles y sin blanco dominante. */
.goals-panel {
  --goals-blue: #2563eb;
  --goals-amber: #f59e0b;
  --goals-green: #10b981;
  --goals-violet: #8b5cf6;
  gap: 18px !important;
  max-width: min(100%, 1820px) !important;
}

.goals-panel .analysis-filter-panel,
.goals-panel .sales-toolbar-primary {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.2fr) minmax(150px, .35fr) minmax(150px, .35fr) minmax(180px, .45fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
  border: 2px solid rgba(245, 158, 11, .38) !important;
  border-left: 8px solid var(--goals-amber) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  box-shadow: none !important;
}

.goals-panel .sync-status-card {
  border: 2px solid rgba(37, 99, 235, .28) !important;
  border-left: 8px solid var(--goals-blue) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  color: #071733 !important;
  padding: 16px 18px !important;
}

.goals-panel #goalsKpis.sales-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.goals-panel #goalsKpis article {
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-left: 8px solid var(--goals-blue) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  min-height: 118px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
}

.goals-panel #goalsKpis article:nth-child(2) {
  border-left-color: var(--goals-green) !important;
}

.goals-panel #goalsKpis article:nth-child(3) {
  border-left-color: var(--goals-amber) !important;
}

.goals-panel #goalsKpis article:nth-child(4) {
  border-left-color: var(--goals-violet) !important;
}

.goals-panel #goalsKpis article:nth-child(5) {
  border-left-color: #06b6d4 !important;
}

.goals-panel #goalsKpis article:nth-child(6) {
  border-left-color: #10b981 !important;
}

.goals-panel #goalsKpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2vw, 40px) !important;
}

.goals-panel #goalsKpis span {
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.goals-panel .sales-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.goals-panel .sales-card {
  border: 2px solid rgba(14, 165, 233, .28) !important;
  border-left: 8px solid var(--goals-blue) !important;
  border-top-width: 2px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #f8fcff) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.goals-panel .sales-layout .sales-card:nth-child(2) {
  border-left-color: var(--goals-green) !important;
}

.goals-panel .inventory-bars,
.goals-panel .sales-table {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.goals-panel .inventory-bars table,
.goals-panel .sales-table table {
  width: max-content !important;
  min-width: min(1120px, 100%) !important;
}

.goals-panel .inventory-bars th,
.goals-panel .sales-table th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b88c9, #0ea5e9) !important;
  white-space: nowrap !important;
}

.goals-panel .inventory-bars td,
.goals-panel .sales-table td {
  color: #071733 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.goals-panel .source-status {
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid #0ea5e9 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  color: #075985 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 14px 16px !important;
}

.goals-panel .status-pill {
  opacity: 1 !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  .goals-panel .analysis-filter-panel,
  .goals-panel .sales-toolbar-primary,
  .goals-panel .sales-layout {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO Ventas order pass v1
   Ventas necesita máximo espacio útil, filtros evidentes y tablas que no se corten con zoom. */
.sales-panel {
  --sales-blue: #2563eb;
  --sales-cyan: #0ea5e9;
  --sales-green: #10b981;
  --sales-amber: #f59e0b;
  gap: 18px !important;
  max-width: min(100%, 1840px) !important;
}

.sales-panel .sales-module-hero {
  border: 2px solid rgba(14, 165, 233, .32) !important;
  border-left: 9px solid var(--sales-blue) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .96), rgba(255, 255, 255, .98) 52%, rgba(236, 253, 245, .9)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065) !important;
}

.sales-panel .sales-module-hero h3 {
  color: #071733 !important;
  font-size: clamp(36px, 4vw, 68px) !important;
  line-height: .96 !important;
}

.sales-panel .sales-module-hero p {
  max-width: 78ch !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 780 !important;
}

.sales-panel .sales-period-card {
  border: 1px solid rgba(37, 99, 235, .28) !important;
  border-left: 7px solid var(--sales-blue) !important;
  background: #ffffff !important;
}

.sales-panel .analysis-filter-panel,
.sales-panel .sales-toolbar-primary {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.15fr) minmax(140px, .28fr) minmax(140px, .28fr) minmax(170px, .38fr) repeat(3, minmax(160px, auto)) !important;
  gap: 12px !important;
  align-items: end !important;
  border: 2px solid rgba(245, 158, 11, .40) !important;
  border-left: 9px solid var(--sales-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  box-shadow: none !important;
}

.sales-panel .analysis-filter-panel label,
.sales-panel .sales-toolbar-primary label {
  min-width: 0 !important;
}

.sales-panel .analysis-filter-panel button,
.sales-panel .sales-toolbar-primary button {
  min-height: 48px !important;
  width: 100% !important;
  white-space: normal !important;
}

.sales-panel .sales-sync-card,
.sales-panel .sales-pie-section,
.sales-panel .sales-card {
  border: 2px solid rgba(14, 165, 233, .28) !important;
  border-left: 8px solid var(--sales-cyan) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #f8fcff) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.sales-panel .sales-sync-card {
  border-left-color: var(--sales-green) !important;
}

.sales-panel .sales-pie-section {
  border-left-color: var(--sales-blue) !important;
}

.sales-panel .sales-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.sales-panel .sales-kpis {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

.sales-panel .sales-kpis article {
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--sales-blue) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  min-height: 126px !important;
}

.sales-panel .sales-kpis article:nth-child(2) {
  border-left-color: var(--sales-green) !important;
}

.sales-panel .sales-kpis article:nth-child(3) {
  border-left-color: #8b5cf6 !important;
}

.sales-panel .sales-kpis article:nth-child(4) {
  border-left-color: var(--sales-amber) !important;
}

.sales-panel .sales-kpis article:nth-child(5) {
  border-left-color: #06b6d4 !important;
}

.sales-panel .sales-kpis article:nth-child(6) {
  border-left-color: #22c55e !important;
}

.sales-panel .sales-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2.3vw, 44px) !important;
}

.sales-panel .sales-kpis span,
.sales-panel .sales-kpis b,
.sales-panel .sales-card h3 {
  color: #071733 !important;
}

.sales-panel .source-status {
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--sales-cyan) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  color: #075985 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 14px 16px !important;
}

.sales-panel .sales-table,
.sales-panel .inventory-bars {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.sales-panel .sales-table table,
.sales-panel .inventory-bars table {
  width: max-content !important;
  min-width: min(1160px, 100%) !important;
}

.sales-panel .sales-table th,
.sales-panel .inventory-bars table thead th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b88c9, #0ea5e9) !important;
  white-space: nowrap !important;
}

.sales-panel .sales-table td,
.sales-panel .inventory-bars table td {
  color: #071733 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.sales-panel .sales-rules {
  display: grid !important;
  gap: 10px !important;
}

.sales-panel .sales-rules article {
  border: 1px solid rgba(37, 99, 235, .20) !important;
  border-left: 6px solid var(--sales-blue) !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
  color: #334155 !important;
  font-weight: 820 !important;
  padding: 12px 14px !important;
}

@media (max-width: 1320px) {
  .sales-panel .analysis-filter-panel,
  .sales-panel .sales-toolbar-primary {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, .4fr)) !important;
  }
}

@media (max-width: 1180px) {
  .sales-panel .analysis-filter-panel,
  .sales-panel .sales-toolbar-primary,
  .sales-panel .sales-layout {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO Rentabilidad order pass v1
   Rentabilidad es gerencial: debe separar fuente, análisis, liquidación y tabla sin perder datos por ancho. */
.profit-panel {
  --profit-amber: #f59e0b;
  --profit-orange: #d97706;
  --profit-green: #10b981;
  --profit-blue: #2563eb;
  --profit-violet: #8b5cf6;
  gap: 18px !important;
  max-width: min(100%, 1840px) !important;
}

.profit-panel .profit-module-hero {
  border: 2px solid rgba(245, 158, 11, .38) !important;
  border-left: 9px solid var(--profit-orange) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(255, 255, 255, .98) 54%, rgba(239, 246, 255, .88)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065) !important;
}

.profit-panel .profit-module-hero h3 {
  color: #071733 !important;
  font-size: clamp(34px, 3.6vw, 62px) !important;
  line-height: .98 !important;
}

.profit-panel .profit-module-hero p {
  max-width: 78ch !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 780 !important;
}

.profit-panel .profit-period-card {
  border: 1px solid rgba(245, 158, 11, .36) !important;
  border-left: 7px solid var(--profit-orange) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.profit-panel .source-governance-note,
.profit-panel .sync-status-card {
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--profit-blue) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  color: #075985 !important;
  padding: 14px 16px !important;
}

.profit-panel .source-governance-note strong,
.profit-panel .sync-status-card strong {
  color: #071733 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.profit-panel .source-governance-note span,
.profit-panel .sync-status-card span {
  color: #334155 !important;
  font-weight: 820 !important;
}

.profit-panel .analysis-filter-panel,
.profit-panel .sales-toolbar-primary {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.2fr) minmax(150px, .34fr) minmax(150px, .34fr) minmax(180px, .46fr) repeat(2, minmax(160px, auto)) !important;
  gap: 12px !important;
  align-items: end !important;
  border: 2px solid rgba(245, 158, 11, .42) !important;
  border-left: 9px solid var(--profit-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  box-shadow: none !important;
}

.profit-panel .analysis-filter-panel label,
.profit-panel .sales-toolbar-primary label {
  min-width: 0 !important;
}

.profit-panel .analysis-filter-panel button,
.profit-panel .sales-toolbar-primary button {
  width: 100% !important;
  min-height: 48px !important;
  white-space: normal !important;
}

.profit-panel .profit-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 14px !important;
  border: 2px solid rgba(245, 158, 11, .32) !important;
  border-left: 9px solid var(--profit-orange) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.profit-panel .profit-tabs button.active {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #ffffff !important;
}

.profit-panel [data-profit-panel].active,
.profit-panel .profit-tab-content.active {
  border: 2px solid rgba(245, 158, 11, .26) !important;
  border-left: 9px solid var(--profit-orange) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255, 251, 235, .68), rgba(255, 255, 255, .96)) !important;
  padding: 16px !important;
}

.profit-panel .sales-kpis,
.profit-panel .profit-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

.profit-panel .sales-kpis article,
.profit-panel .profit-summary-grid article {
  border: 2px solid rgba(245, 158, 11, .24) !important;
  border-left: 8px solid var(--profit-amber) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  min-height: 126px !important;
}

.profit-panel .sales-kpis article:nth-child(2),
.profit-panel .profit-summary-grid article:nth-child(2) {
  border-left-color: var(--profit-green) !important;
}

.profit-panel .sales-kpis article:nth-child(3),
.profit-panel .profit-summary-grid article:nth-child(3) {
  border-left-color: var(--profit-blue) !important;
}

.profit-panel .sales-kpis article:nth-child(4),
.profit-panel .profit-summary-grid article:nth-child(4) {
  border-left-color: var(--profit-violet) !important;
}

.profit-panel .sales-kpis strong,
.profit-panel .profit-summary-grid strong {
  color: #071733 !important;
  font-size: clamp(26px, 2.2vw, 44px) !important;
}

.profit-panel .sales-card,
.profit-panel .profit-component,
.profit-panel .profit-source-item,
.profit-panel .profit-advanced-tools {
  border: 2px solid rgba(245, 158, 11, .28) !important;
  border-left: 8px solid var(--profit-orange) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #fffaf0) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.profit-panel .sales-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.profit-panel .source-status {
  border: 1px solid rgba(245, 158, 11, .34) !important;
  border-left: 8px solid var(--profit-amber) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  color: #92400e !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 14px 16px !important;
}

.profit-panel .sales-table,
.profit-panel .inventory-bars,
.profit-panel .profit-table {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(245, 158, 11, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.profit-panel .sales-table table,
.profit-panel .inventory-bars table,
.profit-panel .profit-table table {
  width: max-content !important;
  min-width: min(1160px, 100%) !important;
}

.profit-panel .sales-table th,
.profit-panel .inventory-bars table thead th,
.profit-panel .profit-table th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  white-space: nowrap !important;
}

.profit-panel .sales-table td,
.profit-panel .inventory-bars table td,
.profit-panel .profit-table td {
  color: #071733 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.profit-panel .advanced-tools summary {
  color: #071733 !important;
  font-weight: 950 !important;
}

@media (max-width: 1320px) {
  .profit-panel .analysis-filter-panel,
  .profit-panel .sales-toolbar-primary {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, .4fr)) !important;
  }
}

@media (max-width: 1180px) {
  .profit-panel .analysis-filter-panel,
  .profit-panel .sales-toolbar-primary,
  .profit-panel .sales-layout {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO Catalogo order pass v1
   Catalogo gobierna ventas/rentabilidad: tabla amplia, acciones claras y editor modal estable. */
.catalog-panel {
  --catalog-violet: #7c3aed;
  --catalog-blue: #2563eb;
  --catalog-green: #10b981;
  --catalog-amber: #f59e0b;
  gap: 18px !important;
  max-width: min(100%, 1840px) !important;
}

.catalog-panel .catalog-hero {
  border: 2px solid rgba(124, 58, 237, .32) !important;
  border-left: 9px solid var(--catalog-violet) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(245, 243, 255, .96), rgba(255, 255, 255, .98) 54%, rgba(239, 246, 255, .88)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065) !important;
}

.catalog-panel .catalog-hero h2 {
  color: #071733 !important;
  font-size: clamp(34px, 3.5vw, 60px) !important;
  line-height: .98 !important;
}

.catalog-panel .catalog-hero p {
  max-width: 82ch !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 780 !important;
}

.catalog-panel .catalog-hero-card {
  border: 1px solid rgba(124, 58, 237, .30) !important;
  border-left: 7px solid var(--catalog-violet) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.catalog-panel .catalog-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 14px !important;
  border: 2px solid rgba(124, 58, 237, .30) !important;
  border-left: 9px solid var(--catalog-violet) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.catalog-panel .catalog-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
}

.catalog-panel .catalog-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(150px, .45fr)) minmax(150px, auto) minmax(170px, auto) !important;
  gap: 12px !important;
  align-items: center !important;
  border: 2px solid rgba(245, 158, 11, .38) !important;
  border-left: 9px solid var(--catalog-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

.catalog-panel .catalog-toolbar input,
.catalog-panel .catalog-toolbar select,
.catalog-panel .catalog-toolbar button {
  min-height: 48px !important;
  width: 100% !important;
}

.catalog-panel .catalog-check {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(203, 213, 225, .90) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #071733 !important;
  font-weight: 900 !important;
}

.catalog-panel .source-status {
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--catalog-blue) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  color: #075985 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 14px 16px !important;
}

.catalog-panel [data-catalog-panel].active,
.catalog-panel .catalog-view.active {
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-left: 9px solid var(--catalog-violet) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(245, 243, 255, .58), rgba(255, 255, 255, .96)) !important;
  padding: 16px !important;
}

.catalog-panel .catalog-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.catalog-panel .catalog-kpis article {
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-left: 8px solid var(--catalog-violet) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  min-height: 122px !important;
}

.catalog-panel .catalog-kpis article:nth-child(2) {
  border-left-color: var(--catalog-green) !important;
}

.catalog-panel .catalog-kpis article:nth-child(3) {
  border-left-color: var(--catalog-amber) !important;
}

.catalog-panel .catalog-kpis article:nth-child(4) {
  border-left-color: var(--catalog-blue) !important;
}

.catalog-panel .catalog-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2.2vw, 42px) !important;
}

.catalog-panel .catalog-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.catalog-panel .catalog-card {
  border: 2px solid rgba(124, 58, 237, .26) !important;
  border-left: 8px solid var(--catalog-violet) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #faf5ff) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.catalog-panel .sales-sync-card {
  border-left-color: var(--catalog-blue) !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
}

.catalog-panel .catalog-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.catalog-panel .catalog-actions button {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.catalog-panel .catalog-note {
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-left: 6px solid var(--catalog-blue) !important;
  border-radius: 16px !important;
  background: #f0f9ff !important;
  color: #075985 !important;
  font-weight: 850 !important;
  padding: 12px 14px !important;
}

.catalog-panel .catalog-table,
.catalog-panel .inventory-bars {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.catalog-panel .catalog-table table,
.catalog-panel .inventory-bars table {
  width: max-content !important;
  min-width: min(1280px, 100%) !important;
}

.catalog-panel .catalog-table th,
.catalog-panel .inventory-bars table thead th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  white-space: nowrap !important;
}

.catalog-panel .catalog-table td,
.catalog-panel .inventory-bars table td {
  color: #071733 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#catalogEditorModal .platform-modal-card.catalog-editor-card {
  width: min(1180px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 860px) !important;
  border: 2px solid rgba(124, 58, 237, .32) !important;
  border-left: 9px solid #7c3aed !important;
  border-radius: 28px !important;
  background: #ffffff !important;
}

#catalogEditorModal .platform-modal-head {
  border-bottom: 1px solid rgba(124, 58, 237, .20) !important;
  background: linear-gradient(135deg, #faf5ff, #ffffff) !important;
}

#catalogEditorModal .catalog-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#catalogEditorModal .catalog-form label {
  border-left-color: rgba(124, 58, 237, .78) !important;
}

#catalogEditorModal .modal-inline-status:not([hidden]) {
  margin: 12px 22px 0 !important;
  border: 1px solid rgba(14, 165, 233, .35) !important;
  border-left: 6px solid #0ea5e9 !important;
  border-radius: 16px !important;
  background: #f0f9ff !important;
  color: #075985 !important;
  font-weight: 900 !important;
  padding: 12px 14px !important;
}

@media (max-width: 1320px) {
  .catalog-panel .catalog-toolbar {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(140px, .45fr)) !important;
  }
}

@media (max-width: 1180px) {
  .catalog-panel .catalog-toolbar,
  .catalog-panel .catalog-layout,
  #catalogEditorModal .catalog-form {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO Inventario order pass v1
   Inventario debe verse como sala de control: stock, movimientos, POS y cuadraturas sin tablas cortadas. */
.inventory-web-panel,
.inventory-panel {
  --inventory-violet: #7c3aed;
  --inventory-blue: #2563eb;
  --inventory-green: #10b981;
  --inventory-amber: #f59e0b;
  gap: 18px !important;
  max-width: min(100%, 1840px) !important;
}

.inventory-web-panel .inventory-hero,
.inventory-panel .inventory-hero {
  border: 2px solid rgba(124, 58, 237, .32) !important;
  border-left: 9px solid var(--inventory-violet) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(245, 243, 255, .96), rgba(255, 255, 255, .98) 54%, rgba(236, 253, 245, .86)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065) !important;
}

.inventory-web-panel .inventory-hero h2,
.inventory-panel .inventory-hero h2 {
  color: #071733 !important;
  font-size: clamp(34px, 3.5vw, 60px) !important;
  line-height: .98 !important;
}

.inventory-web-panel .inventory-hero p,
.inventory-panel .inventory-hero p {
  max-width: 84ch !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 780 !important;
}

.inventory-web-panel .inventory-hero-card,
.inventory-panel .inventory-hero-card {
  border: 1px solid rgba(124, 58, 237, .30) !important;
  border-left: 7px solid var(--inventory-violet) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.inventory-web-panel .inventory-tabs,
.inventory-panel .inventory-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 14px !important;
  border: 2px solid rgba(124, 58, 237, .30) !important;
  border-left: 9px solid var(--inventory-violet) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.inventory-web-panel .inventory-tabs button.active,
.inventory-panel .inventory-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
}

.inventory-web-panel .inventory-toolbar,
.inventory-panel .inventory-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) repeat(auto-fit, minmax(160px, auto)) !important;
  gap: 12px !important;
  align-items: center !important;
  border: 2px solid rgba(245, 158, 11, .38) !important;
  border-left: 9px solid var(--inventory-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

.inventory-web-panel .inventory-toolbar input,
.inventory-web-panel .inventory-toolbar select,
.inventory-web-panel .inventory-toolbar button,
.inventory-panel .inventory-toolbar input,
.inventory-panel .inventory-toolbar select,
.inventory-panel .inventory-toolbar button {
  min-height: 48px !important;
  width: 100% !important;
}

.inventory-web-panel .source-status,
.inventory-panel .source-status {
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--inventory-blue) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  color: #075985 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  padding: 14px 16px !important;
}

.inventory-web-panel [data-inventory-panel].active,
.inventory-web-panel .inventory-view.active,
.inventory-panel [data-inventory-panel].active,
.inventory-panel .inventory-view.active {
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-left: 9px solid var(--inventory-violet) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(245, 243, 255, .58), rgba(255, 255, 255, .96)) !important;
  padding: 16px !important;
}

.inventory-web-panel .inventory-kpis,
.inventory-panel .inventory-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.inventory-web-panel .inventory-kpis article,
.inventory-panel .inventory-kpis article {
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-left: 8px solid var(--inventory-violet) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  min-height: 122px !important;
}

.inventory-web-panel .inventory-kpis article:nth-child(2),
.inventory-panel .inventory-kpis article:nth-child(2) {
  border-left-color: var(--inventory-green) !important;
}

.inventory-web-panel .inventory-kpis article:nth-child(3),
.inventory-panel .inventory-kpis article:nth-child(3) {
  border-left-color: var(--inventory-amber) !important;
}

.inventory-web-panel .inventory-kpis article:nth-child(4),
.inventory-panel .inventory-kpis article:nth-child(4) {
  border-left-color: var(--inventory-blue) !important;
}

.inventory-web-panel .inventory-kpis strong,
.inventory-panel .inventory-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2.2vw, 42px) !important;
}

.inventory-web-panel .inventory-layout,
.inventory-panel .inventory-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.inventory-web-panel .inventory-card,
.inventory-panel .inventory-card {
  border: 2px solid rgba(124, 58, 237, .26) !important;
  border-left: 8px solid var(--inventory-violet) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #faf5ff) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.inventory-web-panel .sales-sync-card,
.inventory-panel .sales-sync-card {
  border-left-color: var(--inventory-blue) !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
}

.inventory-web-panel .inventory-action-card,
.inventory-panel .inventory-action-card {
  border-left-color: var(--inventory-green) !important;
  background: linear-gradient(135deg, #ecfdf5, #ffffff) !important;
}

.inventory-web-panel .inventory-table,
.inventory-web-panel .inventory-bars,
.inventory-panel .inventory-table,
.inventory-panel .inventory-bars {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(124, 58, 237, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.inventory-web-panel .inventory-table table,
.inventory-web-panel .inventory-bars table,
.inventory-panel .inventory-table table,
.inventory-panel .inventory-bars table {
  width: max-content !important;
  min-width: min(1280px, 100%) !important;
}

.inventory-web-panel .inventory-table th,
.inventory-web-panel .inventory-bars table thead th,
.inventory-panel .inventory-table th,
.inventory-panel .inventory-bars table thead th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  white-space: nowrap !important;
}

.inventory-web-panel .inventory-table td,
.inventory-web-panel .inventory-bars table td,
.inventory-panel .inventory-table td,
.inventory-panel .inventory-bars table td {
  color: #071733 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.inventory-web-panel .inventory-form,
.inventory-panel .inventory-form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
}

.inventory-web-panel .inventory-form input,
.inventory-web-panel .inventory-form select,
.inventory-web-panel .inventory-form textarea,
.inventory-panel .inventory-form input,
.inventory-panel .inventory-form select,
.inventory-panel .inventory-form textarea {
  min-height: 44px !important;
  border: 1px solid rgba(203, 213, 225, .92) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

.inventory-web-panel .inventory-form textarea,
.inventory-panel .inventory-form textarea {
  min-height: 96px !important;
}

#inventoryEditorModal .platform-modal-card.inventory-editor-card {
  width: min(1180px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 860px) !important;
  border: 2px solid rgba(124, 58, 237, .32) !important;
  border-left: 9px solid #7c3aed !important;
  border-radius: 28px !important;
  background: #ffffff !important;
}

#inventoryEditorModal .platform-modal-head {
  border-bottom: 1px solid rgba(124, 58, 237, .20) !important;
  background: linear-gradient(135deg, #faf5ff, #ffffff) !important;
}

#inventoryEditorModal [data-inventory-modal-view] {
  padding: 18px 22px !important;
}

#inventoryEditorModal .inventory-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#inventoryEditorModal .inventory-form label {
  border-left-color: rgba(124, 58, 237, .78) !important;
}

#inventoryEditorModal .modal-inline-status:not([hidden]) {
  margin: 12px 0 0 !important;
  border: 1px solid rgba(14, 165, 233, .35) !important;
  border-left: 6px solid #0ea5e9 !important;
  border-radius: 16px !important;
  background: #f0f9ff !important;
  color: #075985 !important;
  font-weight: 900 !important;
  padding: 12px 14px !important;
}

@media (max-width: 1180px) {
  .inventory-web-panel .inventory-toolbar,
  .inventory-web-panel .inventory-layout,
  .inventory-panel .inventory-toolbar,
  .inventory-panel .inventory-layout,
  #inventoryEditorModal .inventory-form {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO Back Office TUU order pass v5
   Refuerzo de lectura: fuentes visibles, tablas anchas y paneles internos sin apariencia flotante. */
.tuu-panel,
.tuu-haulmer-panel {
  --tuu-blue: #2448ff;
  --tuu-cyan: #0ea5e9;
  --tuu-green: #10b981;
  --tuu-orange: #f59e0b;
  --tuu-violet: #8b5cf6;
  gap: 18px !important;
  max-width: min(100%, 1840px) !important;
}

.tuu-panel .tuu-haulmer-hero {
  border: 2px solid rgba(36, 72, 255, .26) !important;
  border-left: 10px solid var(--tuu-blue) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(255, 255, 255, .98) 52%, rgba(236, 253, 245, .86)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065) !important;
}

.tuu-panel .tuu-haulmer-hero h3 {
  color: #071733 !important;
  font-size: clamp(36px, 3.9vw, 66px) !important;
  line-height: .98 !important;
}

.tuu-panel .tuu-haulmer-hero p {
  max-width: 82ch !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 780 !important;
}

.tuu-panel .tuu-brand-card {
  min-width: min(360px, 100%) !important;
  border: 2px solid rgba(36, 72, 255, .24) !important;
  border-left: 8px solid var(--tuu-blue) !important;
  border-top-width: 2px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
}

.tuu-panel .tuu-brand-card .brand-logo-pill {
  min-width: 140px !important;
  min-height: 48px !important;
}

.tuu-panel .tuu-brand-card .brand-logo-pill img {
  max-height: 34px !important;
  max-width: 112px !important;
}

.tuu-panel .tuu-haulmer-tabs,
.tuu-panel .tuu-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 14px !important;
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 9px solid var(--tuu-cyan) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.tuu-panel .tuu-haulmer-tabs button,
.tuu-panel .tuu-tabs button {
  color: #071733 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.tuu-panel .tuu-haulmer-tabs button.active,
.tuu-panel .tuu-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--tuu-blue), #0891b2) !important;
}

.tuu-panel .tuu-view.active,
.tuu-panel [data-tuu-panel].active {
  margin-top: 0 !important;
  padding: 18px !important;
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 9px solid var(--tuu-cyan) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #f7fcff 0%, #ffffff 54%, #f2fff9 100%) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.tuu-panel .tuu-view[data-tuu-view="fuentes"].active {
  border-left-color: var(--tuu-orange) !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
}

.tuu-panel .tuu-view[data-tuu-view="tributario"].active {
  border-left-color: var(--tuu-violet) !important;
}

.tuu-panel .tuu-view[data-tuu-view="evolutivo"].active,
.tuu-panel .tuu-view[data-tuu-view="evolutivo-comercio"].active {
  border-left-color: var(--tuu-green) !important;
}

.tuu-panel .tuu-section-head,
.tuu-panel .tuu-tax-card .table-header {
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  padding: 16px 18px !important;
}

.tuu-panel .tuu-section-head h3,
.tuu-panel .tuu-tax-card h3 {
  color: #071733 !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  line-height: 1.06 !important;
}

.tuu-panel .tuu-section-head p,
.tuu-panel .tuu-tax-card p {
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 780 !important;
}

.tuu-panel .source-status,
.tuu-panel .tuu-view > .source-status {
  margin-block: 10px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

.tuu-panel .source-status.warning {
  border-color: rgba(245, 158, 11, .42) !important;
  border-left-color: var(--tuu-orange) !important;
  color: #92400e !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

.tuu-panel .source-status.error {
  border-color: rgba(239, 68, 68, .38) !important;
  border-left-color: #ef4444 !important;
  color: #7f1d1d !important;
  background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
}

.tuu-panel .tuu-toolbar,
.tuu-panel .tuu-search-toolbar,
.tuu-panel .tuu-tax-toolbar,
.tuu-panel .tuu-partner-import {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.15fr) repeat(auto-fit, minmax(160px, auto)) !important;
  gap: 12px !important;
  align-items: end !important;
  border: 2px solid rgba(245, 158, 11, .38) !important;
  border-left: 9px solid var(--tuu-orange) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

.tuu-panel .tuu-toolbar label {
  min-width: 0 !important;
}

.tuu-panel .tuu-toolbar label span {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.tuu-panel .tuu-toolbar :where(input, select, button) {
  min-height: 48px !important;
  width: 100% !important;
}

.tuu-panel .production-kpis,
.tuu-panel .tuu-overview-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.tuu-panel .production-kpis article,
.tuu-panel .tuu-overview-kpis article {
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  min-height: 120px !important;
}

.tuu-panel .production-kpis article:nth-child(2),
.tuu-panel .tuu-overview-kpis article:nth-child(2) {
  border-left-color: var(--tuu-green) !important;
}

.tuu-panel .production-kpis article:nth-child(3),
.tuu-panel .tuu-overview-kpis article:nth-child(3) {
  border-left-color: var(--tuu-violet) !important;
}

.tuu-panel .production-kpis article:nth-child(4),
.tuu-panel .tuu-overview-kpis article:nth-child(4) {
  border-left-color: var(--tuu-orange) !important;
}

.tuu-panel .production-kpis strong,
.tuu-panel .tuu-overview-kpis strong {
  color: #071733 !important;
  font-size: clamp(26px, 2.2vw, 42px) !important;
}

.tuu-panel .sales-card,
.tuu-panel .tuu-tax-card {
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-left: 8px solid var(--tuu-cyan) !important;
  border-top-width: 2px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, #f8fcff) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .055) !important;
}

.tuu-panel .production-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.tuu-panel .tuu-table,
.tuu-panel .sales-table,
.tuu-panel :where(#tuuPartnerPreview, #tuuPartnerTable, #tuuPartnerRanking, #tuuPartnerTicketRanking, #tuuPartnerSources, #tuuPartnerHistory) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.tuu-panel .tuu-table table,
.tuu-panel .sales-table table {
  width: max-content !important;
  min-width: min(1280px, 100%) !important;
}

.tuu-panel .tuu-table th,
.tuu-panel .sales-table th {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b88c9, #0ea5e9) !important;
  white-space: nowrap !important;
}

.tuu-panel .tuu-table td,
.tuu-panel .sales-table td {
  color: #071733 !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.tuu-panel .tuu-table td small,
.tuu-panel .sales-table td small,
.tuu-panel .compact-ranking small {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
}

.tuu-panel .tuu-state-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

.tuu-panel .tuu-state-chips button {
  border: 1px solid rgba(14, 165, 233, .30) !important;
  color: #071733 !important;
  background: #ffffff !important;
  font-weight: 950 !important;
}

.tuu-panel .tuu-state-chips button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--tuu-blue), var(--tuu-cyan)) !important;
}

.tuu-panel .tuu-table td:last-child,
.tuu-panel .sales-table td:last-child {
  position: sticky !important;
  right: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: -12px 0 22px rgba(15, 23, 42, .06) !important;
  white-space: normal !important;
}

.tuu-panel .tuu-table td:last-child button,
.tuu-panel .sales-table td:last-child button {
  min-height: 34px !important;
  margin: 2px !important;
  border-radius: 12px !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  .tuu-panel .tuu-toolbar,
  .tuu-panel .tuu-search-toolbar,
  .tuu-panel .tuu-tax-toolbar,
  .tuu-panel .tuu-partner-import {
    grid-template-columns: 1fr !important;
  }

  .tuu-panel .tuu-view.active,
  .tuu-panel [data-tuu-panel].active {
    padding: 16px !important;
  }
}

/* CONNECTIO Time order pass v1
   Jornada y RRHH: lectura rapida, pestañas ancladas, bandeja clara y formularios sin ruido visual. */
.connectio-time-panel {
  --time-blue: #2563eb;
  --time-cyan: #0ea5e9;
  --time-green: #10b981;
  --time-amber: #f59e0b;
  --time-violet: #8b5cf6;
  --time-rose: #f43f5e;
  --time-ink: #071733;
  max-width: min(100%, 1840px) !important;
  gap: 18px !important;
}

.connectio-time-panel .time-hero {
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--time-cyan) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, #f5fbff 0%, #ffffff 50%, #ecfdf5 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.connectio-time-panel .time-hero h3 {
  color: var(--time-ink) !important;
  font-size: clamp(42px, 4vw, 74px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.connectio-time-panel .time-hero p {
  max-width: 760px !important;
  color: #334155 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 780 !important;
}

.connectio-time-panel .time-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  min-width: min(100%, 620px) !important;
  padding: 16px !important;
  border: 2px solid rgba(37, 99, 235, .20) !important;
  border-left: 8px solid var(--time-blue) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #eef6ff, #ffffff) !important;
}

.connectio-time-panel .time-filters label {
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.connectio-time-panel .time-filters :where(input, select, button) {
  width: 100% !important;
  min-height: 48px !important;
  font-weight: 820 !important;
}

.connectio-time-panel .time-filters button {
  grid-column: 1 / -1 !important;
}

.connectio-time-panel .time-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 10px 12px 0 !important;
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-bottom: 0 !important;
  border-left: 9px solid var(--time-cyan) !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(135deg, #f8fcff, #ffffff) !important;
  box-shadow: none !important;
}

.connectio-time-panel .time-tabs button {
  min-height: 44px !important;
  border-color: rgba(37, 99, 235, .30) !important;
  color: var(--time-ink) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.connectio-time-panel .time-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--time-blue), var(--time-cyan)) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18) !important;
}

.connectio-time-panel .time-view.active {
  margin-top: 0 !important;
  padding: 18px !important;
  border: 2px solid rgba(14, 165, 233, .28) !important;
  border-left: 9px solid var(--time-cyan) !important;
  border-top-width: 2px !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #f8fcff 0%, #ffffff 56%, #f0fdfa 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.connectio-time-panel .time-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
  gap: 12px !important;
}

.connectio-time-panel .time-kpis article {
  min-height: 118px !important;
  padding: 18px !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--time-cyan) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.connectio-time-panel .time-kpis article:nth-child(2) { border-left-color: var(--time-green) !important; }
.connectio-time-panel .time-kpis article:nth-child(3) { border-left-color: var(--time-amber) !important; }
.connectio-time-panel .time-kpis article:nth-child(4) { border-left-color: var(--time-violet) !important; }
.connectio-time-panel .time-kpis article:nth-child(5) { border-left-color: var(--time-rose) !important; }

.connectio-time-panel .time-kpis strong {
  color: var(--time-ink) !important;
  font-size: clamp(28px, 2.4vw, 46px) !important;
  line-height: .95 !important;
}

.connectio-time-panel .time-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 920 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.connectio-time-panel #timeStatus,
.connectio-time-panel .source-status {
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--time-cyan) !important;
  border-radius: 20px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.connectio-time-panel .time-grid,
.connectio-time-panel .time-calendars {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}

.connectio-time-panel .time-worker-card,
.connectio-time-panel .time-calendar,
.connectio-time-panel .time-summary-card,
.connectio-time-panel .time-category-admin,
.connectio-time-panel .time-justification {
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--time-cyan) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.connectio-time-panel .time-worker-card.time-verde,
.connectio-time-panel .time-summary-card.time-verde,
.connectio-time-panel .time-category-verde { border-left-color: var(--time-green) !important; }
.connectio-time-panel .time-worker-card.time-naranja,
.connectio-time-panel .time-summary-card.time-naranja,
.connectio-time-panel .time-category-naranja { border-left-color: var(--time-amber) !important; }
.connectio-time-panel .time-worker-card.time-morado,
.connectio-time-panel .time-summary-card.time-morado,
.connectio-time-panel .time-category-morado { border-left-color: var(--time-violet) !important; }
.connectio-time-panel .time-worker-card.time-rojo,
.connectio-time-panel .time-summary-card.time-rojo,
.connectio-time-panel .time-category-rojo { border-left-color: var(--time-rose) !important; }

.connectio-time-panel .time-card-head strong,
.connectio-time-panel .time-calendar h4,
.connectio-time-panel .time-summary-card h3,
.connectio-time-panel .time-category-admin h3 {
  color: var(--time-ink) !important;
  font-size: clamp(20px, 1.55vw, 30px) !important;
  line-height: 1.05 !important;
}

.connectio-time-panel .time-worker-card p,
.connectio-time-panel .time-calendar p,
.connectio-time-panel .time-summary-card p,
.connectio-time-panel .time-category-admin p {
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
}

.connectio-time-panel .time-mini,
.connectio-time-panel .time-events,
.connectio-time-panel .time-category-list {
  gap: 10px !important;
}

.connectio-time-panel .time-expediente,
.connectio-time-panel .time-justify-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.35fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.connectio-time-panel .time-expediente .time-summary-card:first-child {
  grid-column: 1 / -1 !important;
}

.connectio-time-panel .time-gap,
.connectio-time-panel .time-event,
.connectio-time-panel .time-category-item {
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 7px solid var(--time-cyan) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, #f8fcff) !important;
  padding: 14px !important;
}

.connectio-time-panel .time-category-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 2px solid rgba(37, 99, 235, .20) !important;
  border-left: 8px solid var(--time-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #eef6ff, #ffffff) !important;
}

.connectio-time-panel .time-category-form label:has(textarea),
.connectio-time-panel .time-category-form .time-category-check,
.connectio-time-panel .time-category-form .preview-actions {
  grid-column: 1 / -1 !important;
}

.connectio-time-panel .time-category-form :where(input, select, textarea) {
  width: 100% !important;
  min-height: 46px !important;
  border-color: rgba(14, 165, 233, .35) !important;
  color: var(--time-ink) !important;
  font-weight: 820 !important;
}

.connectio-time-panel .advanced-tools.time-advanced-tools {
  order: 30 !important;
  border: 1px dashed rgba(37, 99, 235, .34) !important;
  border-left: 8px solid var(--time-violet) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f5f3ff, #ffffff) !important;
  padding: 12px 14px !important;
}

.connectio-time-panel .advanced-tools.time-advanced-tools summary {
  color: var(--time-ink) !important;
  font-weight: 950 !important;
}

.connectio-time-panel .advanced-tool-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.connectio-time-panel .time-view[data-time-view="produccion"].active {
  overflow-x: auto !important;
}

.connectio-time-panel .time-view[data-time-view="produccion"].active table,
.connectio-time-panel .source-table {
  width: max-content !important;
  min-width: min(1120px, 100%) !important;
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.connectio-time-panel .source-table th {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--time-blue), var(--time-cyan)) !important;
  white-space: nowrap !important;
}

.connectio-time-panel .source-table td {
  color: var(--time-ink) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

#timeJustificationModal.platform-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 23, 51, .38) !important;
  backdrop-filter: blur(8px) !important;
}

#timeJustificationModal .platform-modal-card {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 860px) !important;
  overflow: auto !important;
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--time-cyan) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 32px 80px rgba(7, 23, 51, .30) !important;
}

#timeJustificationModal .time-justify-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8fcff, #ffffff) !important;
}

#timeJustificationModal .time-justify-form > label:first-child,
#timeJustificationModal .time-justify-form > label:has(textarea),
#timeJustificationModal .time-justify-form > label:has([name="categoriaOtro"]) {
  grid-column: 1 / -1 !important;
}

#timeJustificationModal .time-justify-form .source-row {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

#timeJustificationModal .modal-inline-status {
  margin-top: 12px !important;
  border-left-width: 8px !important;
  border-radius: 18px !important;
  font-weight: 850 !important;
}

@media (max-width: 1180px) {
  .connectio-time-panel .time-hero,
  .connectio-time-panel .time-expediente,
  .connectio-time-panel .time-justify-layout,
  .connectio-time-panel .time-category-form,
  #timeJustificationModal .time-justify-form {
    grid-template-columns: 1fr !important;
  }

  .connectio-time-panel .time-hero h3 {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
}

/* RRHH Remuneraciones order pass v1
   Costos laborales: menos planilla, mas tablero financiero legible con tablas protegidas. */
.rrhh-panel {
  --rrhh-blue: #2563eb;
  --rrhh-cyan: #0ea5e9;
  --rrhh-green: #10b981;
  --rrhh-amber: #f59e0b;
  --rrhh-pink: #ec4899;
  --rrhh-violet: #8b5cf6;
  --rrhh-ink: #071733;
  max-width: min(100%, 1840px) !important;
  gap: 18px !important;
}

.rrhh-panel .rrhh-hero {
  border: 2px solid rgba(236, 72, 153, .26) !important;
  border-left: 10px solid var(--rrhh-pink) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, #fff7fb 0%, #ffffff 50%, #eef6ff 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.rrhh-panel .rrhh-hero h2 {
  color: var(--rrhh-ink) !important;
  font-size: clamp(40px, 3.9vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.rrhh-panel .rrhh-hero p {
  max-width: 820px !important;
  color: #334155 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 780 !important;
}

.rrhh-panel .rrhh-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  min-width: min(100%, 520px) !important;
  padding: 16px !important;
  border: 2px solid rgba(245, 158, 11, .30) !important;
  border-left: 8px solid var(--rrhh-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: none !important;
}

.rrhh-panel .rrhh-filters label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.rrhh-panel .rrhh-filters :where(select, button) {
  width: 100% !important;
  min-height: 48px !important;
  font-weight: 850 !important;
}

.rrhh-panel .rrhh-filters button {
  grid-column: 1 / -1 !important;
}

.rrhh-panel .source-governance-note {
  display: grid !important;
  gap: 6px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(99, 102, 241, .30) !important;
  border-left: 8px solid var(--rrhh-violet) !important;
  border-radius: 22px !important;
  color: #312e81 !important;
  background: linear-gradient(135deg, #f5f3ff, #ffffff) !important;
  font-weight: 850 !important;
}

.rrhh-panel .source-governance-note strong {
  color: var(--rrhh-ink) !important;
  font-size: 18px !important;
}

.rrhh-panel .rrhh-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 10px 12px 0 !important;
  border: 2px solid rgba(236, 72, 153, .24) !important;
  border-bottom: 0 !important;
  border-left: 9px solid var(--rrhh-pink) !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(135deg, #fff7fb, #ffffff) !important;
  box-shadow: none !important;
}

.rrhh-panel .rrhh-tabs button {
  min-height: 44px !important;
  border-color: rgba(236, 72, 153, .26) !important;
  color: var(--rrhh-ink) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.rrhh-panel .rrhh-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--rrhh-pink), var(--rrhh-violet)) !important;
  box-shadow: 0 12px 24px rgba(236, 72, 153, .16) !important;
}

.rrhh-panel .rrhh-view.active {
  margin-top: 0 !important;
  padding: 18px !important;
  border: 2px solid rgba(236, 72, 153, .24) !important;
  border-left: 9px solid var(--rrhh-pink) !important;
  border-top-width: 2px !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #fff7fb 0%, #ffffff 54%, #eef6ff 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.rrhh-panel .sales-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: 12px !important;
}

.rrhh-panel .sales-kpis article {
  min-height: 122px !important;
  padding: 18px !important;
  border: 2px solid rgba(236, 72, 153, .20) !important;
  border-left: 8px solid var(--rrhh-pink) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.rrhh-panel .sales-kpis article:nth-child(2) { border-left-color: var(--rrhh-green) !important; }
.rrhh-panel .sales-kpis article:nth-child(3) { border-left-color: var(--rrhh-blue) !important; }
.rrhh-panel .sales-kpis article:nth-child(4) { border-left-color: var(--rrhh-amber) !important; }

.rrhh-panel .sales-kpis strong {
  color: var(--rrhh-ink) !important;
  font-size: clamp(28px, 2.35vw, 46px) !important;
  line-height: .95 !important;
}

.rrhh-panel .sales-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 920 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.rrhh-panel .sales-layout {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.rrhh-panel .sales-card,
.rrhh-panel .rrhh-worker-card,
.rrhh-panel .rrhh-ficha {
  border: 2px solid rgba(236, 72, 153, .22) !important;
  border-left: 8px solid var(--rrhh-pink) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.rrhh-panel .sales-card:nth-child(2n),
.rrhh-panel .rrhh-worker-card:nth-child(2n) {
  border-left-color: var(--rrhh-green) !important;
}

.rrhh-panel .sales-card:nth-child(3n),
.rrhh-panel .rrhh-worker-card:nth-child(3n) {
  border-left-color: var(--rrhh-amber) !important;
}

.rrhh-panel .sales-card h3,
.rrhh-panel .rrhh-worker-card h3,
.rrhh-panel .rrhh-ficha h3 {
  color: var(--rrhh-ink) !important;
  font-size: clamp(22px, 1.7vw, 34px) !important;
  line-height: 1.05 !important;
}

.rrhh-panel .sales-card h4,
.rrhh-panel .rrhh-ficha h4 {
  margin-top: 18px !important;
  color: #334155 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.rrhh-panel .rrhh-worker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.rrhh-panel .rrhh-worker-card {
  cursor: pointer !important;
  padding: 18px !important;
}

.rrhh-panel .rrhh-worker-card span,
.rrhh-panel .rrhh-worker-card small {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.rrhh-panel .rrhh-worker-card b {
  color: var(--rrhh-ink) !important;
  font-size: 22px !important;
}

.rrhh-panel :where(.sales-card, .rrhh-ficha) table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-radius: 18px !important;
  background: #f8fcff !important;
}

.rrhh-panel :where(.sales-card, .rrhh-ficha) thead,
.rrhh-panel :where(.sales-card, .rrhh-ficha) tbody,
.rrhh-panel :where(.sales-card, .rrhh-ficha) tr {
  min-width: max-content !important;
}

.rrhh-panel :where(.sales-card, .rrhh-ficha) th {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--rrhh-pink), var(--rrhh-violet)) !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.rrhh-panel :where(.sales-card, .rrhh-ficha) td {
  color: var(--rrhh-ink) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.rrhh-panel :where(.sales-card, .rrhh-ficha) td small {
  display: block !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.rrhh-panel .profit-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.rrhh-panel .profit-summary-grid article {
  border: 1px solid rgba(236, 72, 153, .22) !important;
  border-left: 7px solid var(--rrhh-pink) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fff7fb, #ffffff) !important;
}

.rrhh-panel .inventory-bars {
  padding: 10px !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 18px !important;
  background: #f8fcff !important;
}

.rrhh-panel #rrhhStatus,
.rrhh-panel .source-status {
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--rrhh-cyan) !important;
  border-radius: 20px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.rrhh-panel .rrhh-view[data-rrhh-view="proyeccion"] .sales-toolbar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, auto)) !important;
  gap: 12px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
}

.rrhh-panel .rrhh-view[data-rrhh-view="proyeccion"] :where(select, button) {
  min-height: 46px !important;
  width: 100% !important;
}

@media (max-width: 1180px) {
  .rrhh-panel .rrhh-hero,
  .rrhh-panel .rrhh-filters {
    grid-template-columns: 1fr !important;
  }

  .rrhh-panel .rrhh-hero h2 {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
}

/* Rendiciones de ventas order pass v1
   Caja diaria: vendido, rendido, deuda, atrasos e historial con lectura compacta y auditable. */
.rendiciones-panel {
  --rend-blue: #2563eb;
  --rend-cyan: #0ea5e9;
  --rend-green: #16a34a;
  --rend-amber: #f59e0b;
  --rend-red: #ef4444;
  --rend-violet: #7c3aed;
  --rend-ink: #071733;
  max-width: min(100%, 1840px) !important;
  gap: 18px !important;
}

.rendiciones-panel .rendiciones-hero {
  border: 2px solid rgba(22, 163, 74, .28) !important;
  border-left: 10px solid var(--rend-green) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #eef6ff 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.rendiciones-panel .rendiciones-hero h2 {
  color: var(--rend-ink) !important;
  font-size: clamp(40px, 3.8vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.rendiciones-panel .rendiciones-hero p {
  max-width: 820px !important;
  color: #334155 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 780 !important;
}

.rendiciones-panel .rendiciones-period {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  min-width: min(100%, 560px) !important;
  padding: 16px !important;
  border: 2px solid rgba(245, 158, 11, .34) !important;
  border-left: 8px solid var(--rend-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: none !important;
}

.rendiciones-panel .rendiciones-period label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.rendiciones-panel .rendiciones-period :where(select, button) {
  width: 100% !important;
  min-height: 48px !important;
  font-weight: 850 !important;
}

.rendiciones-panel .rendiciones-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 10px 12px 0 !important;
  border: 2px solid rgba(22, 163, 74, .26) !important;
  border-bottom: 0 !important;
  border-left: 9px solid var(--rend-green) !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
  box-shadow: none !important;
}

.rendiciones-panel .rendiciones-tabs button {
  min-height: 44px !important;
  border-color: rgba(22, 163, 74, .28) !important;
  color: var(--rend-ink) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.rendiciones-panel .rendiciones-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--rend-green), var(--rend-cyan)) !important;
  box-shadow: 0 12px 24px rgba(22, 163, 74, .16) !important;
}

.rendiciones-panel .rendiciones-view.active {
  margin-top: 0 !important;
  padding: 18px !important;
  border: 2px solid rgba(22, 163, 74, .24) !important;
  border-left: 9px solid var(--rend-green) !important;
  border-top-width: 2px !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 54%, #eef6ff 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.rendiciones-panel #rendicionesStatus,
.rendiciones-panel #rendicionesSyncStatus,
.rendiciones-panel .source-status,
.rendiciones-panel .sync-status-card {
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--rend-cyan) !important;
  border-radius: 20px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.rendiciones-panel #rendicionesSyncStatus {
  border-left-color: var(--rend-violet) !important;
  color: #312e81 !important;
  background: linear-gradient(135deg, #f5f3ff, #ffffff) !important;
}

.rendiciones-panel .sales-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  gap: 12px !important;
}

.rendiciones-panel .sales-kpis article {
  min-height: 122px !important;
  padding: 18px !important;
  border: 2px solid rgba(22, 163, 74, .22) !important;
  border-left: 8px solid var(--rend-green) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.rendiciones-panel .sales-kpis article:nth-child(2) { border-left-color: var(--rend-blue) !important; }
.rendiciones-panel .sales-kpis article:nth-child(3) { border-left-color: var(--rend-red) !important; }
.rendiciones-panel .sales-kpis article:nth-child(4) { border-left-color: var(--rend-amber) !important; }
.rendiciones-panel .sales-kpis article:nth-child(5) { border-left-color: var(--rend-violet) !important; }

.rendiciones-panel .sales-kpis strong {
  color: var(--rend-ink) !important;
  font-size: clamp(28px, 2.35vw, 46px) !important;
  line-height: .95 !important;
}

.rendiciones-panel .sales-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 920 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.rendiciones-panel .sales-card,
.rendiciones-panel .ops-card,
.rendiciones-panel .form-launch-card,
.rendiciones-panel .rendicion-card {
  border: 2px solid rgba(22, 163, 74, .24) !important;
  border-left: 8px solid var(--rend-green) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.rendiciones-panel .sales-card:nth-child(2n),
.rendiciones-panel .rendicion-card.warn {
  border-left-color: var(--rend-amber) !important;
}

.rendiciones-panel .rendicion-card.risk {
  border-left-color: var(--rend-red) !important;
  background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
}

.rendiciones-panel .rendicion-card.ok {
  border-left-color: var(--rend-green) !important;
  background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}

.rendiciones-panel .sales-card h3,
.rendiciones-panel .ops-card h3,
.rendiciones-panel .rendicion-card h3 {
  color: var(--rend-ink) !important;
  font-size: clamp(22px, 1.7vw, 34px) !important;
  line-height: 1.05 !important;
}

.rendiciones-panel .sales-layout,
.rendiciones-panel .rendiciones-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.rendiciones-panel .rendiciones-grid {
  margin-top: 16px !important;
}

.rendiciones-panel .rendiciones-filters {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) repeat(auto-fit, minmax(150px, auto)) !important;
  gap: 12px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
  padding: 14px !important;
  border: 2px solid rgba(245, 158, 11, .34) !important;
  border-left: 8px solid var(--rend-amber) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: none !important;
}

.rendiciones-panel .rendiciones-filters :where(input, select, button) {
  width: 100% !important;
  min-height: 46px !important;
  font-weight: 820 !important;
}

.rendiciones-panel .sales-table,
.rendiciones-panel #rendicionesCuadre,
.rendiciones-panel #rendicionesHistorial,
.rendiciones-panel #rendicionesRiesgo,
.rendiciones-panel #rendicionesQuincena {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-radius: 18px !important;
  background: #f8fcff !important;
}

.rendiciones-panel :where(.sales-table, #rendicionesCuadre, #rendicionesHistorial, #rendicionesRiesgo, #rendicionesQuincena) table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
}

.rendiciones-panel :where(.sales-table, #rendicionesCuadre, #rendicionesHistorial, #rendicionesRiesgo, #rendicionesQuincena) th {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--rend-green), var(--rend-cyan)) !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.rendiciones-panel :where(.sales-table, #rendicionesCuadre, #rendicionesHistorial, #rendicionesRiesgo, #rendicionesQuincena) td {
  color: var(--rend-ink) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.rendiciones-panel .rendiciones-debt {
  min-width: 140px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #dbeafe !important;
  overflow: hidden !important;
}

.rendiciones-panel .rendiciones-debt span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--rend-amber), var(--rend-red)) !important;
}

.rendiciones-panel .rendiciones-state {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #064e3b !important;
  background: #dcfce7 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.rendiciones-panel .rendiciones-state.atrasado,
.rendiciones-panel .rendiciones-state.en-riesgo {
  color: #7f1d1d !important;
  background: #fee2e2 !important;
}

.rendiciones-panel .rendicion-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.rendiciones-panel .rendicion-metrics small {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  font-weight: 820 !important;
}

#rendicionEditorModal.platform-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 23, 51, .38) !important;
  backdrop-filter: blur(8px) !important;
}

#rendicionEditorModal .platform-modal-card {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 860px) !important;
  overflow: auto !important;
  border: 2px solid rgba(22, 163, 74, .30) !important;
  border-left: 10px solid var(--rend-green) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 32px 80px rgba(7, 23, 51, .30) !important;
}

#rendicionEditorModal .rendiciones-form {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(22, 163, 74, .25) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8fcff, #ffffff) !important;
}

#rendicionEditorModal .rendiciones-form label {
  border-left-color: var(--rend-green) !important;
  background: #ffffff !important;
}

#rendicionEditorModal .rendiciones-form :where(input, textarea) {
  color: var(--rend-ink) !important;
  font-weight: 820 !important;
}

#rendicionEditorModal .modal-inline-status {
  margin-top: 12px !important;
  border-left-width: 8px !important;
  border-radius: 18px !important;
  font-weight: 850 !important;
}

@media (max-width: 1180px) {
  .rendiciones-panel .rendiciones-hero,
  .rendiciones-panel .rendiciones-period,
  .rendiciones-panel .rendiciones-filters,
  #rendicionEditorModal .rendiciones-form {
    grid-template-columns: 1fr !important;
  }

  .rendiciones-panel .rendiciones-hero h2 {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
}

/* Planes Entel order pass v1
   Validacion de planes: registro, cierre semanal, ejecutivos, ranking y pagos con identidad clara. */
.planes-entel-panel {
  --entel-blue: #0069a7;
  --entel-cyan: #0ea5e9;
  --entel-orange: #ff7a00;
  --entel-green: #10b981;
  --entel-red: #ef4444;
  --entel-violet: #7c3aed;
  --entel-ink: #071733;
  max-width: min(100%, 1840px) !important;
  gap: 18px !important;
}

.planes-entel-panel .planes-entel-hero {
  border: 2px solid rgba(0, 105, 167, .30) !important;
  border-left: 10px solid var(--entel-blue) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #fff7ed 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.planes-entel-panel .planes-entel-hero h3 {
  color: var(--entel-ink) !important;
  font-size: clamp(40px, 3.75vw, 72px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.planes-entel-panel .planes-entel-hero p {
  max-width: 840px !important;
  color: #334155 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 780 !important;
}

.planes-entel-panel .planes-entel-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  min-width: min(100%, 680px) !important;
  padding: 16px !important;
  border: 2px solid rgba(255, 122, 0, .32) !important;
  border-left: 8px solid var(--entel-orange) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: none !important;
}

.planes-entel-panel .planes-entel-filters label {
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.planes-entel-panel .planes-entel-filters :where(input, select, button) {
  width: 100% !important;
  min-height: 48px !important;
  font-weight: 850 !important;
}

.planes-entel-panel .planes-entel-filters label:has(#planesEntelSearch),
.planes-entel-panel .planes-entel-filters button {
  grid-column: 1 / -1 !important;
}

.planes-entel-panel .planes-entel-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 10px 12px 0 !important;
  border: 2px solid rgba(0, 105, 167, .26) !important;
  border-bottom: 0 !important;
  border-left: 9px solid var(--entel-blue) !important;
  border-radius: 24px 24px 0 0 !important;
  background: linear-gradient(135deg, #eef8ff, #ffffff) !important;
  box-shadow: none !important;
}

.planes-entel-panel .planes-entel-tabs button {
  min-height: 44px !important;
  border-color: rgba(0, 105, 167, .28) !important;
  color: var(--entel-ink) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.planes-entel-panel .planes-entel-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--entel-blue), var(--entel-cyan)) !important;
  box-shadow: 0 12px 24px rgba(0, 105, 167, .17) !important;
}

.planes-entel-panel .planes-entel-view.active {
  margin-top: 0 !important;
  padding: 18px !important;
  border: 2px solid rgba(0, 105, 167, .24) !important;
  border-left: 9px solid var(--entel-blue) !important;
  border-top-width: 2px !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(135deg, #eef8ff 0%, #ffffff 56%, #fff7ed 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
}

.planes-entel-panel .planes-entel-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
  gap: 12px !important;
}

.planes-entel-panel .planes-entel-kpis article {
  min-height: 118px !important;
  padding: 18px !important;
  border: 2px solid rgba(0, 105, 167, .24) !important;
  border-left: 8px solid var(--entel-blue) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.planes-entel-panel .planes-entel-kpis article:nth-child(2) { border-left-color: var(--entel-green) !important; }
.planes-entel-panel .planes-entel-kpis article:nth-child(3) { border-left-color: var(--entel-cyan) !important; }
.planes-entel-panel .planes-entel-kpis article:nth-child(4) { border-left-color: var(--entel-orange) !important; }
.planes-entel-panel .planes-entel-kpis article:nth-child(5) { border-left-color: var(--entel-red) !important; }
.planes-entel-panel .planes-entel-kpis article:nth-child(6) { border-left-color: var(--entel-violet) !important; }

.planes-entel-panel .planes-entel-kpis strong {
  color: var(--entel-ink) !important;
  font-size: clamp(28px, 2.35vw, 46px) !important;
  line-height: .95 !important;
}

.planes-entel-panel .planes-entel-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 920 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.planes-entel-panel #planesEntelStatus,
.planes-entel-panel .source-status {
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-left: 8px solid var(--entel-cyan) !important;
  border-radius: 20px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e8f7ff, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.planes-entel-panel .planes-entel-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}

.planes-entel-panel .plan-entel-card {
  border: 2px solid rgba(0, 105, 167, .24) !important;
  border-left: 8px solid var(--entel-blue) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.planes-entel-panel .plan-entel-card.pagado {
  border-left-color: var(--entel-green) !important;
  background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}

.planes-entel-panel .plan-entel-card.debe {
  border-left-color: var(--entel-orange) !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

.planes-entel-panel .plan-entel-card.rechazado {
  border-left-color: var(--entel-red) !important;
  background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
}

.planes-entel-panel .plan-entel-card h4,
.planes-entel-panel .planes-entel-close-head h3 {
  color: var(--entel-ink) !important;
  font-size: clamp(21px, 1.55vw, 32px) !important;
  line-height: 1.05 !important;
}

.planes-entel-panel .plan-entel-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: center !important;
}

.planes-entel-panel .plan-entel-head span,
.planes-entel-panel .plan-entel-head strong,
.planes-entel-panel .plan-category {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #075985 !important;
  background: #e0f2fe !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.planes-entel-panel .plan-entel-head strong {
  color: #9a3412 !important;
  background: #ffedd5 !important;
}

.planes-entel-panel .plan-entel-money strong {
  color: var(--entel-ink) !important;
  font-size: clamp(24px, 2vw, 38px) !important;
}

.planes-entel-panel .plan-warning {
  padding: 10px 12px !important;
  border: 1px solid rgba(239, 68, 68, .28) !important;
  border-left: 6px solid var(--entel-red) !important;
  border-radius: 14px !important;
  color: #7f1d1d !important;
  background: #fff1f2 !important;
  font-weight: 850 !important;
}

.planes-entel-panel .planes-entel-close-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(0, 105, 167, .24) !important;
  border-left: 8px solid var(--entel-blue) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
}

.planes-entel-panel .planes-entel-close-head strong {
  color: var(--entel-ink) !important;
  font-size: clamp(26px, 2.2vw, 44px) !important;
}

.planes-entel-panel .source-table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(0, 105, 167, .24) !important;
  border-radius: 18px !important;
  background: #f8fcff !important;
}

.planes-entel-panel .source-table thead,
.planes-entel-panel .source-table tbody,
.planes-entel-panel .source-table tr {
  min-width: max-content !important;
}

.planes-entel-panel .source-table th {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--entel-blue), var(--entel-cyan)) !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.planes-entel-panel .source-table td {
  color: var(--entel-ink) !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

.planes-entel-panel .source-table td small {
  display: block !important;
  color: #9a3412 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.planes-entel-panel .planes-entel-ranking {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

.planes-entel-panel .planes-entel-ranking article {
  border: 2px solid rgba(0, 105, 167, .22) !important;
  border-left: 8px solid var(--entel-blue) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  padding: 16px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.planes-entel-panel .planes-entel-ranking article.top {
  border-left-color: var(--entel-orange) !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

.planes-entel-panel .planes-entel-ranking article span {
  color: var(--entel-orange) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.planes-entel-panel .planes-entel-ranking article strong {
  color: var(--entel-ink) !important;
  font-size: 20px !important;
}

.planes-entel-panel .planes-entel-ranking article em {
  color: #064e3b !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

@media (max-width: 1180px) {
  .planes-entel-panel .planes-entel-hero,
  .planes-entel-panel .planes-entel-filters,
  .planes-entel-panel .planes-entel-close-head {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .planes-entel-panel .planes-entel-hero h3 {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
}

/* Comercios y cartera order pass v1
   Cartera comercial: filtros, tabs, mapa y tablas con contraste operativo. */
.coverage-panel:not(.commerce-360-panel) {
  --coverage-blue: #0ea5e9;
  --coverage-green: #10b981;
  --coverage-amber: #f59e0b;
  --coverage-violet: #7c3aed;
  --coverage-ink: #071733;
  --coverage-muted: #475569;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  gap: 18px !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-control-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-left: 10px solid var(--coverage-blue) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, .98), rgba(255, 255, 255, .96) 46%, rgba(209, 250, 229, .78)) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-control-hero h3 {
  max-width: 980px !important;
  margin: 6px 0 12px !important;
  color: var(--coverage-ink) !important;
  font-size: clamp(44px, 4vw, 74px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-control-hero p {
  max-width: 900px !important;
  color: #334155 !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  font-weight: 780 !important;
  line-height: 1.55 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats article,
.coverage-panel:not(.commerce-360-panel) .commerce-kpis article {
  min-height: 104px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--coverage-blue) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(224, 242, 254, .76)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .065) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats article:nth-child(2),
.coverage-panel:not(.commerce-360-panel) .commerce-kpis article:nth-child(2),
.coverage-panel:not(.commerce-360-panel) .commerce-kpis article:nth-child(4) {
  border-left-color: var(--coverage-green) !important;
  background: linear-gradient(145deg, #ffffff, rgba(209, 250, 229, .78)) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats article:nth-child(3),
.coverage-panel:not(.commerce-360-panel) .commerce-kpis article:nth-child(3),
.coverage-panel:not(.commerce-360-panel) .commerce-kpis article:nth-child(5) {
  border-left-color: var(--coverage-amber) !important;
  background: linear-gradient(145deg, #ffffff, rgba(254, 243, 199, .86)) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats strong,
.coverage-panel:not(.commerce-360-panel) .commerce-kpis strong {
  color: var(--coverage-ink) !important;
  font-size: clamp(30px, 2.4vw, 52px) !important;
  letter-spacing: -.045em !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-hero-stats span,
.coverage-panel:not(.commerce-360-panel) .commerce-kpis span {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.2fr) minmax(420px, 2fr) repeat(2, minmax(160px, auto)) !important;
  gap: 14px !important;
  align-items: end !important;
  padding: 16px !important;
  border: 2px solid rgba(245, 158, 11, .36) !important;
  border-left: 10px solid var(--coverage-amber) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 247, 237, .98), rgba(255, 255, 255, .95)) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
  gap: 12px !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-toolbar label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-toolbar :where(input, select, button) {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  font-weight: 840 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-toolbar button {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--coverage-blue), var(--coverage-green)) !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, .18) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-toolbar button[data-coverage-action="limpiar"] {
  color: var(--coverage-ink) !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  background: #ffffff !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-tabs {
  position: sticky !important;
  top: var(--cx-topbar-height, 74px) !important;
  z-index: 12 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 10px solid var(--coverage-blue) !important;
  border-radius: 24px 24px 10px 10px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(12px) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-tabs::before {
  content: "Secciones" !important;
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-tabs button {
  flex: 0 0 auto !important;
  min-width: 132px !important;
  min-height: 44px !important;
  border: 1px solid rgba(14, 165, 233, .3) !important;
  border-radius: 14px !important;
  color: var(--coverage-ink) !important;
  background: #ffffff !important;
  font-weight: 950 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-tabs button.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--coverage-blue), var(--coverage-green)) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

.coverage-panel:not(.commerce-360-panel) .coverage-view {
  display: none !important;
}

.coverage-panel:not(.commerce-360-panel) .coverage-view.active {
  display: block !important;
  padding: 18px !important;
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-left: 10px solid var(--coverage-blue) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, .88), rgba(255, 255, 255, .94) 52%, rgba(236, 253, 245, .7)) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .055) !important;
}

.coverage-panel:not(.commerce-360-panel) .coverage-view[data-coverage-view="compartidos"].active {
  border-left-color: var(--coverage-violet) !important;
  background: linear-gradient(135deg, rgba(245, 243, 255, .92), rgba(255, 255, 255, .95)) !important;
}

.coverage-panel:not(.commerce-360-panel) .coverage-view[data-coverage-view="vendedor"].active {
  border-left-color: var(--coverage-green) !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, .92), rgba(255, 255, 255, .95)) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-section-head,
.coverage-panel:not(.commerce-360-panel) .section-head.compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-section-head h3,
.coverage-panel:not(.commerce-360-panel) .section-head.compact h3 {
  color: var(--coverage-ink) !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  letter-spacing: -.035em !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-mini-pill,
.coverage-panel:not(.commerce-360-panel) .status-pill {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table,
.coverage-panel:not(.commerce-360-panel) .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table table,
.coverage-panel:not(.commerce-360-panel) .sales-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table th,
.coverage-panel:not(.commerce-360-panel) .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7, #14b8a6) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table td,
.coverage-panel:not(.commerce-360-panel) .sales-table td {
  padding: 14px 16px !important;
  color: var(--coverage-ink) !important;
  font-weight: 800 !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table td strong,
.coverage-panel:not(.commerce-360-panel) .sales-table td strong {
  color: var(--coverage-ink) !important;
  font-weight: 950 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-table td small,
.coverage-panel:not(.commerce-360-panel) .sales-table td small {
  display: block !important;
  margin-top: 4px !important;
  color: var(--coverage-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.45fr) minmax(320px, .75fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-stage,
.coverage-panel:not(.commerce-360-panel) .commerce-side-list,
.coverage-panel:not(.commerce-360-panel) .sales-card {
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 9px solid var(--coverage-blue) !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-stage h3,
.coverage-panel:not(.commerce-360-panel) .commerce-side-list h3,
.coverage-panel:not(.commerce-360-panel) .sales-card h3 {
  color: var(--coverage-ink) !important;
  font-size: clamp(24px, 1.6vw, 34px) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-stage p {
  color: var(--coverage-muted) !important;
  font-weight: 760 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-summary article {
  padding: 14px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-summary strong {
  color: var(--coverage-ink) !important;
  font-size: 28px !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-summary span {
  color: var(--coverage-muted) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-cloud {
  position: relative !important;
  min-height: 460px !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(rgba(14, 165, 233, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, .09) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(16, 185, 129, .18), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(245, 158, 11, .16), transparent 30%),
    #effaff !important;
  background-size: 64px 64px, 64px 64px, auto, auto, auto !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-dot {
  border: 4px solid #ffffff !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--coverage-blue), var(--coverage-green)) !important;
  box-shadow: 0 18px 34px rgba(14, 165, 233, .24), 0 0 0 8px rgba(14, 165, 233, .12) !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-dot strong {
  color: #ffffff !important;
  font-size: 18px !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-map-dot span {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.coverage-panel:not(.commerce-360-panel) .commerce-side-list {
  max-height: 690px !important;
  overflow: auto !important;
}

.coverage-panel:not(.commerce-360-panel) #coverageStatus {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--coverage-blue) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

@media (max-width: 1280px) {
  .coverage-panel:not(.commerce-360-panel) .commerce-control-hero,
  .coverage-panel:not(.commerce-360-panel) .commerce-toolbar,
  .coverage-panel:not(.commerce-360-panel) .commerce-map-layout {
    grid-template-columns: 1fr !important;
  }

  .coverage-panel:not(.commerce-360-panel) .commerce-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }

  .coverage-panel:not(.commerce-360-panel) .commerce-hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .coverage-panel:not(.commerce-360-panel) .commerce-control-hero h3 {
    font-size: clamp(38px, 13vw, 56px) !important;
  }

  .coverage-panel:not(.commerce-360-panel) .coverage-view.active,
  .coverage-panel:not(.commerce-360-panel) .commerce-toolbar {
    padding: 12px !important;
  }

  .coverage-panel:not(.commerce-360-panel) .commerce-map-cloud {
    min-height: 360px !important;
  }
}

/* Solicitudes de comercio order pass v1
   Cola SUP/CONTROL: escaladas, solicitudes y pedidos de detalle con consola clara. */
.solicitudes-comercio-panel {
  --sol-blue: #0ea5e9;
  --sol-green: #10b981;
  --sol-amber: #f59e0b;
  --sol-red: #ef4444;
  --sol-violet: #7c3aed;
  --sol-ink: #071733;
  --sol-muted: #475569;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: clamp(16px, 1.25vw, 24px) !important;
  padding: clamp(16px, 1.35vw, 24px) !important;
  border: 2px solid rgba(14, 165, 233, .28) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(14, 165, 233, .16), transparent 22rem),
    radial-gradient(circle at 92% 8%, rgba(124, 58, 237, .12), transparent 22rem),
    linear-gradient(180deg, #eaf8ff 0%, #f8fbff 45%, #eff6ff 100%) !important;
  box-shadow: 0 26px 64px rgba(15, 23, 42, .075) !important;
}

.solicitudes-comercio-panel .commerce-control-hero {
  min-height: 240px !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .58fr) !important;
  border-color: rgba(14, 165, 233, .48) !important;
  border-left-color: var(--sol-violet) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(16, 185, 129, .20), transparent 22rem),
    radial-gradient(circle at 12% 20%, rgba(14, 165, 233, .18), transparent 22rem),
    linear-gradient(135deg, #0f172a 0%, #123b66 46%, #075985 100%) !important;
  color: #fff !important;
}

.solicitudes-comercio-panel .commerce-control-hero :where(h3, p, span, strong) {
  color: #fff !important;
}

.solicitudes-comercio-panel .commerce-control-hero h3 {
  max-width: 950px !important;
  font-size: clamp(42px, 3.8vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

.solicitudes-comercio-panel .commerce-control-hero p {
  max-width: 900px !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: clamp(16px, 1vw, 19px) !important;
}

.solicitudes-comercio-panel .commerce-hero-stats article {
  min-height: 126px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-left: 8px solid rgba(255, 255, 255, .62) !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .08) !important;
}

.solicitudes-comercio-panel .commerce-hero-stats article:nth-child(2) {
  border-left-color: var(--sol-green) !important;
}

.solicitudes-comercio-panel .commerce-hero-stats article:nth-child(3) {
  border-left-color: var(--sol-amber) !important;
}

.solicitudes-comercio-panel .commerce-hero-stats strong {
  color: #fff !important;
  font-size: clamp(34px, 2.7vw, 58px) !important;
}

.solicitudes-comercio-panel > .module-subtabs {
  position: sticky !important;
  top: var(--cx-topbar-height, 74px) !important;
  z-index: 14 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .30) !important;
  border-left: 10px solid var(--sol-blue) !important;
  border-radius: 22px 22px 10px 10px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .085) !important;
  backdrop-filter: blur(12px) !important;
}

.solicitudes-comercio-panel > .module-subtabs::before {
  content: "Cola de trabajo" !important;
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color: #075985 !important;
  background: #e0f2fe !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.solicitudes-comercio-panel > .module-subtabs button {
  flex: 0 0 auto !important;
  min-width: 170px !important;
  min-height: 46px !important;
  border: 1px solid rgba(14, 165, 233, .32) !important;
  border-radius: 15px !important;
  color: var(--sol-ink) !important;
  background: #ffffff !important;
  font-weight: 950 !important;
}

.solicitudes-comercio-panel > .module-subtabs button.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sol-blue), var(--sol-green)) !important;
  box-shadow: 0 14px 26px rgba(14, 165, 233, .20) !important;
}

.solicitudes-comercio-panel #solicitudesComercioStatus {
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-left: 10px solid var(--sol-green) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ecfeff, #ffffff) !important;
  color: #075985 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.solicitudes-comercio-panel #solicitudesComercioContent {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  gap: clamp(14px, 1.1vw, 22px) !important;
  align-items: start !important;
}

.solicitudes-comercio-panel .sales-card {
  display: grid !important;
  gap: 14px !important;
  min-height: 100% !important;
  border: 2px solid rgba(14, 165, 233, .26) !important;
  border-left: 10px solid var(--sol-blue) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at right top, rgba(14, 165, 233, .10), transparent 12rem),
    linear-gradient(135deg, #ffffff 0%, #f0f9ff 54%, #ecfeff 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
}

.solicitudes-comercio-panel .sales-card:nth-child(3n + 2) {
  border-left-color: var(--sol-green) !important;
}

.solicitudes-comercio-panel .sales-card:nth-child(3n + 3) {
  border-left-color: var(--sol-amber) !important;
}

.solicitudes-comercio-panel .section-head.compact {
  align-items: flex-start !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .88) !important;
}

.solicitudes-comercio-panel .section-head.compact h3 {
  max-width: 740px !important;
  color: var(--sol-ink) !important;
  font-size: clamp(22px, 1.55vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

.solicitudes-comercio-panel .section-head.compact small,
.solicitudes-comercio-panel .sales-card p {
  color: var(--sol-muted) !important;
  font-weight: 780 !important;
}

.solicitudes-comercio-panel .commerce-360-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.solicitudes-comercio-panel .status-pill {
  padding: 7px 12px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.solicitudes-comercio-panel .production-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.solicitudes-comercio-panel .production-kpis article {
  min-height: 92px !important;
  padding: 14px !important;
  border-left: 7px solid var(--sol-blue) !important;
}

.solicitudes-comercio-panel .production-kpis article:nth-child(2) {
  border-left-color: var(--sol-green) !important;
}

.solicitudes-comercio-panel .production-kpis article:nth-child(3) {
  border-left-color: var(--sol-amber) !important;
}

.solicitudes-comercio-panel .production-kpis article:nth-child(4) {
  border-left-color: var(--sol-violet) !important;
}

.solicitudes-comercio-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.solicitudes-comercio-panel .sales-table table {
  width: max-content !important;
  min-width: min(920px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.solicitudes-comercio-panel .sales-table th {
  position: static !important;
  min-width: 130px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sol-blue), var(--sol-violet)) !important;
}

.solicitudes-comercio-panel .sales-table td {
  max-width: 520px !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

.solicitudes-comercio-panel .modal-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 10px !important;
}

.solicitudes-comercio-panel .modal-actions button,
.solicitudes-comercio-panel [data-detalle-solicitud-resolve] {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.solicitudes-comercio-panel .modal-actions .primary-btn,
.solicitudes-comercio-panel [data-detalle-solicitud-resolve][data-aprobar="true"] {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sol-green), var(--sol-blue)) !important;
}

.solicitudes-comercio-panel [data-detalle-solicitud-resolve][data-aprobar="false"] {
  color: #991b1b !important;
  border: 1px solid rgba(239, 68, 68, .32) !important;
  background: #fff1f2 !important;
}

@media (max-width: 980px) {
  .solicitudes-comercio-panel .commerce-control-hero {
    grid-template-columns: 1fr !important;
  }

  .solicitudes-comercio-panel #solicitudesComercioContent {
    grid-template-columns: 1fr !important;
  }

  .solicitudes-comercio-panel .production-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .solicitudes-comercio-panel .production-kpis {
    grid-template-columns: 1fr !important;
  }
}

/* Analisis de productos order pass v1
   Inteligencia por producto: periodo, ranking, historia diaria y vendedor lider. */
.product-intel-panel {
  --product-blue: #2563eb;
  --product-cyan: #06b6d4;
  --product-green: #10b981;
  --product-amber: #f59e0b;
  --product-violet: #7c3aed;
  --product-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  gap: 18px !important;
  padding: 18px !important;
}

.product-intel-panel .product-intel-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  border: 2px solid rgba(37, 99, 235, .26) !important;
  border-left: 10px solid var(--product-blue) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(37, 99, 235, .16), transparent 26%),
    linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(255, 255, 255, .96) 48%, rgba(236, 253, 245, .82)) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08) !important;
}

.product-intel-panel .product-intel-hero h3 {
  max-width: 980px !important;
  margin: 8px 0 12px !important;
  color: var(--product-ink) !important;
  font-size: clamp(44px, 4vw, 76px) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

.product-intel-panel .product-intel-hero p {
  max-width: 900px !important;
  color: #334155 !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  font-weight: 790 !important;
  line-height: 1.55 !important;
}

.product-intel-panel .production-period {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(120px, .55fr)) minmax(130px, .5fr) !important;
  gap: 12px !important;
  align-content: end !important;
  padding: 16px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-left: 8px solid var(--product-amber) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255, 247, 237, .94), rgba(255, 255, 255, .92)) !important;
}

.product-intel-panel .production-period label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.product-intel-panel .production-period :where(input, select, button) {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
}

.product-intel-panel .production-period button {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--product-blue), var(--product-green)) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .18) !important;
}

.product-intel-panel .production-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

.product-intel-panel .production-kpis article,
.product-intel-panel .product-intel-summary article {
  min-height: 104px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-left: 8px solid var(--product-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #ffffff, rgba(219, 234, 254, .78)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.product-intel-panel .production-kpis article:nth-child(2),
.product-intel-panel .production-kpis article:nth-child(5),
.product-intel-panel .product-intel-summary article:nth-child(2),
.product-intel-panel .product-intel-summary article:nth-child(7) {
  border-left-color: var(--product-green) !important;
  background: linear-gradient(145deg, #ffffff, rgba(209, 250, 229, .78)) !important;
}

.product-intel-panel .production-kpis article:nth-child(3),
.product-intel-panel .production-kpis article:nth-child(6),
.product-intel-panel .product-intel-summary article:nth-child(3),
.product-intel-panel .product-intel-summary article:nth-child(8) {
  border-left-color: var(--product-violet) !important;
  background: linear-gradient(145deg, #ffffff, rgba(237, 233, 254, .8)) !important;
}

.product-intel-panel .production-kpis article:nth-child(4),
.product-intel-panel .product-intel-summary article:nth-child(4),
.product-intel-panel .product-intel-summary article:nth-child(5),
.product-intel-panel .product-intel-summary article:nth-child(6) {
  border-left-color: var(--product-amber) !important;
  background: linear-gradient(145deg, #ffffff, rgba(254, 243, 199, .86)) !important;
}

.product-intel-panel .production-kpis strong,
.product-intel-panel .product-intel-summary strong {
  color: var(--product-ink) !important;
  font-size: clamp(28px, 2.15vw, 48px) !important;
  letter-spacing: -.045em !important;
}

.product-intel-panel .production-kpis span,
.product-intel-panel .product-intel-summary span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.product-intel-panel .production-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.product-intel-panel .sales-card {
  border: 2px solid rgba(37, 99, 235, .22) !important;
  border-left: 9px solid var(--product-blue) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .72)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
}

.product-intel-panel .production-grid .sales-card:nth-child(2) {
  border-left-color: var(--product-green) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 253, 245, .74)) !important;
}

.product-intel-panel .section-head.compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(37, 99, 235, .2) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.product-intel-panel .section-head.compact h3,
.product-intel-panel .sales-card > h3 {
  color: var(--product-ink) !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  letter-spacing: -.035em !important;
}

.product-intel-panel .product-intel-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.product-intel-panel .inventory-bars {
  min-height: 260px !important;
  padding: 12px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .88), rgba(255, 255, 255, .94)) !important;
  overflow-x: auto !important;
}

.product-intel-panel .inventory-bars > div,
.product-intel-panel .inventory-bars span {
  border: 1px solid rgba(37, 99, 235, .14) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .76) !important;
  font-weight: 820 !important;
}

.product-intel-panel .sales-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(37, 99, 235, .22) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.product-intel-panel .sales-table table {
  width: max-content !important;
  min-width: min(1120px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.product-intel-panel .sales-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--product-blue), var(--product-cyan)) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.product-intel-panel .sales-table td {
  padding: 14px 16px !important;
  color: var(--product-ink) !important;
  font-weight: 820 !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

.product-intel-panel .sales-table td strong {
  color: var(--product-ink) !important;
  font-weight: 950 !important;
}

.product-intel-panel .sales-table td small {
  display: block !important;
  margin-top: 4px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.product-intel-panel .sales-table button {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--product-blue), var(--product-green)) !important;
  font-weight: 950 !important;
}

.product-intel-panel #productIntelStatus {
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-left: 8px solid var(--product-blue) !important;
  border-radius: 18px !important;
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

@media (max-width: 1280px) {
  .product-intel-panel .product-intel-hero,
  .product-intel-panel .production-period,
  .product-intel-panel .production-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .product-intel-panel {
    padding: 12px !important;
  }

  .product-intel-panel .product-intel-hero h3 {
    font-size: clamp(38px, 13vw, 56px) !important;
  }
}

/* KPIs y Capilaridad order pass v1
   Capilaridad comercial: cobertura, ranking, brechas, diagnostico vendedor y tabla sin gestion. */
.cap-panel {
  --cap-blue: #0ea5e9;
  --cap-green: #10b981;
  --cap-amber: #f59e0b;
  --cap-red: #ef4444;
  --cap-violet: #7c3aed;
  --cap-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
}

.cap-panel::before {
  content: "KPIs y Capilaridad Comercial";
  display: block;
  padding: clamp(22px, 2.6vw, 42px);
  border: 2px solid rgba(14, 165, 233, .26);
  border-left: 10px solid var(--cap-blue);
  border-radius: 30px;
  color: var(--cap-ink);
  background:
    radial-gradient(circle at 10% 20%, rgba(14, 165, 233, .18), transparent 26%),
    radial-gradient(circle at 92% 15%, rgba(16, 185, 129, .16), transparent 26%),
    linear-gradient(135deg, rgba(224, 242, 254, .98), rgba(255, 255, 255, .96) 52%, rgba(236, 253, 245, .82));
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
  font-size: clamp(42px, 4vw, 74px);
  font-weight: 950;
  line-height: .96;
  letter-spacing: -.06em;
}

.cap-panel .cap-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, auto) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 2px solid rgba(245, 158, 11, .36) !important;
  border-left: 10px solid var(--cap-amber) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 247, 237, .98), rgba(255, 255, 255, .95)) !important;
}

.cap-panel .cap-toolbar input,
.cap-panel .cap-toolbar button {
  min-height: 48px !important;
  border-radius: 15px !important;
  font-weight: 850 !important;
}

.cap-panel .cap-toolbar button {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cap-blue), var(--cap-green)) !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, .18) !important;
}

.cap-panel .cap-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

.cap-panel .cap-kpis article {
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--cap-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #ffffff, rgba(224, 242, 254, .82)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.cap-panel .cap-kpis article:nth-child(2) {
  border-left-color: var(--cap-green) !important;
  background: linear-gradient(145deg, #ffffff, rgba(209, 250, 229, .82)) !important;
}

.cap-panel .cap-kpis article:nth-child(3) {
  border-left-color: var(--cap-amber) !important;
  background: linear-gradient(145deg, #ffffff, rgba(254, 243, 199, .9)) !important;
}

.cap-panel .cap-kpis article:nth-child(4) {
  border-left-color: var(--cap-violet) !important;
  background: linear-gradient(145deg, #ffffff, rgba(237, 233, 254, .82)) !important;
}

.cap-panel .cap-kpis strong {
  color: var(--cap-ink) !important;
  font-size: clamp(32px, 2.3vw, 52px) !important;
  letter-spacing: -.045em !important;
}

.cap-panel .cap-kpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.cap-panel .cap-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.cap-panel .cap-card {
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-left: 9px solid var(--cap-blue) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(224, 242, 254, .7)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
}

.cap-panel .cap-layout .cap-card:nth-child(2),
.cap-panel .cap-card:nth-of-type(3) {
  border-left-color: var(--cap-amber) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(254, 243, 199, .62)) !important;
}

.cap-panel .cap-card h3 {
  color: var(--cap-ink) !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  letter-spacing: -.035em !important;
}

.cap-panel .section-head.compact {
  padding: 14px 16px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.cap-panel .cap-rank,
.cap-panel .cap-gap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 10px 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(14, 165, 233, .2) !important;
  border-left: 7px solid var(--cap-green) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .76)) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
}

.cap-panel .cap-gap {
  border-left-color: var(--cap-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .82)) !important;
}

.cap-panel .cap-gap.high {
  border-left-color: var(--cap-red) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 226, 226, .82)) !important;
}

.cap-panel .cap-rank strong,
.cap-panel .cap-gap strong {
  color: var(--cap-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.cap-panel .cap-rank span,
.cap-panel .cap-gap span,
.cap-panel .cap-rank small,
.cap-panel .cap-gap small {
  display: block !important;
  color: #475569 !important;
  font-weight: 760 !important;
}

.cap-panel .cap-rank em,
.cap-panel .cap-gap em {
  flex: 0 0 auto !important;
  min-width: 78px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cap-blue), var(--cap-green)) !important;
  font-style: normal !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.cap-panel .cap-gap em {
  background: linear-gradient(135deg, var(--cap-amber), #fb7185) !important;
}

.cap-panel .vendor-diagnostics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 14px !important;
}

.cap-panel .vendor-diagnostic {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--cap-green) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .74)) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .055) !important;
}

.cap-panel .vendor-diagnostic.warning {
  border-left-color: var(--cap-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .84)) !important;
}

.cap-panel .vendor-diagnostic-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
  border-bottom: 1px solid rgba(14, 165, 233, .16) !important;
}

.cap-panel .vendor-diagnostic-head h4 {
  margin: 4px 0 !important;
  color: var(--cap-ink) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.cap-panel .vendor-actions button {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cap-blue), var(--cap-green)) !important;
  font-weight: 950 !important;
}

.cap-panel .vendor-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}

.cap-panel .vendor-metrics span {
  display: block !important;
  padding: 12px !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
}

.cap-panel .vendor-metrics b {
  display: block !important;
  color: var(--cap-ink) !important;
  font-size: 22px !important;
}

.cap-panel .vendor-metrics small {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.cap-panel .vendor-visits {
  display: grid !important;
  gap: 10px !important;
  max-height: 360px !important;
  overflow: auto !important;
  padding: 0 16px 16px !important;
}

.cap-panel .vendor-visits div {
  padding: 12px !important;
  border: 1px solid rgba(14, 165, 233, .16) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .78) !important;
}

.cap-panel .vendor-visits strong,
.cap-panel .vendor-visits span,
.cap-panel .vendor-visits small {
  display: block !important;
}

.cap-panel .vendor-visits strong {
  color: var(--cap-ink) !important;
  font-weight: 950 !important;
}

.cap-panel .vendor-visits span,
.cap-panel .vendor-visits small {
  color: #475569 !important;
  font-weight: 740 !important;
}

.cap-panel .cap-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .22) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.cap-panel .cap-table table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.cap-panel .cap-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cap-blue), var(--cap-green)) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.cap-panel .cap-table td {
  padding: 14px 16px !important;
  color: var(--cap-ink) !important;
  font-weight: 820 !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

.cap-panel .cap-table td strong,
.cap-panel .cap-table td small {
  display: block !important;
}

.cap-panel .cap-table td small {
  margin-top: 4px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.cap-panel #capStatus {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--cap-blue) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

@media (max-width: 1280px) {
  .cap-panel .cap-toolbar,
  .cap-panel .cap-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .cap-panel {
    padding: 12px !important;
  }

  .cap-panel::before {
    font-size: clamp(36px, 12vw, 54px) !important;
  }

  .cap-panel .vendor-diagnostics,
  .cap-panel .vendor-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* Sistema Fuentes order pass v1
   Centro de fuentes: links, periodos, autorizacion, diagnostico y registro de cargas. */
.fuentes-panel {
  --src-blue: #0ea5e9;
  --src-green: #10b981;
  --src-amber: #f59e0b;
  --src-violet: #7c3aed;
  --src-ink: #071733;
  --src-muted: #475569;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .26) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .18), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(16, 185, 129, .14), transparent 34%),
    linear-gradient(135deg, rgba(240, 249, 255, .96), rgba(236, 253, 245, .78)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82), 0 22px 54px rgba(15, 23, 42, .08) !important;
}

.fuentes-panel .sources-governance-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, .8fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: clamp(20px, 2.2vw, 34px) !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 10px solid var(--src-blue) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(224, 242, 254, .74)),
    linear-gradient(90deg, rgba(14, 165, 233, .08), transparent) !important;
  box-shadow: 0 18px 40px rgba(14, 165, 233, .1) !important;
}

.fuentes-panel .sources-governance-hero h3 {
  margin: 8px 0 10px !important;
  color: var(--src-ink) !important;
  font-size: clamp(34px, 3.4vw, 62px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  font-weight: 980 !important;
}

.fuentes-panel .sources-governance-hero p {
  max-width: 920px !important;
  color: #334155 !important;
  font-size: clamp(15px, 1vw, 19px) !important;
  font-weight: 740 !important;
  line-height: 1.55 !important;
}

.fuentes-panel .sources-governance-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.fuentes-panel .sources-governance-cards article {
  min-height: 118px !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .2) !important;
  border-left: 7px solid var(--src-green) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .88)) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .055) !important;
}

.fuentes-panel .sources-governance-cards article:nth-child(2) {
  border-left-color: var(--src-blue) !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .9)) !important;
}

.fuentes-panel .sources-governance-cards article:nth-child(3) {
  border-left-color: var(--src-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .9)) !important;
}

.fuentes-panel .sources-governance-cards strong {
  display: block !important;
  color: var(--src-ink) !important;
  font-size: 24px !important;
  font-weight: 980 !important;
}

.fuentes-panel .sources-governance-cards span {
  display: block !important;
  margin-top: 8px !important;
  color: var(--src-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.fuentes-panel .fuentes-saas-dashboard,
.fuentes-panel #fuentesSaasDashboard {
  display: grid !important;
  gap: 16px !important;
}

.fuentes-panel #fuentesSaasDashboard :where(article, .ops-card, .sales-card, .source-card) {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--src-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(224, 242, 254, .72)) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .06) !important;
}

.fuentes-panel #fuentesSaasDashboard article.green {
  border-left-color: var(--src-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(220, 252, 231, .84)) !important;
}

.fuentes-panel #fuentesSaasDashboard article.amber,
.fuentes-panel #fuentesSaasDashboard article.warning {
  border-left-color: var(--src-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 243, 199, .82)) !important;
}

.fuentes-panel > .module-subtabs {
  position: sticky !important;
  top: var(--cx-topbar-height, 74px) !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--src-blue) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 30px rgba(14, 165, 233, .09) !important;
}

.fuentes-panel > .module-subtabs::before {
  content: "Secciones" !important;
  flex: 0 0 auto !important;
  margin-right: 4px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 11px !important;
  font-weight: 980 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.fuentes-panel > .module-subtabs button {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(14, 165, 233, .3) !important;
  border-radius: 15px !important;
  color: #0f2a45 !important;
  background: #ffffff !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .045) !important;
}

.fuentes-panel > .module-subtabs button.active {
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--src-blue), var(--src-green)) !important;
  box-shadow: 0 16px 32px rgba(14, 165, 233, .22) !important;
}

.fuentes-panel > .module-subpanel {
  max-width: 100% !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 9px solid var(--src-blue) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .055) !important;
}

.fuentes-panel [data-fuentes-panel="cartera"] {
  border-left-color: var(--src-amber) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 247, 237, .74)) !important;
}

.fuentes-panel [data-fuentes-panel="mapa"] {
  border-left-color: var(--src-violet) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(245, 243, 255, .74)) !important;
}

.fuentes-panel .section-head.compact,
.fuentes-panel .ops-card,
.fuentes-panel .form-launch-card,
.fuentes-panel .source-form.wide-form {
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--src-blue) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(240, 249, 255, .82)) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .05) !important;
}

.fuentes-panel [data-fuentes-panel="cartera"] .source-form.wide-form,
.fuentes-panel [data-fuentes-panel="cartera"] .ops-card {
  border-left-color: var(--src-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .86)) !important;
}

.fuentes-panel .section-head h3,
.fuentes-panel .ops-card h3,
.fuentes-panel .source-form h3 {
  color: var(--src-ink) !important;
  font-size: clamp(22px, 1.5vw, 32px) !important;
  font-weight: 980 !important;
  letter-spacing: -.035em !important;
}

.fuentes-panel :where(label, .eyebrow) {
  color: #334155 !important;
  font-weight: 980 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.fuentes-panel :where(input, select, textarea) {
  min-height: 48px !important;
  border: 1px solid rgba(14, 165, 233, .34) !important;
  border-radius: 15px !important;
  color: var(--src-ink) !important;
  background: #ffffff !important;
  font-size: 15px !important;
  font-weight: 820 !important;
}

.fuentes-panel :where(input, select, textarea):focus {
  outline: 3px solid rgba(14, 165, 233, .18) !important;
  border-color: var(--src-blue) !important;
}

.fuentes-panel :where(button) {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.fuentes-panel .import-actions,
.fuentes-panel .source-row,
.fuentes-panel .advanced-tool-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.fuentes-panel .import-actions button:first-child,
.fuentes-panel [data-source-action="abrir-fuente-modal"],
.fuentes-panel [data-commerce-base-action="open-upload-modal"] {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--src-blue), var(--src-green)) !important;
}

.fuentes-panel .source-status,
.fuentes-panel .source-governance-note,
.fuentes-panel .modal-inline-status {
  padding: 16px 18px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--src-blue) !important;
  border-radius: 20px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, rgba(255, 255, 255, .9)) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

.fuentes-panel .source-status.warning,
.fuentes-panel .source-governance-note {
  border-left-color: var(--src-amber) !important;
  color: #92400e !important;
  background: linear-gradient(135deg, #fef3c7, rgba(255, 255, 255, .92)) !important;
}

.fuentes-panel .source-status.error,
.fuentes-panel .modal-inline-status.error {
  border-left-color: #ef4444 !important;
  color: #991b1b !important;
  background: linear-gradient(135deg, #fee2e2, rgba(255, 255, 255, .92)) !important;
}

.fuentes-panel .source-list,
.fuentes-panel #fuentesMapa,
.fuentes-panel #commerceBasePreview,
.fuentes-panel #commerceBaseHistory,
.fuentes-panel .source-diagnostics,
.fuentes-panel .source-preview {
  max-width: 100% !important;
  overflow-x: auto !important;
}

.fuentes-panel .source-list :where(article, .source-card, .ops-card),
.fuentes-panel #commerceBaseHistory :where(article, li, .ops-card),
.fuentes-panel #commerceBasePreview :where(article, .ops-card) {
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-left: 8px solid var(--src-green) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(236, 253, 245, .78)) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
}

.fuentes-panel :where(.source-table, table) {
  max-width: 100% !important;
}

.fuentes-panel .source-table {
  display: block !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
}

.fuentes-panel table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.fuentes-panel th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--src-blue), #0284c7) !important;
  font-size: 12px !important;
  font-weight: 980 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.fuentes-panel td {
  padding: 14px 16px !important;
  color: var(--src-ink) !important;
  background: rgba(248, 250, 252, .96) !important;
  font-weight: 820 !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

.fuentes-panel .advanced-tools {
  border: 1px dashed rgba(14, 165, 233, .34) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.fuentes-panel .advanced-tools summary {
  padding: 16px 18px !important;
  color: var(--src-ink) !important;
  font-weight: 950 !important;
}

#fuenteEditorModal .platform-modal-card {
  width: min(1040px, calc(100vw - 48px)) !important;
  max-height: min(86vh, 860px) !important;
  border-left: 10px solid var(--src-blue, #0ea5e9) !important;
}

#fuenteEditorModal .source-form {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(240, 249, 255, .88)) !important;
}

@media (max-width: 1280px) {
  .fuentes-panel .sources-governance-hero,
  .fuentes-panel .sources-governance-cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .fuentes-panel {
    padding: 12px !important;
  }

  .fuentes-panel .sources-governance-hero {
    padding: 18px !important;
  }

  .fuentes-panel .sources-governance-hero h3 {
    font-size: clamp(32px, 12vw, 46px) !important;
  }

  .fuentes-panel > .module-subpanel {
    padding: 12px !important;
  }
}

/* Administracion y permisos order pass v1
   Usuarios, perfiles, permisos, lector Sheets y ficha de usuario con lectura profesional. */
.admin-panel {
  --adm-blue: #2563eb;
  --adm-cyan: #0ea5e9;
  --adm-green: #10b981;
  --adm-amber: #f59e0b;
  --adm-red: #e11d48;
  --adm-violet: #7c3aed;
  --adm-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(390px, .74fr) minmax(620px, 1.26fr) !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 18px !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(37, 99, 235, .18), transparent 22rem),
    radial-gradient(circle at 96% 8%, rgba(16, 185, 129, .13), transparent 21rem),
    linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(248, 250, 252, .95)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 22px 54px rgba(15, 23, 42, .08) !important;
}

.admin-panel > div:first-child,
.admin-panel .admin-editor {
  min-width: 0 !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  border-left: 9px solid var(--adm-blue) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, rgba(239, 246, 255, .86)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.admin-panel .admin-editor {
  border-left-color: var(--adm-violet) !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .82)) !important;
}

.admin-panel .admin-editor h3 {
  margin: 0 !important;
  color: var(--adm-ink) !important;
  font-size: clamp(26px, 2vw, 42px) !important;
  font-weight: 980 !important;
  letter-spacing: -.045em !important;
}

.admin-panel .admin-editor p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
}

.admin-panel .source-status {
  padding: 14px 16px !important;
  border: 1px solid rgba(14, 165, 233, .25) !important;
  border-left: 8px solid var(--adm-cyan) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.admin-panel #sheetsReaderStatus {
  border-left-color: var(--adm-green) !important;
  color: #065f46 !important;
  background: linear-gradient(135deg, #dcfce7, #ffffff) !important;
}

.admin-panel .production-kpis,
.admin-panel #adminUserKpis {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.admin-panel #adminUserKpis article {
  min-height: 104px !important;
  padding: 16px !important;
  border: 1px solid rgba(37, 99, 235, .2) !important;
  border-left: 8px solid var(--adm-blue) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(239, 246, 255, .86)) !important;
  box-shadow: 0 13px 26px rgba(37, 99, 235, .08) !important;
}

.admin-panel #adminUserKpis article:nth-child(2) {
  border-left-color: var(--adm-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(220, 252, 231, .88)) !important;
}

.admin-panel #adminUserKpis article:nth-child(3) {
  border-left-color: var(--adm-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 243, 199, .82)) !important;
}

.admin-panel #adminUserKpis article:nth-child(4) {
  border-left-color: var(--adm-violet) !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .86)) !important;
}

.admin-panel #adminUserKpis strong {
  color: var(--adm-ink) !important;
  font-size: clamp(28px, 2.2vw, 42px) !important;
  font-weight: 980 !important;
}

.admin-panel #adminUserKpis span {
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.admin-panel .tuu-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, .42fr) minmax(160px, .42fr) repeat(4, auto) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 1px solid rgba(245, 158, 11, .34) !important;
  border-left: 9px solid var(--adm-amber) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: 0 15px 34px rgba(245, 158, 11, .08) !important;
}

.admin-panel :where(input, select) {
  min-height: 46px !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  border-radius: 14px !important;
  color: var(--adm-ink) !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

.admin-panel :where(button) {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.admin-panel .primary-btn,
.admin-panel [data-admin-action="save"],
.admin-panel [data-admin-action="new-user"] {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--adm-blue), var(--adm-cyan)) !important;
  box-shadow: 0 14px 26px rgba(37, 99, 235, .18) !important;
}

.admin-panel .admin-users {
  display: grid !important;
  gap: 12px !important;
  max-height: min(58vh, 720px) !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

.admin-panel .admin-user-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding: 10px !important;
  border: 1px solid rgba(37, 99, 235, .18) !important;
  border-left: 8px solid var(--adm-cyan) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .78)) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .045) !important;
}

.admin-panel .admin-user-row:has([data-admin-toggle-user][data-admin-next-state="ACTIVO"]) {
  border-left-color: var(--adm-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 247, 237, .86)) !important;
}

.admin-panel [data-admin-user] {
  min-width: 0 !important;
  height: auto !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(37, 99, 235, .18) !important;
  border-radius: 16px !important;
  text-align: left !important;
  background: rgba(255, 255, 255, .84) !important;
}

.admin-panel [data-admin-user].active {
  border-color: rgba(37, 99, 235, .5) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), #ffffff) !important;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .15) !important;
}

.admin-panel [data-admin-user] strong,
.admin-panel [data-admin-user] span,
.admin-panel [data-admin-user] small {
  display: block !important;
}

.admin-panel [data-admin-user] strong {
  color: var(--adm-ink) !important;
  font-size: 16px !important;
  font-weight: 980 !important;
}

.admin-panel [data-admin-user] span {
  margin-top: 5px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  overflow-wrap: anywhere !important;
}

.admin-panel [data-admin-user] small {
  margin-top: 8px !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.admin-panel [data-admin-edit-user],
.admin-panel [data-admin-toggle-user] {
  align-self: center !important;
  padding-inline: 14px !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  color: #075985 !important;
  background: #eff6ff !important;
}

.admin-panel [data-admin-toggle-user][data-admin-next-state="INACTIVO"] {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border-color: rgba(239, 68, 68, .26) !important;
}

.admin-panel .admin-profile-summary {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.admin-panel .admin-profile-summary article {
  min-height: 96px !important;
  padding: 15px !important;
  border: 1px solid rgba(124, 58, 237, .2) !important;
  border-left: 7px solid var(--adm-violet) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .86)) !important;
}

.admin-panel .admin-profile-summary strong,
.admin-panel .admin-profile-summary span {
  display: block !important;
  overflow-wrap: anywhere !important;
}

.admin-panel .admin-profile-summary strong {
  color: var(--adm-ink) !important;
  font-size: clamp(17px, 1.25vw, 24px) !important;
  font-weight: 980 !important;
}

.admin-panel .admin-profile-summary span {
  margin-top: 6px !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.admin-panel .admin-checks {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
  gap: 12px !important;
  max-height: min(62vh, 760px) !important;
  overflow: auto !important;
  padding: 4px !important;
}

.admin-panel .admin-permission-card {
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
  border: 1px solid rgba(37, 99, 235, .18) !important;
  border-left: 8px solid var(--adm-cyan) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .78)) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
}

.admin-panel .admin-permission-card.allowed {
  border-left-color: var(--adm-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(220, 252, 231, .8)) !important;
}

.admin-panel .admin-permission-card.denied {
  border-left-color: var(--adm-red) !important;
  background: linear-gradient(135deg, #ffffff, rgba(255, 228, 230, .82)) !important;
}

.admin-panel .admin-permission-card input {
  width: 22px !important;
  height: 22px !important;
  accent-color: var(--adm-blue) !important;
}

.admin-panel .admin-permission-card strong {
  display: block !important;
  color: var(--adm-ink) !important;
  font-size: 16px !important;
  font-weight: 980 !important;
  line-height: 1.25 !important;
}

.admin-panel .admin-permission-card small {
  display: block !important;
  margin-top: 6px !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#adminUserModal .platform-modal-card {
  width: min(1040px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 900px) !important;
  border-left: 10px solid var(--adm-blue, #2563eb) !important;
}

#adminUserModal .platform-modal-head {
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
}

#adminUserModal #adminUserForm {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#adminUserModal #adminUserForm label {
  border-left-width: 6px !important;
  border-left-color: rgba(37, 99, 235, .8) !important;
}

#adminUserModal #adminUserForm .time-category-check {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #ecfeff, #ffffff) !important;
}

#adminUserModal .danger-btn {
  color: #ffffff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #e11d48, #fb7185) !important;
}

@media (max-width: 1320px) {
  .admin-panel {
    grid-template-columns: 1fr !important;
  }

  .admin-panel .tuu-toolbar,
  .admin-panel .admin-profile-summary,
  .admin-panel #adminUserKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .admin-panel {
    padding: 12px !important;
  }

  .admin-panel .tuu-toolbar,
  .admin-panel .admin-profile-summary,
  .admin-panel #adminUserKpis,
  #adminUserModal #adminUserForm {
    grid-template-columns: 1fr !important;
  }

  .admin-panel .admin-user-row {
    grid-template-columns: 1fr !important;
  }
}

/* Auditoria operacional order pass v1
   Bitacora de eventos, usuarios, modulos y entidades con lectura de control. */
.audit-panel {
  --aud-blue: #0ea5e9;
  --aud-violet: #7c3aed;
  --aud-green: #10b981;
  --aud-amber: #f59e0b;
  --aud-red: #e11d48;
  --aud-ink: #071733;
  width: min(100%, 1840px) !important;
  max-width: none !important;
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 58, 237, .24) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(124, 58, 237, .16), transparent 22rem),
    radial-gradient(circle at 92% 5%, rgba(14, 165, 233, .16), transparent 22rem),
    linear-gradient(135deg, rgba(245, 243, 255, .96), rgba(240, 249, 255, .94)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 22px 54px rgba(15, 23, 42, .08) !important;
}

.audit-panel .audit-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: clamp(20px, 2.2vw, 34px) !important;
  border: 1px solid rgba(124, 58, 237, .24) !important;
  border-left: 10px solid var(--aud-violet) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .84)) !important;
  box-shadow: 0 18px 42px rgba(124, 58, 237, .09) !important;
}

.audit-panel .audit-hero h3 {
  margin: 8px 0 10px !important;
  color: var(--aud-ink) !important;
  font-size: clamp(36px, 3.4vw, 64px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  font-weight: 980 !important;
}

.audit-panel .audit-hero p {
  max-width: 900px !important;
  color: #475569 !important;
  font-size: clamp(15px, 1vw, 19px) !important;
  font-weight: 760 !important;
  line-height: 1.55 !important;
}

.audit-panel .audit-hero-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.audit-panel .audit-hero-cards article {
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 58, 237, .2) !important;
  border-left: 7px solid var(--aud-violet) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .86)) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .055) !important;
}

.audit-panel .audit-hero-cards article:nth-child(2) {
  border-left-color: var(--aud-blue) !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .86)) !important;
}

.audit-panel .audit-hero-cards article:nth-child(3) {
  border-left-color: var(--aud-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(220, 252, 231, .82)) !important;
}

.audit-panel .audit-hero-cards strong,
.audit-panel .audit-hero-cards span {
  display: block !important;
}

.audit-panel .audit-hero-cards strong {
  color: var(--aud-ink) !important;
  font-size: 24px !important;
  font-weight: 980 !important;
}

.audit-panel .audit-hero-cards span {
  margin-top: 8px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.audit-panel .sales-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, .45fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 1px solid rgba(245, 158, 11, .34) !important;
  border-left: 9px solid var(--aud-amber) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  box-shadow: 0 15px 34px rgba(245, 158, 11, .08) !important;
}

.audit-panel :where(input, button) {
  min-height: 46px !important;
  border-radius: 14px !important;
  font-weight: 880 !important;
}

.audit-panel input {
  border: 1px solid rgba(124, 58, 237, .24) !important;
  color: var(--aud-ink) !important;
  background: #ffffff !important;
}

.audit-panel [data-audit-action="buscar"] {
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--aud-violet), var(--aud-blue)) !important;
  box-shadow: 0 14px 28px rgba(124, 58, 237, .18) !important;
}

.audit-panel [data-audit-action="listar"] {
  border: 1px solid rgba(14, 165, 233, .3) !important;
  color: #075985 !important;
  background: #eff6ff !important;
}

.audit-panel .sales-kpis,
.audit-panel #auditKpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.audit-panel #auditKpis article {
  min-height: 118px !important;
  padding: 18px !important;
  border: 1px solid rgba(124, 58, 237, .2) !important;
  border-left: 8px solid var(--aud-violet) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .86)) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .055) !important;
}

.audit-panel #auditKpis article:nth-child(2) {
  border-left-color: var(--aud-blue) !important;
  background: linear-gradient(135deg, #ffffff, rgba(224, 242, 254, .86)) !important;
}

.audit-panel #auditKpis article:nth-child(3) {
  border-left-color: var(--aud-green) !important;
  background: linear-gradient(135deg, #ffffff, rgba(220, 252, 231, .82)) !important;
}

.audit-panel #auditKpis article:nth-child(4) {
  border-left-color: var(--aud-amber) !important;
  background: linear-gradient(135deg, #ffffff, rgba(254, 243, 199, .8)) !important;
}

.audit-panel #auditKpis strong {
  color: var(--aud-ink) !important;
  font-size: clamp(30px, 2.3vw, 46px) !important;
  font-weight: 980 !important;
}

.audit-panel #auditKpis span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.audit-panel .sales-card {
  padding: 18px !important;
  border: 1px solid rgba(124, 58, 237, .24) !important;
  border-left: 9px solid var(--aud-violet) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff, rgba(245, 243, 255, .72)) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
}

.audit-panel .source-status {
  padding: 15px 18px !important;
  border: 1px solid rgba(14, 165, 233, .24) !important;
  border-left: 8px solid var(--aud-blue) !important;
  border-radius: 18px !important;
  color: #075985 !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.audit-panel #auditTable,
.audit-panel .sales-table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 2px solid rgba(14, 165, 233, .24) !important;
  border-left: 9px solid var(--aud-blue) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
}

.audit-panel #auditTable table {
  width: max-content !important;
  min-width: min(1260px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.audit-panel #auditTable th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 13px 16px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--aud-violet), var(--aud-blue)) !important;
  font-size: 12px !important;
  font-weight: 980 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.audit-panel #auditTable td {
  padding: 15px 16px !important;
  color: var(--aud-ink) !important;
  background: rgba(248, 250, 252, .96) !important;
  font-weight: 820 !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

.audit-panel #auditTable td strong,
.audit-panel #auditTable td small {
  display: block !important;
}

.audit-panel #auditTable td small {
  margin-top: 5px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.audit-panel #auditTable td:last-child {
  max-width: 620px !important;
  white-space: normal !important;
  line-height: 1.45 !important;
}

.audit-panel .status-pill {
  border-radius: 999px !important;
  color: #064e3b !important;
  background: linear-gradient(135deg, #dcfce7, #ffffff) !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
}

@media (max-width: 1280px) {
  .audit-panel .audit-hero,
  .audit-panel .audit-hero-cards,
  .audit-panel .sales-toolbar,
  .audit-panel #auditKpis {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO professional structure hardening v2
   Regla final: ninguna barra de pestañas debe flotar encima del contenido.
   Las secciones deben verse como parte del panel, no como capas superpuestas. */
:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
),
:where(
  .quality-panel,
  .tv-panel,
  .cap-panel,
  .routes-panel,
  .coverage-panel,
  .solicitudes-comercio-panel,
  .tuu-panel,
  .product-intel-panel,
  .planes-entel-panel,
  .goals-panel,
  .liquidaciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .procedure-panel,
  .source-governed-panel,
  .connectio-time-panel,
  .inventory-web-panel,
  .catalog-panel,
  .profit-panel,
  .rendiciones-panel
) :where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .96)) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
)::before {
  position: static !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 6px 0 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(14, 165, 233, .18) !important;
  border-radius: 10px !important;
  color: #075985 !important;
  background: rgba(224, 242, 254, .72) !important;
  box-shadow: none !important;
  letter-spacing: .14em !important;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) button {
  min-height: 38px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  flex: 0 0 auto !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  font-size: clamp(12px, .78vw, 14px) !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1.15 !important;
}

:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) button.active,
:where(
  .module-subtabs,
  .module-tabs,
  .inventory-tabs,
  .catalog-tabs,
  .profit-tabs,
  .tuu-tabs,
  .routes-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .cx-tabs,
  .home-tabs,
  .connectio-promoted-tabs
) button[aria-selected="true"] {
  border-color: rgba(14, 116, 144, .72) !important;
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

:where(
  .routes-panel,
  .catalog-panel,
  .inventory-web-panel,
  .profit-panel,
  .rendiciones-panel,
  .rrhh-panel,
  .module-tabbed-panel,
  .tuu-panel,
  .commerce-panel,
  .coverage-panel,
  .solicitudes-comercio-panel,
  .planes-entel-panel,
  .connectio-time-panel,
  .procedure-panel,
  .source-governed-panel
) > :where(
  .module-subtabs,
  .inventory-tabs,
  .catalog-tabs,
  .tuu-tabs,
  .routes-tabs,
  .profit-tabs,
  .rendiciones-tabs,
  .rrhh-tabs,
  .planes-entel-tabs,
  .time-tabs,
  .commerce-tabs,
  .admin-tabs,
  .connectio-promoted-tabs
) + :where(
  .module-subpanel,
  [data-routes-panel],
  [data-catalog-panel],
  [data-inventory-panel],
  [data-profit-panel],
  [data-rendiciones-panel],
  [data-rrhh-panel],
  [data-tuu-panel],
  [data-coverage-panel],
  .time-view,
  .planes-entel-view
) {
  margin-top: 14px !important;
  border-top-left-radius: var(--cx-radius-xl, 24px) !important;
  border-top-right-radius: var(--cx-radius-xl, 24px) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis) article {
  overflow: hidden !important;
  border-width: 1px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis) article span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* ==========================================================================
   CONNECTIO SaaS Ejecutivo v2 - root migration layer
   Base corporativa: menos decoracion, mas tablero ERP/SaaS, estructura estable.
   ========================================================================== */
:root {
  --saas-bg: #f4f7fb;
  --saas-page: #eef4fb;
  --saas-surface: #ffffff;
  --saas-surface-2: #f8fafc;
  --saas-line: #d8e3ef;
  --saas-line-strong: #b8c9da;
  --saas-ink: #0f172a;
  --saas-muted: #64748b;
  --saas-blue: #0f62fe;
  --saas-blue-dark: #0b3b75;
  --saas-cyan: #0ea5e9;
  --saas-green: #10b981;
  --saas-amber: #f59e0b;
  --saas-red: #ef4444;
  --saas-sidebar: #071527;
  --saas-sidebar-2: #0b2138;
  --saas-radius-sm: 10px;
  --saas-radius: 14px;
  --saas-radius-lg: 20px;
  --saas-radius-xl: 26px;
  --saas-shadow: 0 10px 28px rgba(15, 23, 42, .07);
  --saas-shadow-soft: 0 3px 12px rgba(15, 23, 42, .055);
}

body {
  background:
    linear-gradient(180deg, #f7fbff 0%, var(--saas-page) 100%) !important;
  color: var(--saas-ink) !important;
}

.app-shell,
.cx-shell {
  min-height: 100vh !important;
  grid-template-columns: clamp(250px, 15vw, 290px) minmax(0, 1fr) !important;
  background: var(--saas-bg) !important;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr) !important;
}

.sidebar,
.cx-sidebar {
  padding: 18px 16px !important;
  gap: 16px !important;
  background:
    linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-2) 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: none !important;
}

.brand {
  min-height: 58px !important;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
}

.brand-mark,
.brand-mark-logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.brand-mark-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.brand-copy strong {
  color: #ffffff !important;
  font-size: 17px !important;
  letter-spacing: .02em !important;
}

.brand-copy small,
.sidebar-copy small,
.login-panel small {
  color: rgba(226, 232, 240, .72) !important;
}

.side-nav {
  display: grid !important;
  gap: 6px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

.nav-item,
.side-group-toggle,
.side-subitem {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(226, 232, 240, .86) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.nav-item:hover,
.side-group-toggle:hover,
.side-subitem:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #ffffff !important;
}

.nav-item.active,
.side-group-toggle.active,
.side-subitem.active {
  background: rgba(14, 165, 233, .16) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--saas-cyan) !important;
}

.nav-item span,
.side-group-icon,
.side-subitem span {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #dbeafe !important;
}

.side-submenu {
  margin: 4px 0 8px 16px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(148, 163, 184, .24) !important;
}

.mini-panel,
.login-panel {
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: none !important;
}

.content {
  min-width: 0 !important;
  background: var(--saas-bg) !important;
}

.smart-topbar,
.cx-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  min-height: 66px !important;
  padding: 10px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(260px, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--saas-line) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .055) !important;
  backdrop-filter: blur(14px) !important;
}

.topbar-menu-btn,
.sidebar-toggle {
  border: 1px solid var(--saas-line) !important;
  border-radius: 12px !important;
  background: var(--saas-surface-2) !important;
  color: var(--saas-ink) !important;
  box-shadow: none !important;
}

.breadcrumb {
  color: var(--saas-muted) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.breadcrumb strong {
  color: var(--saas-ink) !important;
}

.topbar-search input {
  min-height: 44px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 14px !important;
  background: var(--saas-surface-2) !important;
  color: var(--saas-ink) !important;
  box-shadow: none !important;
}

.topbar-search input:focus {
  border-color: var(--saas-cyan) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14) !important;
}

.topbar-actions > button,
.connectia-btn,
.theme-toggle-btn,
.notification-btn,
.user-chip {
  min-height: 42px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--saas-ink) !important;
  box-shadow: none !important;
}

.connectia-btn {
  color: var(--saas-blue-dark) !important;
  background: #eff6ff !important;
}

.user-chip {
  background: var(--saas-sidebar) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.user-chip strong,
.user-chip small {
  color: #ffffff !important;
}

.workbench {
  width: min(100%, 1880px) !important;
  max-width: none !important;
  margin: 18px auto 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.module-active .workbench {
  width: min(100%, 1880px) !important;
  max-width: none !important;
  padding: 0 clamp(14px, 1.2vw, 24px) 28px !important;
}

.workbench-head {
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

.workbench-head h2,
.module-active .workbench-head h2 {
  color: var(--saas-ink) !important;
  font-size: clamp(24px, 1.8vw, 36px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

.hero,
.access-gate,
.search-card,
.kpis,
.module-grid {
  width: min(100%, 1500px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero,
.connectio-home-hero,
.cx-module-header,
:where(.sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero) {
  border: 1px solid var(--saas-line) !important;
  border-left: 5px solid var(--saas-blue) !important;
  border-radius: var(--saas-radius-xl) !important;
  background:
    linear-gradient(135deg, #ffffff 0%, #f8fbff 72%, #eef6ff 100%) !important;
  color: var(--saas-ink) !important;
  box-shadow: var(--saas-shadow-soft) !important;
  overflow: hidden !important;
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero) :where(h1, h2, h3, p, span, strong) {
  color: inherit !important;
  text-shadow: none !important;
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero) h1,
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero) h2,
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero) h3 {
  font-size: clamp(34px, 3.1vw, 58px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

:where(.cx-dashboard-grid, .sales-layout, .inventory-layout, .catalog-layout, .routes-layout, .profit-layout) {
  gap: 16px !important;
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .modal-card, .editor-card, .profit-component, .profit-source-item, .coverage-view.active, .module-subpanel.active, .time-view.active, .planes-entel-view.active) {
  border: 1px solid var(--saas-line) !important;
  border-left: 4px solid rgba(14, 165, 233, .72) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) article {
  min-height: 104px !important;
  padding: 18px !important;
  border: 1px solid var(--saas-line) !important;
  border-left: 4px solid var(--saas-cyan) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) article:nth-child(2n) {
  border-left-color: var(--saas-green) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) article:nth-child(3n) {
  border-left-color: var(--saas-amber) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) article strong {
  color: var(--saas-ink) !important;
  font-size: clamp(28px, 2.2vw, 44px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis) article span {
  margin-top: 7px !important;
  color: var(--saas-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) {
  min-height: 50px !important;
  padding: 8px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs)::before {
  display: none !important;
  content: none !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button {
  min-height: 36px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--saas-muted) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button.active,
:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button[aria-selected="true"] {
  background: #eaf3ff !important;
  color: var(--saas-blue-dark) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 98, 254, .12) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table) {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: var(--saas-radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table) table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table) th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 12px 14px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--saas-line) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table) td {
  padding: 13px 14px !important;
  color: var(--saas-ink) !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

:where(.source-status, .cx-loading-state, .cx-empty-state, .modal-inline-status, .module-action-hint) {
  border: 1px solid var(--saas-line) !important;
  border-left: 4px solid var(--saas-cyan) !important;
  border-radius: var(--saas-radius) !important;
  background: #f8fbff !important;
  color: #075985 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 720 !important;
}

:where(button, .primary-btn, .secondary-btn, .google-login-btn, .connectia-btn) {
  border-radius: 12px !important;
  box-shadow: none !important;
}

:where(.primary-btn, button[data-sales-action="buscar"], button[data-ranking-action="buscar"], button[data-rendiciones-action="actualizar"]) {
  background: var(--saas-blue) !important;
  border-color: var(--saas-blue) !important;
  color: #ffffff !important;
}

@media (max-width: 1180px) {
  .smart-topbar,
  .cx-header {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .topbar-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 860px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .cx-sidebar {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
  }

  .module-active .workbench {
    padding-inline: 10px !important;
  }
}

/* CONNECTIO app-family control-room v1
   Capa final basada en SPEC-ESTILO-CONNECTIO.md. Debe ganar sobre el prototipo SaaS anterior:
   misma familia visual que las apps Terreno/Supervisor, sin cambiar lógica ni datos. */
:root {
  --bg:#070b16;
  --panel:#0e1626;
  --panel-2:#131e33;
  --line:#1f2c45;
  --txt:#e8eefc;
  --txt-dim:#8ea0c4;
  --txt-faint:#5a6c8f;
  --turq:#2dd4bf;
  --turq-soft:#1c4d49;
  --blue:#3b82f6;
  --amber:#f5b04a;
  --red:#ef5d6b;
  --green:#34d399;
  --radius:16px;
  --entel:#0b5fff;
  --movistar:#19a3e6;
  --claro:#e3001b;
  --wom:#7b2dbd;
  --otros:#5a6c8f;

  --cx-bg:var(--bg);
  --cx-surface:var(--panel);
  --cx-surface-soft:var(--panel-2);
  --cx-border:var(--line);
  --cx-text:var(--txt);
  --cx-text-soft:var(--txt-dim);
  --cx-text-muted:var(--txt-faint);
  --cx-blue-500:var(--turq);
  --cx-blue-600:var(--turq);
  --cx-blue-700:#20b8a5;
  --cx-blue-800:var(--txt);
  --cx-blue-950:#070b16;
  --cx-green-500:var(--green);
  --cx-orange-500:var(--amber);
  --cx-red-500:var(--red);
  --cx-radius-lg:16px;
  --cx-radius-xl:16px;
  --cx-shadow-sm:none;
  --cx-shadow-md:none;
  --cx-shadow-lg:none;
}

[data-theme="light"],
body.theme-light {
  --bg:#eef2f8;
  --panel:#ffffff;
  --panel-2:#f2f6fc;
  --line:#d7e0ee;
  --txt:#12203a;
  --txt-dim:#4a5b7a;
  --txt-faint:#5a6c8f;
  --turq:#0d9488;
  --turq-soft:#cfeee9;
}

[data-theme="corporativo"],
body.theme-corporativo {
  --bg:#06182f;
  --panel:#0c2748;
  --panel-2:#103156;
  --line:#1c436e;
  --txt:#e8eefc;
  --txt-dim:#a7b8d8;
  --txt-faint:#7186aa;
  --turq:#31d4c4;
  --turq-soft:#14504b;
}

html,
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background:
    radial-gradient(1200px 600px at 50% -10%, #0d1730 0%, #070b16 60%),
    var(--bg) !important;
  color: var(--txt) !important;
}

.app-shell,
.cx-app-shell,
.workbench,
.module-active .workbench,
.content,
.cx-main,
.module-view {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(13, 23, 48, .95) 0%, rgba(7, 11, 22, .98) 62%),
    var(--bg) !important;
  color: var(--txt) !important;
}

.sidebar,
.cx-sidebar {
  background: linear-gradient(180deg, #070b16 0%, #0b1322 100%) !important;
  border-right: 1px solid var(--line) !important;
  color: #e8eefc !important;
  box-shadow: none !important;
}

.sidebar *,
.cx-sidebar * {
  color: inherit;
}

.sidebar :where(.brand-title, .nav-title, .nav-group-label, .sidebar-label, h1, h2, h3, strong),
.cx-sidebar :where(.brand-title, .nav-title, .nav-group-label, .sidebar-label, h1, h2, h3, strong) {
  color: #e8eefc !important;
}

.sidebar :where(.brand-subtitle, .nav-subtitle, .nav-hint, small, p),
.cx-sidebar :where(.brand-subtitle, .nav-subtitle, .nav-hint, small, p) {
  color: #8ea0c4 !important;
}

.sidebar :where(a, button, .nav-item, .module-nav-item, .sidebar-link),
.cx-sidebar :where(a, button, .nav-item, .module-nav-item, .sidebar-link) {
  color: #8ea0c4 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
}

.sidebar :where(a, button, .nav-item, .module-nav-item, .sidebar-link):hover,
.sidebar :where(a.active, button.active, .nav-item.active, .module-nav-item.active, .sidebar-link.active),
.cx-sidebar :where(a, button, .nav-item, .module-nav-item, .sidebar-link):hover,
.cx-sidebar :where(a.active, button.active, .nav-item.active, .module-nav-item.active, .sidebar-link.active) {
  background: rgba(45, 212, 191, .10) !important;
  border-color: rgba(45, 212, 191, .28) !important;
  color: #e8eefc !important;
}

.smart-topbar,
.cx-header,
.topbar,
.app-header {
  background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

.smart-topbar :where(input, select),
.cx-header :where(input, select),
.topbar :where(input, select),
.app-header :where(input, select) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
}

.smart-topbar :where(input::placeholder),
.cx-header :where(input::placeholder),
.topbar :where(input::placeholder),
.app-header :where(input::placeholder) {
  color: var(--txt-faint) !important;
}

/* Portada/login blanca, como las apps */
.hero,
.connectio-home-hero,
.access-gate,
.login-card,
.login-panel,
.auth-card,
.auth-locked .hero,
.auth-locked .access-gate {
  background: #ffffff !important;
  color: #0b1526 !important;
  border: 1px solid #d7e0ee !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(7, 11, 22, .22) !important;
}

.hero :where(h1, h2, h3, p, span, strong, small),
.connectio-home-hero :where(h1, h2, h3, p, span, strong, small),
.access-gate :where(h1, h2, h3, p, span, strong, small),
.login-card :where(h1, h2, h3, p, span, strong, small),
.login-panel :where(h1, h2, h3, p, span, strong, small),
.auth-card :where(h1, h2, h3, p, span, strong, small) {
  color: inherit !important;
  text-shadow: none !important;
}

.hero :where(p, small, .muted),
.connectio-home-hero :where(p, small, .muted),
.access-gate :where(p, small, .muted),
.login-card :where(p, small, .muted),
.login-panel :where(p, small, .muted),
.auth-card :where(p, small, .muted) {
  color: #5a6b85 !important;
}

.hero img[src*="connect-logo"],
.login-card img[src*="connect-logo"],
.login-panel img[src*="connect-logo"],
.auth-card img[src*="connect-logo"],
.connect-logo,
.brand-logo {
  max-width: 168px !important;
  width: min(168px, 52vw) !important;
  height: auto !important;
  object-fit: contain !important;
}

.login-card :where(input, select),
.login-panel :where(input, select),
.auth-card :where(input, select),
.access-gate :where(input, select) {
  background: #f2f6fc !important;
  border: 1px solid #d7e0ee !important;
  color: #0b1526 !important;
}

/* Módulos y paneles: control-room real */
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) {
  background: linear-gradient(135deg, rgba(14, 22, 38, .98) 0%, rgba(19, 30, 51, .98) 100%) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--turq) !important;
  border-radius: var(--radius) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) :where(h1, h2, h3, p, span, strong) {
  color: inherit !important;
  text-shadow: none !important;
}

:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) h1,
:where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) h2 {
  color: var(--txt) !important;
  font-size: clamp(30px, 3vw, 52px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .modal-card, .editor-card, .profit-component, .profit-source-item, .coverage-view.active, .module-subpanel.active, .time-view.active, .planes-entel-view.active, .tuu-panel, .tuu-card, .commerce-card, .admin-card, .quality-card, .dashboard-card) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .modal-card, .editor-card, .profit-component, .profit-source-item, .coverage-view.active, .module-subpanel.active, .time-view.active, .planes-entel-view.active, .tuu-panel, .tuu-card, .commerce-card, .admin-card, .quality-card, .dashboard-card) :where(h1, h2, h3, h4, strong, b) {
  color: var(--txt) !important;
}

:where(.cx-card, .sales-card, .inventory-card, .catalog-card, .routes-card, .control-card, .source-card, .sync-status-card, .board-card, .modal-card, .editor-card, .profit-component, .profit-source-item, .coverage-view.active, .module-subpanel.active, .time-view.active, .planes-entel-view.active, .tuu-panel, .tuu-card, .commerce-card, .admin-card, .quality-card, .dashboard-card) :where(p, span, small, label) {
  color: var(--txt-dim) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  gap: 12px !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) article,
:where(.metric-card, .stat-card, .kpi-card, .mtile, .ven-est) {
  min-height: 92px !important;
  padding: 12px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--turq) !important;
  border-radius: var(--radius) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) article:nth-child(2n),
:where(.metric-card, .stat-card, .kpi-card, .mtile, .ven-est):nth-child(2n) {
  border-left-color: var(--green) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) article:nth-child(3n),
:where(.metric-card, .stat-card, .kpi-card, .mtile, .ven-est):nth-child(3n) {
  border-left-color: var(--amber) !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) article strong,
:where(.metric-card, .stat-card, .kpi-card, .mtile, .ven-est) strong {
  color: var(--txt) !important;
  font-size: clamp(19px, 1.65vw, 30px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

:where(.sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .saas-goals-kpis, .saas-inventory-kpis, .kpis, .tuu-kpis, .metric-grid, .stats-grid) article span,
:where(.metric-card, .stat-card, .kpi-card, .mtile, .ven-est) span {
  color: var(--txt-faint) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* Tabs ancladas, no flotantes */
:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  min-height: 48px !important;
  padding: 7px !important;
  background: color-mix(in srgb, var(--panel) 98%, transparent) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs)::before {
  display: none !important;
  content: none !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  background: var(--panel-2) !important;
  color: var(--txt-dim) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button.active,
:where(.module-subtabs, .module-tabs, .inventory-tabs, .catalog-tabs, .profit-tabs, .tuu-tabs, .routes-tabs, .rendiciones-tabs, .rrhh-tabs, .planes-entel-tabs, .time-tabs, .commerce-tabs, .admin-tabs, .cx-tabs, .home-tabs, .connectio-promoted-tabs) button[aria-selected="true"] {
  background: var(--turq) !important;
  border-color: var(--turq) !important;
  color: #05221f !important;
}

/* Formularios */
:where(input, select, textarea) {
  background: #0a1222 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(input::placeholder, textarea::placeholder) {
  color: var(--txt-faint) !important;
}

:where(label, .field-label, .form-label) {
  color: var(--txt-faint) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

:where(button, .primary-btn, .secondary-btn, .google-login-btn, .connectia-btn, .action-btn) {
  border-radius: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

:where(.primary-btn, .btn-primary, button[type="submit"], button[data-sales-action="buscar"], button[data-ranking-action="buscar"], button[data-rendiciones-action="actualizar"], .google-login-btn, .connectia-btn) {
  background: var(--turq) !important;
  border-color: var(--turq) !important;
  color: #05221f !important;
}

:where(.secondary-btn, .btn-secondary) {
  background: rgba(59, 130, 246, .12) !important;
  border: 1px solid rgba(59, 130, 246, .35) !important;
  color: #bcd4ff !important;
}

:where(.danger-btn, .reject-btn, .btn-danger, button[data-action*="rechazar"], button[data-action*="eliminar"]) {
  background: rgba(239, 93, 107, .14) !important;
  border: 1px solid rgba(239, 93, 107, .40) !important;
  color: #ffb8c0 !important;
}

:where(.approve-btn, .btn-approve, button[data-action*="aprobar"]) {
  background: var(--turq) !important;
  border-color: var(--turq) !important;
  color: #05221f !important;
}

/* Chips de estado estilo app */
:where(.status-pill, .badge, .chip, .state-chip, .pill) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(90, 108, 143, .22) !important;
  background: rgba(90, 108, 143, .14) !important;
  color: #c6d2ea !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

:where(.status-pill.operativo, .status-pill.ok, .status-pill.ready, .status-pill.activo, .badge.ok, .chip.ok, .state-chip.ok, .pill.ok) {
  background: rgba(45, 212, 191, .12) !important;
  border-color: rgba(45, 212, 191, .35) !important;
  color: #7ef5e6 !important;
}

:where(.status-pill.warning, .status-pill.warn, .status-pill.pendiente, .badge.warning, .chip.warning, .state-chip.warning, .pill.warning) {
  background: rgba(245, 176, 74, .14) !important;
  border-color: rgba(245, 176, 74, .40) !important;
  color: #ffd990 !important;
}

:where(.status-pill.danger, .status-pill.error, .status-pill.rechazada, .status-pill.inactivo, .badge.danger, .chip.danger, .state-chip.danger, .pill.danger) {
  background: rgba(239, 93, 107, .14) !important;
  border-color: rgba(239, 93, 107, .40) !important;
  color: #ffb8c0 !important;
}

:where(.status-pill.info, .status-pill.base, .status-pill.neutro, .badge.info, .chip.info, .state-chip.info, .pill.info) {
  background: rgba(59, 130, 246, .14) !important;
  border-color: rgba(59, 130, 246, .40) !important;
  color: #bdd5ff !important;
}

/* Tablas sobrias, legibles y con scroll horizontal al agrandar fuente */
:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) table {
  width: max-content !important;
  min-width: min(1180px, 100%) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 11px 12px !important;
  background: #0e1626 !important;
  color: var(--txt-dim) !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) td {
  padding: 12px !important;
  color: var(--txt) !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  vertical-align: top !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) tr:nth-child(even) td {
  background: #101a2d !important;
}

/* Estados, avisos y fuentes */
:where(.source-status, .cx-loading-state, .cx-empty-state, .modal-inline-status, .module-action-hint, .alert, .notice, .diagnostic-card, .fuentes-panel) {
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--turq) !important;
  border-radius: var(--radius) !important;
  background: var(--panel-2) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

/* Colores oficiales de compañía para chips, barras y leyendas */
.company-entel,
.brand-entel,
.compania-entel,
[data-company="ENTEL"],
[data-compania="ENTEL"],
[data-brand="ENTEL"] {
  --company-color:var(--entel);
  border-color: rgba(11, 95, 255, .55) !important;
  color: #c9d9ff !important;
}

.company-movistar,
.brand-movistar,
.compania-movistar,
[data-company="MOVISTAR"],
[data-compania="MOVISTAR"],
[data-brand="MOVISTAR"] {
  --company-color:var(--movistar);
  border-color: rgba(25, 163, 230, .55) !important;
  color: #c8efff !important;
}

.company-claro,
.brand-claro,
.compania-claro,
[data-company="CLARO"],
[data-compania="CLARO"],
[data-brand="CLARO"] {
  --company-color:var(--claro);
  border-color: rgba(227, 0, 27, .55) !important;
  color: #ffc8ce !important;
}

.company-wom,
.brand-wom,
.compania-wom,
[data-company="WOM"],
[data-compania="WOM"],
[data-brand="WOM"] {
  --company-color:var(--wom);
  border-color: rgba(123, 45, 189, .55) !important;
  color: #e7d1ff !important;
}

:where(.company-entel, .brand-entel, .compania-entel, .company-movistar, .brand-movistar, .compania-movistar, .company-claro, .brand-claro, .compania-claro, .company-wom, .brand-wom, .compania-wom) {
  background: color-mix(in srgb, var(--company-color, var(--otros)) 18%, transparent) !important;
}

.bar-entel,
.legend-entel,
[data-series="ENTEL"] {
  background: var(--entel) !important;
}

.bar-movistar,
.legend-movistar,
[data-series="MOVISTAR"] {
  background: var(--movistar) !important;
}

.bar-claro,
.legend-claro,
[data-series="CLARO"] {
  background: var(--claro) !important;
}

.bar-wom,
.legend-wom,
[data-series="WOM"] {
  background: var(--wom) !important;
}

/* Logos de socios dentro del contenido, no apretados en el menú */
.module-brand-logo,
.company-logo,
.partner-logo,
.tuu-logo {
  max-height: 42px !important;
  max-width: 150px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
}

.tuu-logo,
img[src*="tuu"] {
  max-height: 56px !important;
  max-width: 180px !important;
}

@media (max-width: 1180px) {
  .smart-topbar,
  .cx-header {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .topbar-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 860px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .cx-sidebar {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
  }

  .module-active .workbench {
    padding-inline: 10px !important;
  }

  :where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) h1,
  :where(.cx-module-header, .sales-module-hero, .commerce-control-hero, .rendiciones-hero, .liquidaciones-hero, .catalog-hero, .inventory-hero, .goals-hero, .connectio-time-hero, .time-hero, .profit-module-hero, .audit-hero, .quality-module-hero, .tuu-hero, .routes-hero, .module-hero) h2 {
    font-size: clamp(25px, 8vw, 38px) !important;
  }
}

/* CONNECTIO app-family blueprint v1
   Anatomia visual tomada de SPEC-BLUEPRINT-VISUAL.md + referencia-visual/REF-terreno.css y REF-supervisor.css.
   Esta capa traduce los patrones reales de las apps a los modulos web existentes. */
:root {
  --app-bg: radial-gradient(1200px 600px at 50% -10%, #0d1730 0%, #070b16 60%);
  --bg-scrim: rgba(7,11,22,.62);
  --accent: var(--turq);
  --accent-2: #22b8a6;
  --accent-soft: var(--turq-soft);
}

[data-theme="light"],
body.theme-light {
  --app-bg: radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, #e7eef8 60%);
  --bg-scrim: rgba(238,242,248,.5);
  --accent: var(--turq);
  --accent-2: #0f766e;
  --accent-soft: var(--turq-soft);
}

[data-theme="corp"],
[data-theme="corporativo"],
body.theme-corporativo {
  --app-bg: radial-gradient(1200px 600px at 50% -10%, #0a3a63 0%, #06182f 60%);
  --bg-scrim: rgba(6,24,47,.58);
  --accent: #31d4c4;
  --accent-2: #1fb6a9;
  --accent-soft: #14504b;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--app-bg);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-scrim);
  opacity: .18;
  pointer-events: none;
}

.app-shell,
.cx-app-shell,
.module-active .workbench,
.workbench,
.content,
.cx-main {
  background: transparent !important;
}

/* Header/status de escritorio, equivalente al .status de apps */
.smart-topbar,
.cx-header,
.topbar,
.app-header {
  min-height: 56px !important;
  padding: 8px 14px !important;
  background: linear-gradient(180deg, rgba(45,212,191,.06), transparent), var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 0 14px 14px !important;
  transition: padding .2s ease, background .4s ease !important;
}

.smart-topbar::before,
.cx-header::before,
.topbar::before,
.app-header::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--turq);
  box-shadow: 0 0 12px var(--turq);
  flex: 0 0 auto;
}

.topbar-actions :where(button, .connectia-btn),
.smart-topbar :where(button, .connectia-btn),
.cx-header :where(button, .connectia-btn) {
  min-height: 36px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--txt-dim) !important;
}

.topbar-actions :where(button, .connectia-btn):hover,
.smart-topbar :where(button, .connectia-btn):hover,
.cx-header :where(button, .connectia-btn):hover {
  border-color: var(--turq-soft) !important;
  color: var(--turq) !important;
}

/* Carrusel/avisos: cuando exista, debe verse como estados-bar */
:where(.estados-bar, .news-strip, .status-strip, .module-status-strip, .rotator-strip, .sync-banner) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(45,212,191,.07), transparent), var(--panel) !important;
  color: var(--txt-dim) !important;
  overflow: hidden !important;
}

/* Menus de tiles: dos columnas app-like */
:where(.mgrid, .module-grid, .home-grid, .quick-actions, .action-grid, .tile-grid, .menu-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: 96px !important;
  padding: 13px !important;
  text-align: left !important;
  color: var(--txt) !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform .12s ease, border-color .2s ease, background .2s ease !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card):hover {
  border-color: var(--turq-soft) !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card):active {
  transform: scale(.97) !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card) :where(.ic, .mic, .mtile-ic, .module-icon, .card-icon, .emoji) {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-bottom: 5px !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card) :where(.mt, .mtile-t, h3, h4, .title) {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--txt) !important;
}

:where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card) :where(.ms, .mtile-s, p, small, .subtitle) {
  font-size: 10.5px !important;
  color: var(--txt-faint) !important;
  line-height: 1.35 !important;
}

:where(.mtile-badge, .mb, .module-badge, .tile-badge, .count-badge) {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--amber) !important;
  color: #2a1c06 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Lego de formulario de apps: .vsec */
:where(.vsec, .search-card, .filter-card, .filter-panel, .form-card, .form-panel, .import-panel, .source-form, .editor-form, .admin-form, .modal-form, .config-card) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 13px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.vsec, .search-card, .filter-card, .filter-panel, .form-card, .form-panel, .import-panel, .source-form, .editor-form, .admin-form, .modal-form, .config-card) + :where(.vsec, .search-card, .filter-card, .filter-panel, .form-card, .form-panel, .import-panel, .source-form, .editor-form, .admin-form, .modal-form, .config-card) {
  margin-top: 12px !important;
}

:where(.vsec-h, .section-head, .form-head, .card-head, .panel-head) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  color: var(--txt) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

:where(.vsec-sub, .section-sub, .form-sub, .card-sub, .panel-sub) {
  margin: -2px 0 10px !important;
  color: var(--txt-faint) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

:where(.badge-req, .required-badge) {
  color: #ffb8c0 !important;
  background: rgba(239,93,107,.12) !important;
  border: 1px solid rgba(239,93,107,.35) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

:where(.badge-opt, .optional-badge) {
  color: var(--txt-faint) !important;
  background: rgba(90,108,143,.12) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

:where(.vinp, .vsel, .vta, .field input, .field select, .field textarea, .vsec input, .vsec select, .vsec textarea, .search-card input, .search-card select, .filter-panel input, .filter-panel select, .form-card input, .form-card select, .form-card textarea) {
  width: 100% !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: var(--txt) !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  padding: 11px 12px !important;
  outline: none !important;
  transition: border-color .2s ease !important;
}

:where(.vinp, .vsel, .vta, .field input, .field select, .field textarea, .vsec input, .vsec select, .vsec textarea, .search-card input, .search-card select, .filter-panel input, .filter-panel select, .form-card input, .form-card select, .form-card textarea):focus {
  border-color: var(--turq) !important;
}

:where(.seg, .segment, .toggle-seg, .choice-group) {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

:where(.seg, .segment, .toggle-seg, .choice-group) button {
  flex: 1 1 130px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 10px !important;
  border-radius: 11px !important;
  cursor: pointer !important;
  border: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--txt-dim) !important;
  transition: all .18s ease !important;
}

:where(.seg, .segment, .toggle-seg, .choice-group) button.on,
:where(.seg, .segment, .toggle-seg, .choice-group) button.active,
:where(.seg, .segment, .toggle-seg, .choice-group) button[aria-selected="true"] {
  border-color: var(--turq) !important;
  color: var(--turq) !important;
  background: rgba(45,212,191,.08) !important;
}

:where(.submit, .primary-btn, .btn-primary, .save-btn, .apply-btn, .sync-btn, button[type="submit"]) {
  width: auto !important;
  min-height: 42px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  border-radius: 13px !important;
  border: none !important;
  background: linear-gradient(135deg,var(--turq),var(--accent-2)) !important;
  color: #04201d !important;
  transition: transform .15s ease, opacity .2s ease !important;
}

:where(.submit, .primary-btn, .btn-primary, .save-btn, .apply-btn, .sync-btn, button[type="submit"]):active:not(:disabled) {
  transform: scale(.98) !important;
}

/* Contadores de apps: ven-est / ven-card */
:where(.ven-est-grid, .kpis, .sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .tuu-kpis, .metric-grid, .stats-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 9px !important;
}

:where(.ven-est, .ven-card, .metric-card, .stat-card, .kpi-card, .mtile, .sales-kpis article, .commerce-kpis article, .production-kpis article, .inventory-kpis article, .catalog-kpis article, .time-kpis article, .tuu-kpis article, .kpis article) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 11px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.ven-est.ok, .kpi-card.ok, .metric-card.ok, .stat-card.ok) {
  border-color: var(--turq-soft) !important;
}

:where(.ven-est.warn, .kpi-card.warn, .metric-card.warn, .stat-card.warn) {
  border-color: rgba(245,176,74,.35) !important;
}

:where(.ven-est, .ven-card, .metric-card, .stat-card, .kpi-card, .sales-kpis article, .commerce-kpis article, .production-kpis article, .inventory-kpis article, .catalog-kpis article, .time-kpis article, .tuu-kpis article, .kpis article) :where(.n, strong, b:first-child) {
  font-size: clamp(18px, 1.45vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--txt) !important;
}

:where(.ven-est, .ven-card, .metric-card, .stat-card, .kpi-card, .sales-kpis article, .commerce-kpis article, .production-kpis article, .inventory-kpis article, .catalog-kpis article, .time-kpis article, .tuu-kpis article, .kpis article) :where(.l, span, small) {
  display: block !important;
  margin-top: 4px !important;
  color: var(--txt-faint) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

/* Resultados tipo seg-card */
:where(.seg-card, .result-card, .request-card, .solicitud-card, .item-card, .record-card, .list-card, .row-card) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  margin-bottom: 9px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.seg-t, .result-title, .request-title, .record-title) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: var(--txt) !important;
}

:where(.seg-m, .result-meta, .request-meta, .record-meta, .meta-line) {
  font-size: 11.5px !important;
  color: var(--txt-faint) !important;
  margin-top: 5px !important;
  line-height: 1.45 !important;
}

:where(.seg-est, .status-pill, .badge, .chip, .state-chip, .pill) {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
}

.seg-est.ok,
.seg-est.aprobada,
.chip.aprobada,
.status-pill.aprobada {
  color: var(--turq) !important;
  background: var(--turq-soft) !important;
  border-color: var(--turq) !important;
}

.seg-est.no,
.seg-est.denegada,
.chip.denegada,
.status-pill.denegada,
.status-pill.rechazada {
  color: var(--red) !important;
  background: rgba(239,93,107,.12) !important;
  border-color: rgba(239,93,107,.4) !important;
}

.seg-est.pend,
.seg-est.pendiente,
.chip.pendiente,
.status-pill.pendiente {
  color: var(--amber) !important;
  background: rgba(245,166,35,.12) !important;
  border-color: rgba(245,166,35,.4) !important;
}

.seg-est.rev,
.seg-est.revision,
.chip.revision,
.status-pill.revision {
  color: var(--blue) !important;
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.4) !important;
}

/* Filas supervisor/persona */
:where(.row, .person-row, .worker-row, .seller-row, .user-row, .monitor-row, .mon-row, .ren-vrow, .idn-row, .stk-row, .mc-row, .rk-row, .ven-row) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  margin-bottom: 8px !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}

:where(.row-av, .avatar, .person-avatar, .user-avatar, .seller-avatar, .initial-avatar) {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #1c2c4a, #152138) !important;
  color: var(--turq) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  flex: 0 0 auto !important;
}

:where(.row-name, .person-name, .user-name, .seller-name) {
  font-size: 14px !important;
  font-weight: 850 !important;
  color: var(--txt) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:where(.row-meta, .person-meta, .user-meta, .seller-meta) {
  font-size: 11.5px !important;
  color: var(--txt-faint) !important;
  margin-top: 2px !important;
}

/* Label/valor tipo ficha SII */
:where(.sii-row, .dl-row, .detail-row, .kv-row) {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12.5px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

:where(.sii-row, .dl-row, .detail-row, .kv-row):last-child {
  border-bottom: 0 !important;
}

:where(.sii-row, .dl-row, .detail-row, .kv-row) :where(span, label, .k) {
  color: var(--txt-faint) !important;
}

:where(.sii-row, .dl-row, .detail-row, .kv-row) :where(b, strong, .v) {
  color: var(--txt) !important;
  font-weight: 850 !important;
}

/* TUU sellos */
:where(.tuu-sellos, .process-chain, .sello-chain) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 9px !important;
}

:where(.tuu-sello, .process-step, .sello-step) {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  color: var(--txt-faint) !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
}

:where(.tuu-sello.on, .process-step.on, .sello-step.on, .process-step.done, .sello-step.done) {
  color: var(--green) !important;
  border-color: var(--turq-soft) !important;
  background: rgba(52,211,153,.10) !important;
}

/* Barras de avance */
:where(.res-bar, .meta-bar, .progress-track, .bar-track) {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

:where(.res-bar, .meta-bar, .progress-track, .bar-track) > :where(b, i, span, .bar-fill, .progress-fill) {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,var(--turq),var(--accent-2)) !important;
  transition: width .5s ease !important;
}

/* Alertas y avisos: 4 niveles */
:where(.sii-parse-ok, .sii-cap.ok, .notice.ok, .alert.ok, .toast.ok, .success-box) {
  color: var(--turq) !important;
  background: var(--turq-soft) !important;
  border: 1px solid var(--turq) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

:where(.sii-det.obs, .notice.info, .alert.info, .info-box, .platform-box) {
  color: #bdd5ff !important;
  background: rgba(59,130,246,.12) !important;
  border: 1px solid rgba(59,130,246,.38) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

:where(.sii-warn-ficha, .tel-obs, .notice.warn, .alert.warn, .warning-box, .source-status.warning) {
  color: var(--amber) !important;
  background: rgba(245,166,35,.12) !important;
  border: 1px solid var(--amber) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

:where(.vis-audit, .notice.danger, .alert.danger, .error-box, .source-status.error) {
  color: var(--red) !important;
  background: rgba(239,93,107,.12) !important;
  border: 1px solid rgba(239,93,107,.45) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

:where(.source-status, .cx-loading-state, .cx-empty-state, .modal-inline-status, .module-action-hint, .diagnostic-card) {
  line-height: 1.45 !important;
}

/* Modales: apariencia bottom-sheet app en pantallas chicas y dialog limpio en escritorio */
:where(.modal-wrap, .modal-backdrop, .dialog-backdrop, .overlay, .cx-modal-overlay) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(4,7,16,.66) !important;
  backdrop-filter: blur(3px) !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

:where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
  width: min(100%, 720px) !important;
  max-height: 88vh !important;
  overflow: auto !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px 22px 0 0 !important;
  color: var(--txt) !important;
  padding: 20px 18px !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
}

:where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal)::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 0 auto 14px;
}

@media (min-width: 861px) {
  :where(.modal-wrap, .modal-backdrop, .dialog-backdrop, .overlay, .cx-modal-overlay) {
    align-items: center !important;
  }

  :where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
    border-radius: 18px !important;
  }
}

:where(.actbar, .modal-actions, .dialog-actions, .action-bar) {
  display: flex !important;
  gap: 9px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}

:where(.actbar, .modal-actions, .dialog-actions, .action-bar) button {
  flex: 1 1 140px !important;
  min-height: 42px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--txt) !important;
}

/* Chat/burbujas */
:where(.bub, .chat-bubble, .message-bubble) {
  max-width: 82% !important;
  padding: 9px 12px !important;
  border-radius: 15px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

:where(.bub.me, .chat-bubble.me, .message-bubble.me) {
  align-self: flex-end !important;
  background: linear-gradient(135deg,var(--turq),var(--accent-2)) !important;
  color: #04201c !important;
  border-bottom-right-radius: 5px !important;
}

:where(.bub.them, .chat-bubble.them, .message-bubble.them) {
  align-self: flex-start !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-bottom-left-radius: 5px !important;
}

:where(.bub.plat, .chat-bubble.platform, .message-bubble.platform) {
  border-left: 3px solid var(--blue) !important;
}

:where(.bub-origen, .platform-origin, .origin-badge) {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: var(--blue) !important;
  background: rgba(59,130,246,.14) !important;
  border-radius: 6px !important;
  padding: 1px 5px !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}

/* Vacios con identidad, no tablas mudas */
:where(.empty, .icc-empty, .cx-empty-state, .empty-state) {
  text-align: center !important;
  padding: 36px 20px !important;
  color: var(--txt-faint) !important;
  line-height: 1.5 !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
}

:where(.empty .ic, .icc-empty .ic, .empty-state .ic, .empty-state-icon) {
  display: block !important;
  font-size: 34px !important;
  margin-bottom: 10px !important;
  opacity: .75 !important;
}

/* SII / plataforma / app badges */
:where(.sii-badge, .sii-chip, .sii-seal) {
  color: var(--turq) !important;
  background: var(--turq-soft) !important;
  border: 1px solid var(--turq) !important;
  border-radius: 10px !important;
  padding: 4px 9px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
}

:where(.sii-badge.warn, .sii-chip.warn, .sii-seal.warn) {
  color: var(--amber) !important;
  background: rgba(245,166,35,.12) !important;
  border-color: var(--amber) !important;
}

:where(.sii-badge.off, .sii-chip.off, .sii-seal.off) {
  color: var(--txt-faint) !important;
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
}

/* Tablas: se mantienen web, pero con el tono de las apps */
:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) {
  border-radius: 14px !important;
  background: var(--panel) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) th {
  background: var(--panel) !important;
  color: var(--txt-dim) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) td {
  background: var(--panel-2) !important;
  color: var(--txt) !important;
}

[data-theme="light"] :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) tr:nth-child(even) td,
body.theme-light :where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) tr:nth-child(even) td {
  background: #ffffff !important;
}

/* Logos oficiales: visibles en contenido, nunca comprimidos en menú */
.module-brand-logo,
.company-logo,
.partner-logo,
.tuu-logo,
img[src*="assets/brand/"],
img[src*="referencia-visual/logos/"] {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  object-fit: contain !important;
}

img[src*="tuu"],
img[src*="haulmer"] {
  min-height: 34px !important;
  max-height: 62px !important;
  max-width: 190px !important;
}

@media (max-width: 760px) {
  :where(.mgrid, .module-grid, .home-grid, .quick-actions, .action-grid, .tile-grid, .menu-grid) {
    grid-template-columns: 1fr 1fr !important;
  }

  :where(.tile, .mtile, .module-card, .quick-action, .home-card, .action-card) {
    min-height: 88px !important;
    padding: 12px !important;
  }

  :where(.ven-est-grid, .kpis, .sales-kpis, .commerce-kpis, .production-kpis, .inventory-kpis, .catalog-kpis, .time-kpis, .tuu-kpis, .metric-grid, .stats-grid) {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* CONNECTIO app-family blueprint QA v2
   Ajustes del primer recorrido de aceptacion: sin elementos ocultos saliendo del viewport,
   mas area util y estructura de modulo contenida. */
.app-shell,
.cx-shell {
  overflow-x: clip !important;
}

.app-shell.sidebar-collapsed .sidebar:not(:hover) {
  overflow: hidden !important;
}

.app-shell.sidebar-collapsed .sidebar:not(:hover) .brand-copy,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .sidebar-copy,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .nav-item strong,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .side-group-label,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .side-group-toggle strong,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .side-subitem strong,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .login-panel,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .mini-panel {
  opacity: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: none !important;
}

.app-shell.sidebar-collapsed .sidebar:not(:hover) .nav-item,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .side-group-toggle,
.app-shell.sidebar-collapsed .sidebar:not(:hover) .side-subitem {
  justify-content: center !important;
  padding-inline: 10px !important;
}

.app-shell.sidebar-collapsed .sidebar:hover .nav-item strong,
.app-shell.sidebar-collapsed .sidebar:hover .side-group-label,
.app-shell.sidebar-collapsed .sidebar:hover .side-group-toggle strong,
.app-shell.sidebar-collapsed .sidebar:hover .side-subitem strong {
  max-width: 190px !important;
  width: auto !important;
  opacity: 1 !important;
}

:where(.module-active .workbench, .workbench, .content, .cx-main, .module-panel, .module-screen, .cx-module) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

:where(.module-card, .module-panel, .panel, .section-card, .dashboard-card, .cx-card, .kpi-card, .stat-card) {
  isolation: isolate !important;
}

:where(.tabs, .section-tabs, .tabbar, .module-tabs, .tab-strip, .cx-tabs) {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  max-width: 100% !important;
  margin: 10px 0 14px !important;
}

:where(.tabs, .section-tabs, .tabbar, .module-tabs, .tab-strip, .cx-tabs) + * {
  clear: both !important;
}

:where(.table-wrap, .cx-table-wrap, .data-table-wrap, .table-scroll, .grid-scroll, .list-scroll) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

:where(table, .sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table) {
  max-width: 100% !important;
}

:where(.smart-topbar, .cx-header, .topbar, .app-header) {
  overflow: hidden !important;
}

:where(.smart-topbar .search, .cx-header .search, .topbar .search, .app-header .search, .global-search) {
  min-width: 180px !important;
}

/* CONNECTIO visual calm v3
   Menos bordes, menos efecto "botones encima de botones".
   La separacion principal queda por aire, fondo y sombra suave. */
:where(.module-panel, .module-screen, .cx-module, .workbench-panel, .dashboard-section, .section-card, .panel, .cx-card, .module-card, .dashboard-card, .data-card, .content-card) {
  border-color: transparent !important;
  box-shadow: 0 14px 36px rgba(7, 11, 22, .08) !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card, .tile, .mtile, .home-card, .quick-action, .action-card) {
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(7, 11, 22, .07) !important;
}

:where(.vsec, .search-card, .filter-card, .filter-panel, .form-card, .form-panel, .import-panel, .source-form, .editor-form, .admin-form, .config-card) {
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(7, 11, 22, .06) !important;
}

:where(.tabs, .section-tabs, .tabbar, .module-tabs, .tab-strip, .cx-tabs) {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

:where(.tabs button, .section-tabs button, .tabbar button, .module-tabs button, .tab-strip button, .cx-tabs button, .tab, .tab-button, .tab-link) {
  border-color: transparent !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent) !important;
}

:where(.tabs button.active, .section-tabs button.active, .tabbar button.active, .module-tabs button.active, .tab-strip button.active, .cx-tabs button.active, .tab.active, .tab-button.active, .tab-link.active, [aria-selected="true"]) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--turq), var(--blue)) !important;
  color: #04111f !important;
}

:where(.seg-card, .result-card, .request-card, .item-card, .row, .person-row, .worker-row, .user-row, .commerce-row, .source-row, .audit-row) {
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(7, 11, 22, .06) !important;
}

:where(.source-status, .cx-loading-state, .cx-empty-state, .modal-inline-status, .module-action-hint, .diagnostic-card, .notice, .alert, .info-box, .success-box, .warning-box, .error-box) {
  border-color: transparent !important;
  box-shadow: inset 4px 0 0 currentColor, 0 8px 20px rgba(7, 11, 22, .05) !important;
}

:where(.sii-badge, .sii-chip, .sii-seal, .status-pill, .chip, .badge, .seg-est) {
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table, .table-wrap, .cx-table-wrap) {
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(7, 11, 22, .06) !important;
}

:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table) th,
:where(.sales-table, .inventory-table, .catalog-table, .routes-table, .source-table, .admin-table, .audit-table, .commerce-table, .data-table) td {
  border-color: rgba(142, 160, 196, .12) !important;
}

:where(.hero, .module-hero, .page-hero, .cx-hero, .section-hero) {
  border-color: transparent !important;
  box-shadow: 0 18px 42px rgba(7, 11, 22, .08) !important;
}

:where(.sidebar :is(a, button, .nav-item, .module-nav-item, .sidebar-link), .cx-sidebar :is(a, button, .nav-item, .module-nav-item, .sidebar-link), .side-group-toggle, .side-subitem) {
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.sidebar :is(a.active, button.active, .nav-item.active, .module-nav-item.active, .sidebar-link.active), .cx-sidebar :is(a.active, button.active, .nav-item.active, .module-nav-item.active, .sidebar-link.active), .side-group-toggle.active, .side-subitem.active) {
  border-color: transparent !important;
  box-shadow: inset 4px 0 0 var(--turq) !important;
}

/* CONNECTIO executive geometry v4
   Menos esquinas curvas: estilo mas serio, plano y corporativo. */
:where(.module-panel, .module-screen, .cx-module, .workbench-panel, .dashboard-section, .section-card, .panel, .cx-card, .module-card, .dashboard-card, .data-card, .content-card, .hero, .module-hero, .page-hero, .cx-hero, .section-hero) {
  border-radius: 8px !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card, .tile, .mtile, .home-card, .quick-action, .action-card, .seg-card, .result-card, .request-card, .item-card, .row, .person-row, .worker-row, .user-row, .commerce-row, .source-row, .audit-row) {
  border-radius: 7px !important;
}

:where(.vsec, .search-card, .filter-card, .filter-panel, .form-card, .form-panel, .import-panel, .source-form, .editor-form, .admin-form, .config-card, .table-wrap, .cx-table-wrap, .data-table-wrap, .table-scroll, .grid-scroll, .list-scroll) {
  border-radius: 8px !important;
}

:where(input, select, textarea, .vinp, .vsel, .vta, .global-search, .search-input, .filter-input) {
  border-radius: 6px !important;
}

:where(button, .btn, .submit, .primary-btn, .secondary-btn, .action-btn, .tab, .tab-button, .tab-link, .tabs button, .section-tabs button, .tabbar button, .module-tabs button, .tab-strip button, .cx-tabs button) {
  border-radius: 6px !important;
}

:where(.sii-badge, .sii-chip, .sii-seal, .status-pill, .chip, .badge, .seg-est) {
  border-radius: 5px !important;
}

:where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
  border-radius: 10px !important;
}

@media (max-width: 860px) {
  :where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
    border-radius: 10px 10px 0 0 !important;
  }
}

/* CONNECTIO executive typography v5
   Menos espectacularidad y mas lectura ejecutiva: titulos contenidos, menos gradientes,
   mas espacio util para indicadores y tablas. */
:where(h1, .hero-title, .module-title, .page-title, .screen-title) {
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 960px !important;
}

:where(h2, .section-title, .card-title, .panel-title) {
  font-size: clamp(20px, 1.7vw, 30px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

:where(.hero, .module-hero, .page-hero, .cx-hero, .section-hero, .access-hero, .login-hero) {
  min-height: auto !important;
  padding: clamp(22px, 3vw, 44px) !important;
  background-image: none !important;
}

:where(.hero::before, .hero::after, .module-hero::before, .module-hero::after, .page-hero::before, .page-hero::after, .cx-hero::before, .cx-hero::after, .section-hero::before, .section-hero::after) {
  opacity: .12 !important;
  filter: none !important;
}

:where(.hero-subtitle, .module-subtitle, .page-subtitle, .section-subtitle, .lead, .muted-lead) {
  font-size: clamp(14px, .95vw, 17px) !important;
  line-height: 1.48 !important;
  max-width: 860px !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card) :where(.value, .number, .metric-value, .stat-value, strong:first-child) {
  font-size: clamp(24px, 2.1vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card) :where(.label, small, .metric-label, .stat-label) {
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

:where(.module-panel, .module-screen, .cx-module, .workbench-panel, .dashboard-section, .section-card, .panel, .cx-card, .module-card, .dashboard-card, .data-card, .content-card) {
  background-image: none !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card, .tile, .mtile, .home-card, .quick-action, .action-card) {
  background-image: none !important;
}

:where(.res-bar, .meta-bar, .progress-track, .bar-track) {
  height: 7px !important;
}

:where(.res-bar > *, .meta-bar > *, .progress-track > *, .bar-track > *, .bar-fill, .progress-fill) {
  box-shadow: none !important;
}

:where(.module-brand-logo, .company-logo, .partner-logo, .tuu-logo, img[src*="assets/brand/"], img[src*="referencia-visual/logos/"]) {
  border-radius: 6px !important;
}

/* CONNECTIO module geometry v6
   El contenedor grande del modulo deja de verse como tarjeta curva.
   Estilo consola: casi recto, limpio, con separacion por superficie. */
:where(.module-active .workbench, .workbench, .content, .cx-main) {
  border-radius: 0 !important;
}

:where(.module-panel, .module-screen, .cx-module, .workbench-panel, .dashboard-section, .module-shell, .module-view, .module-body) {
  border-radius: 2px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:where(.hero, .module-hero, .page-hero, .cx-hero, .section-hero, .access-hero, .login-hero) {
  border-radius: 3px !important;
}

:where(.section-card, .panel, .cx-card, .module-card, .dashboard-card, .data-card, .content-card) {
  border-radius: 4px !important;
}

:where(.kpi-card, .stat-card, .metric-card, .ven-est, .ven-card, .summary-card) {
  border-radius: 4px !important;
}

:where(.tabs, .section-tabs, .tabbar, .module-tabs, .tab-strip, .cx-tabs) {
  border-radius: 0 !important;
}

/* CONNECTIO square corporate v7
   Ajuste mas agresivo: casi sin curvas en estructura, tarjetas y paneles.
   Solo controles interactivos mantienen radio minimo. */
:where(
  .module-active .workbench,
  .workbench,
  .content,
  .cx-main,
  .module-panel,
  .module-screen,
  .cx-module,
  .workbench-panel,
  .dashboard-section,
  .module-shell,
  .module-view,
  .module-body,
  .section-card,
  .panel,
  .cx-card,
  .module-card,
  .dashboard-card,
  .data-card,
  .content-card,
  .hero,
  .module-hero,
  .page-hero,
  .cx-hero,
  .section-hero,
  .access-hero,
  .login-hero,
  .kpi-card,
  .stat-card,
  .metric-card,
  .ven-est,
  .ven-card,
  .summary-card,
  .tile,
  .mtile,
  .home-card,
  .quick-action,
  .action-card,
  .seg-card,
  .result-card,
  .request-card,
  .item-card,
  .row,
  .person-row,
  .worker-row,
  .user-row,
  .commerce-row,
  .source-row,
  .audit-row,
  .vsec,
  .search-card,
  .filter-card,
  .filter-panel,
  .form-card,
  .form-panel,
  .import-panel,
  .source-form,
  .editor-form,
  .admin-form,
  .config-card,
  .table-wrap,
  .cx-table-wrap,
  .data-table-wrap,
  .table-scroll,
  .grid-scroll,
  .list-scroll,
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .data-table
) {
  border-radius: 2px !important;
}

:where(.tabs, .section-tabs, .tabbar, .module-tabs, .tab-strip, .cx-tabs) {
  border-radius: 0 !important;
}

:where(.tabs button, .section-tabs button, .tabbar button, .module-tabs button, .tab-strip button, .cx-tabs button, .tab, .tab-button, .tab-link) {
  border-radius: 3px !important;
}

:where(button, .btn, .submit, .primary-btn, .secondary-btn, .action-btn) {
  border-radius: 4px !important;
}

:where(input, select, textarea, .vinp, .vsel, .vta, .global-search, .search-input, .filter-input) {
  border-radius: 4px !important;
}

:where(.sii-badge, .sii-chip, .sii-seal, .status-pill, .chip, .badge, .seg-est) {
  border-radius: 3px !important;
}

:where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
  border-radius: 6px !important;
}

@media (max-width: 860px) {
  :where(.modal, .modal-card, .dialog, .dialog-card, .editor-card, .cx-modal, .sheet-modal) {
    border-radius: 6px 6px 0 0 !important;
  }
}

/* CONNECTIO layout correction v8
   Corrige barra superior partida y paneles cortados en escritorio. */
.app-shell,
.cx-shell {
  width: 100vw !important;
  max-width: 100vw !important;
}

.content,
.cx-main,
.workbench,
.module-active .workbench {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.smart-topbar,
.cx-header,
.topbar,
.app-header {
  display: grid !important;
  grid-template-columns: minmax(210px, .72fr) minmax(280px, 1fr) minmax(300px, max-content) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.topbar-left,
.breadcrumb,
.topbar-search,
.topbar-actions {
  min-width: 0 !important;
  max-width: 100% !important;
}

.topbar-search {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) !important;
}

.topbar-search button {
  display: none !important;
}

.topbar-search input {
  min-height: 38px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 14px !important;
}

.topbar-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.topbar-actions > button:not(.user-chip):not(.profile-menu),
.topbar-actions .connectia-btn,
.topbar-actions .theme-toggle-btn,
.topbar-actions .notification-btn {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  max-width: 132px !important;
  white-space: nowrap !important;
}

.user-chip,
.profile-menu {
  flex: 0 1 300px !important;
  max-width: 300px !important;
  min-width: 170px !important;
  overflow: hidden !important;
}

.user-chip strong,
.profile-menu strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.overview-layout, .dashboard-layout, .module-layout, .control-layout, .home-layout, .workspace-grid, .content-grid, .tv-content-grid) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

:where(.overview-layout, .dashboard-layout, .module-layout, .control-layout, .home-layout, .workspace-grid, .content-grid) > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1280px) {
  .smart-topbar,
  .cx-header,
  .topbar,
  .app-header {
    grid-template-columns: minmax(190px, .75fr) minmax(220px, 1fr) minmax(230px, max-content) !important;
  }

  .topbar-actions > button:not(.user-chip):not(.profile-menu) {
    max-width: 44px !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
  }

  .user-chip,
  .profile-menu {
    max-width: 230px !important;
    min-width: 150px !important;
  }
}

/* CONNECTIO adaptive boundaries v9
   Limites globales para que cada pantalla se adapte sin cortes ni paneles fuera de lugar. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.app-shell,
.cx-shell,
.main-layout,
.platform-shell {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.content,
.cx-main,
.main-content,
.page-content,
.workbench,
.module-active .workbench {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.smart-topbar.cx-header,
.smart-topbar,
.cx-header,
.topbar,
.app-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 14px !important;
  margin: 0 0 14px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.topbar-left {
  order: 1 !important;
  flex: 0 1 430px !important;
  min-width: 170px !important;
  max-width: 430px !important;
}

.topbar-search {
  order: 2 !important;
  flex: 1 1 360px !important;
  min-width: 200px !important;
  max-width: 720px !important;
}

.topbar-search input {
  width: 100% !important;
  min-width: 0 !important;
}

.topbar-actions {
  order: 3 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: visible !important;
}

.topbar-actions > * {
  flex-shrink: 1 !important;
}

.user-chip,
.profile-menu {
  flex: 0 1 340px !important;
  max-width: 340px !important;
  min-width: 150px !important;
  overflow: hidden !important;
}

.user-chip strong,
.profile-menu strong,
.breadcrumb,
.topbar-left {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(
  .overview-layout,
  .dashboard-layout,
  .module-layout,
  .control-layout,
  .home-layout,
  .workspace-grid,
  .content-grid,
  .tv-content-grid,
  .metrics-grid,
  .kpi-grid,
  .stats-grid,
  .cards-grid,
  .analytics-grid,
  .routes-map-layout,
  .tuu-layout,
  .commerce-layout,
  .admin-layout
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:where(
  .overview-layout,
  .dashboard-layout,
  .module-layout,
  .control-layout,
  .home-layout,
  .workspace-grid,
  .content-grid,
  .tv-content-grid,
  .metrics-grid,
  .kpi-grid,
  .stats-grid,
  .cards-grid,
  .analytics-grid,
  .routes-map-layout,
  .tuu-layout,
  .commerce-layout,
  .admin-layout
) > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

:where(
  .module-shell,
  .module-view,
  .module-body,
  .section-card,
  .panel,
  .cx-card,
  .module-card,
  .dashboard-card,
  .data-card,
  .content-card,
  .kpi-card,
  .stat-card,
  .metric-card,
  .table-wrap,
  .cx-table-wrap,
  .data-table-wrap,
  .table-scroll,
  .grid-scroll,
  .list-scroll
) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

:where(
  .table-wrap,
  .cx-table-wrap,
  .data-table-wrap,
  .table-scroll,
  .grid-scroll,
  .list-scroll,
  .sales-table,
  .inventory-table,
  .catalog-table,
  .routes-table,
  .source-table,
  .admin-table,
  .audit-table,
  .commerce-table,
  .data-table
) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

:where(table, .data-table table, .admin-table table, .commerce-table table, .source-table table) {
  max-width: none !important;
}

.module-subtabs,
.inventory-tabs,
.catalog-tabs,
.tuu-tabs,
.routes-tabs,
.profit-tabs,
.rendiciones-tabs,
.rrhh-tabs,
.planes-entel-tabs,
.time-tabs,
.commerce-tabs,
.admin-tabs,
.section-tabs,
.tabbar,
.tab-strip,
.cx-tabs {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}

@media (max-width: 1440px) {
  .topbar-left {
    max-width: 310px !important;
  }

  .topbar-search {
    max-width: 520px !important;
    min-width: 170px !important;
  }

  .topbar-actions > button:not(.user-chip):not(.profile-menu) {
    max-width: 112px !important;
    padding-inline: 10px !important;
  }

  .user-chip,
  .profile-menu {
    max-width: 260px !important;
  }
}

@media (max-width: 1180px) {
  .smart-topbar.cx-header,
  .smart-topbar,
  .cx-header,
  .topbar,
  .app-header {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .topbar-left,
  .topbar-search,
  .topbar-actions {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .topbar-actions {
    justify-content: flex-start !important;
  }
}

/* CONNECTIO Dashboard TV adaptive room v10
   Pulido especifico para TV: mas superficie util, menos cajas curvas y limites internos claros. */
.tv-55-panel {
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px !important;
  border-radius: 2px !important;
  border: 0 !important;
  background: #070b16 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.tv-55-panel .tv-stage {
  min-height: calc(100vh - 118px) !important;
  max-width: 100% !important;
  padding: 12px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  background:
    linear-gradient(rgba(45, 212, 191, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, .05) 1px, transparent 1px),
    linear-gradient(135deg, #070b16 0%, #0b1628 58%, #07131f 100%) !important;
  background-size: 46px 46px, 46px 46px, auto !important;
  overflow: hidden !important;
}

.tv-55-panel .tv-control-bar,
.tv-55-panel .tv-broadcast-strip article,
.tv-55-panel .tv-slide,
.tv-55-panel .tv-signal-strip article,
.tv-55-panel .tv-metrics article,
.tv-55-panel .tv-count-card,
.tv-55-panel .tv-chart,
.tv-55-panel .tv-list,
.tv-55-panel .tv-alerts article,
.tv-55-panel .tv-route-map-wrap,
.tv-55-panel .tv-route-side {
  border-radius: 2px !important;
  box-shadow: none !important;
}

.tv-55-panel .tv-control-bar {
  min-height: 52px !important;
  padding: 8px 10px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-control-actions {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.tv-55-panel .tv-control-actions button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 2px !important;
}

.tv-55-panel .tv-broadcast-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.tv-55-panel .tv-broadcast-strip article {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-broadcast-strip strong {
  font-size: clamp(18px, 1.25vw, 24px) !important;
}

.tv-55-panel .tv-slide {
  min-height: calc(100vh - 310px) !important;
  max-height: calc(100vh - 255px) !important;
  padding: 14px !important;
  overflow: auto !important;
}

.tv-55-panel .tv-slide-head {
  margin-bottom: 10px !important;
}

.tv-55-panel .tv-slide-head h2 {
  font-size: clamp(28px, 2.25vw, 44px) !important;
  line-height: 1.04 !important;
  max-width: 980px !important;
}

.tv-55-panel .tv-slide-head p {
  font-size: clamp(12px, .82vw, 15px) !important;
}

.tv-55-panel .tv-slide-head > strong {
  border-radius: 2px !important;
  min-width: 58px !important;
  padding: 9px 11px !important;
}

.tv-55-panel .tv-signal-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.tv-55-panel .tv-signal-strip article {
  min-height: 58px !important;
  padding: 9px 10px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-signal-strip strong {
  font-size: clamp(16px, 1.05vw, 22px) !important;
}

.tv-55-panel .tv-metrics {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

.tv-55-panel .tv-metrics article,
.tv-55-panel .tv-count-card {
  min-height: 82px !important;
  padding: 11px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-metrics strong,
.tv-55-panel .tv-count-card strong {
  font-size: clamp(24px, 1.9vw, 38px) !important;
}

.tv-55-panel .tv-content-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr) !important;
  gap: 10px !important;
}

.tv-55-panel .tv-chart,
.tv-55-panel .tv-list,
.tv-55-panel .tv-alerts article {
  padding: 12px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-bar {
  min-height: 34px !important;
}

.tv-55-panel .tv-bar div {
  height: 10px !important;
  border-radius: 2px !important;
}

.tv-55-panel .tv-list article {
  min-height: 44px !important;
  border-radius: 2px !important;
}

.tv-55-panel .tv-route-board {
  grid-template-columns: minmax(0, 1.58fr) minmax(250px, .58fr) !important;
  gap: 10px !important;
}

.tv-55-panel .tv-route-map-wrap,
.tv-55-panel .tv-route-side {
  padding: 10px !important;
  border-left-width: 4px !important;
}

.tv-55-panel .tv-route-map-wrap .routes-route-map-real,
.tv-vendor-route-map .routes-route-map-real {
  min-height: clamp(300px, 48vh, 560px) !important;
  border-radius: 2px !important;
}

.tv-55-panel .tv-route-side {
  max-height: calc(100vh - 350px) !important;
}

.tv-55-panel .tv-ticker {
  border-radius: 2px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin-top: 8px !important;
}

@media (max-width: 1440px) {
  .tv-55-panel .tv-stage {
    min-height: calc(100vh - 104px) !important;
    padding: 10px !important;
  }

  .tv-55-panel .tv-slide {
    min-height: calc(100vh - 292px) !important;
    max-height: calc(100vh - 236px) !important;
  }

  .tv-55-panel .tv-content-grid,
  .tv-55-panel .tv-route-board {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CONNECTIO Rutas adaptive workspace v11
   Pestañas ancladas, mapa/recorrido estable y detalles con limites internos. */
.routes-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.routes-panel .routes-module-hero {
  border-radius: 2px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.routes-panel .routes-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  padding: 8px 10px !important;
  margin: 0 0 10px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  border-left: 4px solid #14b8a6 !important;
  background: #f8fbff !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.routes-panel .routes-tabs::before {
  position: static !important;
  flex: 0 0 auto !important;
  margin-right: 4px !important;
}

.routes-panel .routes-tabs button {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.routes-panel [data-routes-panel].active {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.routes-panel .routes-map-head,
.routes-panel .routes-map-selected-banner,
.routes-panel .routes-map-actions,
.routes-panel .routes-route-summary,
.routes-panel .route-point-detail,
.routes-panel .routes-route-timeline {
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.routes-panel .routes-map-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.routes-panel .routes-map-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto !important;
  gap: 8px !important;
  padding: 10px !important;
  border-left: 4px solid #14b8a6 !important;
}

.routes-panel .routes-map-actions :where(input, select, button) {
  min-width: 0 !important;
  width: 100% !important;
}

.routes-panel .routes-route-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}

.routes-panel .routes-route-summary article {
  min-width: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.routes-panel .routes-map-selected-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border-left: 4px solid #14b8a6 !important;
}

.routes-panel .routes-map-selected-banner strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.routes-panel .routes-map-duo {
  display: grid !important;
  grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.routes-panel .routes-google-embed,
.routes-panel .routes-route-map,
.routes-panel .routes-route-map-real {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(360px, 54vh, 680px) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.routes-panel .routes-google-embed iframe,
.routes-panel .routes-route-map svg,
.routes-panel .routes-route-map-real svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.routes-panel .route-point-detail {
  max-height: clamp(260px, 42vh, 520px) !important;
  overflow: auto !important;
  border-left: 4px solid #14b8a6 !important;
}

.routes-panel .routes-route-timeline {
  display: flex !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 8px !important;
  padding: 8px !important;
}

.routes-panel .routes-route-timeline button {
  flex: 0 0 138px !important;
  border-radius: 2px !important;
}

@media (max-width: 1250px) {
  .routes-panel .routes-map-duo,
  .routes-panel .routes-map-head,
  .routes-panel .routes-map-selected-banner {
    grid-template-columns: 1fr !important;
  }

  .routes-panel .routes-map-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .routes-panel .routes-map-actions {
    grid-template-columns: 1fr !important;
  }

  .routes-panel .routes-google-embed,
  .routes-panel .routes-route-map,
  .routes-panel .routes-route-map-real {
    min-height: 340px !important;
  }
}

/* CONNECTIO Back Office TUU manual client v12
   Alta manual de cliente/POS con ficha completa, campos clave arriba y modal serio. */
#tuuEditorModal .platform-modal-card {
  width: min(1280px, calc(100vw - 34px)) !important;
  max-height: min(900px, calc(100dvh - 34px)) !important;
  height: min(900px, calc(100dvh - 34px)) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(14, 165, 233, .45) !important;
  border-left: 8px solid #0ea5e9 !important;
  background: #f8fbff !important;
}

#tuuEditorModal .platform-modal-head {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

#tuuEditorModal .modal-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

#tuuEditorModal .platform-modal-head h3 {
  color: #071733 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
}

#tuuEditorModal #tuuEditBanner {
  flex: 0 0 auto !important;
  margin: 12px 22px 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  border-left: 6px solid #0ea5e9 !important;
  background: #e0f2fe !important;
  color: #075985 !important;
  font-weight: 900 !important;
}

#tuuEditorModal .tuu-form {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px 22px 96px !important;
  scrollbar-width: thin !important;
}

#tuuEditorModal .tuu-form-priority {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(14, 165, 233, .34) !important;
  border-left: 7px solid #0ea5e9 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;
}

#tuuEditorModal .tuu-form fieldset {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-left: 5px solid #94a3b8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

#tuuEditorModal .tuu-form legend {
  padding: 0 8px !important;
  color: #075985 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#tuuEditorModal .tuu-form label {
  min-width: 0 !important;
}

#tuuEditorModal .tuu-form label.wide {
  grid-column: 1 / -1 !important;
}

#tuuEditorModal .tuu-form :where(input, textarea) {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(14, 165, 233, .36) !important;
  background: #ffffff !important;
  color: #071733 !important;
  font-weight: 780 !important;
}

#tuuEditorModal .tuu-form :where(input[readonly], textarea[readonly]) {
  background: #eef6ff !important;
  color: #334155 !important;
}

#tuuEditorModal .modal-actions {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-top: 1px solid rgba(14, 165, 233, .28) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), #ffffff) !important;
  box-shadow: 0 -16px 34px rgba(15, 23, 42, .09) !important;
}

#tuuEditorModal .modal-actions button,
#tuuEditorModal .modal-head-actions button {
  min-height: 42px !important;
  border-radius: 6px !important;
  font-weight: 950 !important;
}

@media (max-width: 980px) {
  #tuuEditorModal .platform-modal-head {
    grid-template-columns: 1fr !important;
  }

  #tuuEditorModal .modal-head-actions {
    justify-content: stretch !important;
  }

  #tuuEditorModal .modal-head-actions button {
    flex: 1 1 auto !important;
  }

  #tuuEditorModal .tuu-form-priority,
  #tuuEditorModal .tuu-form fieldset {
    grid-template-columns: 1fr !important;
  }
}

/* CONNECTIO usability controls v13
   Tablas anchas con barra superior visible y fechas editables sin calendario obligatorio. */
.connectio-top-scrollbar {
  width: 100% !important;
  max-width: 100% !important;
  height: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 8px 0 6px !important;
  border: 1px solid rgba(14, 165, 233, .30) !important;
  border-left: 5px solid #0ea5e9 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, .18), rgba(20, 184, 166, .13)) !important;
  scrollbar-color: #0ea5e9 #e0f2fe !important;
  scrollbar-width: auto !important;
}

.connectio-top-scrollbar[hidden] {
  display: none !important;
}

.connectio-top-scrollbar-inner {
  height: 1px !important;
}

.connectio-top-scrollbar::-webkit-scrollbar {
  height: 14px !important;
}

.connectio-top-scrollbar::-webkit-scrollbar-track {
  background: #e0f2fe !important;
  border-radius: 2px !important;
}

.connectio-top-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #0ea5e9, #14b8a6) !important;
  border-radius: 2px !important;
  border: 2px solid #e0f2fe !important;
}

input[data-connectio-date-ready="1"] {
  font-variant-numeric: tabular-nums !important;
}

/* CONNECTIO readability fix v18
   Los formularios TUU/POS usan superficie clara incluso con tema oscuro.
   Por eso sus etiquetas deben mantenerse oscuras y legibles, no heredadas del tema. */
body[data-theme="dark"] #tuuEditorModal .tuu-form,
body[data-theme="dark"] #tuuEditorModal .tuu-form fieldset,
body[data-theme="dark"] #tuuEditorModal .tuu-form-priority,
body[data-theme="dark"] .tuu-panel .tuu-form,
body[data-theme="dark"] .tuu-panel .tuu-form fieldset,
body[data-theme="dark"] .inventory-form {
  background: #ffffff !important;
  color: #071733 !important;
}

body[data-theme="dark"] #tuuEditorModal .tuu-form :where(label, label span, legend, .eyebrow, strong, b, small, p),
body[data-theme="dark"] .tuu-panel .tuu-form :where(label, label span, legend, .eyebrow, strong, b, small, p),
body[data-theme="dark"] .inventory-form :where(label, label span, legend, .eyebrow, strong, b, small, p) {
  color: #071733 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body[data-theme="dark"] #tuuEditorModal .tuu-form :where(input, select, textarea),
body[data-theme="dark"] .tuu-panel .tuu-form :where(input, select, textarea),
body[data-theme="dark"] .inventory-form :where(input, select, textarea) {
  background: #ffffff !important;
  color: #071733 !important;
  border-color: rgba(14, 165, 233, .46) !important;
}

body[data-theme="dark"] #tuuEditorModal .tuu-form :where(input::placeholder, textarea::placeholder),
body[data-theme="dark"] .tuu-panel .tuu-form :where(input::placeholder, textarea::placeholder),
body[data-theme="dark"] .inventory-form :where(input::placeholder, textarea::placeholder) {
  color: #334155 !important;
  opacity: 1 !important;
}

/* CONNECTIO etapa 2 visual consolidation v19
   Regla transversal: plataforma seria, sin pestanas flotantes ni cajas redondeadas apiladas.
   La informacion manda; el color separa areas, no la decoracion. */
:root {
  --cx2-navy: #071733;
  --cx2-ink: #0b1736;
  --cx2-muted: #475569;
  --cx2-line: #bddbf1;
  --cx2-line-strong: #38bdf8;
  --cx2-surface: #f8fbff;
  --cx2-panel: #ffffff;
  --cx2-blue: #0ea5e9;
  --cx2-teal: #14b8a6;
  --cx2-green: #10b981;
  --cx2-orange: #f59e0b;
  --cx2-purple: #8b5cf6;
  --cx2-danger: #ef4444;
  --cx2-radius: 4px;
  --cx2-radius-soft: 6px;
}

body {
  background: #eef6ff !important;
}

body[data-theme="dark"] {
  background: #070b16 !important;
}

.app-shell,
.main-layout,
.main-content,
.module-active,
.workbench,
.module-active .workbench {
  min-width: 0 !important;
  max-width: none !important;
}

.workbench,
.module-active .workbench {
  width: 100% !important;
  padding: clamp(14px, 1.3vw, 22px) !important;
  overflow-x: hidden !important;
  background: linear-gradient(180deg, rgba(224, 242, 254, .72), rgba(248, 250, 252, .92)) !important;
}

body[data-theme="dark"] .workbench,
body[data-theme="dark"] .module-active .workbench {
  background: linear-gradient(180deg, #07111f, #081424) !important;
}

.cx-card,
.sales-card,
.production-hero,
.cx-module-header,
.leadership-card,
.tuu-panel,
.commerce-panel,
.inventory-panel,
.catalog-panel,
.routes-panel,
.cap-panel,
.quality-panel,
.fuentes-panel,
.rrhh-panel,
.rentabilidad-panel,
.metas-panel,
.dashboard-panel,
.module-tabbed-panel,
.analysis-filter-panel,
.platform-modal,
.platform-modal-content {
  border-radius: var(--cx2-radius) !important;
  border: 0 !important;
  border-left: 5px solid var(--cx2-line-strong) !important;
  box-shadow: none !important;
  background: var(--cx2-panel) !important;
  color: var(--cx2-ink) !important;
  overflow: hidden !important;
}

body[data-theme="dark"] :where(.cx-card, .sales-card, .production-hero, .cx-module-header, .leadership-card, .tuu-panel, .commerce-panel, .inventory-panel, .catalog-panel, .routes-panel, .cap-panel, .quality-panel, .fuentes-panel, .rrhh-panel, .rentabilidad-panel, .metas-panel, .dashboard-panel, .module-tabbed-panel, .analysis-filter-panel) {
  background: #0e1626 !important;
  color: #e5f2ff !important;
  border-left-color: #2dd4bf !important;
}

.cx-module-header,
.production-hero,
.leadership-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: center !important;
  padding: clamp(22px, 2.5vw, 38px) !important;
  background: linear-gradient(135deg, #f8fbff, #e0f2fe 62%, #d1fae5) !important;
}

body[data-theme="dark"] :where(.cx-module-header, .production-hero, .leadership-hero) {
  background: linear-gradient(135deg, #101827, #0f2742 65%, #0f3936) !important;
}

.cx-module-header h1,
.cx-module-header h2,
.cx-module-header h3,
.production-hero h1,
.production-hero h2,
.production-hero h3,
.leadership-hero h3 {
  color: var(--cx2-ink) !important;
  font-size: clamp(30px, 4.2vw, 58px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  margin: 0 0 10px !important;
  text-shadow: none !important;
}

body[data-theme="dark"] :where(.cx-module-header, .production-hero, .leadership-hero) :where(h1, h2, h3) {
  color: #f8fbff !important;
}

.cx-module-header p,
.production-hero p,
.leadership-hero p,
.sales-card p,
.cx-card p {
  color: var(--cx2-muted) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.45 !important;
}

body[data-theme="dark"] :where(.cx-module-header, .production-hero, .leadership-hero, .sales-card, .cx-card) p {
  color: #b6c7dc !important;
}

.module-tabs,
.module-subtabs,
.commerce-tabs,
.routes-tabs,
.tuu-tabs,
.inventory-tabs,
.catalog-tabs,
.admin-tabs,
.time-tabs,
.tv-tabs,
.home-tabs,
.leadership-tabs,
.planes-entel-tabs {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-left: 5px solid var(--cx2-blue) !important;
  border-radius: var(--cx2-radius) !important;
  background: #f8fbff !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-theme="dark"] :where(.module-tabs, .module-subtabs, .commerce-tabs, .routes-tabs, .tuu-tabs, .inventory-tabs, .catalog-tabs, .admin-tabs, .time-tabs, .tv-tabs, .home-tabs, .leadership-tabs, .planes-entel-tabs) {
  background: #0b1220 !important;
  border-left-color: #2dd4bf !important;
}

:where(.module-tabs, .module-subtabs, .commerce-tabs, .routes-tabs, .tuu-tabs, .inventory-tabs, .catalog-tabs, .admin-tabs, .time-tabs, .tv-tabs, .home-tabs, .leadership-tabs, .planes-entel-tabs) button {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(14, 165, 233, .28) !important;
  background: #ffffff !important;
  color: var(--cx2-ink) !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  transform: none !important;
}

:where(.module-tabs, .module-subtabs, .commerce-tabs, .routes-tabs, .tuu-tabs, .inventory-tabs, .catalog-tabs, .admin-tabs, .time-tabs, .tv-tabs, .home-tabs, .leadership-tabs, .planes-entel-tabs) button.active,
:where(.module-tabs, .module-subtabs, .commerce-tabs, .routes-tabs, .tuu-tabs, .inventory-tabs, .catalog-tabs, .admin-tabs, .time-tabs, .tv-tabs, .home-tabs, .leadership-tabs, .planes-entel-tabs) button[aria-selected="true"] {
  background: linear-gradient(90deg, var(--cx2-blue), var(--cx2-teal)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body[data-theme="dark"] :where(.module-tabs, .module-subtabs, .commerce-tabs, .routes-tabs, .tuu-tabs, .inventory-tabs, .catalog-tabs, .admin-tabs, .time-tabs, .tv-tabs, .home-tabs, .leadership-tabs, .planes-entel-tabs) button {
  background: #101827 !important;
  color: #e5f2ff !important;
  border-color: rgba(45, 212, 191, .25) !important;
}

.sales-kpis,
.production-kpis,
.commerce-kpis,
.leadership-kpis,
.dashboard-kpis,
.tv-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.sales-kpis > *,
.production-kpis > *,
.commerce-kpis > *,
.leadership-kpis > *,
.dashboard-kpis > *,
.tv-kpis > *,
.sales-kpi-card,
.metric-card,
.stat-card {
  min-width: 0 !important;
  border-radius: var(--cx2-radius) !important;
  border: 0 !important;
  border-left: 5px solid var(--cx2-blue) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body[data-theme="dark"] :where(.sales-kpis, .production-kpis, .commerce-kpis, .leadership-kpis, .dashboard-kpis, .tv-kpis) > *,
body[data-theme="dark"] :where(.sales-kpi-card, .metric-card, .stat-card) {
  background: #111a2b !important;
  color: #f8fbff !important;
  border-left-color: #2dd4bf !important;
}

.cx-table-scroll,
.sales-table,
.inventory-table,
.catalog-table,
.routes-table,
.cap-table,
.commerce-table,
.import-table,
.tuu-table,
.table-wrap,
.data-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  border-radius: var(--cx2-radius) !important;
  border: 1px solid rgba(56, 189, 248, .28) !important;
  background: #f8fbff !important;
  scrollbar-width: auto !important;
}

:where(.cx-table-scroll, .sales-table, .inventory-table, .catalog-table, .routes-table, .cap-table, .commerce-table, .import-table, .tuu-table, .table-wrap, .data-table-wrap) table {
  min-width: max-content !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

:where(.cx-data-table, .sales-table, .inventory-table, .catalog-table, .routes-table, .cap-table, .commerce-table, .import-table, .tuu-table) th,
:where(.cx-data-table, .sales-table, .inventory-table, .catalog-table, .routes-table, .cap-table, .commerce-table, .import-table, .tuu-table) td {
  border-radius: 0 !important;
  white-space: nowrap !important;
}

:where(.cx-data-table, .sales-table, .inventory-table, .catalog-table, .routes-table, .cap-table, .commerce-table, .import-table, .tuu-table) th {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}

body[data-theme="dark"] :where(.cx-table-scroll, .sales-table, .inventory-table, .catalog-table, .routes-table, .cap-table, .commerce-table, .import-table, .tuu-table, .table-wrap, .data-table-wrap) {
  background: #0b1220 !important;
  border-color: rgba(45, 212, 191, .24) !important;
}

.platform-modal,
.platform-modal-content,
.simple-platform-modal,
.modal-panel {
  border-radius: var(--cx2-radius-soft) !important;
  max-width: min(1180px, calc(100vw - 48px)) !important;
  max-height: min(88vh, 900px) !important;
}

.platform-modal-head,
.modal-head,
.modal-actions,
.platform-modal-actions {
  border-radius: 0 !important;
}

button,
.cx-button,
.module-action-button,
input,
select,
textarea {
  border-radius: var(--cx2-radius) !important;
}

.source-status,
.operation-alert,
.cx-alert,
.module-empty-state {
  border-radius: var(--cx2-radius) !important;
  border: 0 !important;
  border-left: 5px solid var(--cx2-blue) !important;
  box-shadow: none !important;
}

.source-status.success,
.operation-alert.success,
.cx-alert.success {
  border-left-color: var(--cx2-green) !important;
}

.source-status.warning,
.operation-alert.warning,
.cx-alert.warning {
  border-left-color: var(--cx2-orange) !important;
}

.source-status.error,
.operation-alert.error,
.cx-alert.error {
  border-left-color: var(--cx2-danger) !important;
}

@media (max-width: 1180px) {
  .cx-module-header,
  .production-hero,
  .leadership-hero {
    grid-template-columns: 1fr !important;
  }

  .sales-kpis,
  .production-kpis,
  .commerce-kpis,
  .leadership-kpis,
  .dashboard-kpis,
  .tv-kpis {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  }
}