/* =========================================================================
   CochesBi theme — design tokens + app shell
   Loaded AFTER assets/css/style.css (Mobilekit). Overrides the template's
   defaults with the Los Coches brand without touching the compiled file.
   ========================================================================= */

:root {
  /* Brand */
  --cb-primary: #005296;        /* rgb(0, 82, 150) */
  --cb-primary-700: #003d70;
  --cb-primary-100: #d9e5ef;
  --cb-primary-50: #ecf2f7;
  --cb-primary-rgb: 0, 82, 150;

  /* Semantic */
  --cb-success: #1d9a55;
  --cb-danger: #d53f3f;
  --cb-warning: #e38b0b;
  --cb-info: #2d7dd2;

  /* Surfaces & text */
  --cb-bg: #f3f5f8;
  --cb-surface: #ffffff;
  --cb-surface-2: #f7f9fb;
  --cb-surface-3: #eef1f5;
  --cb-line: #e5e9ef;
  --cb-heading: #141c26;
  --cb-text: #3c4650;
  --cb-muted: #7b8794;

  /* Shape */
  --cb-radius: 14px;
  --cb-radius-sm: 10px;
  --cb-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --cb-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);

  /* Shell */
  --cb-header-h: 56px;
  --cb-nav-h: 62px;
  --cb-safe-top: env(safe-area-inset-top, 0px);
  --cb-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Map Bootstrap 5 vars to the brand */
  --bs-primary: var(--cb-primary);
  --bs-primary-rgb: var(--cb-primary-rgb);
  --bs-link-color: var(--cb-primary);
  --bs-link-hover-color: var(--cb-primary-700);
  --bs-body-bg: var(--cb-bg);
  --bs-body-color: var(--cb-text);
  --bs-border-color: var(--cb-line);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cb-bg);
  color: var(--cb-text);
}
a, a:hover, a:focus, a:active { color: var(--cb-primary); }
::selection { background: rgba(var(--cb-primary-rgb), .18); }

h1, h2, h3, h4, h5, h6, .section-title { color: var(--cb-heading); }
.text-primary { color: var(--cb-primary) !important; }
.text-success { color: var(--cb-success) !important; }
.text-danger  { color: var(--cb-danger) !important; }
.text-warning { color: var(--cb-warning) !important; }
.text-muted   { color: var(--cb-muted) !important; }
.bg-primary   { background-color: var(--cb-primary) !important; }
.bg-success   { background-color: var(--cb-success) !important; }
.bg-danger    { background-color: var(--cb-danger) !important; }
.bg-warning   { background-color: var(--cb-warning) !important; }

/* ---------- Content capsule ---------- */
#appCapsule {
  padding-top: calc(var(--cb-header-h) + 8px);
  padding-bottom: calc(var(--cb-nav-h) + 12px);
  margin-top: var(--cb-safe-top);
  margin-bottom: var(--cb-safe-bottom);
  min-height: 100vh;
}
.section { padding-left: 16px; padding-right: 16px; }

/* ---------- Header ---------- */
.appHeader {
  min-height: var(--cb-header-h);
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-line);
  box-shadow: none;
  color: var(--cb-heading);
}
.appHeader:before { background: var(--cb-surface); }
.appHeader .left .headerButton,
.appHeader .right .headerButton {
  color: var(--cb-heading);
  border-radius: 999px;
  min-width: 40px;
  height: 40px;
  margin: 8px 0;
  padding: 0;
}
.appHeader .left .headerButton:active,
.appHeader .right .headerButton:active { background: var(--cb-primary-50); opacity: 1; }
.appHeader .left .headerButton ion-icon,
.appHeader .right .headerButton ion-icon { font-size: 24px; }
.appHeader .pageTitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cb-heading);
  max-width: 62%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appHeader .pageTitle .logo { max-height: 22px; display: block; }

