/* -------------------------------------------------------------------------
   CENTRI Control · Capa visual CENTRI Next
   Consume las variables runtime del Control. No cambia autenticación, SSO,
   permisos ni consultas: solo convierte el shell central al lenguaje visual
   de CENTRI SAS Next para mantener un ecosistema coherente.
   ------------------------------------------------------------------------- */

.cc-next-control {
  --cc-next-page: var(--centri-bg, #f5f6f4);
  --cc-next-surface: var(--centri-surface, #ffffff);
  --cc-next-surface-soft: var(--centri-surface-soft, #edf0ec);
  --cc-next-text: var(--centri-text, #18201c);
  --cc-next-muted: var(--centri-muted, #69736d);
  --cc-next-line: var(--centri-border, #dce2dc);
  --cc-next-accent: var(--centri-primary, #16986b);
  --cc-next-accent-soft: var(--centri-primary-soft, #def5ea);
  --cc-next-accent-dark: var(--centri-primary-dark, #0e704f);
  --cc-next-side: color-mix(in srgb, var(--centri-primary-dark, #16221c) 93%, #0d1611);
  --cc-next-side-muted: color-mix(in srgb, var(--centri-on-primary, #ffffff) 67%, transparent);
  --cc-next-side-line: color-mix(in srgb, var(--centri-on-primary, #ffffff) 10%, transparent);
  --cc-next-radius: 18px;
  --cc-next-shadow: 0 18px 50px color-mix(in srgb, var(--centri-primary-dark, #17211d) 8%, transparent);
  background: var(--cc-next-page);
  color: var(--cc-next-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cc-next-control .cc-shell {
  grid-template-columns: 266px minmax(0, 1fr);
  background: var(--cc-next-page);
}

/* Sidebar – misma lógica visual que CENTRI Next: oscuro, sobrio y operativo. */
.cc-next-control .cc-sidebar {
  gap: 0;
  padding: 21px 14px 17px;
  overflow: hidden auto;
  background: var(--cc-next-side);
  border: 0;
  box-shadow: none;
  color: var(--centri-on-primary, #ffffff);
}

.cc-next-control .cc-sidebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--cc-next-accent) 18%, transparent), transparent 27%),
    linear-gradient(180deg, color-mix(in srgb, var(--cc-next-side) 96%, #000), var(--cc-next-side));
}

.cc-next-control .cc-sidebar-brand-row {
  min-height: 69px;
  padding: 0 7px 20px;
  margin-bottom: 14px;
  border-color: var(--cc-next-side-line);
}

.cc-next-control .cc-sidebar .brand,
.cc-next-control .cc-sidebar .brand:hover { color: var(--centri-on-primary, #ffffff); }

.cc-next-control .cc-sidebar .brand .mark {
  width: 39px;
  height: 39px;
  border: 0;
  border-radius: 12px;
  background: var(--cc-next-accent);
  color: var(--cc-next-accent-dark);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--cc-next-accent) 31%, transparent);
  font-size: 18px;
}

.cc-next-control .cc-sidebar .brand strong {
  color: var(--centri-on-primary, #ffffff);
  font-size: 14px;
  letter-spacing: .1em;
}

.cc-next-control .cc-sidebar .brand small {
  margin-top: 4px;
  color: var(--cc-next-side-muted);
  font-size: 9px;
  letter-spacing: .13em;
}

.cc-next-control .cc-sidebar-toggle {
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 8%, transparent);
  border: 1px solid var(--cc-next-side-line);
}

.cc-next-control .cc-sidebar-toggle span { background: var(--centri-on-primary, #ffffff); }

.cc-next-control .cc-sidebar-search {
  width: calc(100% - 10px);
  min-height: 38px;
  margin: 0 5px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  color: var(--cc-next-side-muted);
  border: 1px solid var(--cc-next-side-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 5%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.cc-next-control .cc-sidebar-search:hover,
.cc-next-control .cc-sidebar-search:focus-visible {
  border-color: color-mix(in srgb, var(--cc-next-accent) 56%, transparent);
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 9%, transparent);
  color: var(--centri-on-primary, #ffffff);
  outline: 0;
}

.cc-sidebar-search-icon { font-size: 17px; line-height: 1; }
.cc-next-control .cc-sidebar-search kbd {
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid var(--cc-next-side-line);
  border-radius: 5px;
  color: color-mix(in srgb, var(--centri-on-primary, #ffffff) 72%, transparent);
  font-family: inherit;
  font-size: 9px;
}

.cc-next-control .cc-nav-section { padding: 4px 0 11px; }
.cc-next-control .cc-nav-title {
  padding: 8px 10px 7px;
  color: color-mix(in srgb, var(--centri-on-primary, #ffffff) 50%, transparent);
  font-size: 9px;
  letter-spacing: .13em;
}

.cc-next-control .nav { gap: 3px; }
.cc-next-control .nav a {
  min-height: 40px;
  gap: 11px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  color: var(--cc-next-side-muted);
  font-size: 12px;
  font-weight: 650;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.cc-next-control .nav a::before {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: currentColor !important;
  font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-size: 17px;
  font-weight: 500;
}

/* Íconos de navegación compactos para el shell central. */
.cc-next-control .nav a[data-icon="CO"]::before { content: "◒"; }
.cc-next-control .nav a[data-icon="IN"]::before { content: "⌂"; }
.cc-next-control .nav a[data-icon="EM"]::before { content: "◫"; }
.cc-next-control .nav a[data-icon="EQ"]::before { content: "♙"; }
.cc-next-control .nav a[data-icon="TM"]::before { content: "◌"; }
.cc-next-control .nav a[data-icon="PL"]::before { content: "◇"; }
.cc-next-control .nav a[data-icon="DI"]::before { content: "◈"; }
.cc-next-control .nav a[data-icon="CT"]::before { content: "▤"; }
.cc-next-control .nav a[data-icon="PK"]::before { content: "□"; }
.cc-next-control .nav a[data-icon="SC"]::before { content: "◍"; }
.cc-next-control .nav a[data-icon="OP"]::before { content: "⌘"; }
.cc-next-control .nav a[data-icon="BK"]::before { content: "↥"; }
.cc-next-control .nav a[data-icon="UP"]::before { content: "↻"; }
.cc-next-control .nav a[data-icon="AU"]::before { content: "◉"; }

.cc-next-control .nav a:hover,
.cc-next-control .nav a.active {
  transform: none;
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 9%, transparent);
  color: var(--centri-on-primary, #ffffff);
}

.cc-next-control .nav a.active {
  box-shadow: inset 3px 0 0 var(--cc-next-accent);
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 11%, transparent);
}

.cc-next-control .nav a.active::before { color: var(--cc-next-accent) !important; }

.cc-next-control .cc-user-card {
  margin: auto 1px 0;
  padding: 13px !important;
  border: 1px solid var(--cc-next-side-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 5%, transparent);
}

.cc-next-control .cc-user-card .avatar,
.cc-next-control .cc-sidebar .avatar {
  background: color-mix(in srgb, var(--cc-next-accent) 18%, transparent);
  color: var(--cc-next-accent);
}

.cc-next-control .cc-user-card-head strong { color: var(--centri-on-primary, #ffffff); }
.cc-next-control .cc-user-card-head span { color: var(--cc-next-side-muted); }
.cc-next-control .cc-sidebar-logout {
  border-color: var(--cc-next-side-line);
  background: color-mix(in srgb, var(--centri-on-primary, #ffffff) 6%, transparent);
  color: var(--centri-on-primary, #ffffff);
}
.cc-next-control .cc-sidebar-logout:hover { background: color-mix(in srgb, var(--cc-next-accent) 19%, transparent); }

/* Encabezado y contenido: misma superficie limpia, sin la tarjeta flotante anterior. */
.cc-next-control .cc-workspace { background: var(--cc-next-page); }
.cc-next-control .top {
  min-height: 88px;
  padding: 18px clamp(22px, 3.2vw, 40px);
  border-bottom: 1px solid var(--cc-next-line);
  background: color-mix(in srgb, var(--cc-next-page) 91%, transparent);
  backdrop-filter: blur(14px);
}
.cc-next-control .top::before { display: none; }
.cc-next-control .top-title { min-width: 0; }
.cc-next-control .cc-top-kicker {
  margin: 0 0 4px;
  color: var(--cc-next-accent-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.cc-next-control .top-title strong {
  color: var(--cc-next-text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.06;
}
.cc-next-control .top-title span {
  display: block;
  max-width: 520px;
  margin-top: 5px;
  color: var(--cc-next-muted);
  font-size: 11px;
  line-height: 1.35;
}
.cc-next-control .cc-top-actions { gap: 9px; }
.cc-next-control .cc-command-trigger {
  min-height: 38px;
  padding: 7px 8px 7px 10px;
  border-color: var(--cc-next-line);
  border-radius: 10px;
  background: var(--cc-next-surface);
  color: var(--cc-next-muted);
}
.cc-next-control .cc-command-trigger:hover,
.cc-next-control .cc-command-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--cc-next-accent) 60%, var(--cc-next-line));
  color: var(--cc-next-text);
  outline: 0;
}
.cc-next-control .cc-command-trigger kbd {
  border-color: var(--cc-next-line);
  background: var(--cc-next-surface-soft);
}
.cc-next-control .profile { gap: 8px; color: var(--cc-next-text); font-size: 12px; font-weight: 700; }
.cc-next-control .profile .avatar { background: var(--cc-next-accent-soft); color: var(--cc-next-accent-dark); }

.cc-next-control .cc-main-grid {
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px clamp(22px, 3.2vw, 40px) 56px;
}
.cc-next-control .cc-main-grid.has-right-rail { grid-template-columns: minmax(0, 1fr) 304px; }
.cc-next-control .cc-page-content { gap: 18px; }

/* Componentes comunes de Control unificados con las tarjetas de Next. */
.cc-next-control .panel,
.cc-next-control .card,
.cc-next-control .box,
.cc-next-control .accounting-panel,
.cc-next-control .cc-update-card,
.cc-next-control .stat,
.cc-next-control .notice {
  border-color: var(--cc-next-line);
  border-radius: var(--cc-next-radius);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cc-next-accent-dark) 3%, transparent);
  background: var(--cc-next-surface);
}
.cc-next-control .panel { padding: 22px; }
.cc-next-control .panel h1,
.cc-next-control .panel h2,
.cc-next-control .panel h3,
.cc-next-control .panel h4 { color: var(--cc-next-text); }
.cc-next-control .panel p,
.cc-next-control .muted { color: var(--cc-next-muted); }

.cc-next-control .button {
  min-height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: none;
}
.cc-next-control .button.primary {
  border-color: var(--cc-next-accent);
  background: var(--cc-next-accent);
  color: var(--centri-on-primary, #ffffff);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--cc-next-accent) 24%, transparent);
}
.cc-next-control .button.primary:hover { filter: brightness(.94); color: var(--centri-on-primary, #ffffff); }
.cc-next-control .button.secondary {
  border-color: var(--cc-next-line);
  background: var(--cc-next-surface);
  color: var(--cc-next-text);
}
.cc-next-control .button.secondary:hover { border-color: color-mix(in srgb, var(--cc-next-accent) 45%, var(--cc-next-line)); background: var(--cc-next-surface-soft); }

.cc-next-control input,
.cc-next-control select,
.cc-next-control textarea {
  border-color: var(--cc-next-line);
  border-radius: 10px;
  background: var(--cc-next-page);
  color: var(--cc-next-text);
}
.cc-next-control input:focus,
.cc-next-control select:focus,
.cc-next-control textarea:focus {
  border-color: var(--cc-next-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-next-accent) 14%, transparent);
}

/* Dashboard: conserva las métricas reales, con proporciones y jerarquía de CENTRI Next. */
.cc-next-control .cc-control-hero,
.cc-next-control .cc-directory-hero {
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--cc-next-accent) 25%, var(--cc-next-line));
  border-radius: var(--cc-next-radius);
  background:
    radial-gradient(circle at 87% 18%, color-mix(in srgb, var(--cc-next-accent) 17%, transparent), transparent 28%),
    linear-gradient(140deg, var(--cc-next-surface), var(--cc-next-accent-soft));
  box-shadow: var(--cc-next-shadow);
  color: var(--cc-next-text);
}
.cc-next-control .cc-control-hero::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 23px;
  width: 132px;
  height: 132px;
  border: 1px solid color-mix(in srgb, var(--cc-next-accent) 28%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.cc-next-control .cc-control-hero *:not(.button),
.cc-next-control .cc-directory-hero *:not(.button) { color: inherit; }
.cc-next-control .cc-control-hero .eyebrow,
.cc-next-control .cc-directory-hero .eyebrow { color: var(--cc-next-accent-dark) !important; }
.cc-next-control .cc-control-hero h1,
.cc-next-control .cc-directory-hero h1 {
  max-width: 760px;
  color: var(--cc-next-text);
  font-size: clamp(27px, 3.1vw, 42px);
  letter-spacing: -.05em;
}
.cc-next-control .cc-control-hero h1 span { color: var(--cc-next-accent-dark) !important; }
.cc-next-control .cc-control-hero p,
.cc-next-control .cc-directory-hero p { color: var(--cc-next-muted) !important; }
.cc-next-control .cc-control-hero .button.secondary,
.cc-next-control .cc-directory-hero .button.secondary {
  border-color: var(--cc-next-line);
  background: color-mix(in srgb, var(--cc-next-surface) 80%, transparent);
  color: var(--cc-next-text);
}
.cc-next-control .cc-control-hero .button.secondary:hover,
.cc-next-control .cc-directory-hero .button.secondary:hover { background: var(--cc-next-surface); color: var(--cc-next-text); }
.cc-next-control .cc-control-health-card {
  border-color: color-mix(in srgb, var(--cc-next-accent) 28%, var(--cc-next-line));
  background: color-mix(in srgb, var(--cc-next-surface) 76%, transparent);
}
.cc-next-control .cc-health-ring { --cc-ring-color: var(--cc-next-accent); color: var(--cc-next-text); }
.cc-next-control .cc-health-ring::before { background: var(--cc-next-surface); }
.cc-next-control .cc-control-health-card p { color: var(--cc-next-muted) !important; }

.cc-next-control .cc-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cc-next-control .cc-kpi-card {
  min-height: 104px;
  padding: 15px;
  border-color: var(--cc-next-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cc-next-accent-dark) 3%, transparent);
  background: var(--cc-next-surface);
}
.cc-next-control .cc-kpi-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cc-next-accent) 50%, var(--cc-next-line)); box-shadow: 0 10px 25px color-mix(in srgb, var(--cc-next-accent-dark) 8%, transparent); }
.cc-next-control .cc-kpi-icon { border-radius: 10px; background: color-mix(in srgb, var(--cc-next-accent) 10%, transparent); color: var(--cc-next-accent-dark); }
.cc-next-control .cc-kpi-card.warning { border-top-color: var(--centri-accent, #b7791f); }
.cc-next-control .cc-kpi-card.danger { border-top-color: var(--centri-danger, #c0343f); }
.cc-next-control .cc-kpi-card strong { color: var(--cc-next-text); font-size: 23px; }
.cc-next-control .cc-kpi-card small,
.cc-next-control .cc-kpi-card em { color: var(--cc-next-muted); }

.cc-next-control .cc-section-card,
.cc-next-control .cc-rail-card {
  border-color: var(--cc-next-line);
  border-radius: var(--cc-next-radius);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cc-next-accent-dark) 3%, transparent);
}
.cc-next-control .cc-section-heading h2,
.cc-next-control .cc-section-heading h3 { color: var(--cc-next-text); letter-spacing: -.03em; }
.cc-next-control .cc-priority-item,
.cc-next-control .cc-platform-health-card,
.cc-next-control .cc-business-mini-card,
.cc-next-control .cc-directory-row {
  border-color: var(--cc-next-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--cc-next-surface-soft) 58%, var(--cc-next-surface));
  color: var(--cc-next-text);
}
.cc-next-control .cc-priority-item:hover,
.cc-next-control .cc-business-mini-card:hover { border-color: color-mix(in srgb, var(--cc-next-accent) 50%, var(--cc-next-line)); background: var(--cc-next-surface); }
.cc-next-control .cc-priority-item p,
.cc-next-control .cc-platform-health-card p,
.cc-next-control .cc-business-mini-card small { color: var(--cc-next-muted); }
.cc-next-control .cc-priority-symbol,
.cc-next-control .cc-platform-logo,
.cc-next-control .cc-quick-actions a > span {
  background: color-mix(in srgb, var(--cc-next-accent) 10%, transparent);
  color: var(--cc-next-accent-dark);
}
.cc-next-control .cc-platform-health-metrics { border-color: var(--cc-next-line); }
.cc-next-control .cc-platform-health-metrics span { color: var(--cc-next-muted); }
.cc-next-control .cc-platform-health-metrics strong { color: var(--cc-next-text); }
.cc-next-control .cc-quick-actions a { border-color: var(--cc-next-line); color: var(--cc-next-text); }
.cc-next-control .cc-quick-actions a:hover { background: var(--cc-next-accent-soft); }
.cc-next-control .cc-product-chip { border-color: color-mix(in srgb, var(--cc-next-accent) 24%, var(--cc-next-line)); background: color-mix(in srgb, var(--cc-next-accent) 7%, transparent); color: var(--cc-next-accent-dark); }

/* Tablas, directorio y estados. */
.cc-next-control .table-wrap,
.cc-next-control .cc-business-directory-list { border-color: var(--cc-next-line); }
.cc-next-control table th { background: color-mix(in srgb, var(--cc-next-accent) 4%, var(--cc-next-surface)); color: var(--cc-next-muted); }
.cc-next-control table th,
.cc-next-control table td { border-color: var(--cc-next-line); }
.cc-next-control table td { color: var(--cc-next-text); }
.cc-next-control .cc-directory-filter-card { border-color: var(--cc-next-line); }
.cc-next-control .cc-directory-counts a { border-color: var(--cc-next-line); background: var(--cc-next-surface-soft); }
.cc-next-control .cc-directory-counts a strong { color: var(--cc-next-text); }
.cc-next-control .cc-directory-counts a span { color: var(--cc-next-muted); }
.cc-next-control .cc-company-monogram { background: var(--cc-next-accent-soft); color: var(--cc-next-accent-dark); }
.cc-next-control .badge { border-radius: 999px; }

/* Command palette follows the same elevated panel language. */
.cc-next-control .cc-command-backdrop { background: color-mix(in srgb, var(--cc-next-side) 52%, transparent); }
.cc-next-control .cc-command-dialog { border-color: var(--cc-next-line); border-radius: 16px; background: var(--cc-next-surface); box-shadow: 0 24px 60px color-mix(in srgb, var(--cc-next-side) 28%, transparent); }
.cc-next-control .cc-command-input-row { border-color: var(--cc-next-line); }
.cc-next-control .cc-command-input-row input { background: transparent; border: 0; box-shadow: none; }
.cc-next-control .cc-command-result:hover,
.cc-next-control .cc-command-result.is-active { background: var(--cc-next-accent-soft); }

@media (max-width: 1220px) {
  .cc-next-control .cc-shell { grid-template-columns: 246px minmax(0, 1fr); }
  .cc-next-control .cc-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-next-control .cc-main-grid.has-right-rail { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 980px) {
  .cc-next-control .cc-sidebar { background: var(--cc-next-side); }
  .cc-next-control .cc-top-menu-button { border: 1px solid var(--cc-next-line); background: var(--cc-next-surface); }
  .cc-next-control .cc-top-menu-button span { background: var(--cc-next-text); }
  .cc-next-control .cc-main-grid.has-right-rail { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cc-next-control .top { min-height: 76px; padding: 14px 16px; }
  .cc-next-control .cc-main-grid { padding: 22px 16px 40px; }
  .cc-next-control .cc-control-hero,
  .cc-next-control .cc-directory-hero { padding: 22px; }
  .cc-next-control .cc-control-hero::after { display: none; }
  .cc-next-control .cc-control-health-card { grid-template-columns: 94px minmax(0, 1fr); }
  .cc-next-control .cc-health-ring { width: 92px; height: 92px; }
  .cc-next-control .cc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-next-control .cc-top-actions .button { display: none; }
  .cc-next-control .cc-command-trigger { width: 38px; padding: 0; justify-content: center; }
  .cc-next-control .cc-command-trigger > span:not(:first-child),
  .cc-next-control .cc-command-trigger kbd { display: none; }
}

@media (max-width: 440px) {
  .cc-next-control .cc-kpi-grid { grid-template-columns: 1fr; }
  .cc-next-control .top-title span { display: none; }
  .cc-next-control .top-title strong { font-size: 19px; }
}