/* =========================================================
   Mango Agency Portal — layout de la app
   (los tokens de marca viven en brand.css)
   ========================================================= */

/* ---- tema oscuro ----
   Redefine los tokens de brand.css; los alias semanticos (--fg-*, --bg-*)
   cascadean solos porque son var() de estos. El logo (wordmark negro) se
   invierte con filter. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #f2f2f2;
  --color-primary-container: #d6d6d6;
  --color-on-primary: #111113;
  --color-surface: #0e0e10;
  --color-surface-container-lowest: #17171a;
  --color-surface-container-low: #1d1d21;
  --color-surface-container: #212125;
  --color-surface-container-high: #27272b;
  --color-on-surface: #f2f2f2;
  --color-on-surface-variant: rgba(255, 255, 255, 0.72);
  --color-outline: rgba(255, 255, 255, 0.48);
  --color-outline-variant: rgba(255, 255, 255, 0.22);
  --color-error: #ffb4ab;
  --border-soft: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .eyebrow { color: rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .sidebar-logo img,
[data-theme="dark"] .login-logo { filter: invert(1); }
[data-theme="dark"] a.module-card:hover { border-color: rgba(255, 255, 255, 0.28); }
[data-theme="dark"] .form-error,
[data-theme="dark"] .notice.is-error {
  border-color: rgba(255, 180, 171, 0.35);
  background: rgba(255, 180, 171, 0.07);
}

.theme-toggle {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: flex;
  transition: color var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--fg-1); }
.theme-toggle .material-symbols-outlined { font-size: 20px; }
.login-theme-toggle { position: fixed; top: var(--space-5); right: var(--space-5); }

/* ---- shell ---- */
.app { display: flex; min-height: 100vh; background: var(--bg-alt); }

.sidebar {
  width: 232px;
  box-sizing: border-box;
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
}
.sidebar-logo img { height: 20px; display: block; margin-left: 12px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-8); flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item .material-symbols-outlined { font-size: 20px; }
.nav-item:hover { background: var(--bg-muted); color: var(--fg-1); }
.nav-item.is-active { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--fw-semibold); }

.sidebar-user {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--text-sm);
}
.sidebar-user-meta { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-3);
}
.logout { color: var(--fg-3); display: flex; transition: color var(--dur) var(--ease); }
.logout:hover { color: var(--fg-1); }
.logout .material-symbols-outlined { font-size: 20px; }

.content { flex: 1; width: 100%; padding: var(--space-12) var(--space-16); max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.page-head { margin-bottom: var(--space-10); }
.page-head h2 { margin-top: var(--space-2); margin-bottom: var(--space-3); }

/* ---- cards de modulos ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.module-card {
  position: relative; display: block;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur) var(--ease);
}
a.module-card:hover { box-shadow: var(--shadow-md); }
.module-card h3 { margin: var(--space-4) 0 var(--space-2); }
.module-card p { font-size: var(--text-sm); }
.module-card > .material-symbols-outlined { font-size: 26px; color: var(--fg-1); }
.module-card.is-soon { opacity: 0.55; }
.soon-tag {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

/* ---- KPI tiles ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-tile { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-6); }
.kpi-value {
  font-size: var(--text-4xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  color: var(--fg-1);
  margin-top: var(--space-3);
  /* cifras proporcionales en valores grandes; tabular solo en columnas */
  font-variant-numeric: normal;
}

/* ---- analytics: chart ----
   Series monocromo (decision de marca: sin color cromatico). CVD dE 35 y
   contraste >=3:1 validados; identidad reforzada con leyenda + tooltip. */
:root {
  --chart-s1: #1a1c1d;
  --chart-s2: #6b6b6b;
  --chart-area: rgba(26, 28, 29, 0.05);
  --chart-grid: rgba(198, 198, 198, 0.35);
}
[data-theme="dark"] {
  --chart-s1: #f2f2f2;
  --chart-s2: #a3a3a3;
  --chart-area: rgba(242, 242, 242, 0.05);
  --chart-grid: rgba(255, 255, 255, 0.10);
}

.chart-panel { margin-bottom: var(--space-6); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }
.chart-legend { display: flex; gap: var(--space-4); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-2); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-swatch.s1 { background: var(--chart-s1); }
.legend-swatch.s2 { background: var(--chart-s2); }

.chart-wrap { position: relative; padding-left: 34px; padding-bottom: 18px; }
.chart-svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-area { fill: var(--chart-area); }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line.s1 { stroke: var(--chart-s1); }
.chart-line.s2 { stroke: var(--chart-s2); }
.chart-cross { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-dot { stroke: var(--bg); stroke-width: 2; }
.chart-dot.s1 { fill: var(--chart-s1); }
.chart-dot.s2 { fill: var(--chart-s2); }
.chart-ylabels { position: absolute; top: 0; left: 0; width: 30px; height: 240px; }
.chart-ylabels span {
  position: absolute; right: 4px; transform: translateY(-50%);
  font-size: 10px; color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.chart-xlabels { position: relative; height: 14px; }
.chart-xlabels span {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: var(--fg-3); white-space: nowrap;
}
.chart-tooltip {
  position: absolute; top: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 8px 10px; font-size: var(--text-xs); color: var(--fg-2);
  pointer-events: none; z-index: 5; min-width: 130px;
}
.tt-date { font-weight: var(--fw-semibold); color: var(--fg-1); margin-bottom: 4px; }
.tt-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tt-row b { margin-left: auto; color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* ---- analytics: KPI delta + chips ---- */
.kpi-delta { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--space-2); }
.chip-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.chip-label { margin-right: var(--space-2); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-on-primary); background: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 6px 12px; text-decoration: none;
}
.filter-chip .chip-x { opacity: 0.6; }
.filter-chip:hover .chip-x { opacity: 1; }

/* ---- analytics: breakdown rows (barras de proporcion) ---- */
.brow-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.brow-cols { font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-3); font-weight: var(--fw-bold); }
.brow {
  position: relative; display: grid;
  grid-template-columns: 1fr 64px 64px;
  gap: var(--space-2); align-items: center;
  padding: 7px 10px; margin: 2px 0;
  border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  font-size: var(--text-sm);
}
.brow-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--fg-1); opacity: 0.06;
  border-radius: var(--radius-md);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