/* ---------- Bottom navigation ---------- */
.appBottomMenu {
  min-height: var(--cb-nav-h);
  background: var(--cb-nav-bg, rgba(255, 255, 255, .92));
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--cb-line);
  padding-left: 8px;
  padding-right: 8px;
}
.appBottomMenu .item {
  height: var(--cb-nav-h);
  color: var(--cb-muted);
}
.appBottomMenu .item:before { display: none; }
.appBottomMenu .item .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.appBottomMenu .item ion-icon {
  font-size: 24px;
  color: var(--cb-muted);
  margin: 0;
  padding: 3px 14px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.appBottomMenu .item strong {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cb-muted);
}
.appBottomMenu .item.active ion-icon {
  color: var(--cb-primary) !important;
  background: var(--cb-primary-100);
}
.appBottomMenu .item.active strong { color: var(--cb-primary) !important; font-weight: 600; }
.appBottomMenu .item:hover ion-icon,
.appBottomMenu .item:hover strong { color: var(--cb-heading); }

/* ---------- Sidebar ---------- */
.offcanvas.offcanvas-start { border-right: 0; box-shadow: var(--cb-shadow-lg); }
.profileBox,
.profileBox:before { background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-700) 100%); }
.profileBox { box-shadow: none; }
.profileBox .image-wrapper .imaged { border-color: rgba(255, 255, 255, .6); box-shadow: none; }
.profileBox .in strong { font-weight: 600; letter-spacing: -0.01em; }
.profileBox .in .text-muted { color: rgba(255, 255, 255, .7) !important; }
.sidebar-buttons { border-top-color: var(--cb-line); }
.listview.image-listview .item .icon-box.bg-primary {
  background: var(--cb-primary-100) !important;
  color: var(--cb-primary);
  border-radius: 10px;
}

/* ---------- Surfaces: cards, list views, stat boxes ---------- */
.card {
  border: 0;
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  background: var(--cb-surface);
}
.wide-block {
  background: var(--cb-surface);
  border-color: var(--cb-line);
}
.listview > li,
.listview.image-listview > li .item { border-color: var(--cb-line); }
.listview > li .item:active { background: var(--cb-primary-50); }
.listview .divider-title,
.listview-title {
  color: var(--cb-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stat-box {
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
  border-radius: var(--cb-radius);
  padding: 18px 20px;
}
.stat-box .title { color: var(--cb-muted); font-size: 12px; font-weight: 500; }
.stat-box .value { color: var(--cb-heading); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Controls ---------- */
.btn { border-radius: var(--cb-radius-sm); font-weight: 600; }
.btn-primary,
.btn-primary:focus { background: var(--cb-primary); border-color: var(--cb-primary); }
.btn-primary:hover,
.btn-primary:active { background: var(--cb-primary-700) !important; border-color: var(--cb-primary-700) !important; }
.btn-outline-primary { color: var(--cb-primary); border-color: var(--cb-primary); }
.btn-outline-primary:hover { background: var(--cb-primary); border-color: var(--cb-primary); }
.form-control { border-radius: var(--cb-radius-sm); border-color: var(--cb-line); }
.form-control:focus {
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px rgba(var(--cb-primary-rgb), .15);
}
.form-group.boxed .form-control { border-radius: var(--cb-radius-sm); }
.badge-primary, .badge.bg-primary { background: var(--cb-primary) !important; }
.spinner-border.text-primary { color: var(--cb-primary) !important; }

/* ---------- Loader ---------- */
#loader { background: var(--cb-bg); }

/* ---------- Notification (SignalR) ---------- */
.notification-box .notification-dialog {
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow-lg);
}

/* =========================================================================
   Components (reusable across pages)
   ========================================================================= */

/* KPI tiles */
.cb-kpi {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.cb-kpi .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-muted);
  letter-spacing: .01em;
}
.cb-kpi .value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cb-heading);
  font-variant-numeric: tabular-nums;
}
.cb-kpi .value.accent { color: var(--cb-primary); }
.cb-kpi .hint { font-size: 12px; color: var(--cb-muted); }

/* Card with header */
.cb-card {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  overflow: hidden;
}
.cb-card + .cb-card { margin-top: 12px; }
/* Card header: solid brand blue with white text, used site-wide.
   Dark mode's primary is a light blue, so the header keeps the deeper
   brand blue there (see --cb-header-bg) to keep white text readable. */
