/* Torre de Control — capa de marca OBRICOM sobre Bootstrap 5.3 (variables nativas + color modes) */

:root,
[data-bs-theme="light"] {
  --bs-body-font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: #F2F6F8;
  --bs-body-color: #0E2430;
  --bs-secondary-color: #5C7684;
  --bs-tertiary-color: #84A0AC;
  --bs-border-color: #DCE5EA;
  --bs-tertiary-bg: #EAF0F3;

  --bs-primary: #0B7285;
  --bs-primary-rgb: 11, 114, 133;
  --bs-primary-text-emphasis: #075A69;
  --bs-primary-bg-subtle: #D7EEF0;
  --bs-primary-border-subtle: #B7E1E4;

  --bs-success: #1E8E52;
  --bs-success-bg-subtle: #DFF3E7;
  --bs-success-text-emphasis: #1E8E52;
  --bs-warning: #B45309;
  --bs-warning-bg-subtle: #FBEBD6;
  --bs-warning-text-emphasis: #B45309;
  --bs-danger: #C0292B;
  --bs-danger-bg-subtle: #FAE1E1;
  --bs-danger-text-emphasis: #C0292B;

  --brand-shadow: 0 1px 2px rgba(14,36,48,.04), 0 8px 24px -12px rgba(14,36,48,.18);
  --ch-uber: #15181B;   --ch-uber-bg: #E7E8EA;
  --ch-rappi: #F0641F;  --ch-rappi-bg: #FDE7DB;
  --ch-didi: #CF3364;   --ch-didi-bg: #F9DEE6;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0A1720;
  --bs-body-color: #E6EFF3;
  --bs-secondary-color: #8FAAB6;
  --bs-tertiary-color: #5E7C89;
  --bs-border-color: #20404F;
  --bs-tertiary-bg: #152B37;
  --bs-emphasis-color: #F2F7F9;

  --bs-primary: #3FC4CE;
  --bs-primary-rgb: 63, 196, 206;
  --bs-primary-text-emphasis: #7BDCE3;
  --bs-primary-bg-subtle: #123A40;
  --bs-primary-border-subtle: #164B52;

  --bs-success: #4CC585;
  --bs-success-bg-subtle: #0F3325;
  --bs-success-text-emphasis: #4CC585;
  --bs-warning: #E3A857;
  --bs-warning-bg-subtle: #3A2B12;
  --bs-warning-text-emphasis: #E3A857;
  --bs-danger: #EB6D6E;
  --bs-danger-bg-subtle: #3B1717;
  --bs-danger-text-emphasis: #EB6D6E;

  --brand-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.55);
  --ch-uber: #E7EBEE;   --ch-uber-bg: #242A2E;
  --ch-rappi: #FF8B52;  --ch-rappi-bg: #3A2415;
  --ch-didi: #EE6E97;   --ch-didi-bg: #3A1C28;
}

body { font-size: .925rem; }

/* ---------- Shell con sidebar ---------- */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-content { min-width: 0; }

.sidebar-obricom {
  width: 248px;
  padding: 1.1rem 1rem;
  background: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  height: 100vh;
  gap: .35rem;
}
.sidebar-brand {
  padding: .4rem .3rem .9rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.sidebar-brand .brand-mark { width: 32px; height: 32px; }

.nav-sidebar { gap: .2rem; }
.nav-sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem;
  border-radius: .6rem;
  color: var(--bs-secondary-color);
  font-size: .875rem; font-weight: 500;
  border-left: 3px solid transparent;
}
.nav-sidebar .nav-link i { font-size: 1.05rem; width: 1.1rem; text-align: center; }
.nav-sidebar .nav-link:hover {
  color: var(--bs-body-color);
  background: var(--bs-border-color);
}
.nav-sidebar .nav-link.active {
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
  border-left-color: var(--bs-primary);
}