a.brow:hover .brow-bar { opacity: 0.12; }
.brow.is-active { outline: 1.5px solid var(--fg-1); }
.brow-label {
  position: relative; color: var(--fg-1); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brow-num {
  position: relative; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--fg-1);
}
.brow-num.brow-vis { color: var(--fg-3); }
.brow-empty { font-size: var(--text-sm); color: var(--fg-3); padding: var(--space-3) 0; }
.notice-small { font-size: var(--text-xs); }

/* conversión (tracking propio) */
.conv-head { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-10) 0 var(--space-4); }
.conv-note { font-size: var(--text-xs); color: var(--fg-3); }
.brow-triple { grid-template-columns: 1fr 56px 56px 52px; }

/* ---- analytics: rango + tablas ---- */
.range-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.range-pill {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--fg-2); text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.range-pill:hover { color: var(--fg-1); border-color: var(--fg-3); }
.range-pill.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.range-dates { font-size: var(--text-xs); color: var(--fg-3); margin-left: var(--space-3); }

.tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.tables-grid .panel { margin-bottom: 0; }
.table-data td.num, .table-data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-data td { overflow-wrap: anywhere; }

/* ---- forms ---- */
.field label { display: block; margin-bottom: var(--space-2); }
.field input, .field select {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  font: inherit; font-size: var(--text-sm);
  color: var(--fg-1); background: var(--bg);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--color-primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-on-primary);
  border: none; border-radius: var(--radius-lg);
  padding: 12px 18px;
  font: inherit; font-size: var(--text-sm); font-weight: var(--fw-bold);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.btn:hover { opacity: 0.85; }
.btn-block { width: 100%; margin-top: var(--space-6); }
.btn-ghost {
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-ghost:hover { color: var(--fg-1); border-color: var(--fg-3); }

.form-error {
  margin-top: var(--space-5);
  border: 1px solid rgba(186, 26, 26, 0.35);
  color: var(--color-error); background: rgba(186, 26, 26, 0.05);
  font-size: var(--text-sm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
}

/* ---- notices / panels / tabla ---- */
.notice {
  border: 1px solid var(--border); background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-sm); color: var(--fg-1);
  margin-bottom: var(--space-6);
}
.notice code {
  font-weight: var(--fw-bold);
  background: var(--bg); border: 1px solid var(--border-soft);
  padding: 2px 6px; border-radius: 4px;
  user-select: all;
}
.notice.is-error { border-color: rgba(186, 26, 26, 0.35); color: var(--color-error); background: rgba(186, 26, 26, 0.05); }

.panel {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.panel-title { margin-bottom: var(--space-4); }
.panel-narrow { max-width: 440px; }
.field-hint { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--space-2); }
.create-grid { display: grid; grid-template-columns: 1fr 1fr 160px auto; gap: var(--space-4); align-items: end; }
.create-grid .btn { padding: 11px 18px; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left;
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 var(--space-3) var(--space-3) 0;
}
.table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: 1px solid var(--border-soft); color: var(--fg-2); }
.cell-strong { font-weight: var(--fw-semibold); color: var(--fg-1); }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions .inline-form { display: inline-block; margin-left: var(--space-2); }
.is-inactive td { opacity: 0.5; }
.badge {
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

/* ---- login ---- */
.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  padding: var(--space-6); box-sizing: border-box;
}
.login-card {
  width: 380px; max-width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
}
.login-logo { height: 24px; display: block; margin-bottom: var(--space-8); }
.login-title { font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-4); }
.field { margin-top: var(--space-5); }
.login-foot {
  margin-top: var(--space-8);
  font-size: var(--text-xs); color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto;
    position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-right: none; border-bottom: 1px solid var(--border-soft);
  }
  .sidebar-logo img { margin-left: 4px; height: 18px; }
  .sidebar-nav { flex-direction: row; margin-top: 0; gap: 2px; flex: 1; overflow-x: auto; }
  .nav-label { display: none; }
  .nav-item { padding: 8px 10px; }
  .sidebar-user { border-top: none; padding-top: 0; margin-left: auto; gap: var(--space-2); flex-shrink: 0; }
  .sidebar-user-meta { display: none; }
  .avatar { width: 30px; height: 30px; }
  .content { padding: var(--space-6) var(--space-4); }
  .page-head { margin-bottom: var(--space-6); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: var(--text-3xl); }
  .range-row, .chip-row { flex-wrap: wrap; }
  .range-dates { width: 100%; margin-left: 2px; margin-top: var(--space-1); }
  .create-grid { grid-template-columns: 1fr; }
}