:root{
  /* WP-ish admin palette */
  --wp-sb-bg:#1d2327;
  --wp-sb-bg-2:#23282d;
  --wp-sb-fg:#c3c4c7;
  --wp-sb-fg-strong:#ffffff;
  --wp-accent:#2271b1;

  --wp-top-bg:#ffffff;
  --wp-top-fg:#1d2327;

  --wp-page-bg:#f0f0f1;
  --wp-card-bg:#ffffff;
  --wp-border:#dcdcde;

  --wp-text:#1d2327;
  --wp-muted:#646970;

  --wp-radius:12px;
  --wp-shadow:0 1px 1px rgba(0,0,0,.04);
  --wp-shadow-lg:0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
a{ color:inherit; }

/* ====== APP SHELL (contenedor externo) ====== */



.appShell{
  /* ✅ FIX: variables para panel claro (evita texto blanco sobre blanco) */
  --text:#1b1f23;
  --muted:rgba(27,31,35,.62);
  --bg:#f6f7fb;
  --card:#fff;
  --stroke:#e6e8ef;

  min-height:100vh;
  background:var(--wp-page-bg);
  color:var(--wp-text);
  padding:14px;
}


/* Contenedor único: sidebar + frame comparten borde/sombra/radius */
.wpShell{
  min-height:calc(100vh - 28px);
    height:calc(100vh - 28px);
  display:flex;
  position:relative;
  --sbw:240px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--wp-border);
  box-shadow:var(--wp-shadow-lg);
  background:var(--wp-card-bg);
}

/* ====== SIDEBAR ====== */
.wpSidebar{
  width:240px;
  background:var(--wp-sb-bg);
  color:var(--wp-sb-fg);
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;
  background-image:none !important; /* mata cualquier watermark raro */
}
.wpSidebar::before,
.wpSidebar::after{
  content:none !important;
}

.wpBrand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}

.wpBrandLogo{
  width:34px; height:34px;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.wpBrandLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.wpBrandMeta .t1{
  font-weight:800;
  font-size:13px;
  color:var(--wp-sb-fg-strong);
  line-height:1.1;
}
.wpBrandMeta .t2{
  font-weight:600;
  font-size:12px;
  color:rgba(255,255,255,.65);
  margin-top:2px;
}

.wpMenu{
  padding:10px 0;
  display:grid;
}
.menuItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:2px 8px;
  border-radius:10px;
  text-decoration:none;
  color:var(--wp-sb-fg);
  border-left:4px solid transparent;
  transition:background .12s ease, color .12s ease, transform .08s ease;
}
.menuItem:hover{
  background:var(--wp-sb-bg-2);
  color:var(--wp-sb-fg-strong);
}
.menuItem:active{ transform:translateY(1px); }
.menuItem.active{
  background:rgba(34,113,177,.22);
  color:var(--wp-sb-fg-strong);
  border-left-color:var(--wp-accent);
}

.navSep{
  height:1px;
  margin:10px 12px;
  background:rgba(255,255,255,.08);
}

.micon{ width:18px; height:18px; fill:currentColor; opacity:.95; }
.mi{ display:inline-flex; width:22px; justify-content:center; }
.ml{ font-weight:650; font-size:13px; }

.wpSideFooter{
  margin-top:auto;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(0deg, rgba(255,255,255,.03), transparent);
}
.wpFootNote{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.65);
}
.wpFootNote code{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  padding:2px 8px;
  border-radius:999px;
  color:rgba(255,255,255,.90);
}

/* ===== SIDEBAR: FLECHA (NO SE CORTA) =====
   Como wpShell tiene overflow:hidden, NO usamos right negativo.
*/
.sbEdgeToggle{
  position:absolute;
  top:50%;
  right:0;                  /* ✅ dentro del contenedor */
  transform:translateY(-50%);
  width:28px;
  height:56px;
  border-radius:14px 0 0 14px; /* ✅ redondeo hacia adentro */
  border:1px solid rgba(255,255,255,.10);
  border-right:0;
  background:var(--wp-sb-bg-2);
  color:rgba(255,255,255,.95);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
  z-index:20;
}
.sbEdgeToggle svg{
  width:18px; height:18px;
  fill:currentColor;
  transition:transform .15s ease;
}

/* ====== FRAME (TOPBAR + CONTENT) ====== */
.wpFrame{ min-height:0; }

