/* CMSGO — Tema «WP» del panel: tipografía Inter y paleta del administrador de WordPress.
   Se carga después de cmsgo-brand.css y cms.css; reasigna los tokens y ajusta el shell
   (barra superior y menú lateral oscuros). Se activa con config admin.theme = 'wp'. */

:root {
  /* Acento: el «verde AM» pasa a ser el azul de WordPress */
  --am-green: #2271B1;
  --am-green-600: #135E96;
  --am-green-700: #0A4B78;
  --am-green-800: #043959;
  --am-green-50: #F0F6FC;
  --am-green-100: #C5D9ED;

  --status-ontrack: #00A32A;
  --status-risk: #DBA617;
  --status-late: #D63638;
  --status-done: #008A20;
  --status-blocked: #646970;

  --bg: #F0F0F1;
  --surface: #FFFFFF;
  --surface-2: #F6F7F7;
  --peach: #FCF9E8;
  --peach-soft: #FCF9E8;
  --cream: #F0F0F1;
  --ink: #1D2327;
  --ink-2: #2C3338;
  --ink-3: #50575E;
  --ink-4: #646970;
  --line: #C3C4C7;
  --line-2: #DCDCDE;

  /* WordPress usa esquinas discretas */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;

  --sh-1: 0 1px 1px rgba(0,0,0,.04);
  --sh-2: 0 1px 3px rgba(0,0,0,.08);
  --sh-pop: 0 3px 30px rgba(0,0,0,.2);

  --focus: 0 0 0 1px #2271B1, 0 0 0 3px rgba(34,113,177,.25);

  /* Shell oscuro */
  --wp-menu-bg: #1D2327;
  --wp-menu-sub: #2C3338;
  --wp-menu-text: #F0F0F1;
  --wp-menu-muted: rgba(240,246,252,.7);
  --wp-menu-hover: #72AEE6;
}

/* ---------- Tipografía ---------- */
body,
.cond, .serif, .page-title, .pb-app, .brand-mark, .brand-app, .brand-beta,
.pb-brandmark, .pb-search kbd, .as-name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* cmsgo-brand.css, cms.css y las vistas de los módulos fijan «Barlow / Barlow Condensed / Source Serif 4» en muchos
   selectores; en este tema todo el panel usa Inter salvo el texto monoespaciado. */
body *:not(code):not(kbd):not(pre):not(samp):not(.mono):not(.mono *):not([style*="font-family"]) {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}
body { font-size: 13.5px; font-feature-settings: "cv11", "ss01", "kern"; }
.auth-brand h1 { font-weight: 700; letter-spacing: -0.03em; }
.card-title { font-weight: 600; font-size: 15px; }
.page-title { font-weight: 600; font-size: 23px; letter-spacing: -0.015em; }
.mono, code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }

a { color: #2271B1; }
a:hover { color: #135E96; }

/* ---------- Barra superior (como #wpadminbar) ---------- */
.platform-bar {
  height: 46px;
  background: var(--wp-menu-bg);
  color: var(--wp-menu-text);
  border-bottom: 0;
}
.pb-brand:hover { background: rgba(255,255,255,.06); }
.pb-logo { height: 30px; }
.pb-sep { color: var(--wp-menu-muted); }
.pb-app { color: var(--wp-menu-text); font-size: 14px; }
.pb-beta { background: rgba(114,174,230,.18); color: var(--wp-menu-hover); }
.pb-divider { background: rgba(240,246,252,.15); }
.pb-site { color: var(--wp-menu-muted); }
.pb-site b { color: var(--wp-menu-text); }
.pb-site .muted { color: rgba(240,246,252,.45); }
.pb-search {
  background: var(--wp-menu-sub);
  border-color: transparent;
  border-radius: var(--r-sm);
  color: var(--wp-menu-muted);
}
.pb-search:hover, .pb-search:focus-within { background: #3C434A; border-color: transparent; }
.pb-search input { color: var(--wp-menu-text); }
.pb-search input::placeholder { color: var(--wp-menu-muted); }
.platform-bar .btn-ghost { color: var(--wp-menu-text); border-color: transparent; background: transparent; }
.platform-bar .btn-ghost:hover,
.platform-bar .btn-icon:hover,
.platform-bar .btn-icon.on { color: var(--wp-menu-hover); background: var(--wp-menu-sub); border-color: transparent; }
.platform-bar .btn-icon { color: var(--wp-menu-text); }
.pb-avatar { border-color: transparent; color: var(--wp-menu-text); }
.pb-avatar:hover { background: var(--wp-menu-sub); color: var(--wp-menu-hover); }
.pb-avatar .avatar-circle { background: var(--am-green); }

/* ---------- Menú lateral (como #adminmenu) ---------- */
.sidebar {
  width: 220px;
  background: var(--wp-menu-bg);
  border-right: 0;
  padding: 12px 0;
  gap: 14px;
  color: var(--wp-menu-text);
}
.nav-label { color: rgba(240,246,252,.45); padding: 8px 16px 4px; }
.nav-item {
  color: var(--wp-menu-text);
  border-radius: 0;
  padding: 8px 16px;
  font-weight: 400;
  font-size: 13.5px;
}
.nav-item .ico { opacity: .6; }
.nav-item:hover { background: var(--wp-menu-sub); color: var(--wp-menu-hover); }
.nav-item:hover .ico { opacity: 1; }
.nav-item.active,
.nav-group[open] > summary.nav-item.active {
  background: var(--am-green);
  color: #FFFFFF;
  font-weight: 500;
}
.nav-item.active .ico { color: #FFFFFF; opacity: 1; }
.nav-group[open] > summary.nav-item:not(.active) { background: var(--wp-menu-sub); }
.nav-children {
  background: var(--wp-menu-sub);
  border-left: 0;
  margin: 0;
  padding: 6px 0;
  gap: 0;
}
.nav-item.nav-child { color: var(--wp-menu-muted); padding: 6px 16px 6px 42px; font-size: 13px; }
.nav-item.nav-child:hover { background: transparent; color: var(--wp-menu-hover); }
.nav-item.nav-child.active { background: transparent; color: #FFFFFF; font-weight: 600; }

.sidebar .site-switch { padding: 0 12px; }
.sidebar .site-switch label { color: rgba(240,246,252,.45); }
.sidebar .site-switch select {
  background-color: var(--wp-menu-sub);
  color: var(--wp-menu-text);
  border-color: #3C434A;
  border-radius: var(--r-sm);
}
.sidebar-footer { border-top-color: rgba(240,246,252,.12); }
.sidebar-footer .muted { color: rgba(240,246,252,.45); padding: 6px 16px !important; }

/* ---------- Contenido ---------- */
.main, .page { background: var(--bg); }
.page { padding: 20px 24px 80px; }

.card { border-color: var(--line); box-shadow: var(--sh-1); }

/* Botones rectangulares, como los de WordPress */
.btn { border-radius: var(--r-sm); font-weight: 500; }
.btn-primary { background: #2271B1; border-color: #2271B1; }
.btn-primary:hover { background: #135E96; border-color: #135E96; }
.btn-ghost { color: #2271B1; border-color: #2271B1; background: #F6F7F7; }
.btn-ghost:hover { color: #0A4B78; border-color: #0A4B78; background: #F0F0F1; }
.btn-soft { background: #F0F6FC; color: #2271B1; }
.btn-soft:hover { background: #C5D9ED; }

.field label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); font-weight: 500; }
.field input, .field textarea, .field select { border-color: #8C8F94; border-radius: var(--r-md); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #2271B1; box-shadow: 0 0 0 1px #2271B1; }

.chip.on { background: #2271B1; border-color: #2271B1; }

/* Menú lateral en pantallas chicas: conserva el fondo oscuro al desplegarse */
@media (max-width: 900px) {
  .app-body .sidebar { background: var(--wp-menu-bg); top: 46px; }
}