/* CuCentro design system. Shared by every operational panel.
   Module styles own layout; these tokens and primitives own the visual theme. */
:root {
  color-scheme: light;
  --cc-bg: #f4f6f2;
  --cc-surface: #fff;
  --cc-soft: #e7f1e4;
  --cc-ink: #203329;
  --cc-muted: #69776c;
  --cc-border: #e0e7de;
  --cc-green: #206740;
  --cc-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --green: var(--cc-green);
  --forest: var(--cc-green);
  --ink: var(--cc-ink);
  --paper: var(--cc-bg);
  --muted: var(--cc-muted);
  --line: var(--cc-border);
  --border: var(--cc-border);
  --panel: var(--cc-surface);
  --panel2: var(--cc-bg);
  font-family: var(--cc-font);
  background: var(--cc-bg);
  color: var(--cc-ink);
}
* { box-sizing: border-box; }
.cc-app { margin: 0; background: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font); font-size: 14px; }
.cc-app :where(button, input, select, textarea, summary) { font: inherit; }
.cc-app :where(a) { color: inherit; text-decoration: none; }
.cc-app :where(h1) { font-size: clamp(27px, 3vw, 34px); font-weight: 650; letter-spacing: -.035em; }
.cc-app :where(button) { cursor: pointer; }
.cc-app :where(button:disabled) { cursor: not-allowed; opacity: .55; }
.cc-app :where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #5a9774; outline-offset: 3px; }
.cc-app [hidden] { display: none !important; }
.cc-app :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  min-width: 0; max-width: 100%; color: var(--cc-ink); background-color: var(--cc-surface);
  border: 1px solid var(--cc-border); border-radius: 10px; padding: 11px 12px;
}
.cc-app :where(input[type=checkbox], input[type=radio]) { accent-color: var(--cc-green); }
.cc-app .primary, .cc-app button[type=submit], .cc-owner .actions .approve {
  min-height: 42px; border: 1px solid var(--cc-green); border-radius: 10px;
  background: var(--cc-green); color: white; padding: 10px 16px; font: 650 14px var(--cc-font);
}
.cc-app .secondary { min-height: 42px; background: white; color: var(--cc-ink); border: 1px solid var(--cc-border); border-radius: 10px; padding: 10px 16px; }
.cc-app :where(.card, .finance-card, .list-card, .route-card, .stop-card, .collection, .metric) { border-color: var(--cc-border); border-radius: 16px; }
.cc-app :where(dialog) { color: var(--cc-ink); background: white; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.cc-app :where(dialog)::backdrop { background: #20332966; }
/* Namespaced navigation is independent of module nav/brand selectors. */
.cc-app .cc-nav {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  width: auto; max-width: 1504px; margin: 20px auto 0; padding: 16px 22px;
  border: 1px solid var(--cc-border); border-radius: 18px;
  background: white; color: var(--cc-ink); box-shadow: 0 3px 10px #20332904;
}
.cc-app > .cc-nav { margin-left: max(16px, calc((100% - 1504px) / 2)); margin-right: max(16px, calc((100% - 1504px) / 2)); }
.cc-app .cc-brand { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; color: var(--cc-ink); font: 800 18px var(--cc-font); white-space: nowrap; }
.cc-app .cc-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cc-green); color: white; }
.cc-app .cc-brand-sub { font-size: 13px; font-weight: 400; color: var(--cc-muted); }
.cc-app .cc-links { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }
.cc-app .cc-links a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--cc-muted); font: 500 14px var(--cc-font); white-space: nowrap; }
.cc-app .cc-links a:hover { background: #f1f5ef; }
.cc-app .cc-links a[aria-current=page] { background: var(--cc-soft); color: var(--cc-green); font-weight: 700; }
.cc-app .cc-environment { color: var(--cc-muted); font-size: 10px; letter-spacing: 1px; }
.cc-logistics .cc-nav { margin-top: 0; }
/* Finance no longer imports the entire Logistics application stylesheet. */
.cc-finance > .app-shell { max-width: 1560px; margin: auto; padding: 20px 28px 32px; }
.cc-finance .cc-nav { margin-top: 0; }
.cc-finance .app-shell > header { margin: 34px 0 25px; }
.cc-finance h1 { margin: 0 0 10px; }
.cc-finance h2 { font-size: 18px; margin-top: 0; }
.cc-finance p { line-height: 1.6; }
.cc-finance .eyebrow { font-size: 11px; letter-spacing: 1.5px; color: var(--cc-muted); font-weight: 700; }
.cc-finance button:not(.primary) { min-height: 42px; padding: 10px 14px; border: 1px solid var(--cc-border); border-radius: 10px; background: white; color: var(--cc-ink); }
.cc-finance .finance-card { min-width: 0; }
.cc-finance .warning:empty, .cc-finance #message:empty { display: none; }
/* Preserve local view filters while matching the light Logistics workspace. */
.cc-pickups .app-shell { max-width: 1560px; margin: auto; min-height: auto; padding: 20px 28px; gap: 24px; }
.cc-pickups .sidebar { background: white; color: var(--cc-ink); border: 1px solid var(--cc-border); border-radius: 16px; align-self: start; }
.cc-pickups .sidebar .brand { padding-bottom: 20px; }
.cc-pickups .sidebar .brand > span { background: var(--cc-soft); color: var(--cc-green); }
.cc-pickups .sidebar :is(small, nav button, nav button i) { color: var(--cc-muted); }
.cc-pickups .sidebar nav button.active { background: var(--cc-soft); color: var(--cc-green); }
.cc-pickups main { padding: 12px 0; }
.cc-pickups .environment { margin-top: 24px; border-color: var(--cc-border); }
/* The top navigation replaces the redundant CRM rail; conversation controls stay. */
.cc-whatsapp .rail { display: none; }
.cc-whatsapp .workspace { margin: 0 auto; max-width: 1560px; }
.cc-whatsapp .topbar { background: transparent; border: 0; padding: 12px 28px; height: auto; min-height: 52px; }
.cc-whatsapp main { padding: 16px 28px 28px; }
.cc-whatsapp h1 { font-size: 34px; font-weight: 650; }
.cc-whatsapp .inbox { border-radius: 16px; }
.cc-owner .shell, .cc-agency > main { max-width: 1560px; width: 100%; padding: 28px; }
.cc-owner .route-entry > a { color: white; }
.cc-auth .brand { background: var(--cc-green); border-radius: 50%; }
.cc-app .session-controls { background: white; color: var(--cc-ink); border-color: var(--cc-border); }
.cc-app .session-controls .session-sign-out { color: var(--cc-green); border-color: var(--cc-border); }
.cc-app .session-controls .session-sign-out:hover { background: var(--cc-soft); }
.cc-app .session-controls .session-sign-out-error { color: #a43435; }
@media (max-width: 900px) {
  .cc-app .cc-links { width: 100%; margin: 0; }
  .cc-app .cc-environment { margin-left: auto; }
  .cc-app .cc-nav { gap: 12px; }
}
@media (max-width: 760px) {
  .cc-app .cc-nav { padding: 14px; }
  .cc-app .cc-brand-sub { display: none; }
  .cc-app .cc-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .cc-app .cc-links a { padding: 10px; }
  .cc-finance > .app-shell, .cc-owner .shell, .cc-agency > main { padding: 16px; }
  .cc-pickups .app-shell { display: block; padding: 16px; }
  .cc-pickups .sidebar { position: static; }
  .cc-pickups .sidebar .brand { display: none; }
  .cc-whatsapp main { padding: 16px; }
  .cc-whatsapp .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .cc-app .cc-nav { display: none; } }