.wpTopbar{
  height:56px;
  background:var(--wp-top-bg);
  color:var(--wp-top-fg);

  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;

  margin:0;
  border:0;
  border-bottom:1px solid var(--wp-border);
  border-radius:0;
  box-shadow:none;
}

.wpCrumb{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.wpCrumb .t1{ font-weight:800; font-size:14px; }
.wpCrumb .t2{ font-size:12px; color:var(--wp-muted); margin-top:2px; }

.wpTopRight{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.userPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--wp-border);
  background:#fff;
  color:var(--wp-text);
  font-size:12.5px;
  font-weight:700;
}
.userPill .dot{
  width:8px; height:8px;
  border-radius:999px;
  background:#46b450; /* verde wp */
}

.wpBtn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--wp-border);
  background:#fff;
  color:var(--wp-text);
  font-weight:800;
  cursor:pointer;
}
.wpBtn:hover{ filter:brightness(.98); }
.wpBtn.primary{
  background:var(--wp-accent);
  border-color:var(--wp-accent);
  color:#fff;
}

.wpContent{ overflow:auto; }

/* ===== BUSCADOR TOPBAR ===== */
.wpSearch{
  flex:1;
  max-width:560px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--wp-border);
  background:#fff;
  margin-left:14px;
}
.wpSearch .sIcon{
  width:18px; height:18px;
  display:inline-flex;
  opacity:.85;
}
.wpSearch .sIcon svg{ width:18px; height:18px; fill:currentColor; }

#wpSearchInput{
  width:100%;
  border:0;
  outline:0;
  font-size:13.5px;
  font-weight:650;
  color:var(--wp-text);
}
#wpSearchInput::placeholder{ color:var(--wp-muted); }

/* ===== MODO COLAPSADO ===== */
html.sb-collapsed .wpSidebar{ width:68px; }
html.sb-collapsed .wpBrandMeta,
html.sb-collapsed .ml,
html.sb-collapsed .navSep{ display:none !important; }
html.sb-collapsed .menuItem{
  justify-content:center;
  margin:4px 8px;
}
html.sb-collapsed .sbEdgeToggle svg{ transform:rotate(180deg); }

/* ===== DASHBOARD / CARDS ===== */
.wpCard{
  background:var(--wp-card-bg);
  border:1px solid var(--wp-border);
  border-radius:var(--wp-radius);
  box-shadow:var(--wp-shadow);
  padding:16px;
}
.dash{ display:grid; gap:14px; }
.dashHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.dashTitle{ margin:0; font-size:22px; font-weight:900; }
.dashSub{ margin-top:4px; color:var(--wp-muted); font-size:13px; }

.kpiGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.kpiCard{
  background:#fff;
  border:1px solid var(--wp-border);
  border-radius:var(--wp-radius);
  padding:14px;
  box-shadow:var(--wp-shadow);
}
.kpiLabel{
  font-size:12px;
  color:var(--wp-muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.kpiValue{
  margin-top:6px;
  font-size:22px;
  font-weight:950;
  color:var(--wp-text);
}

.grid2{
  display:grid;
  grid-template-columns:1.35fr .85fr;
  gap:14px;
}

.list{
  margin:0; padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.listItem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--wp-border);
  border-radius:10px;
  background:#fff;
}
.listItem .meta{
  font-size:12.5px;
  color:var(--wp-muted);
  margin-top:2px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--wp-border);
  background:#fff;
  color:var(--wp-text);
}

.quickGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.quick{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--wp-border);
  background:#fff;
  text-decoration:none;
}
.quick .q1{ font-weight:900; color:var(--wp-text); }
.quick .q2{ font-size:12.5px; color:var(--wp-muted); }

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .kpiGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid2{ grid-template-columns:1fr; }
}

@media (max-width:980px){
  .wpSearch{ display:none; } /* luego lo hacemos “icon-only” si quieres */
}

/* Responsive: el contenedor se apila */
@media (max-width:680px){
  .wpShell{ flex-direction:column; }
  .wpSidebar{ width:100%; }
  .sbEdgeToggle{ display:none; } /* en móvil no conviene esa flecha lateral */
  html.sb-collapsed .wpSidebar{ width:100%; }
  html.sb-collapsed .wpBrandMeta,
  html.sb-collapsed .ml,
  html.sb-collapsed .navSep{ display:block !important; }
  html.sb-collapsed .menuItem{ justify-content:flex-start; }
}
/* ===== LEADS DRAWER (panel lateral derecho) ===== */
.drawerOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  z-index:9999;
}
.drawerOverlay.open{ display:block; }