:root { --cb-header-bg: var(--cb-primary); }
body.dark-mode-active { --cb-header-bg: #005296; }
.cb-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cb-header-bg);
  color: #fff;
}
.cb-card-header .title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-card-header .meta {
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.cb-card-header .cb-avatar { background: rgba(255, 255, 255, .18); color: #fff; }
.cb-card-header .cb-pill { background: #fff; color: var(--cb-header-bg); }
.cb-card-header .cb-pill.muted { background: rgba(255, 255, 255, .18); color: #fff; }
.cb-card-header .cb-pill.danger,
body.dark-mode-active .cb-card-header .cb-pill.danger { background: #fff; color: #d53f3f; }
/* !important: the template's style.css forces .btn-primary colors */
.cb-card-header .btn-primary,
.cb-card-header .btn-primary:focus { background: #fff !important; border-color: #fff !important; color: var(--cb-header-bg) !important; }
.cb-card-header .btn-primary:hover,
.cb-card-header .btn-primary:active { background: rgba(255, 255, 255, .88) !important; border-color: transparent !important; color: var(--cb-header-bg) !important; }

/* Space between the colored header and the content below it */
.cb-card-body { padding: 0 16px 16px; }
.cb-card-header + .cb-card-body { padding-top: 14px; }
.cb-card-header + .cb-chart { padding-top: 12px; }

/* Avatar (initial) */
.cb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cb-primary-100);
  color: var(--cb-primary);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Row list: logo + label + numbers */
.cb-rows { list-style: none; margin: 0; padding: 0; }
.cb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 60px;
  color: inherit;
  border-top: 1px solid var(--cb-line);
  text-decoration: none;
}
a.cb-row:active { background: var(--cb-primary-50); }
.cb-row .logo {
  width: 52px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--cb-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.cb-row .logo img { max-width: 44px; max-height: 32px; object-fit: contain; }
/* Home brand rows: the logo is the name, so it gets more room and the text goes */
.cb-row.brand .logo { width: 92px; height: 56px; border-radius: 12px; }
.cb-row.brand .logo img { max-width: 80px; max-height: 42px; }
.cb-row.brand .label .sub { font-size: 13px; }
.cb-row.brand .label .mini { margin-top: 6px; }
.cb-row .label { flex: 1; min-width: 0; }
.cb-row .label .name {
  font-size: 15px;
  font-weight: 500;
  color: var(--cb-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-row .label .sub { font-size: 12px; color: var(--cb-muted); }
.cb-row .nums {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 0 0 auto;
}
.cb-row .num { text-align: right; min-width: 40px; font-variant-numeric: tabular-nums; }
.cb-row .num .v { font-size: 17px; font-weight: 700; color: var(--cb-heading); line-height: 1.1; }
.cb-row .num .k { font-size: 10px; font-weight: 500; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .05em; }
.cb-row .chev { color: var(--cb-muted); font-size: 18px; flex: 0 0 auto; }
.cb-row.total { background: var(--cb-primary-50); }
.cb-row.total .label .name { font-weight: 600; }
.cb-row.total .num .v { color: var(--cb-primary); }

/* Pills */
.cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--cb-primary-100);
  color: var(--cb-primary);
  white-space: nowrap;
}
.cb-pill.muted { background: var(--cb-surface-3); color: var(--cb-muted); }

/* Section heading */
.cb-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 20px 0 8px;
}

/* Compact data table inside a card */
.cb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cb-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--cb-text);
}
.cb-table th,
.cb-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--cb-line);
  vertical-align: middle;
  white-space: nowrap;
}
.cb-table th:first-child,
.cb-table td:first-child { padding-left: 16px; }
.cb-table th:last-child,
.cb-table td:last-child { padding-right: 16px; }
.cb-table thead th {
  border-top: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cb-muted);
  background: var(--cb-surface-2);
}
.cb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cb-table .num.strong { font-weight: 700; color: var(--cb-heading); }
.cb-table tfoot td,
.cb-table tr.total td {
  font-weight: 700;
  color: var(--cb-heading);
  background: var(--cb-primary-50);
}
.cb-table tr.total td.num { color: var(--cb-primary); }
.cb-table a { color: var(--cb-primary); font-weight: 500; }
.cb-table .cell-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cb-table .cell-brand .logo {
  width: 42px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--cb-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.cb-table .cell-brand .logo img { max-width: 36px; max-height: 24px; object-fit: contain; }
.cb-table .cell-brand .name { font-weight: 500; color: var(--cb-heading); }
.cb-table .muted { color: var(--cb-muted); }
.cb-table .danger { color: var(--cb-danger); }

/* Filter bar (forms at top of a page) */
.cb-filter {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.cb-filter .form-control {
  height: 44px;
  border-radius: var(--cb-radius-sm);
  border: 1px solid var(--cb-line);
  background: var(--cb-surface-2);
  color: var(--cb-heading);
  font-size: 15px;
  padding: 0 12px;
}
.cb-filter .btn { height: 44px; padding: 0 18px; white-space: nowrap; }

/* Collapsible rows (native <details>) */
.cb-details { border-top: 1px solid var(--cb-line); }
.cb-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 56px;
}
.cb-details > summary::-webkit-details-marker { display: none; }
.cb-details > summary .chev {
  color: var(--cb-muted);
  font-size: 18px;
  transition: transform .15s ease;
}
.cb-details[open] > summary .chev { transform: rotate(90deg); }
.cb-details[open] > summary { background: var(--cb-surface-2); }
.cb-details .cb-table thead th { background: transparent; }

/* Empty state */
.cb-empty {
  text-align: center;
  color: var(--cb-muted);
  padding: 36px 16px;
  font-size: 14px;
}
.cb-empty ion-icon { font-size: 40px; display: block; margin: 0 auto 8px; color: var(--cb-primary-100); }
.cb-details > summary .logo {
  width: 52px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--cb-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.cb-details > summary .logo img { max-width: 44px; max-height: 32px; object-fit: contain; }
.cb-details > summary .name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--cb-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brand / branch header */
.cb-brand-header {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cb-brand-header .logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--cb-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.cb-brand-header .logo img { max-width: 52px; max-height: 44px; object-fit: contain; }
.cb-brand-header .in { flex: 1; min-width: 0; }
.cb-brand-header .in .name {
  font-size: 18px;
  font-weight: 700;
  color: var(--cb-heading);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cb-brand-header .in .sub { font-size: 13px; color: var(--cb-muted); margin-top: 2px; }

/* Chart container inside a card */
.cb-chart { padding: 4px 8px 8px; }

/* Sticky first column for wide tables */
.cb-table.sticky-first th:first-child,
.cb-table.sticky-first td:first-child {
  position: sticky;
  left: 0;
  background: var(--cb-surface);
  z-index: 1;
  box-shadow: 1px 0 0 var(--cb-line);
}
.cb-table.sticky-first thead th:first-child { background: var(--cb-surface-2); }
.cb-table.sticky-first tr.total td:first-child { background: var(--cb-primary-50); }

/* =========================================================================
   Forecast area: filters, progress, execution cells, modals
   ========================================================================= */

/* Labeled fields in a grid (filters and modal forms) */
.cb-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.cb-fields.cols-1 { grid-template-columns: 1fr; }
.cb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-field.span-2 { grid-column: span 2; }
.cb-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cb-muted);
}
.cb-field .form-control,
.cb-field .form-select {
  height: 44px;
  border-radius: var(--cb-radius-sm);
  border: 1px solid var(--cb-line);
  background-color: var(--cb-surface-2);
  font-size: 15px;
  color: var(--cb-heading);
  padding: 0 12px;
  width: 100%;
}
.cb-field select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237b8794%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.cb-field .form-control:focus,
.cb-field .form-select:focus {
  background-color: var(--cb-surface);
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px rgba(var(--cb-primary-rgb), .15);
}
.cb-field .text-danger { font-size: 12px; }
.cb-filter.stacked { flex-direction: column; align-items: stretch; }
.cb-filter .actions { display: flex; gap: 8px; }
.cb-filter .actions .btn { flex: 1; }

/* Progress bar with execution status */
.cb-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--cb-surface-3);
  overflow: hidden;
}
.cb-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cb-warning);
  transition: width .3s ease;
}
.cb-progress.mid > span { background: var(--cb-info); }
.cb-progress.ok > span { background: var(--cb-success); }
.cb-progress.lg { height: 12px; }