.sidebar-user {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.sidebar-obricom-offcanvas { width: 264px; }

.nav-sidebar .nav-link[data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .15s ease; }
.nav-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.nav-sidebar-sub { gap: .1rem; margin: .15rem 0 .35rem; }
.nav-sidebar-sub .nav-link { padding: .4rem .7rem .4rem 2.6rem; font-size: .82rem; }
.nav-sidebar-sub .nav-sidebar-sub { margin: .1rem 0 .25rem; }
.nav-sidebar-sub .nav-sidebar-sub .nav-link { padding-left: 3.9rem; font-size: .78rem; }

h1, h2, h3, .display-num, .navbar-brand {
  font-family: "Outfit", "IBM Plex Sans", sans-serif;
  text-wrap: balance;
}

.font-mono, .table-num, .kpi-value, td.text-end, .chip-time {
  font-variant-numeric: tabular-nums;
}
.font-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- Topbar ---------- */
.navbar-obricom {
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.brand-mark {
  width: 32px; height: 32px; border-radius: .6rem;
  background: linear-gradient(155deg, var(--bs-primary), var(--bs-primary-text-emphasis));
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.navbar-brand small { display: block; font-size: .68rem; color: var(--bs-secondary-color); font-weight: 400; margin-top: -2px; }

.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-outline-secondary.btn-icon { color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.btn-outline-secondary.btn-icon:hover { color: var(--bs-body-color); }

.avatar-obricom {
  width: 36px; height: 36px; border-radius: .6rem;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  border: 1px solid var(--bs-primary-border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: .8rem;
}

/* ---------- Cards ---------- */
.card-obricom {
  border-color: var(--bs-border-color);
  box-shadow: var(--brand-shadow);
  border-radius: 1rem;
}

.kpi-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-secondary-color); font-weight: 500;
}
.kpi-value { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.65rem; line-height: 1; }
.kpi-sparkline { height: 38px; width: 100%; }
.kpi-foot { font-size: .72rem; color: var(--bs-tertiary-color); }

.chip-delta { font-size: .72rem; font-weight: 500; }
.chip-delta.up { color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.chip-delta.down { color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }

/* ---------- Channel badges ---------- */
.badge-ch { font-weight: 500; font-size: .7rem; padding: .3rem .5rem; }
.badge-ch .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: .3rem; }
.badge-uber  { color: var(--ch-uber);  background: var(--ch-uber-bg); }
.badge-rappi { color: var(--ch-rappi); background: var(--ch-rappi-bg); }
.badge-didi  { color: var(--ch-didi);  background: var(--ch-didi-bg); }
.badge-uber .dot  { background: var(--ch-uber); }
.badge-rappi .dot { background: var(--ch-rappi); }
.badge-didi .dot  { background: var(--ch-didi); }

/* ---------- Status chips ---------- */
.chip-status { font-size: .72rem; font-weight: 500; }
.chip-status .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: .35rem; }

/* ---------- Table ---------- */
.table-obricom thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); font-weight: 500; border-bottom-width: 1px;
}
.table-obricom td { vertical-align: middle; }
.table-obricom > :not(caption) > * > * { background-color: transparent; }
.spark-cell canvas { width: 78px !important; height: 26px !important; }

/* ---------- Activity feed ---------- */
.feed-item { display: flex; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color); }
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-stripe { width: 3px; border-radius: 3px; flex: none; align-self: stretch; }
.feed-time { font-size: .68rem; color: var(--bs-tertiary-color); white-space: nowrap; }
.feed-detail { font-size: .76rem; color: var(--bs-secondary-color); }

/* ---------- Misc ---------- */
.text-muted-2 { color: var(--bs-tertiary-color) !important; }
.chart-canvas-lg { max-height: 220px; }
.donut-wrap { max-width: 128px; margin: 0 auto; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

.theme-toggle .bi-moon-stars-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: inline-block; }

[data-bs-theme="dark"] .brand-mark img { filter: none; }

/* ---------- Recolorear componentes de Bootstrap con la marca OBRICOM ----------
   Bootstrap 5.3 compila --bs-btn-bg, --bs-dropdown-link-active-bg, el color de checkboxes
   marcados y el anillo de foco como valores fijos de Sass (ej. #0d6efd) en vez de
   var(--bs-primary) -- redefinir --bs-primary/--bs-danger arriba (para .text-primary,
   .bg-primary, etc.) no retiñe estos componentes solo. Se sobreescriben aquí los que sí se
   usan en Torre de Control (botones, dropdowns, checkboxes/switches, foco de inputs). */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-active-bg: var(--bs-danger-text-emphasis);
  --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* ---------- Avatar del topbar como dropdown (Perfil / Cerrar sesión) ---------- */
.avatar-obricom-btn { background: none; border: none; padding: 0; line-height: 0; }
.avatar-obricom-btn::after { display: none; }