.drawerPanel{
  position:absolute; top:0; right:0;
  height:100%;
  width:min(520px, 92vw);
  background:#fff;
  border-left:1px solid var(--wp-border);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}

.drawerHeader{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--wp-border);
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.drawerHeader .h1{
  font-weight:950; font-size:14px;
}
.drawerHeader .h2{
  color:var(--wp-muted); font-size:12.5px; margin-top:2px;
}
.drawerHeader .actions{
  margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;
}

.drawerTabs{
  display:flex;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--wp-border);
  overflow:auto;
}
.tabBtn{
  border:1px solid var(--wp-border);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:12.5px;
  cursor:pointer;
  white-space:nowrap;
}
.tabBtn.active{
  background:rgba(34,113,177,.12);
  border-color:rgba(34,113,177,.35);
}

.drawerBody{
  padding:14px;
  overflow:auto;
  flex:1;
}

.formGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media(max-width:520px){
  .formGrid2{ grid-template-columns:1fr; }
}

.miniHint{
  font-size:12.5px;
  color:var(--wp-muted);
  margin-top:6px;
}

.timeline{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.tItem{
  border:1px solid var(--wp-border);
  border-radius:12px;
  padding:10px 12px;
}
.tTop{
  display:flex; justify-content:space-between; gap:10px;
  font-weight:900; font-size:12.5px;
}
.tMeta{
  color:var(--wp-muted);
  font-size:12.5px;
  margin-top:4px;
  white-space:pre-wrap;
}
/* =========================================================
   FIX: legibilidad en panel (evita "muted" blanco sobre blanco)
   Solo afecta cuando estás dentro del panel .appShell/.wpShell
   ========================================================= */

.appShell .muted,
.wpShell .muted{
  color: var(--wp-muted) !important;
  opacity: 1 !important;
}

.appShell .hint,
.wpShell .hint{
  color: var(--wp-muted) !important;
  opacity: 1 !important;
}

/* placeholders en inputs del panel */
.appShell input::placeholder,
.appShell textarea::placeholder,
.appShell .field::placeholder{
  color: rgba(100, 105, 112, .78) !important; /* similar a --wp-muted */
  opacity: 1 !important;
}
/* ===== AJUSTES UI (Topbar + Scroll) ===== */
/* Topbar del mismo color que la sidebar */
.wpTopbar{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--wp-sb-bg);
  color:var(--wp-sb-fg-strong);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.wpCrumb .t2{ color:var(--wp-sb-fg); }

/* Buscador superior más pequeño y proporcional */
.wpSearch{
  flex:0 1 360px;
  max-width:360px;
  padding:7px 10px;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  margin-left:10px;
}
.wpSearch .sIcon{ opacity:.9; }

#wpSearchInput{
  font-size:13px;
  font-weight:650;
  color:var(--wp-sb-fg-strong);
  background:transparent;
}
#wpSearchInput::placeholder{ color:rgba(255,255,255,.55); }

/* Pill usuario y botón cerrar sesión coherentes con la topbar oscura */
.wpTopbar .userPill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:var(--wp-sb-fg-strong);
}
.wpTopbar .wpBtn{
  background:transparent;
  border-color:rgba(255,255,255,.14);
  color:var(--wp-sb-fg-strong);
}
.wpTopbar .wpBtn:hover{ background:rgba(255,255,255,.06); }

/* Responsive: en pantallas pequeñas el buscador no debe desbordar */
@media (max-width: 980px){
  .wpSearch{ flex:1; max-width:420px; }
}
@media (max-width: 680px){
  .wpSearch{ display:none; }
}
/* ===== FIX LAYOUT (quita espacio vacío, permite navegación, scroll solo en contenido) ===== */

/* La carcasa completa: sidebar + frame */
.wpShell{
  height:calc(100vh - 28px);
  overflow:hidden;
}

/* Frame derecho (topbar + contenido) */
.wpFrame{
  flex:1;
  min-width:0;             /* <- CLAVE: evita el espacio vacío a la derecha */
  display:flex;
  flex-direction:column;
  overflow:hidden;          /* <- CLAVE: evita scroll del frame */
  background:var(--wp-page-bg);
}