/* Execution % cell inside tables */
.cb-exec { min-width: 110px; }
.cb-exec .pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-heading);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  display: block;
  text-align: right;
}
.cb-exec.ok .pct { color: var(--cb-success); }
.cb-exec.mid .pct { color: var(--cb-info); }
.cb-exec.low .pct { color: var(--cb-warning); }

/* Big execution summary */
.cb-exec-summary {
  background: var(--cb-surface);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding: 16px 18px;
}
.cb-exec-summary .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cb-exec-summary .label { font-size: 12px; font-weight: 500; color: var(--cb-muted); }
.cb-exec-summary .pct {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cb-heading);
  font-variant-numeric: tabular-nums;
}
.cb-exec-summary.ok .pct { color: var(--cb-success); }
.cb-exec-summary.mid .pct { color: var(--cb-info); }
.cb-exec-summary.low .pct { color: var(--cb-warning); }
.cb-exec-summary .legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cb-muted);
}
.cb-exec-summary .legend b { color: var(--cb-heading); font-variant-numeric: tabular-nums; }

/* Icon button in table rows */
.cb-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cb-primary-100);
  color: var(--cb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cb-icon-btn:active { background: var(--cb-primary); color: #fff; }

/* Header button (e.g. "Agregar") */
.btn-sm.cb-btn-add { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* Alerts */
.alert { border-radius: var(--cb-radius-sm); border: 0; font-size: 14px; }
.alert-danger { background: #fdecec; color: #8a2424; }
.alert-info { background: var(--cb-primary-50); color: var(--cb-primary-700); }

/* Modals: card on desktop, bottom sheet on phones */
.modal-content { border: 0; border-radius: var(--cb-radius); box-shadow: var(--cb-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--cb-line); padding: 14px 16px; }
.modal-title { font-size: 16px; font-weight: 600; color: var(--cb-heading); }
.modal-body { padding: 16px; }
.modal-footer { border-top: 1px solid var(--cb-line); padding: 12px 16px; gap: 8px; }
.modal-footer .btn { flex: 1; height: 44px; }
.btn.btn-secondary { background: var(--cb-surface-3) !important; border-color: var(--cb-surface-3) !important; color: var(--cb-heading) !important; }
.btn.btn-secondary:hover, .btn.btn-secondary:active { background: var(--cb-line) !important; border-color: var(--cb-line) !important; }
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    width: 100%;
  }
  .modal-content { border-radius: 20px 20px 0 0; padding-bottom: var(--cb-safe-bottom); }
  .modal.fade .modal-dialog { transform: translateY(40px); }
  .modal.show .modal-dialog { transform: none; }
}

/* ---------- Desktop: keep the app as a centred column ---------- */
@media (min-width: 768px) {
  #appCapsule { max-width: 720px; margin-left: auto; margin-right: auto; }
  .appHeader .pageTitle { max-width: 480px; }
  .appBottomMenu { justify-content: center; }
  .appBottomMenu .item { max-width: 200px; }
  .modal-dialog { max-width: 480px; }
}

/* =========================================================================
   Dark mode
   The template toggles body.dark-mode-active (sidebar switch, localStorage
   "MobilekitDarkMode"); _Layout applies it before first paint and follows
   prefers-color-scheme when the user has not chosen. Tokens are redefined
   here so every cb-* component follows automatically; the rules below only
   patch template pieces that hard-code their own dark colors.
   ========================================================================= */
body.dark-mode-active {
  --cb-primary: #4d9be6;
  --cb-primary-700: #2d7dd2;
  --cb-primary-100: rgba(77, 155, 230, .20);
  --cb-primary-50: rgba(77, 155, 230, .10);
  --cb-primary-rgb: 77, 155, 230;

  --cb-success: #3fb46f;
  --cb-danger: #ef6b6b;
  --cb-warning: #f0a53a;
  --cb-info: #5aa6ea;

  --cb-bg: #0f1620;
  --cb-surface: #171f2b;
  --cb-surface-2: #1d2734;
  --cb-surface-3: #253141;
  --cb-line: #2a3545;
  --cb-heading: #f1f4f8;
  --cb-text: #c3cbd6;
  --cb-muted: #8794a5;
  --cb-nav-bg: rgba(23, 31, 43, .94);

  --cb-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --cb-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);

  --bs-primary: var(--cb-primary);
  --bs-primary-rgb: var(--cb-primary-rgb);
  --bs-link-color: var(--cb-primary);
  --bs-body-bg: var(--cb-bg);
  --bs-body-color: var(--cb-text);
  --bs-border-color: var(--cb-line);

  background: var(--cb-bg) !important;
  color: var(--cb-text);
  color-scheme: dark;
}

/* Template pieces that hard-code their own dark palette */
body.dark-mode-active .appHeader,
body.dark-mode-active .appHeader:before {
  background: var(--cb-surface);
  border-bottom-color: var(--cb-line);
}
body.dark-mode-active .appHeader .pageTitle,
body.dark-mode-active .appHeader .left .headerButton,
body.dark-mode-active .appHeader .right .headerButton { color: var(--cb-heading); }
body.dark-mode-active .appHeader .pageTitle .logo { filter: brightness(0) invert(1); opacity: .9; }
body.dark-mode-active .appBottomMenu { background: var(--cb-nav-bg); border-top-color: var(--cb-line); }
body.dark-mode-active .appBottomMenu .item ion-icon,
body.dark-mode-active .appBottomMenu .item strong { color: var(--cb-muted); }
body.dark-mode-active .appBottomMenu .item.active ion-icon { background: var(--cb-primary-100); }
body.dark-mode-active #loader { background: var(--cb-bg); }

body.dark-mode-active .offcanvas,
body.dark-mode-active .offcanvas-body { background: var(--cb-surface); color: var(--cb-text); }
body.dark-mode-active .listview > li,
body.dark-mode-active .listview > li .item { color: var(--cb-text); border-color: var(--cb-line); }
body.dark-mode-active .listview > li .item .in { color: var(--cb-heading); }
body.dark-mode-active .listview-title { color: var(--cb-muted); }

body.dark-mode-active .card { background: var(--cb-surface); color: var(--cb-text); }
body.dark-mode-active .wide-block { background: var(--cb-surface); border-color: var(--cb-line); }
body.dark-mode-active .text-muted { color: var(--cb-muted) !important; }
body.dark-mode-active h1, body.dark-mode-active h2, body.dark-mode-active h3,
body.dark-mode-active h4, body.dark-mode-active h5, body.dark-mode-active h6 { color: var(--cb-heading); }

body.dark-mode-active .modal-content { background: var(--cb-surface); color: var(--cb-text); }
body.dark-mode-active .modal-header,
body.dark-mode-active .modal-footer { border-color: var(--cb-line); }
body.dark-mode-active .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }
body.dark-mode-active .form-control,
body.dark-mode-active .form-select,
body.dark-mode-active .cb-field .form-control,
body.dark-mode-active .cb-filter .form-control {
  background-color: var(--cb-surface-2);
  border-color: var(--cb-line);
  color: var(--cb-heading);
}
body.dark-mode-active .form-control:focus,
body.dark-mode-active .cb-field .form-control:focus { background-color: var(--cb-surface-3); }
body.dark-mode-active select option { background: var(--cb-surface-2); color: var(--cb-heading); }
body.dark-mode-active .cb-field select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%238794a5%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");
}
body.dark-mode-active .alert-danger { background: rgba(239, 107, 107, .15); color: #f3a3a3; }
body.dark-mode-active .alert-info { background: var(--cb-primary-50); color: var(--cb-primary); }
body.dark-mode-active .table,
body.dark-mode-active .cb-table { color: var(--cb-text); }
body.dark-mode-active .cb-table .cell-brand .name,
body.dark-mode-active .cb-table .num.strong,
body.dark-mode-active .cb-table tfoot td,
body.dark-mode-active .cb-table tr.total td { color: var(--cb-heading); }
body.dark-mode-active .cb-table tr.total td.num { color: var(--cb-primary); }

/* Brand logos stay on white so the artwork is legible */
body.dark-mode-active .cb-row .logo,
body.dark-mode-active .cb-table .cell-brand .logo,
body.dark-mode-active .cb-details > summary .logo,
body.dark-mode-active .cb-brand-header .logo { background: #fff; border-color: transparent; }

/* Notification toast */
body.dark-mode-active .notification-box .notification-dialog { background: var(--cb-surface); color: var(--cb-text); }

/* Sidebar dark mode switch row */
.cb-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.cb-switch-row .in { flex: 1; color: var(--cb-heading); }
.cb-switch-row .form-check { margin: 0; padding: 0; min-height: 0; }
.cb-switch-row .form-check-input {
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  background-color: var(--cb-surface-3);
  border-color: var(--cb-line);
}
.cb-switch-row .form-check-input:checked { background-color: var(--cb-primary); border-color: var(--cb-primary); }

html.cb-dark { background: #0f1620; }

/* ---------- Month pacing (home) ---------- */
.cb-exec-summary .marker {
  position: relative;
}
.cb-exec-summary .marker .tick {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--cb-heading);
  border-radius: 1px;
  opacity: .55;
  transform: translateX(-1px);
}
.cb-exec-summary .pace {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cb-muted);
}
.cb-exec-summary .pace b { color: var(--cb-heading); font-variant-numeric: tabular-nums; }
.cb-exec-summary .pace .ok b { color: var(--cb-success); }
.cb-exec-summary .pace .low b { color: var(--cb-warning); }
.cb-exec-summary a.more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-primary);
  margin-left: auto;
}