/* Topbar fija dentro del frame */
.wpTopbar{
  position:sticky;
  top:0;
  z-index:100;
}

/* SOLO el contenido scrollea */
.wpContent{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px;
  background:var(--wp-page-bg);
}
/* ===== TOPBAR OSCURA + SEARCH MÁS PEQUEÑA ===== */
.wpTopbar{
  background:var(--wp-sb-bg);
  color:var(--wp-sb-fg-strong);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.wpCrumb .t1{ color:var(--wp-sb-fg-strong); }
.wpCrumb .t2{ color:rgba(255,255,255,.65); }

.wpTopRight{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Buscador: compacto */
.wpSearch{
  flex:0 1 320px;
  max-width:320px;
  padding:7px 10px;
  margin-left:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
#wpSearchInput{
  font-size:13px;
  font-weight:650;
  color:var(--wp-sb-fg-strong);
  background:transparent;
}
#wpSearchInput::placeholder{ color:rgba(255,255,255,.55); }

@media (max-width: 980px){
  .wpSearch{ flex:1; max-width:420px; }
}
@media (max-width: 680px){
  .wpSearch{ display:none; }
}
/* ===== NOTIFICATIONS + USER LINK ===== */
.wpIconBtn{
  position:relative;
  height:36px;
  min-width:36px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--wp-sb-fg-strong);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.wpIconBtn:hover{ background:rgba(255,255,255,.08); }

.wpIconBtn .badge{
  position:absolute;
  top:-6px;
  right:-6px;
  height:18px;
  min-width:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--wp-accent);
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--wp-sb-bg);
}

.userLink{ text-decoration:none; }
.userLink:hover{ background:rgba(255,255,255,.08); }




/* ===== SIDEBAR FLYOUT VAR ===== */
html.sb-collapsed .wpShell{ --sbw:68px; }


/* ===== SIDEBAR FLYOUT (Office-like) ===== */
.sbFlyOverlay{
  position:absolute;
  top:0; right:0; bottom:0; left:var(--sbw);
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(1px);
  z-index:50;
}
.sbFlyout{
  position:absolute;
  top:70px;
  left:calc(var(--sbw) + 10px);
  width:320px;
  max-height:calc(100% - 90px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--wp-border);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  z-index:60;
}
.sbFlyHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid var(--wp-border);
}
.sbFlyHead .t1{ font-weight:950; font-size:13px; color:#111; }
.sbFlyHead .t2{ font-size:12px; color:var(--wp-muted); margin-top:2px; }
.sbFlyClose{
  border:1px solid var(--wp-border);
  background:#fff;
  border-radius:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.sbFlyGroup{ padding:10px 10px 6px; }
.sbFlyTitle{
  font-size:11px;
  color:var(--wp-muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:2px 4px 8px;
}
.sbFlyItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-decoration:none;
  padding:10px 10px;
  border-radius:12px;
  color:#111;
  font-weight:750;
}
.sbFlyItem:hover{ background:#f3f4f6; }
.sbFlyItem .sub{
  font-size:12px;
  color:var(--wp-muted);
  font-weight:650;
}
.sbFlySep{ height:1px; background:var(--wp-border); margin:6px 10px; }

/* Menu item with chevron (sidebar) */
.menuWithSub{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
}
.menuWithSub .menuLink{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:2px 0;
  text-decoration:none;
  color:inherit;
}
.menuWithSub:hover{ background:var(--wp-sb-bg-2); color:var(--wp-sb-fg-strong); }
.menuWithSub.active{ background:rgba(34,113,177,.22); color:var(--wp-sb-fg-strong); border-left:4px solid var(--wp-accent); }
.menuWithSub{ margin:2px 8px; border-radius:10px; border-left:4px solid transparent; }
.menuWithSub.active{ border-left-color:var(--wp-accent); }
.menuWithSub .menuChevron{
  width:34px;
  height:34px;
  margin-right:6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.95);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.menuWithSub .menuChevron:hover{ background:rgba(255,255,255,.10); }
.menuWithSub .menuChevron svg{ width:18px; height:18px; fill:currentColor; }

html.sb-collapsed .menuWithSub .menuLink{ justify-content:center; margin:4px 0; }
html.sb-collapsed .menuWithSub .menuChevron{ display:none; }