/* Mini execution bar inside brand rows */
.cb-row .mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
}
.cb-row .mini .cb-progress { width: 72px; height: 5px; flex: 0 0 auto; }
.cb-row .mini b { color: var(--cb-heading); font-weight: 600; }

/* ---------- Pending deals aging ---------- */
.cb-aging {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cb-surface-3);
  gap: 2px;
}
.cb-aging > span { display: block; height: 100%; min-width: 0; transition: width .3s ease; }
.cb-aging .a1, .cb-aging-legend .a1 { background: var(--cb-primary); }
.cb-aging .a2, .cb-aging-legend .a2 { background: var(--cb-info); opacity: .75; }
.cb-aging .a3, .cb-aging-legend .a3 { background: var(--cb-warning); }
.cb-aging .a4, .cb-aging-legend .a4 { background: var(--cb-danger); }
.cb-aging-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cb-muted);
}
.cb-aging-legend span { display: flex; align-items: center; gap: 6px; }
.cb-aging-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.cb-aging-legend b { color: var(--cb-heading); font-variant-numeric: tabular-nums; margin-left: auto; }
@media (min-width: 480px) { .cb-aging-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cb-table .cell-brand .stale {
  display: block;
  font-size: 11px;
  color: var(--cb-danger);
  font-weight: 500;
  white-space: nowrap;
}
.cb-table .cell-brand .stale.ok { color: var(--cb-muted); font-weight: 400; }
.cb-pill.danger { background: rgba(213, 63, 63, .12); color: var(--cb-danger); }
body.dark-mode-active .cb-pill.danger { background: rgba(239, 107, 107, .18); }

/* Share button in header */
.appHeader .right .headerButton.share ion-icon { font-size: 22px; }

/* Mini execution line under a name inside a table cell (Detalle: sedes) */
.cb-table td .mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
}
.cb-table td .mini .cb-progress { width: 72px; height: 5px; flex: 0 0 auto; }
.cb-table td .mini b { color: var(--cb-heading); font-weight: 600; }

/* Horizontal bar list (e.g. ventas por modelo): full label that wraps, count, bar scaled to the max */
.cb-bars { list-style: none; margin: 0; padding: 4px 16px 14px; }
.cb-bars li { padding: 8px 0; border-bottom: 1px solid var(--cb-line); }
.cb-bars li:last-child { border-bottom: 0; }
.cb-bars .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cb-bars .name { font-size: 13px; color: var(--cb-text); line-height: 1.3; min-width: 0; }
.cb-bars .v { font-size: 14px; font-weight: 700; color: var(--cb-heading); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cb-bars .cb-progress { height: 6px; }
.cb-bars .cb-progress > span { background: var(--cb-primary); }