/* ═══════════════════════════════════════════════════════════
   MadWorks Team — Design System v3 (ProStream Exact Match)
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens — ProStream / Material Design 3 ─────── */
:root {
  /* ── Colores primarios ── */
  --ps-primary:              #4648d4;
  --ps-primary-h:            #2f2ebe;
  --ps-primary-container:    #6063ee;
  --ps-primary-fixed:        #e1e0ff;
  --ps-primary-fixed-dim:    #c0c1ff;
  --ps-on-primary:           #ffffff;
  --ps-on-primary-container: #fffbff;
  --ps-on-primary-fixed:     #07006c;

  /* ── Colores secundarios ── */
  --ps-secondary:            #006591;
  --ps-secondary-container:  rgba(57,184,253,.22);
  --ps-on-secondary-container: #004666;

  /* ── Superficies ── */
  --ps-background:           #faf8ff;
  --ps-surface:              #faf8ff;
  --ps-surface-bright:       #faf8ff;
  --ps-surface-dim:          #d2d9f4;
  --ps-surface-container-lowest: #ffffff;
  --ps-surface-container-low:    #f2f3ff;
  --ps-surface-container:        #eaedff;
  --ps-surface-container-high:   #e2e7ff;
  --ps-surface-container-highest:#dae2fd;

  /* ── Texto ── */
  --ps-on-surface:           #131b2e;
  --ps-on-background:        #131b2e;
  --ps-on-surface-variant:   #464554;

  /* ── Bordes ── */
  --ps-outline:              #767586;
  --ps-outline-variant:      #c7c4d7;

  /* ── Semánticos ── */
  --ps-error:                #ba1a1a;
  --ps-error-container:      #ffdad6;
  --ps-success:              #10b981;
  --ps-warning:              #f59e0b;

  /* ── Layout ── */
  --ps-sidebar-w:    256px;
  --ps-card-pad:     24px;
  --ps-page-margin:  40px;
  --ps-gap:          24px;
  --ps-section-gap:  32px;

  /* ── Shape ── */
  --ps-radius:       8px;
  --ps-radius-lg:    12px;
  --ps-radius-xl:    16px;
  --ps-radius-full:  9999px;

  /* ── Sombras ── */
  --ps-shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --ps-shadow:     0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.04);
  --ps-shadow-md:  0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.05);
  --ps-shadow-lg:  0 20px 25px -5px rgba(0,0,0,.08);

  /* ── Tipografía ── */
  --ps-font:        'Inter', system-ui, -apple-system, sans-serif;
  --ps-sz-headline-lg:  32px; --ps-lh-headline-lg:  40px;
  --ps-sz-headline-md:  24px; --ps-lh-headline-md:  32px;
  --ps-sz-headline-sm:  18px; --ps-lh-headline-sm:  24px;
  --ps-sz-body-lg:      16px; --ps-lh-body-lg:      24px;
  --ps-sz-body-md:      14px; --ps-lh-body-md:      20px;
  --ps-sz-label-caps:   12px; --ps-lh-label-caps:   16px;
  --ps-sz-stat:         28px; --ps-lh-stat:         32px;

  /* ── Transición ── */
  --ps-transition: .15s ease;

  /* Alias backward-compat para JS/clases que usan --mw-* */
  --mw-primary:      var(--ps-primary);
  --mw-primary-h:    var(--ps-primary-h);
  --mw-primary-bg:   var(--ps-primary-fixed);
  --mw-success:      var(--ps-success);
  --mw-warning:      var(--ps-warning);
  --mw-danger:       var(--ps-error);
  --mw-text:         var(--ps-on-surface);
  --mw-text-muted:   var(--ps-on-surface-variant);
  --mw-border:       var(--ps-outline-variant);
  --mw-border-light: #e2e8f0;
  --mw-surface:      var(--ps-surface-container-lowest);
  --mw-surface2:     var(--ps-surface-container);
  --mw-bg:           var(--ps-surface-container-low);
  --mw-radius:       var(--ps-radius);
  --mw-radius-lg:    var(--ps-radius-lg);
  --mw-shadow:       var(--ps-shadow);
  --mw-shadow-md:    var(--ps-shadow-md);
  --mw-transition:   var(--ps-transition);
  --mw-sidebar-bg:   var(--ps-surface-container-low);
  --mw-sidebar-w:    var(--ps-sidebar-w);
}

/* ── Reset aislado dentro de #mw-app ─────────────────────── */
#mw-app *, #mw-app *::before, #mw-app *::after {
  box-sizing: border-box;
}
/* Solo reseteamos elementos tipográficos y listas, NO divs/sections/main */
#mw-app h1, #mw-app h2, #mw-app h3, #mw-app h4, #mw-app h5, #mw-app h6,
#mw-app p { margin: 0; padding: 0; }
#mw-app ul, #mw-app ol { margin: 0; padding: 0; list-style: none; }
#mw-app a { text-decoration: none; }

#mw-app {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  font-family: var(--ps-font) !important;
  font-size: var(--ps-sz-body-md) !important;
  line-height: var(--ps-lh-body-md) !important;
  color: var(--ps-on-surface) !important;
  background: var(--ps-background) !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════════
   LOGIN — ProStream style
══════════════════════════════════════════════════════════ */
.mw-login-wrap {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ps-surface-container-low) !important;
  padding: 2rem !important;
}
.mw-login-card {
  background: var(--ps-surface-container-lowest);
  border: 1px solid var(--ps-outline-variant);
  border-radius: var(--ps-radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--ps-shadow-md);
}
.mw-login-logo { text-align: center; margin-bottom: 2rem; }
.mw-login-icon {
  width: 64px; height: 64px;
  background: var(--ps-primary-container);
  border-radius: var(--ps-radius);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.mw-login-icon img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
.mw-login-logo h1 { font-size: var(--ps-sz-headline-sm); font-weight: 700; color: var(--ps-on-surface); margin-bottom: .3rem; }
.mw-login-logo h1 span { color: var(--ps-primary); }
.mw-login-logo p { color: var(--ps-on-surface-variant); font-size: var(--ps-sz-body-md); }
.mw-login-card .login-username,
.mw-login-card .login-password,
.mw-login-card .login-remember { margin-bottom: 1rem !important; }
.mw-login-card label { display: block !important; color: var(--ps-on-surface-variant) !important; font-size: var(--ps-sz-label-caps) !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; margin-bottom: .4rem !important; }
.mw-login-card input[type="text"],
.mw-login-card input[type="password"] {
  width: 100% !important; box-sizing: border-box !important;
  background: var(--ps-surface-container-low) !important;
  border: 1px solid var(--ps-outline-variant) !important;
  border-radius: var(--ps-radius) !important;
  color: var(--ps-on-surface) !important;
  padding: .7rem 1rem !important;
  font-size: var(--ps-sz-body-md) !important;
  outline: none !important; box-shadow: none !important;
  transition: border-color var(--ps-transition) !important;
  font-family: var(--ps-font) !important;
}
.mw-login-card input:focus { border-color: var(--ps-primary) !important; box-shadow: 0 0 0 3px rgba(70,72,212,.12) !important; }
.mw-login-card .button-primary {
  width: 100% !important; box-sizing: border-box !important;
  background: var(--ps-primary) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--ps-radius) !important;
  padding: .75rem !important;
  font-size: var(--ps-sz-label-caps) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  cursor: pointer !important; margin-top: .5rem !important;
  transition: background var(--ps-transition) !important;
  font-family: var(--ps-font) !important;
}
.mw-login-card .button-primary:hover { background: var(--ps-primary-h) !important; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR — ProStream docked nav
══════════════════════════════════════════════════════════ */
.mw-sidebar {
  width: var(--ps-sidebar-w);
  min-width: var(--ps-sidebar-w);
  background: var(--ps-surface-container-low);
  border-right: 1px solid var(--ps-outline-variant);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

/* ── Área logo ── */
.mw-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 16px;
}
.mw-logo-icon-wrap {
  width: 40px; height: 40px;
  border-radius: var(--ps-radius);
  background: var(--ps-primary-container);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mw-logo-img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.mw-logo-info { flex: 1; min-width: 0; }
.mw-logo-text {
  font-size: var(--ps-sz-headline-sm);
  font-weight: 700;
  color: var(--ps-on-surface);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.mw-logo-sub {
  font-size: 12px;
  color: var(--ps-on-surface-variant);
  margin-top: 1px;
}
/* Compatibilidad con la clase anterior */
.mw-logo-text b { color: var(--ps-primary); }

/* ── Botón nueva tarea ── */
.mw-sidebar-newbtn {
  display: block !important;
  margin: 0 24px 8px !important;
  padding: 10px 16px !important;
  background: var(--ps-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ps-radius) !important;
  font-size: var(--ps-sz-label-caps) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: opacity var(--ps-transition) !important;
  font-family: var(--ps-font) !important;
  width: calc(100% - 48px) !important;
}
.mw-sidebar-newbtn:hover { opacity: .88 !important; }

/* ── Nav ── */
.mw-nav {
  padding: 8px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.mw-nav-item {
  /* Sin !important en display para que style="display:none" funcione */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--ps-radius);
  color: var(--ps-on-surface-variant);
  font-size: var(--ps-sz-label-caps);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--ps-transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--ps-font);
}
.mw-nav-item:hover {
  background: var(--ps-surface-container-high);
  color: var(--ps-on-surface);
}
.mw-nav-item.active {
  background: var(--ps-primary-container) !important;
  color: var(--ps-on-primary-container) !important;
}
.mw-nav-icon {
  font-size: 18px !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Dashicons dentro del nav */
.mw-nav-icon.dashicons {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
}

/* ── Footer sidebar ── */
.mw-sidebar-footer {
  border-top: 1px solid var(--ps-outline-variant);
  padding: 16px 8px;
}
.mw-sidebar-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.mw-sidebar-footer-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  border-radius: var(--ps-radius) !important;
  color: var(--ps-on-surface-variant) !important;
  font-size: var(--ps-sz-label-caps) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--ps-transition) !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  font-family: var(--ps-font) !important;
}
.mw-sidebar-footer-link:hover { background: var(--ps-surface-container-high) !important; color: var(--ps-on-surface) !important; }

.mw-team-presence { margin: 0 8px 8px; }
.mw-presence-title {
  font-size: var(--ps-sz-label-caps);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ps-on-surface-variant);
  margin-bottom: 6px;
  font-weight: 600;
  padding: 0 8px;
}
.mw-presence-list { display: flex; flex-direction: column; gap: 4px; }
.mw-presence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ps-on-surface-variant);
  padding: 0 8px;
}
.mw-presence-item img { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ps-success); flex-shrink: 0; }
.mw-presence-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ps-success);
  flex-shrink: 0;
  animation: mw-pulse 2s infinite;
}
@keyframes mw-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Usuario ── */
.mw-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--ps-radius);
  transition: background var(--ps-transition);
}
.mw-user-info:hover { background: var(--ps-surface-container-high); }
.mw-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ps-outline-variant);
  flex-shrink: 0;
  object-fit: cover;
}
.mw-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--ps-on-surface); }
.mw-logout { display: block; font-size: 11px; color: var(--ps-on-surface-variant); }
.mw-logout:hover { color: var(--ps-error) !important; }

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════ */
.mw-main {
  flex: 1;
  overflow-y: auto;
  background: var(--ps-background);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mw-screen {
  display: none;
  padding: var(--ps-page-margin);
  flex-direction: column;
  gap: var(--ps-section-gap);
  animation: mwFadeIn .18s ease;
  flex: 1;
  /* Centrado con ancho máximo */
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.mw-screen.active { display: flex; }
@keyframes mwFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ── Topbar por pantalla ─────────────────────────────────── */
.mw-topbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-topbar h2 {
  font-size: var(--ps-sz-headline-lg);
  font-weight: 700;
  color: var(--ps-on-surface);
  letter-spacing: -.02em;
  line-height: var(--ps-lh-headline-lg);
}
.mw-topbar-sub {
  font-size: var(--ps-sz-body-md) !important;
  color: var(--ps-on-surface-variant) !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
}
.mw-topbar > div { flex: 1; }
.mw-topbar-month {
  font-size: var(--ps-sz-label-caps);
  color: var(--ps-on-surface-variant);
  background: var(--ps-surface-container-low);
  border: 1px solid var(--ps-outline-variant);
  border-radius: var(--ps-radius);
  padding: 4px 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mw-topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Badge de estado del proyecto */
.mw-topbar-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--ps-secondary-container);
  color: var(--ps-on-secondary-container);
  border-radius: var(--ps-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-right: 12px;
}

/* Barra de navegación detalle cliente */
.mw-detail-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ps-surface-container-lowest);
  border: 1px solid var(--ps-outline-variant);
  border-radius: var(--ps-radius);
  padding: 12px 16px;
  box-shadow: var(--ps-shadow-sm);
}
.mw-breadcrumb {
  flex: 1;
  font-size: var(--ps-sz-body-md);
  color: var(--ps-on-surface-variant);
}
.mw-breadcrumb strong { color: var(--ps-on-surface); font-weight: 700; }

/* Tabs wrapper */
.mw-tabs-wrap {
  background: var(--ps-surface-container-lowest);
  border: 1px solid var(--ps-outline-variant);
  border-radius: var(--ps-radius) var(--ps-radius) 0 0;
  border-bottom: none;
  padding: 0 8px;
  box-shadow: var(--ps-shadow-sm);
}

/* Actividad reciente */
.mw-recent-list { display: flex; flex-direction: column; }
.mw-recent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ps-outline-variant);
  font-size: var(--ps-sz-body-md);
  position: relative;
}
.mw-recent-item:last-child { border-bottom: none; }
.mw-recent-dot-wrap {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ps-primary-fixed);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  border: 3px solid var(--ps-surface-container-lowest);
  z-index: 1;
}
.mw-recent-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ps-primary);
  margin-top: 4px;
  flex-shrink: 0;
}
.mw-recent-text { color: var(--ps-on-surface); line-height: 1.5; font-weight: 500; }
.mw-recent-time { color: var(--ps-on-surface-variant); font-size: 12px; margin-top: 2px !important; }

/* ══════════════════════════════════════════════════════════
   BOTONES — ProStream style
══════════════════════════════════════════════════════════ */
.mw-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: var(--ps-radius) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  font-size: var(--ps-sz-label-caps) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  transition: all var(--ps-transition) !important;
  white-space: nowrap !important;
  line-height: var(--ps-lh-label-caps) !important;
  font-family: var(--ps-font) !important;
}
.mw-btn--primary {
  background: var(--ps-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.mw-btn--primary:hover {
  background: var(--ps-primary-h) !important;
  box-shadow: var(--ps-shadow) !important;
}
.mw-btn--outline {
  background: transparent !important;
  color: var(--ps-on-surface) !important;
  border-color: var(--ps-outline-variant) !important;
}
.mw-btn--outline:hover {
  background: var(--ps-surface-container-low) !important;
}
.mw-btn--ghost {
  background: transparent !important;
  color: var(--ps-on-surface-variant) !important;
  border-color: var(--ps-outline-variant) !important;
}
.mw-btn--ghost:hover {
  background: var(--ps-surface-container-low) !important;
  color: var(--ps-on-surface) !important;
}
.mw-btn--danger {
  background: var(--ps-error) !important;
  color: #fff !important;
}
.mw-btn--danger:hover { filter: brightness(1.1) !important; }
.mw-btn--success { background: var(--ps-success) !important; color: #fff !important; }
.mw-btn--sm {
  padding: 4px 12px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
.mw-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ══════════════════════════════════════════════════════════
   INPUTS / FORMULARIOS — ProStream style
══════════════════════════════════════════════════════════ */
.mw-input, .mw-select, .mw-textarea {
  width: 100% !important;
  background: var(--ps-surface-container-low) !important;
  border: 1px solid var(--ps-outline-variant) !important;
  border-radius: var(--ps-radius) !important;
  color: var(--ps-on-surface) !important;
  padding: 10px 14px !important;
  font-size: var(--ps-sz-body-md) !important;
  outline: none !important;
  transition: border-color var(--ps-transition), box-shadow var(--ps-transition) !important;
  font-family: var(--ps-font) !important;
  line-height: var(--ps-lh-body-md) !important;
  box-shadow: none !important;
}
.mw-input:focus, .mw-select:focus, .mw-textarea:focus {
  border-color: var(--ps-primary) !important;
  background: var(--ps-surface-container-lowest) !important;
  box-shadow: 0 0 0 3px rgba(70,72,212,.12) !important;
}
.mw-textarea { resize: vertical !important; min-height: 80px !important; }
.mw-select option { background: #fff; color: var(--ps-on-surface); }
.mw-form-group { display: flex; flex-direction: column; gap: 6px; }
.mw-form-group label {
  font-size: var(--ps-sz-label-caps);
  color: var(--ps-on-surface-variant);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mw-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.mw-select--sm { padding: 4px 8px !important; font-size: 12px !important; }

/* ══════════════════════════════════════════════════════════
   KPI CARDS — ProStream metric card style
══════════════════════════════════════════════════════════ */
.mw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: var(--ps-gap);
}
.mw-kpi-card {
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  padding: var(--ps-card-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
  transition: box-shadow var(--ps-transition);
}
.mw-kpi-card:hover { box-shadow: var(--ps-shadow-md); }
.mw-kpi-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.mw-kpi-icon {
  width: 32px; height: 32px;
  border-radius: var(--ps-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--ps-surface-container-high);
  color: var(--ps-primary);
}
.mw-kpi-label {
  font-size: var(--ps-sz-label-caps);
  color: var(--ps-on-surface-variant);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mw-kpi-value {
  font-size: var(--ps-sz-stat);
  line-height: var(--ps-lh-stat);
  font-weight: 700;
  color: var(--ps-on-surface);
}

/* ══════════════════════════════════════════════════════════
   CHART / CONTENT CARDS — ProStream card style
══════════════════════════════════════════════════════════ */
.mw-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ps-gap);
}
.mw-chart-card {
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mw-chart-card-header {
  padding: 16px var(--ps-card-pad);
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mw-chart-card h4 {
  font-size: var(--ps-sz-headline-sm);
  font-weight: 600;
  color: var(--ps-on-surface);
  margin-bottom: 0 !important;
  letter-spacing: -.01em;
}
.mw-chart-card > h4 { padding: 16px var(--ps-card-pad) 0; }
.mw-chart-wrap {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px var(--ps-card-pad);
}
.mw-chart-wrap canvas { max-height: 200px; }
.mw-chart-empty {
  color: var(--ps-on-surface-variant);
  font-size: var(--ps-sz-body-md);
  text-align: center;
  padding: 2rem 1rem;
}
.mw-chart-empty-icon { font-size: 2rem; display: block; margin-bottom: 6px; opacity: .35; }

/* ══════════════════════════════════════════════════════════
   CLIENTES GRID
══════════════════════════════════════════════════════════ */
.mw-search-wrap { max-width: 360px; }
.mw-search-input { border-radius: var(--ps-radius-full) !important; }
.mw-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: var(--ps-gap);
}

/* ── Client card ── */
.mw-client-card {
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--ps-transition), transform var(--ps-transition);
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}
.mw-client-card:hover {
  box-shadow: var(--ps-shadow-md);
  transform: translateY(-2px);
}

/* Colored header de tarjeta cliente */
.mw-client-card-header {
  position: relative;
  height: 80px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
}
.mw-client-card-logo {
  position: relative;
  width: 52px; height: 52px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.mw-client-logo-img {
  position: absolute;
  width: 28px; height: 28px;
  object-fit: contain;
 /* filter: brightness(0) invert(1);*/
  opacity: .25;
}
.mw-client-level-badge {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  letter-spacing: -.02em;
  padding-top: 4px;
}
.mw-client-card-logo.mw-level-a { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.35); }
.mw-client-card-logo.mw-level-b { border-color: rgba(255,255,255,.5); }
.mw-client-card-logo.mw-level-c { border-color: rgba(255,255,255,.3); }
.mw-client-level-badge.mw-level-a { color: #fde68a; }
.mw-client-level-badge.mw-level-b { color: #fff; }
.mw-client-level-badge.mw-level-c { color: rgba(255,255,255,.75); }

.mw-client-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.mw-client-name { font-size: 15px; font-weight: 700; color: var(--ps-on-surface); margin-bottom: 2px; }
.mw-client-type { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ps-on-surface-variant); margin-bottom: 12px; font-weight: 600; }
.mw-client-stats { display: flex; gap: 20px; margin-bottom: 12px; flex: 1; align-items: flex-end; }
.mw-client-stat { display: flex; flex-direction: column; }
.mw-client-stat-val { font-size: 16px; font-weight: 700; color: var(--ps-on-surface); }
.mw-client-stat-label { font-size: 11px; color: var(--ps-on-surface-variant); font-weight: 500; }
.mw-client-actions { display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid #E2E8F0; padding-top: 12px; margin-top: auto; }

/* Status badges */
.mw-client-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 9px; border-radius: 99px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(4px); }
.mw-badge-active   { background: rgba(255,255,255,.92); color: #059669; }
.mw-badge-inactive { background: rgba(0,0,0,.28); color: #fecaca; }

/* ── Toolbar de filtros / ordenación de clientes ── */
.mw-clients-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.mw-clients-toolbar-left  { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; }
.mw-clients-toolbar-right { display: flex; gap: .4rem; align-items: center; }
.mw-sort-select {
  appearance: none;
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius-full);
  padding: .35rem .9rem .35rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ps-on-surface-variant);
  font-family: var(--ps-font);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  padding-right: 1.6rem;
  transition: border-color var(--ps-transition);
}
.mw-sort-select:hover,
.mw-sort-select:focus { border-color: var(--ps-primary); outline: none; }
.mw-view-toggle-clients {
  display: flex;
  gap: 2px;
  background: var(--ps-surface-container-low);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  padding: 2px;
}
.mw-view-btn-c {
  background: none;
  border: none;
  border-radius: 6px;
  padding: .3rem .45rem;
  cursor: pointer;
  color: var(--ps-on-surface-variant);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ps-transition), color var(--ps-transition);
}
.mw-view-btn-c .material-symbols-outlined { font-size: 18px !important; }
.mw-view-btn-c.active { background: var(--ps-primary); color: #fff; }
.mw-view-btn-c:not(.active):hover { background: var(--ps-surface-container); color: var(--ps-on-surface); }

/* ── Lista view para clients ── */
.mw-clients-grid.mw-list-view {
  grid-template-columns: 1fr;
  gap: .4rem;
}
.mw-clients-grid.mw-list-view .mw-client-card {
  flex-direction: row;
  height: 64px;
  overflow: visible;
}
.mw-clients-grid.mw-list-view .mw-client-card-header {
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: var(--ps-radius) 0 0 var(--ps-radius);
  padding: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mw-clients-grid.mw-list-view .mw-client-status-badge { display: none; }
.mw-clients-grid.mw-list-view .mw-client-card-logo {
  width: 38px; height: 38px;
}
.mw-clients-grid.mw-list-view .mw-client-card-body {
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  flex: 1;
  margin-bottom: 0;
}
.mw-clients-grid.mw-list-view .mw-client-name { font-size: 14px; min-width: 180px; flex: 1; margin-bottom: 0; }
.mw-clients-grid.mw-list-view .mw-client-type { margin-bottom: 0; font-size: 11px; min-width: 100px; }
.mw-clients-grid.mw-list-view .mw-client-stats { margin-bottom: 0; gap: 20px; flex: none; align-items: center; }
.mw-clients-grid.mw-list-view .mw-client-stat-val { font-size: 14px; }
.mw-clients-grid.mw-list-view .mw-client-date { margin-left: auto; margin-right: 8px; }
.mw-clients-grid.mw-list-view .mw-client-actions { border-top: none; padding-top: 0; margin-top: 0; }
.mw-client-date { font-size: 11px; color: var(--ps-on-surface-variant); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.mw-client-date .material-symbols-outlined { font-size: 13px !important; }

/* ── Header detalle cliente ── */
.mw-client-header {
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-bottom: none;
  border-radius: var(--ps-radius) var(--ps-radius) 0 0;
  padding: var(--ps-card-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
  align-items: start;
}
.mw-client-header-info h3 { font-size: var(--ps-sz-headline-sm); font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; }
.mw-client-header-info p { color: var(--ps-on-surface-variant); font-size: var(--ps-sz-body-md); line-height: 1.5; max-width: 500px; }
.mw-client-header-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mw-client-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ps-on-surface-variant); }
.mw-client-meta-item a { color: var(--ps-primary) !important; }

/* ── Tabs ── */
.mw-tabs {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid #E2E8F0 !important;
}
.mw-tab {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  margin-bottom: -2px !important;
  color: var(--ps-on-surface-variant) !important;
  cursor: pointer !important;
  font-size: var(--ps-sz-label-caps) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  transition: all var(--ps-transition) !important;
  font-family: var(--ps-font) !important;
  line-height: var(--ps-lh-label-caps) !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.mw-tab:hover { color: var(--ps-on-surface) !important; background: var(--ps-surface-container-low) !important; }
.mw-tab.active { color: var(--ps-primary) !important; border-bottom-color: var(--ps-primary) !important; background: none !important; }
.mw-tab-content {
  display: none;
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-top: none;
  border-radius: 0 0 var(--ps-radius) var(--ps-radius);
  padding: 12px var(--ps-card-pad) var(--ps-card-pad);
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
	margin-top: -30px;
}
.mw-tab-content.active { display: block; }

/* ── Filtros de tareas ── */
.mw-task-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.mw-filter-btn {
  background: var(--ps-surface-container-lowest) !important;
  border: 1px solid var(--ps-outline-variant) !important;
  color: var(--ps-on-surface-variant) !important;
  border-radius: var(--ps-radius-full) !important;
  padding: 4px 14px !important;
  font-size: var(--ps-sz-label-caps) !important;
  cursor: pointer !important;
  transition: all var(--ps-transition) !important;
  font-weight: 600 !important;
  font-family: var(--ps-font) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.mw-filter-btn:hover { border-color: var(--ps-primary) !important; color: var(--ps-primary) !important; }
.mw-filter-btn.active { background: var(--ps-primary) !important; border-color: var(--ps-primary) !important; color: #fff !important; }

/* ── Lista de tareas ── */
.mw-tasks-list { display: flex; flex-direction: column; }
.mw-task-item {
  background: var(--ps-surface-container-lowest);
  border-bottom: 1px solid #E2E8F0;
  padding: 16px;
  cursor: pointer;
  transition: background var(--ps-transition);
  display: flex;
  align-items: center;
  gap: 16px;
}
.mw-task-item:first-child { border-radius: var(--ps-radius) var(--ps-radius) 0 0; }
.mw-task-item:last-child  { border-radius: 0 0 var(--ps-radius) var(--ps-radius); border-bottom: none; }
.mw-task-item:only-child  { border-radius: var(--ps-radius); border-bottom: none; }
.mw-task-item:hover { background: var(--ps-surface-container-low); }
.mw-task-item--in_progress { border-left: 3px solid var(--ps-primary); }
.mw-task-item--todo        { border-left: 3px solid var(--ps-outline-variant); }
.mw-task-item--review      { border-left: 3px solid var(--ps-warning); }
.mw-task-item--done        { border-left: 3px solid var(--ps-success); opacity: .6; }
.mw-task-item-main { flex: 1; min-width: 0; }
.mw-task-title {
  font-size: var(--ps-sz-body-md);
  font-weight: 500;
  color: var(--ps-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.mw-task-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mw-task-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ps-on-surface-variant); }

/* Status / Priority badges */
.mw-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--ps-radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mw-status-todo        { background: var(--ps-surface-container-high); color: var(--ps-on-surface-variant); }
.mw-status-in_progress { background: rgba(70,72,212,.12); color: var(--ps-primary); }
.mw-status-review      { background: #fef9c3; color: #854d0e; }
.mw-status-done        { background: #dcfce7; color: #166534; }

.mw-priority-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mw-priority-low    { background: #dcfce7; color: #166534; }
.mw-priority-medium { background: #fef9c3; color: #854d0e; }
.mw-priority-high   { background: #fee2e2; color: #991b1b; }
.mw-priority-urgent { background: var(--ps-error); color: #fff; }
.mw-task-viewers-mini { display: flex; }
.mw-task-viewers-mini img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; }
.mw-task-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--ps-transition); }
.mw-task-item:hover .mw-task-actions { opacity: 1; }
.mw-task-time { font-size: 12px; color: var(--ps-on-surface-variant); font-weight: 600; white-space: nowrap; }

/* ── Backdrop del panel de tarea ── */
.mw-task-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15,17,30,.4);
  backdrop-filter: blur(2px);
}
.mw-task-panel-backdrop.open { display: block; }

/* ── Panel deslizante de tarea ── */
.mw-task-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 440px;
  max-width: 96vw;
  height: 100%;
  z-index: 260;
  display: flex;
  flex-direction: column;
  background: var(--ps-surface-container-lowest);
  border-left: 1px solid var(--ps-outline-variant);
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  transition: right .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.mw-task-panel.open { right: 0; }

/* ── Header del panel ── */
.mw-task-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ps-outline-variant);
  background: var(--ps-surface-container-low);
  flex-shrink: 0;
}
.mw-task-panel-header h3 {
  font-size: var(--ps-sz-headline-sm);
  font-weight: 700;
  color: var(--ps-on-surface);
  letter-spacing: -.01em;
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mw-task-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Body del panel ── */
.mw-task-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mw-task-panel-section {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  padding: 1rem;
}
.mw-task-panel-section h5 {
  font-size: .7rem;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: .65rem;
}
.mw-timer-display { font-size: 1.8rem; font-weight: 800; color: var(--mw-primary); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.mw-timer-controls { display: flex; gap: .5rem; margin-top: .65rem; }

/* Viewers ───────────────────────────────────────────────── */
.mw-viewers { display: flex; align-items: center; }
.mw-viewers img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--mw-primary); margin-left: -7px; }
.mw-viewers img:first-child { margin-left: 0; }
.mw-viewers-label { font-size: .7rem; color: var(--mw-text-muted); margin-left: .45rem; }

/* Comentarios ───────────────────────────────────────────── */
.mw-comments-list { display: flex; flex-direction: column; gap: .6rem; max-height: 260px; overflow-y: auto; }
.mw-comment-item { display: flex; gap: .55rem; }
.mw-comment-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--mw-border-light); }
.mw-comment-bubble {
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 10px;
  padding: .45rem .75rem;
  flex: 1;
}
.mw-comment-bubble--activity { background: transparent; border-color: transparent; padding-left: 0; }
.mw-comment-meta { font-size: .68rem; color: var(--mw-text-muted); margin-bottom: .15rem; font-weight: 600; }
.mw-comment-text { font-size: .81rem; color: var(--mw-text); line-height: 1.4; }
.mw-activity-text { color: var(--mw-text-muted) !important; font-style: italic; }
.mw-comment-form { display: flex; gap: .45rem; margin-top: .5rem; }
.mw-comment-form .mw-input { flex: 1; }

/* ── Claves seguras ─────────────────────────────────────── */
.mw-keys-list { display: flex; flex-direction: column; gap: .7rem; }
.mw-key-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--mw-shadow);
}
.mw-key-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.mw-key-name { font-weight: 700; flex: 1; color: var(--mw-text); font-size: .88rem; }
.mw-key-actions { display: flex; gap: .3rem; }
.mw-key-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.mw-key-field { display: flex; flex-direction: column; gap: .15rem; }
.mw-key-field label { font-size: .66rem; color: var(--mw-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.mw-key-val-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 7px;
  padding: .3rem .55rem;
}
.mw-key-val { flex: 1; font-family: 'Courier New', monospace; font-size: .78rem; color: var(--mw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-key-copy {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--mw-text-muted) !important;
  font-size: .85rem !important;
  transition: color var(--mw-transition) !important;
  padding: .1rem .15rem !important;
  border-radius: 4px !important;
}
.mw-key-copy:hover { color: var(--mw-primary) !important; background: var(--mw-primary-bg) !important; }
.mw-key-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--mw-text-muted) !important;
  font-size: .78rem !important;
  padding: .1rem !important;
}

/* ── Modales ────────────────────────────────────────────── */
.mw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,17,30,.5);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}
.mw-modal-backdrop.open { display: flex; }
.mw-modal {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  animation: mwModalIn .18s ease;
}
@keyframes mwModalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.mw-modal-header {
  display: flex;
  align-items: center;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--mw-border-light);
  flex-shrink: 0;
}
.mw-modal-header h3 { flex: 1; font-size: .95rem; font-weight: 800; color: var(--mw-text); }
.mw-modal-close {
  background: none !important;
  border: none !important;
  color: var(--mw-text-muted) !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: .2rem !important;
  border-radius: 6px !important;
  transition: all var(--mw-transition) !important;
}
.mw-modal-close:hover { background: var(--mw-surface2) !important; color: var(--mw-text) !important; }
.mw-modal-body {
  padding: 1.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.mw-modal-body hr { border: none; border-top: 1px solid var(--mw-border-light); margin: .2rem 0 !important; }
.mw-modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--mw-border-light);
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  flex-shrink: 0;
}

/* ── Tipo de proyecto ───────────────────────────────────── */
.mw-type-options { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.mw-type-option {
  border: 2px solid var(--mw-border-light);
  border-radius: 10px;
  padding: .8rem .6rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--mw-transition);
  background: var(--mw-surface2);
}
.mw-type-option:hover { border-color: var(--mw-primary); background: var(--mw-primary-bg); }
.mw-type-option.selected { border-color: var(--mw-primary); background: var(--mw-primary-bg); }
.mw-type-option-icon { font-size: 1.3rem; margin-bottom: .25rem; }
.mw-type-option-label { font-size: .75rem; font-weight: 700; color: var(--mw-text); }
.mw-type-cost-fields { display: none; }
.mw-type-cost-fields.active { display: grid; grid-template-columns: 1fr; gap: .8rem; }

/* ── Logs ───────────────────────────────────────────────── */
.mw-logs-list { display: flex; flex-direction: column; gap: .5rem; }
.mw-log-item {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 9px;
  padding: .8rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--mw-shadow);
}
.mw-log-info { font-size: .83rem; color: var(--mw-text); font-weight: 600; }
.mw-log-time { font-size: .73rem; color: var(--mw-text-muted); }
.mw-log-duration { font-size: .92rem; font-weight: 800; color: var(--mw-primary); }

/* ── Alerta colaboración ────────────────────────────────── */
.mw-collab-alert {
  background: var(--mw-primary-bg);
  border: 1.5px solid #c7d2fe;
  border-radius: 9px;
  padding: .6rem 1rem;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--mw-primary);
  font-weight: 600;
}

/* ── Toast ──────────────────────────────────────────────── */
.mw-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99998; display: flex; flex-direction: column; gap: .45rem; }
.mw-toast {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 10px;
  padding: .75rem 1rem;
  box-shadow: var(--mw-shadow-md);
  font-size: .83rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 220px;
  animation: mwToastIn .2s ease;
  color: var(--mw-text);
  font-weight: 500;
}
@keyframes mwToastIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.mw-toast--success { border-left: 4px solid var(--mw-success) !important; }
.mw-toast--error   { border-left: 4px solid var(--mw-danger) !important; }
.mw-toast--info    { border-left: 4px solid var(--mw-info) !important; }

/* ── Color picker ───────────────────────────────────────── */
.mw-color-picker { display: flex; gap: .4rem; flex-wrap: wrap; }
.mw-color-swatch {
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--mw-transition);
}
.mw-color-swatch:hover, .mw-color-swatch.selected { transform: scale(1.2); border-color: var(--mw-text); }

/* -- Estados vacios y loading -------------------------------------- */
.mw-loading { color: var(--mw-text-muted); font-size: .85rem; padding: 2.5rem; text-align: center; }
.mw-empty { color: var(--mw-text-muted); font-size: .85rem; padding: 3rem 1rem; text-align: center; }
.mw-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; display: block; }

/* ================================================================
   PANEL DERECHO
================================================================ */
:root { --mw-rpanel-w: 280px; }

.mw-right-panel {
  width: var(--mw-rpanel-w);
  min-width: var(--mw-rpanel-w);
  background: var(--mw-surface);
  border-left: 1px solid var(--mw-border-light);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: width .25s ease, min-width .25s ease;
  flex-shrink: 0;
}
.mw-right-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-left: none;
}

/* Toggle */
.mw-rpanel-toggle {
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  z-index: 10;
  width: 24px; height: 40px;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px 0 0 8px;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--mw-text-muted);
  transition: all var(--mw-transition);
  box-shadow: -2px 0 8px rgba(0,0,0,.06);
  padding: 0 !important;
  line-height: 1 !important;
}
.mw-rpanel-toggle:hover { color: var(--mw-primary); background: var(--mw-primary-bg); }
.mw-right-panel.collapsed .mw-rpanel-toggle {
  display: none;
}

/* Botón flotante para reabrir el panel derecho */
.mw-rpanel-open-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--mw-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.1rem .65rem .85rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99,102,241,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  animation: mw-fab-in .2s ease;
}
.mw-rpanel-open-fab:hover {
  background: var(--mw-primary-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99,102,241,.5);
}
@keyframes mw-fab-in {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Widgets superiores */
.mw-rpanel-widgets {
  overflow-y: auto;
  flex-shrink: 0;
  max-height: 50%;
  border-bottom: 1px solid var(--mw-border-light);
}
.mw-widget { border-bottom: 1px solid var(--mw-border-light); }
.mw-widget:last-child { border-bottom: none; }
.mw-widget-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  background: var(--mw-surface2);
  border-bottom: 1px solid var(--mw-border-light);
  cursor: pointer;
}
.mw-widget-icon { font-size: .9rem; flex-shrink: 0; }
.mw-widget-title { font-size: .75rem; font-weight: 700; color: var(--mw-text); flex: 1; letter-spacing: -.01em; }
.mw-widget-sub { font-size: .65rem; color: var(--mw-text-muted); background: var(--mw-surface2); border-radius: 4px; padding: .1rem .35rem; font-weight: 600; }
.mw-widget-body { padding: .7rem .9rem; }

/* Mi actividad hoy */
.mw-activity-today { text-align: center; padding: .3rem 0 .5rem; }
.mw-activity-hours { font-size: 1.5rem; font-weight: 800; color: var(--mw-primary); letter-spacing: -.02em; }
.mw-activity-label { font-size: .68rem; color: var(--mw-text-muted); font-weight: 500; }
.mw-active-timer {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: .45rem .7rem;
  font-size: .74rem;
  color: var(--mw-primary);
  font-weight: 600;
  margin-top: .5rem !important;
}
.mw-timer-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mw-danger);
  flex-shrink: 0;
  animation: mw-pulse 1s infinite;
}

/* Tareas urgentes y proximas */
.mw-widget-task-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--mw-border-light);
  cursor: pointer;
  transition: background var(--mw-transition);
  border-radius: 6px;
}
.mw-widget-task-item:last-child { border-bottom: none; }
.mw-widget-task-item:hover { background: var(--mw-surface2); }
.mw-widget-task-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .3rem; flex-shrink: 0; }
.mw-widget-task-info { flex: 1; min-width: 0; }
.mw-widget-task-title { font-size: .75rem; font-weight: 600; color: var(--mw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mw-widget-task-meta { font-size: .67rem; color: var(--mw-text-muted); display: block; margin-top: .08rem !important; }
.mw-widget-empty { text-align: center; font-size: .75rem; color: var(--mw-text-muted); padding: .8rem 0; }

/* -- CHAT ---------------------------------------------------------- */
.mw-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.mw-chat-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .9rem;
  background: var(--mw-surface2);
  border-bottom: 1px solid var(--mw-border-light);
  flex-shrink: 0;
}
.mw-chat-title { font-size: .78rem; font-weight: 700; color: var(--mw-text); flex: 1; }
.mw-chat-online {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  color: var(--mw-success);
  font-weight: 700;
  background: #d1fae5;
  border-radius: 99px;
  padding: .1rem .5rem;
}
.mw-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--mw-bg);
  min-height: 0;
}
.mw-chat-loading { font-size: .75rem; color: var(--mw-text-muted); text-align: center; padding: 1rem; }
.mw-msg { display: flex; gap: .5rem; align-items: flex-end; animation: mwFadeIn .15s ease; }
.mw-msg--mine { flex-direction: row-reverse; }
.mw-msg-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--mw-border-light); }
.mw-msg-content { max-width: 78%; }
.mw-msg-name { font-size: .65rem; color: var(--mw-text-muted); font-weight: 700; margin-bottom: .15rem !important; padding-left: .1rem; }
.mw-msg--mine .mw-msg-name { text-align: right; padding-right: .1rem; }
.mw-msg-bubble { padding: .5rem .75rem; border-radius: 14px; font-size: .78rem; line-height: 1.45; word-break: break-word; }
.mw-msg--other .mw-msg-bubble { background: var(--mw-surface); border: 1px solid var(--mw-border-light); color: var(--mw-text); border-bottom-left-radius: 4px; }
.mw-msg--mine  .mw-msg-bubble { background: var(--mw-primary); color: #fff; border-bottom-right-radius: 4px; }
.mw-msg-time { font-size: .62rem; color: var(--mw-text-muted); margin-top: .2rem !important; padding: 0 .15rem; }
.mw-msg--mine .mw-msg-time { text-align: right; }
.mw-chat-input-wrap {
  display: flex;
  gap: .4rem;
  align-items: flex-end;
  padding: .7rem .8rem;
  border-top: 1px solid var(--mw-border-light);
  background: var(--mw-surface);
  flex-shrink: 0;
}
.mw-chat-input {
  flex: 1;
  background: var(--mw-surface2) !important;
  border: 1px solid var(--mw-border-light) !important;
  border-radius: 20px !important;
  color: var(--mw-text) !important;
  padding: .5rem .9rem !important;
  font-size: .8rem !important;
  outline: none !important;
  resize: none !important;
  max-height: 80px;
  overflow-y: auto;
  font-family: inherit !important;
  line-height: 1.4 !important;
  transition: border-color var(--mw-transition) !important;
}
.mw-chat-input:focus { border-color: var(--mw-primary) !important; }
.mw-chat-send {
  width: 34px; height: 34px;
  background: var(--mw-primary) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0;
  transition: background var(--mw-transition) !important;
  padding: 0 !important;
}
.mw-chat-send:hover { background: var(--mw-primary-h) !important; }
.mw-chat-send svg { pointer-events: none; }

/* Toast -- adjust for right panel */
.mw-toast-container { right: calc(var(--mw-rpanel-w) + 1rem); }
.mw-right-panel.collapsed ~ .mw-toast-container { right: 1.5rem; }

/* ================================================================
   ADMINISTRACION
================================================================ */
.mw-admin-tabs-wrap {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius) var(--mw-radius) 0 0;
  border-bottom: none;
  padding: 0 .5rem;
  box-shadow: var(--mw-shadow);
}
.mw-admin-tabs { display: flex !important; gap: 0 !important; border-bottom: 2px solid var(--mw-border-light) !important; }
.mw-admin-tab {
  background: none !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  padding: .72rem 1.1rem !important;
  margin: 0 !important;
  margin-bottom: -2px !important;
  color: var(--mw-text-muted) !important;
  cursor: pointer !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  transition: all var(--mw-transition) !important;
  font-family: inherit !important;
  border-radius: 0 !important;
}
.mw-admin-tab:hover { color: var(--mw-text) !important; background: rgba(99,102,241,.04) !important; }
.mw-admin-tab.active { color: var(--mw-primary) !important; border-bottom-color: var(--mw-primary) !important; }
.mw-admin-tab-content {
  display: none;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-top: none;
  border-radius: 0 0 var(--mw-radius) var(--mw-radius);
  padding: 1.4rem;
  box-shadow: var(--mw-shadow);
	margin-top: -30px;
}
.mw-admin-tab-content.active { display: block; }

/* Tabla usuarios */
.mw-admin-table-wrap { overflow-x: auto; }
.mw-admin-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.mw-admin-table thead th {
  text-align: left;
  font-size: .7rem;
  color: var(--mw-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .6rem .8rem;
  border-bottom: 2px solid var(--mw-border-light);
  background: var(--mw-surface2);
}
.mw-admin-table tbody td { padding: .85rem .8rem; border-bottom: 1px solid var(--mw-border-light); vertical-align: middle; }
.mw-admin-table tbody tr:last-child td { border-bottom: none; }
.mw-admin-table tbody tr:hover td { background: var(--mw-surface2); }
.mw-user-cell { display: flex; align-items: center; gap: .7rem; }
.mw-user-table-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--mw-border-light); flex-shrink: 0; }
.mw-user-cell-name { font-weight: 700; color: var(--mw-text); font-size: .84rem; }
.mw-user-cell-email { font-size: .72rem; color: var(--mw-text-muted); margin-top: .05rem !important; }

/* Badges de rol */
.mw-role-badge { display: inline-block; padding: .2rem .65rem; border-radius: 99px; font-size: .69rem; font-weight: 700; letter-spacing: .02em; }
.mw-role-mw_admin  { background: #ede9fe; color: #5b21b6; }
.mw-role-mw_worker { background: #dbeafe; color: #1e40af; }
.mw-role-mw_client { background: #d1fae5; color: #065f46; }

/* Configuracion */
.mw-settings-card { max-width: 560px; display: flex; flex-direction: column; gap: 1rem; }
.mw-settings-card h4 { font-size: .8rem; color: var(--mw-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem !important; }
.mw-toggle-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: .6rem !important;
  cursor: pointer;
  font-size: .84rem;
  color: var(--mw-text);
  line-height: 1.4;
}
.mw-toggle-label input[type="checkbox"] { width: 16px !important; height: 16px !important; accent-color: var(--mw-primary); margin-top: .1rem; flex-shrink: 0; }

/* ================================================================
   PORTAL CLIENTE
================================================================ */
#screen-portal { gap: 1.2rem; }

.mw-portal-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  overflow: hidden;
  box-shadow: var(--mw-shadow);
}
.mw-portal-card-bar { height: 5px; display: block; width: 100%; }
.mw-portal-card-body { padding: 1.4rem; display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.mw-portal-card-info { flex: 1; }
.mw-portal-card-info h3 { font-size: 1.2rem; font-weight: 800; color: var(--mw-text); letter-spacing: -.02em; margin-bottom: .35rem !important; }
.mw-portal-card-info p { color: var(--mw-text-muted); font-size: .85rem; line-height: 1.5; }
.mw-portal-progress-wrap { min-width: 220px; flex: 1; }
.mw-portal-progress-bar {
  height: 12px;
  background: var(--mw-surface2);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .5rem !important;
  position: relative;
}
.mw-portal-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 99px;
  transition: width .8s ease;
  min-width: 4px;
}
.mw-portal-progress-label { font-size: .78rem; color: var(--mw-text-muted); font-weight: 700; }

/* KPIs portal */
.mw-portal-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.mw-portal-kpi {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--mw-shadow);
}
.mw-portal-kpi-val { font-size: 1.8rem; font-weight: 800; color: var(--mw-text); line-height: 1; margin-bottom: .3rem !important; }
.mw-portal-kpi-label { font-size: .7rem; color: var(--mw-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.mw-portal-section-title { font-size: .72rem; color: var(--mw-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: .9rem !important; }

/* Tareas portal */
#mwPortalTasks {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.2rem;
  box-shadow: var(--mw-shadow);
}
.mw-portal-task-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--mw-border-light); }
.mw-portal-task-item:last-child { border-bottom: none; }
.mw-portal-task-left { display: flex; align-items: flex-start; gap: .75rem; flex: 1; min-width: 0; }
.mw-portal-task-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem; }
.mw-portal-dot-todo        { background: #cbd5e1; }
.mw-portal-dot-in_progress { background: var(--mw-primary); }
.mw-portal-dot-review      { background: var(--mw-warning); }
.mw-portal-dot-done        { background: var(--mw-success); }
.mw-portal-task-title { font-size: .87rem; font-weight: 700; color: var(--mw-text); margin-bottom: .15rem !important; }
.mw-portal-task-desc  { font-size: .76rem; color: var(--mw-text-muted); line-height: 1.4; }
.mw-portal-task-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
#mwPortalActivity { display: flex; flex-direction: column; }
.mw-portal-error {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--mw-shadow);
}
.mw-portal-error-icon { font-size: 3rem; margin-bottom: 1rem; display: block; opacity: .5; }
.mw-portal-error h3 { font-size: 1rem; font-weight: 700; color: var(--mw-text); margin-bottom: .5rem !important; }
.mw-portal-error p { font-size: .84rem; color: var(--mw-text-muted); max-width: 380px; margin: 0 auto !important; line-height: 1.5; }

/* ================================================================
   BARRA SUPERIOR GLOBAL — Búsqueda + Notificaciones
================================================================ */
.mw-global-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1.5rem;
  background: var(--mw-surface);
  border-bottom: 1px solid var(--mw-border-light);
  position: sticky;
  top: 0;
  z-index: 100;
}
.mw-search-global-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
}

/* Icono de lupa dentro del campo de búsqueda */
.mw-search-global-icon {
  position: absolute;
  left: 12px;
  font-size: 18px !important;
  color: var(--ps-on-surface-variant);
  pointer-events: none;
  z-index: 1;
  line-height: 1 !important;
  display: flex !important;
}

.mw-search-global {
  width: 100%;
  padding: .45rem .9rem .45rem 2.4rem !important;
  border-radius: var(--ps-radius-full) !important;
  border: 1px solid var(--ps-outline-variant) !important;
  background: var(--ps-surface-container-low) !important;
  font-size: .84rem;
  color: var(--ps-on-surface);
  transition: border-color .2s, box-shadow .2s;
}
.mw-search-global:focus {
  outline: none;
  border-color: var(--ps-primary) !important;
  box-shadow: 0 0 0 3px rgba(70,72,212,.1) !important;
  background: var(--ps-surface-container-lowest) !important;
}
.mw-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 200;
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.mw-search-section {
  padding: .45rem .9rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mw-text-muted);
  background: var(--mw-bg);
}
.mw-search-result {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  cursor: pointer;
  transition: background .15s;
  font-size: .84rem;
}
.mw-search-result:hover { background: var(--mw-surface2); }
.mw-search-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mw-search-result-name { flex: 1; font-weight: 500; color: var(--mw-text); }
.mw-search-result-meta { font-size: .74rem; color: var(--mw-text-muted); white-space: nowrap; }
.mw-search-empty { padding: 1rem; font-size: .82rem; color: var(--mw-text-muted); text-align: center; }

.mw-topbar-right { display: flex; align-items: center; gap: .5rem; }

/* Boton campana */
.mw-notif-btn {
  position: relative;
  background: none !important;
  border: none !important;
  border-radius: var(--ps-radius-full) !important;
  padding: .45rem !important;
  cursor: pointer;
  line-height: 1;
  color: var(--ps-on-surface-variant);
  transition: background .15s, color .15s;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mw-notif-btn .material-symbols-outlined { font-size: 22px !important; }
.mw-notif-btn:hover { background: var(--ps-surface-container-high) !important; color: var(--ps-primary) !important; }
.mw-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--mw-danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 5px;
  line-height: 1.4;
  min-width: 16px;
  text-align: center;
}

/* ================================================================
   PANEL DE NOTIFICACIONES
================================================================ */
.mw-notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
}
.mw-notif-panel {
  position: fixed;
  top: 52px;
  right: 1rem;
  width: 340px;
  max-height: 480px;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mw-notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--mw-border-light);
  font-size: .85rem;
  font-weight: 700;
  color: var(--mw-text);
}
.mw-notif-mark-all {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mw-primary);
  font-size: .75rem;
  padding: 0;
}
.mw-notif-mark-all:hover { text-decoration: underline; }
.mw-notif-list { overflow-y: auto; flex: 1; }
.mw-notif-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--mw-border-light);
  transition: background .15s;
  position: relative;
}
.mw-notif-item:hover { background: var(--mw-bg); }
.mw-notif-unread { background: rgba(99,102,241,.06); }
.mw-notif-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.mw-notif-body { flex: 1; }
.mw-notif-msg { font-size: .82rem; color: var(--mw-text); line-height: 1.4; }
.mw-notif-time { font-size: .72rem; color: var(--mw-text-muted); margin-top: 2px; }
.mw-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mw-primary);
  flex-shrink: 0;
  margin-top: 5px;
}
.mw-notif-empty { padding: 1.5rem; text-align: center; font-size: .82rem; color: var(--mw-text-muted); }

/* ================================================================
   TOOLBAR DE TAREAS — Filtros + toggle Vista
================================================================ */
.mw-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
}
.mw-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--mw-bg);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  padding: 2px;
}
.mw-view-btn {
  background: none;
  border: none;
  border-radius: 6px;
  padding: .3rem .7rem;
  font-size: .8rem;
  cursor: pointer;
  color: var(--mw-text-muted);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.mw-view-btn:not(.active):hover {
  background: var(--ps-surface-container-high, #e8e8f0);
  color: var(--ps-on-surface, #1c1b1f);
}
.mw-view-btn.active {
  background: var(--ps-primary, var(--mw-primary));
  color: #fff;
}
.mw-view-btn.active:hover {
  background: var(--ps-primary, var(--mw-primary));
  color: #fff;
}

/* ── Drag & Drop ────────────────────────────────────────────────────────── */
.mw-drag-handle {
  display: flex;
  align-items: center;
  cursor: grab;
  color: var(--ps-on-surface-variant, #888);
  padding: 0 .25rem 0 0;
  opacity: .4;
  flex-shrink: 0;
}
.mw-drag-handle:active { cursor: grabbing; }
.mw-task-item:hover .mw-drag-handle { opacity: .85; }
.mw-task-item.mw-dragging { opacity: .35; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.mw-task-item.mw-drag-over { border-top: 2px solid var(--ps-primary, #6366f1); margin-top: -2px; }
.mw-client-card.mw-dragging { opacity: .35; transform: scale(.97); }
.mw-client-card.mw-drag-over { outline: 2px dashed var(--ps-primary, #6366f1); outline-offset: 2px; }
.mw-client-card { cursor: default; }
.mw-client-card[draggable="true"] { cursor: grab; }
.mw-client-card[draggable="true"]:active { cursor: grabbing; }

/* ================================================================
   KANBAN BOARD
================================================================ */
.mw-kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
  padding-bottom: 2rem;
}
.mw-kanban-col {
  background: var(--mw-bg);
  border-radius: 12px;
  padding: .75rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mw-kanban-col-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--mw-border-light);
}
.mw-kanban-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.mw-kanban-count {
  margin-left: auto;
  background: var(--mw-surface2);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: .7rem;
  color: var(--mw-text-muted);
}
.mw-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 60px;
  border-radius: 8px;
  transition: background .15s;
}
.mw-kanban-cards.mw-kanban-over {
  background: rgba(99,102,241,.08);
  outline: 2px dashed var(--mw-primary);
}
.mw-kanban-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  padding: .65rem .75rem;
  cursor: grab;
  transition: box-shadow .15s, transform .1s;
  user-select: none;
}
.mw-kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.mw-kanban-card.mw-kanban-dragging {
  opacity: .5;
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  cursor: grabbing;
}
.mw-kanban-card-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--mw-text);
  margin-bottom: .4rem;
  line-height: 1.35;
}
.mw-kanban-card-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.mw-kanban-assignee { font-size: .72rem; color: var(--mw-text-muted); }
.mw-kanban-card-date { font-size: .71rem; color: var(--mw-text-muted); margin-top: .35rem; }
.mw-kanban-empty {
  font-size: .78rem;
  color: var(--mw-text-muted);
  text-align: center;
  padding: 1rem 0;
  font-style: italic;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 960px) {
  .mw-charts-grid { grid-template-columns: 1fr; }
  .mw-form-row, .mw-form-row-3 { grid-template-columns: 1fr; }
  .mw-task-panel { width: 100%; right: -100%; }
  .mw-client-header { grid-template-columns: 1fr; }
  .mw-kanban-board { grid-template-columns: repeat(2, 1fr); }
  .mw-notif-panel { width: calc(100vw - 2rem); right: 1rem; }
}
@media (max-width: 640px) {
  .mw-screen { padding: 1.2rem 1rem; }
  .mw-sidebar { width: 54px; min-width: 54px; }
  .mw-logo-text, .mw-nav-item span:not(.mw-nav-icon) { display: none; }
  .mw-nav-item { justify-content: center; padding: .6rem !important; }
  .mw-sidebar-footer .mw-team-presence, .mw-user-name, .mw-logout { display: none; }
  .mw-kanban-board { grid-template-columns: 1fr; }
  .mw-global-topbar { padding: .5rem .75rem; }
}

/* ================================================================
   CALENDARIO — Vista mensual
================================================================ */
#screen-calendar { padding: 1.5rem 2rem; }

.mw-calendar-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mw-calendar-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mw-text);
  min-width: 180px;
  text-align: center;
}

.mw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 12px;
  overflow: hidden;
}

.mw-cal-day-name {
  background: var(--mw-surface);
  padding: .4rem .3rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mw-cal-cell {
  background: var(--mw-bg);
  min-height: 90px;
  padding: .4rem .3rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mw-cal-empty { background: var(--mw-surface); }
.mw-cal-today { background: color-mix(in srgb, var(--mw-primary) 8%, var(--mw-bg)); }
.mw-cal-today .mw-cal-day-num { color: var(--mw-primary); font-weight: 800; }

.mw-cal-day-num {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mw-text-muted);
  margin-bottom: 2px;
}

.mw-cal-task {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  border-left: 3px solid #6366f1;
  background: var(--mw-surface);
  cursor: pointer;
  font-size: .68rem;
  line-height: 1.3;
  transition: opacity .15s;
  overflow: hidden;
}
.mw-cal-task:hover { opacity: .8; }
.mw-cal-task--done { opacity: .45; }

.mw-cal-task-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6366f1;
}

.mw-cal-task-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mw-text);
}

.mw-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: 1rem;
  padding: .6rem 1rem;
  background: var(--mw-surface);
  border-radius: 8px;
  font-size: .78rem;
}
.mw-cal-legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--mw-text-muted);
}

@media (max-width: 960px) {
  .mw-cal-cell { min-height: 60px; }
  .mw-cal-task-title { display: none; }
}
@media (max-width: 640px) {
  #screen-calendar { padding: 1rem .75rem; }
  .mw-cal-cell { min-height: 44px; padding: 2px; }
  .mw-cal-day-name { font-size: .6rem; padding: .25rem .1rem; }
}

/* ================================================================
   ADJUNTOS — Panel lateral de tarea
================================================================ */
.mw-task-panel-attachments {
  padding: 1rem;
  border-top: 1px solid var(--mw-border-light);
}
.mw-task-panel-attachments h5 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mw-text-muted);
  margin-bottom: .6rem;
}

.mw-attach-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
}

.mw-attach-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.mw-attach-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  background: var(--mw-bg);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  transition: border-color .15s;
}
.mw-attach-item:hover { border-color: var(--mw-primary); }

.mw-attach-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.mw-attach-info {
  flex: 1;
  min-width: 0;
}

.mw-attach-name {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mw-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.mw-attach-name:hover { text-decoration: underline; }

.mw-attach-meta {
  font-size: .7rem;
  color: var(--mw-text-muted);
}

.mw-attach-del {
  background: none;
  border: none;
  color: var(--mw-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.mw-attach-del:hover { color: var(--mw-danger); background: color-mix(in srgb, var(--mw-danger) 10%, transparent); }

.mw-attach-empty {
  font-size: .78rem;
  color: var(--mw-text-muted);
  padding: .3rem 0;
  font-style: italic;
}

.mw-attach-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--mw-text-muted);
  padding: .4rem 0;
}
.mw-attach-progress::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--mw-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mwSpin .7s linear infinite;
  flex-shrink: 0;
}

.mw-task-panel-attachments.mw-attach-dragover {
  background: color-mix(in srgb, var(--mw-primary) 6%, var(--mw-surface));
  border-color: var(--mw-primary);
  border-style: dashed;
}

/* ================================================================
   CALENDARIO — mejoras v2 (tarjetas enriquecidas + panel detalle)
================================================================ */

/* Layout principal: grid + panel lateral */
.mw-cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: start;
  transition: grid-template-columns .25s ease;
}
.mw-cal-layout:has(#mwCalDetail.open) {
  grid-template-columns: 1fr 300px;
}

/* Tarjetas con más info */
.mw-cal-task-top {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.mw-cal-task-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.mw-cal-task-client {
  font-size: .62rem;
  color: var(--mw-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.mw-cal-task-prio {
  font-size: .6rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mw-cal-task-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: .55rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tareas que abarcan varios días */
.mw-cal-task--span {
  border-radius: 0;
  border-left: none;
  border-right: none;
  background: color-mix(in srgb, var(--cal-task-color,#6366f1) 12%, transparent);
  opacity: .8;
}
.mw-cal-task--span-start {
  border-radius: 4px 0 0 4px;
  border-right: none;
  background: color-mix(in srgb, var(--cal-task-color,#6366f1) 15%, transparent);
}
.mw-cal-task--span-end {
  border-radius: 0 4px 4px 0;
  border-left: none;
  background: color-mix(in srgb, var(--cal-task-color,#6366f1) 15%, transparent);
}

/* "+N más" badge */
.mw-cal-more {
  font-size: .65rem;
  color: var(--mw-primary);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
  background: color-mix(in srgb, var(--mw-primary) 10%, transparent);
  margin-top: 2px;
  display: inline-block;
}
.mw-cal-more:hover { background: color-mix(in srgb, var(--mw-primary) 20%, transparent); }

/* Fines de semana */
.mw-cal-weekend { background: color-mix(in srgb, var(--mw-text-muted) 4%, var(--mw-bg)); }

/* ── Panel lateral de detalle ── */
.mw-cal-detail {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 14px;
  overflow: hidden;
  max-height: 80vh;
  overflow-y: auto;
  position: sticky;
  top: 1rem;
  display: none;
  flex-direction: column;
}
.mw-cal-detail.open { display: flex; }

.mw-cal-detail-header {
  padding: 1.1rem 1rem .8rem;
  border-left: 4px solid #6366f1;
  position: relative;
}
.mw-cal-detail-client {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}
.mw-cal-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mw-text);
  line-height: 1.3;
  padding-right: 2rem;
}
.mw-cal-detail-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--mw-text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.mw-cal-detail-close:hover { background: var(--mw-surface2); }

.mw-cal-detail-body {
  padding: .8rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mw-cal-detail-badges {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.mw-cal-detail-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .6rem;
  font-size: .8rem;
}
.mw-cal-detail-dl dt {
  color: var(--mw-text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.mw-cal-detail-dl dd {
  color: var(--mw-text);
  font-weight: 500;
  word-break: break-word;
}

.mw-cal-detail-progress {
  background: var(--mw-surface2);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.mw-cal-detail-progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}
.mw-cal-detail-pct {
  font-size: .72rem;
  color: var(--mw-text-muted);
}

/* Responsive: en móvil el panel cae debajo */
@media (max-width: 900px) {
  .mw-cal-layout:has(#mwCalDetail.open) {
    grid-template-columns: 1fr;
  }
  .mw-cal-detail.open {
    position: static;
    max-height: none;
  }
  .mw-cal-task-meta { display: none; }
}

/* Navegación de mes: centrado más limpio */
.mw-cal-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mw-cal-month-label {
  font-weight: 700;
  font-size: 1rem;
  min-width: 140px;
  text-align: center;
}

/* ================================================================
   GESTOR PRINCIPAL — badge admin y estilos de campo
================================================================ */
.mw-manager-field {
  background: color-mix(in srgb, var(--mw-primary) 5%, var(--mw-surface));
  border: 1px solid color-mix(in srgb, var(--mw-primary) 20%, var(--mw-border));
  border-radius: 10px;
  padding: .7rem .9rem;
}
.mw-manager-field label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.mw-badge-admin {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--mw-primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: auto;
}

/* Badge en la cabecera del cliente */
.mw-manager-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--mw-primary) 8%, var(--mw-surface));
  border: 1px solid color-mix(in srgb, var(--mw-primary) 25%, var(--mw-border));
  border-radius: 99px;
  padding: 2px 10px 2px 4px;
  color: var(--mw-text);
  font-size: .78rem;
}
.mw-user-avatar-inline {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Gestor en el panel de tarea */
.mw-manager-inline {
  color: var(--mw-primary);
}

/* Badge en la lista de tareas */
.mw-task-manager-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .68rem;
  color: var(--mw-primary);
  background: color-mix(in srgb, var(--mw-primary) 8%, transparent);
  border-radius: 99px;
  padding: 1px 7px;
  font-weight: 600;
}

/* ================================================================
   PERFIL DE USUARIO
================================================================ */
#screen-profile { padding: 1.5rem 2rem; }

.mw-profile-layout { max-width: 860px; }

.mw-profile-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Columna izquierda ── */
.mw-profile-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.mw-profile-avatar-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.mw-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mw-primary);
  box-shadow: 0 4px 16px rgba(99,102,241,.25);
  display: block;
}

.mw-profile-avatar-btn {
  position: absolute;
  bottom: 28px;
  right: -4px;
  width: 32px;
  height: 32px;
  background: var(--mw-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .15s, background .15s;
  user-select: none;
}
.mw-profile-avatar-btn:hover { transform: scale(1.12); background: var(--mw-primary-dark, #4f46e5); }

.mw-profile-avatar-hint {
  font-size: .68rem;
  color: var(--mw-text-muted);
  text-align: center;
}

.mw-profile-role-badge {
  background: color-mix(in srgb, var(--mw-primary) 10%, var(--mw-surface));
  border: 1px solid color-mix(in srgb, var(--mw-primary) 25%, var(--mw-border));
  color: var(--mw-primary);
  border-radius: 99px;
  padding: .3rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}

/* ── Columna derecha: cards ── */
.mw-profile-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.mw-profile-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}
.mw-profile-card h3 {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--mw-text);
  border-bottom: 1px solid var(--mw-border-light);
  padding-bottom: .6rem;
}

.mw-profile-actions {
  margin-top: .8rem;
  display: flex;
  justify-content: flex-end;
}

/* ── Password eye toggle ── */
.mw-input-eye-wrap {
  position: relative;
}
.mw-input-eye-wrap .mw-input {
  padding-right: 2.4rem;
}
.mw-input-eye {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  padding: 2px;
  color: var(--mw-text-muted);
  line-height: 1;
}
.mw-input-eye:hover { color: var(--mw-text); }

/* Sidebar avatar clickable */
.mw-user-info { border-radius: 10px; padding: .3rem .4rem; transition: background .15s; }
.mw-user-info:hover { background: color-mix(in srgb, var(--mw-primary) 10%, transparent); }

@media (max-width: 720px) {
  .mw-profile-grid { grid-template-columns: 1fr; }
  .mw-profile-left { flex-direction: row; gap: 1.2rem; align-items: flex-start; }
  .mw-profile-avatar { width: 80px; height: 80px; }
  #screen-profile { padding: 1rem .75rem; }
}

/* ══════════════════════════════════════════════════════════
   TOOLBAR DE CLIENTE
══════════════════════════════════════════════════════════ */
.mw-client-toolbar {
  display: flex;
  gap: .5rem;
  padding: .65rem var(--ps-card-pad);
  margin-bottom: .75rem;
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-top: 1px solid #eef0f7;
  border-radius: 0 0 var(--ps-radius) var(--ps-radius);
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05);
	margin-top: -30px;
}
.mw-ctool-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border-radius: var(--ps-radius-full);
  background: color-mix(in srgb, var(--ps-primary) 6%, white);
  border: 1px solid color-mix(in srgb, var(--ps-primary) 22%, #E2E8F0);
  color: var(--ps-on-surface-variant);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ps-transition);
  position: relative;
  letter-spacing: .01em;
}
.mw-ctool-btn:hover {
  border-color: var(--ps-primary);
  color: var(--ps-primary);
  background: color-mix(in srgb, var(--ps-primary) 10%, white);
}
.mw-ctool-btn.active {
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: #fff;
}
/* Aviso luminoso: pulso al recibir mensajes no leídos */
@keyframes mw-msg-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.7); border-color: #ef4444; }
  50%  { box-shadow: 0 0 0 7px rgba(239,68,68,.0); border-color: #ef4444; }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); border-color: var(--mw-border-light); }
}
.mw-ctool-btn.mw-has-unread {
  border-color: #ef4444;
  color: #ef4444;
  animation: mw-msg-pulse 1.6s ease-in-out infinite;
}
.mw-ctool-btn.mw-has-unread .mw-ctool-badge {
  animation: none;
}
.mw-ctool-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
}
.mw-ctool-badge {
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 99px;
  padding: .1rem .4rem;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* ── Panel genérico de cliente ──────────────────────────── */
.mw-client-panel {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  animation: mw-panel-in .15s ease;
}
@keyframes mw-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mw-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
/* Título con icono Material Symbols al lado */
.mw-panel-header-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ps-on-surface);
}
.mw-panel-header-title .material-symbols-outlined {
  font-size: 20px !important;
  color: var(--ps-primary);
  flex-shrink: 0;
}
.mw-panel-header h4,
.mw-panel-header-title h4 {
  margin: 0 !important;
  font-size: var(--ps-sz-headline-sm) !important;
  font-weight: 700 !important;
  color: var(--ps-on-surface) !important;
  letter-spacing: -.01em !important;
}
.mw-panel-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Título de adjuntos en el panel de tarea */
.mw-attach-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--ps-sz-label-caps);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ps-on-surface-variant);
}
.mw-select--sm { font-size: .78rem; padding: .25rem .5rem; height: 30px; }
.mw-empty-msg { color: var(--mw-text-muted); font-size: .85rem; padding: 1.5rem 0; text-align: center; }

/* ══════════════════════════════════════════════════════════
   DOCUMENTOS DE CLIENTE
══════════════════════════════════════════════════════════ */
.mw-docs-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .9rem;
}
.mw-doc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: calc(var(--mw-radius) - 2px);
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  transition: background var(--mw-transition);
}
.mw-doc-item:hover { background: color-mix(in srgb, var(--mw-primary) 5%, var(--mw-surface2)); }
.mw-doc-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; }
.mw-doc-info { flex: 1; min-width: 0; }
.mw-doc-name {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--mw-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-doc-name:hover { text-decoration: underline; }
.mw-doc-meta { font-size: .7rem; color: var(--mw-text-muted); margin-top: .1rem; display: block; }

/* ══════════════════════════════════════════════════════════
   MENSAJES CLIENTE ↔ EQUIPO
══════════════════════════════════════════════════════════ */
.mw-msgs-thread {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem 0;
  margin-top: .75rem;
  border-top: 1px solid var(--mw-border-light);
  border-bottom: 1px solid var(--mw-border-light);
}
.mw-msgs-thread--portal { max-height: 280px; }
.mw-msg-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.mw-msg-row.mw-msg-team { flex-direction: row-reverse; }
.mw-msg-bubble {
 /* max-width: 78%;*/
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 12px;
  padding: .55rem .8rem;
}
.mw-msg-row.mw-msg-team .mw-msg-bubble {
  background: color-mix(in srgb, var(--mw-primary) 12%, var(--mw-surface));
  border-color: color-mix(in srgb, var(--mw-primary) 25%, var(--mw-border));
}
.mw-msg-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.mw-msg-name { font-size: .72rem; font-weight: 700; color: var(--mw-text); }
.mw-msg-time { font-size: .68rem; color: var(--mw-text-muted); }
.mw-msg-text { font-size: .83rem; color: var(--mw-text); line-height: 1.45; }
.mw-msgs-compose {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  margin-top: .75rem;
}
.mw-msgs-input {
  flex: 1;
  resize: none;
  min-height: 48px;
  font-size: .84rem;
}
.mw-portal-msgs-section {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.1rem 1.2rem;
  margin-top: 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   PORTAL CLIENTE — Claves + Docs grid
══════════════════════════════════════════════════════════ */
.mw-portal-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (max-width: 720px) {
  .mw-portal-bottom-grid { grid-template-columns: 1fr; }
}
.mw-portal-section-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.mw-portal-key-form {
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: calc(var(--mw-radius) - 2px);
  padding: .75rem;
}
.mw-portal-keys-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.mw-portal-key-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  border-radius: calc(var(--mw-radius) - 2px);
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
}
.mw-portal-key-icon { font-size: 1.1rem; flex-shrink: 0; }
.mw-portal-key-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.mw-portal-key-name  { font-size: .83rem; font-weight: 700; color: var(--mw-text); }
.mw-portal-key-meta  { font-size: .7rem; color: var(--mw-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* ======================================================
   EMAIL SETTINGS
====================================================== */
.mw-email-settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 820px;
}
.mw-email-section {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--mw-shadow);
}
.mw-email-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mw-email-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 .3rem;
}
.mw-email-section-sub {
  font-size: .8rem;
  color: var(--mw-text-muted);
  margin: 0;
}
.mw-email-section-sub code {
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: .78rem;
  color: var(--mw-primary);
}
.mw-email-section--actions {
  background: var(--mw-surface2);
}

/* Notif rows */
.mw-email-notif-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1rem;
}
.mw-email-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 10px;
  padding: .75rem 1rem;
  transition: border-color var(--mw-transition);
}
.mw-email-notif-row:hover { border-color: var(--mw-primary); }

/* ================================================================
   PRESUPUESTOS
================================================================ */

/* Modal overlay reutilizable */
.mw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,17,30,.5);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}
.mw-modal--lg { max-width: 680px !important; }
.mw-input--sm { padding: .4rem .65rem !important; font-size: .82rem !important; }
.mw-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Lista de presupuestos */
.mw-budgets-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.mw-budget-card {
  background: var(--ps-surface-container-lowest);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 0 1rem;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow var(--ps-transition), transform var(--ps-transition);
  cursor: default;
}
.mw-budget-card:hover {
  box-shadow: var(--ps-shadow-md);
  transform: translateY(-1px);
}
.mw-budget-card-stripe {
  width: 4px;
  height: 100%;
  border-radius: 99px;
  background: var(--ps-primary);
  align-self: stretch;
  margin: -1rem 0;
}
.mw-budget-card-stripe--borrador  { background: #94a3b8; }
.mw-budget-card-stripe--aceptado  { background: #10b981; }
.mw-budget-card-stripe--rechazado { background: #ef4444; }

.mw-budget-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  min-width: 0;
}
.mw-budget-card-title {
  font-size: .93rem;
  font-weight: 700;
  color: var(--ps-on-surface);
  flex-shrink: 0;
}
.mw-budget-card-client {
  font-size: .8rem;
  color: var(--ps-on-surface-variant);
  font-weight: 500;
}
.mw-budget-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: color-mix(in srgb, var(--ps-primary) 10%, white);
  color: var(--ps-primary);
  border: 1px solid color-mix(in srgb, var(--ps-primary) 20%, #E2E8F0);
}
.mw-budget-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mw-budget-status--borrador  { background: #f1f5f9; color: #64748b; }
.mw-budget-status--aceptado  { background: #d1fae5; color: #059669; }
.mw-budget-status--rechazado { background: #fee2e2; color: #dc2626; }

.mw-budget-card-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ps-on-surface);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mw-budget-card-date {
  font-size: .75rem;
  color: var(--ps-on-surface-variant);
}

.mw-budget-card-actions {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-shrink: 0;
}

/* Participación en el modal */
.mw-budget-participation {
  background: color-mix(in srgb, var(--ps-primary) 4%, var(--ps-surface-container-lowest));
  border: 1px solid color-mix(in srgb, var(--ps-primary) 15%, #E2E8F0);
  border-radius: var(--ps-radius);
  padding: 1rem 1.1rem;
  margin: .25rem 0 1rem;
}
.mw-budget-part-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ps-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mw-budget-part-header .material-symbols-outlined { font-size: 18px !important; }
.mw-budget-part-grid {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  gap: .75rem;
  align-items: center;
}
.mw-budget-part-person {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mw-budget-part-pct-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.mw-pct-input { max-width: 72px; text-align: center; font-weight: 700 !important; }
.mw-pct-symbol { font-size: 1.1rem; font-weight: 700; color: var(--ps-on-surface-variant); }
.mw-budget-part-amount {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ps-primary);
  letter-spacing: -.02em;
}
.mw-budget-part-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw-budget-part-slash {
  font-size: 2rem;
  font-weight: 300;
  color: #cbd5e1;
  line-height: 1;
}
.mw-budget-pct-total {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid color-mix(in srgb, var(--ps-primary) 12%, #E2E8F0);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ps-on-surface-variant);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mw-pct-warning {
  color: #ef4444;
  font-weight: 700;
}

/* Participación en la tarjeta de presupuesto (vista lista) */
.mw-budget-part-row {
  display: flex;
  gap: 1.5rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.mw-budget-part-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mw-budget-part-chip-name {
  font-size: .72rem;
  color: var(--ps-on-surface-variant);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mw-budget-part-chip-val {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ps-on-surface);
}
.mw-budget-part-chip-pct {
  font-size: .72rem;
  color: var(--ps-primary);
  font-weight: 600;
}

@media (max-width: 600px) {
  .mw-budget-part-grid { grid-template-columns: 1fr; }
  .mw-budget-part-divider { display: none; }
  .mw-budget-card { grid-template-columns: 4px 1fr; }
  .mw-budget-card-actions { grid-column: 2; justify-content: flex-end; }
  .mw-form-row--2 { grid-template-columns: 1fr; }
}

/* ── Badge origen (web / externo) en presupuestos ── */
.mw-budget-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mw-origin--web      { background: #dbeafe; color: #1d4ed8; }
.mw-origin--externo  { background: #f3e8ff; color: #7c3aed; }
.mw-budget-ext-user  {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 600;
  color: #7c3aed;
}
.mw-budget-ext-user .material-symbols-outlined { font-size: 14px !important; }

/* ── Toggle modo cliente en modal de presupuesto ── */
.mw-client-mode-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--ps-surface-container-low);
  border: 1px solid #E2E8F0;
  border-radius: var(--ps-radius);
  padding: 2px;
  margin-bottom: .1rem;
}
.mw-cmode-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .8rem;
  border: none;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--ps-font);
  cursor: pointer;
  background: none;
  color: var(--ps-on-surface-variant);
  transition: background var(--ps-transition), color var(--ps-transition);
}
.mw-cmode-btn .material-symbols-outlined { font-size: 15px !important; }
.mw-cmode-btn.active {
  background: var(--ps-primary);
  color: #fff;
}
.mw-cmode-btn:not(.active):hover {
  background: var(--ps-surface-container);
  color: var(--ps-on-surface);
}


/* ================================================================
   PRESUPUESTOS v2 — titular, comisión, participantes, partidas
================================================================ */
.mw-form-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .mw-form-row--3 { grid-template-columns: 1fr; } }

/* Toggle de modo presupuesto (mismos estilos que cmode) */
.mw-bmode-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .8rem; border: none; border-radius: 6px;
  font-size: .78rem; font-weight: 600; font-family: var(--ps-font);
  cursor: pointer; background: none; color: var(--ps-on-surface-variant);
  transition: background var(--ps-transition), color var(--ps-transition);
}
.mw-bmode-btn .material-symbols-outlined { font-size: 15px !important; }
.mw-bmode-btn.active { background: var(--ps-primary); color: #fff; }
.mw-bmode-btn:not(.active):hover { background: var(--ps-surface-container); color: var(--ps-on-surface); }

/* Caja del titular */
.mw-budget-owner-box {
  border: 1px solid #E2E8F0; border-radius: var(--ps-radius);
  padding: .85rem; margin: .25rem 0 1rem; background: var(--ps-surface-container-low);
}
.mw-budget-hint { font-size: .74rem; color: var(--ps-on-surface-variant); margin: .5rem 0 0; line-height: 1.4; }

/* Resumen de cálculo */
.mw-budget-calc-summary {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  padding: .6rem .8rem; margin-bottom: .75rem;
  background: var(--ps-surface-container-low); border-radius: 8px;
  font-size: .8rem; color: var(--ps-on-surface-variant);
}
.mw-budget-calc-summary strong { color: var(--ps-on-surface); }

/* Filas de participantes */
.mw-bparts-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.mw-bpart {
  display: grid;
  grid-template-columns: minmax(110px,1.4fr) minmax(80px,1fr) auto 68px 88px auto;
  align-items: center; gap: .4rem;
}
.mw-bpart .bpart-name { min-width: 0; }
.mw-bpart-titular {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; color: var(--ps-on-surface-variant);
  white-space: nowrap; cursor: pointer;
}
.bpart-pct-wrap, .bitem-amount-wrap { display: inline-flex; align-items: center; gap: .2rem; }
.bpart-pct-wrap span, .bitem-amount-wrap span { font-size: .78rem; color: var(--ps-on-surface-variant); }
.bpart-amount { font-size: .82rem; font-weight: 700; color: var(--ps-primary); text-align: right; white-space: nowrap; }

/* Filas de partidas */
.mw-bitems-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.mw-bitem {
  display: grid; grid-template-columns: auto minmax(110px,1fr) 118px auto;
  align-items: center; gap: .4rem;
  padding: .35rem; border: 1px solid #E2E8F0; border-radius: 8px;
}
.mw-bitem.is-closed { background: #d1fae5; border-color: #6ee7b7; }
.mw-bitem.is-closed .bitem-title { text-decoration: line-through; color: var(--ps-on-surface-variant); }
.mw-bitem .bitem-toggle .material-symbols-outlined { color: #059669; }
.mw-budget-items-total { font-size: .82rem; margin-top: .4rem; }

/* Tarjeta: badges nuevos */
.mw-budget-owner {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; color: #b45309;
  background: #fef3c7; padding: .1rem .45rem; border-radius: 6px;
}
.mw-budget-owner .material-symbols-outlined { font-size: 14px !important; }
.mw-budget-vis {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .7rem; font-weight: 600; padding: .1rem .4rem; border-radius: 6px;
}
.mw-budget-vis .material-symbols-outlined { font-size: 13px !important; }
.mw-vis--private { background: #f1f5f9; color: #64748b; }
.mw-vis--shared  { background: #dbeafe; color: #2563eb; }
.mw-budget-mode-badge {
  font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px;
  background: #ede9fe; color: #7c3aed;
}
.mw-budget-part-chip.is-titular { border: 1px solid #fcd34d; background: #fffbeb; }
.mw-budget-readonly { color: var(--ps-on-surface-variant); display: inline-flex; align-items: center; padding: .3rem; }

/* Progreso de partidas */
.mw-budget-progress { display: flex; align-items: center; gap: .5rem; width: 100%; margin: .35rem 0; }
.mw-budget-progress-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.mw-budget-progress-bar span { display: block; height: 100%; background: #10b981; }
.mw-budget-progress-txt { font-size: .7rem; color: var(--ps-on-surface-variant); white-space: nowrap; }

/* Estado cerrado */
.mw-budget-card-stripe--cerrado { background: #6366f1; }
.mw-budget-status--cerrado { background: #e0e7ff; color: #4f46e5; }

/* ================================================================
   LICENCIAS
================================================================ */

/* Toolbar */
.mw-lic-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.mw-lic-search {
  flex: 1;
  min-width: 220px;
  max-width: 340px;
}
.mw-lic-filters {
  display: flex;
  gap: .4rem;
}
.mw-lic-filter-btn {
  padding: .3rem .85rem;
  border: 1.5px solid var(--ps-outline-variant);
  border-radius: 999px;
  background: transparent;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ps-on-surface-variant);
  cursor: pointer;
  transition: background var(--ps-transition), color var(--ps-transition), border-color var(--ps-transition);
}
.mw-lic-filter-btn:hover { border-color: var(--ps-primary); color: var(--ps-primary); }
.mw-lic-filter-btn.active {
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: #fff;
}

/* Tabla */
.mw-lic-table-wrap {
  padding: 0;
  /*overflow-x: auto;*/
}
.mw-lic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.mw-lic-table thead th {
  padding: .7rem 1rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ps-on-surface-variant);
  border-bottom: 1.5px solid var(--ps-outline-variant);
  background: var(--ps-surface-container);
  white-space: nowrap;
}
.mw-lic-table thead th:first-child { border-radius: var(--ps-radius) 0 0 0; }
.mw-lic-table thead th:last-child  { border-radius: 0 var(--ps-radius) 0 0; }
.mw-lic-row td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--ps-outline-variant);
  vertical-align: middle;
  color: var(--ps-on-surface);
}
.mw-lic-row:last-child td { border-bottom: none; }
.mw-lic-row:hover td { background: var(--ps-surface-container); }

/* Clave */
.mw-lic-key-cell { display: flex; align-items: center; gap: .4rem; }
.mw-lic-key-pill {
  font-family: 'Courier New', monospace;
  font-size: .75rem;
  font-weight: 600;
  background: var(--ps-surface-container-high);
  padding: .2rem .55rem;
  border-radius: 6px;
  color: var(--ps-primary);
  letter-spacing: .04em;
  white-space: nowrap;
}
.mw-lic-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ps-on-surface-variant);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color var(--ps-transition);
}
.mw-lic-copy-btn:hover { color: var(--ps-primary); }
.mw-lic-copy-btn .material-symbols-outlined { font-size: 16px !important; }

/* Clave enmascarada */
.mw-lic-key-masked {
  letter-spacing: .12em;
  color: var(--ps-on-surface-variant);
  font-size: .72rem;
}

/* Clave en modal (solo lectura) */
.mw-lic-key-readonly {
  font-family: 'Courier New', monospace;
  font-size: .85rem;
  font-weight: 700;
  background: var(--ps-surface-container-high);
  padding: .55rem .9rem;
  border-radius: 8px;
  color: var(--ps-primary);
  letter-spacing: .06em;
  margin-bottom: 1rem;
  word-break: break-all;
}

/* Plan badge */
.mw-lic-plan-badge {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: var(--ps-primary);
}

/* Status badges */
.mw-lic-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 999px;
}
.mw-lic-badge--active   { background: rgba(16,185,129,.12); color: #059669; }
.mw-lic-badge--inactive { background: rgba(100,116,139,.12); color: #64748b; }
.mw-lic-badge--expired  { background: rgba(239,68,68,.12);  color: #dc2626; }

/* Columnas especiales */
.mw-lic-expired-date { color: #dc2626; font-weight: 600; }
.mw-lic-last-check { color: var(--ps-on-surface-variant); font-size: .78rem; }
.mw-lic-last-check small { opacity: .7; }

/* Estados vacío / error */
.mw-lic-loading, .mw-lic-empty {
  text-align: center;
  padding: 2rem;
  color: var(--ps-on-surface-variant);
}
.mw-lic-error { color: #dc2626; }

/* Acciones */
.mw-lic-actions { display: flex; gap: .15rem; align-items: center; }
.mw-lic-actions .mw-btn-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  font-size: 0;
}
.mw-lic-actions .mw-btn-icon .material-symbols-outlined { font-size: 16px !important; }
.mw-btn-icon--success { color: #059669; }
.mw-btn-icon--success:hover { background: rgba(16,185,129,.1); }

/* Modal md */
.mw-modal--md {
  width: min(640px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   License Blocks — three-plugin layout
   ═══════════════════════════════════════════════════════════════ */
.mw-lic-block {
  background: var(--ps-surface, #fff);
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.mw-lic-block-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ps-outline-variant, #e5e7eb);
  background: var(--ps-surface-container-low, #f8f8fb);
}

.mw-lic-block-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ps-on-surface, #1c1b1f);
  flex: 1;
}

.mw-lic-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--ps-primary, #6366f1);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.mw-lic-block-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--ps-outline-variant, #e5e7eb);
  flex-wrap: wrap;
}

.mw-lic-block-toolbar .mw-search-box {
  flex: 1;
  min-width: 180px;
}

.mw-lic-block .mw-table-wrap {
  overflow-x: auto;
}

/* Token progress bar (Chatbot block) */
.mw-lic-token-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 120px;
}

.mw-lic-token-bar {
  flex: 1;
  height: 6px;
  background: var(--ps-outline-variant, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}

.mw-lic-token-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ps-primary, #6366f1);
  transition: width .3s ease;
}

.mw-lic-token-fill--warn  { background: #f59e0b; }
.mw-lic-token-fill--danger { background: #ef4444; }

.mw-lic-token-text {
  font-size: .72rem;
  color: var(--ps-on-surface-variant, #49454f);
  white-space: nowrap;
}

/* Clickable URL in table */
.mw-lic-url {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  color: var(--ps-primary, #6366f1);
  text-decoration: none;
  font-size: .82rem;
}
.mw-lic-url:hover { text-decoration: underline; }

/* AI provider badge */
.mw-lic-provider {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 6px;
  background: var(--ps-secondary-container, #e8def8);
  color: var(--ps-on-secondary-container, #21005d);
}

/* ═══════════════════════════════════════════════════════════════
   Mailchimp — pantalla completa
   ═══════════════════════════════════════════════════════════════ */

/* Account badge in topbar */
.mw-mc-account-badge {
  font-size: .8rem;
  color: var(--ps-on-surface-variant);
  background: var(--ps-surface-container-low, #f3f4f8);
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  padding: .3rem .8rem;
  border-radius: 999px;
}

/* Key banner */
.mw-mc-key-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--ps-surface-container-low, #f8f8fb);
  border: 1.5px dashed var(--ps-outline-variant, #e5e7eb);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 1.5rem;
}
.mw-mc-key-banner > .material-symbols-outlined {
  font-size: 2rem;
  color: var(--ps-primary, #6366f1);
  flex-shrink: 0;
}
.mw-mc-key-banner strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.mw-mc-key-banner p { font-size: .85rem; color: var(--ps-on-surface-variant); margin: 0 0 .75rem; }
.mw-mc-key-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.mw-mc-key-form .mw-input { flex: 1; min-width: 280px; font-family: monospace; font-size: .82rem; }

/* Tab bar */
.mw-mc-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .75rem 1.5rem 0;
  border-bottom: 1px solid var(--ps-outline-variant, #e5e7eb);
  background: var(--ps-surface, #fff);
}
.mw-mc-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1rem;
  border: none;
  background: transparent;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ps-on-surface-variant, #49454f);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s;
}
.mw-mc-tab .material-symbols-outlined { font-size: 16px; }
.mw-mc-tab:hover { color: var(--ps-primary, #6366f1); background: var(--ps-surface-container-low, #f3f4f8); }
.mw-mc-tab.active { color: var(--ps-primary, #6366f1); border-bottom-color: var(--ps-primary, #6366f1); font-weight: 600; }
.mw-mc-tabs-spacer { flex: 1; }

/* Panels */
.mw-mc-panel { display: none; padding: 1.25rem 1.5rem; }
.mw-mc-panel.active { display: block; }

/* Toolbar inside panels */
.mw-mc-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Filter pills */
.mw-mc-filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.mw-mc-pill {
  padding: .25rem .75rem;
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  border-radius: 999px;
  background: transparent;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ps-on-surface-variant, #49454f);
  cursor: pointer;
  transition: all .15s;
}
.mw-mc-pill:hover { background: var(--ps-surface-container-low, #f3f4f8); }
.mw-mc-pill.active { background: var(--ps-primary, #6366f1); color: #fff; border-color: var(--ps-primary, #6366f1); }

/* Status badges */
.mw-mc-status {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mc-status--sent      { background: rgba(16,185,129,.12); color: #059669; }
.mc-status--sending   { background: rgba(59,130,246,.12); color: #2563eb; }
.mc-status--scheduled { background: rgba(245,158,11,.12); color: #d97706; }
.mc-status--paused    { background: rgba(100,116,139,.12); color: #64748b; }
.mc-status--draft     { background: rgba(156,163,175,.12); color: #6b7280; }
.mc-status--archived  { background: rgba(239,68,68,.1);  color: #dc2626; }

/* Campaign cards grid */
.mw-mc-campaigns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.mw-mc-campaign-card {
  background: var(--ps-surface, #fff);
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  border-radius: 10px;
  padding: 1rem;
  transition: box-shadow .15s;
}
.mw-mc-campaign-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.mw-mc-campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.mw-mc-campaign-date { font-size: .75rem; color: var(--ps-on-surface-variant); }
.mw-mc-campaign-subject { font-size: .92rem; font-weight: 600; color: var(--ps-on-surface); margin-bottom: .5rem; line-height: 1.4; }
.mw-mc-campaign-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--ps-on-surface-variant); margin-bottom: .75rem; }
.mw-mc-opens { color: #059669; font-weight: 600; }
.mw-mc-campaign-actions { display: flex; gap: .4rem; }

/* Audience stats pills */
.mw-mc-audience-stats { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.mw-mc-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem 1rem;
  background: var(--ps-surface-container-low, #f8f8fb);
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  border-radius: 10px;
  min-width: 90px;
}
.mw-mc-stat-pill strong { font-size: 1.15rem; color: var(--ps-primary, #6366f1); }
.mw-mc-stat-pill span  { font-size: .72rem; color: var(--ps-on-surface-variant); margin-top: .1rem; }

.mw-mc-members-header { font-size: .82rem; color: var(--ps-on-surface-variant); margin-bottom: .5rem; }

/* Reports grid */
.mw-mc-reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 1rem; }
.mw-mc-report-card {
  background: var(--ps-surface, #fff);
  border: 1px solid var(--ps-outline-variant, #e5e7eb);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.mw-mc-report-name { font-weight: 600; margin-bottom: .2rem; font-size: .9rem; }
.mw-mc-report-date { font-size: .75rem; color: var(--ps-on-surface-variant); margin-bottom: .75rem; }
.mw-mc-report-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.mw-mc-rstat { display: flex; flex-direction: column; align-items: center; }
.mw-mc-rstat-val { font-size: 1.1rem; font-weight: 700; color: var(--ps-primary, #6366f1); }
.mw-mc-rstat-lbl { font-size: .68rem; color: var(--ps-on-surface-variant); }
.mw-mc-rstat--bar { grid-column: 1/-1; }
.mw-mc-rstat-bar-wrap { height: 5px; background: var(--ps-outline-variant,#e5e7eb); border-radius: 999px; overflow: hidden; }
.mw-mc-rstat-bar-fill { height: 100%; background: var(--ps-primary,#6366f1); border-radius: 999px; }

/* Templates grid */
.mw-mc-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.mw-mc-template-card { background: var(--ps-surface,#fff); border: 1px solid var(--ps-outline-variant,#e5e7eb); border-radius: 10px; overflow: hidden; }
.mw-mc-template-thumb { width: 100%; height: 130px; object-fit: cover; display: block; }
.mw-mc-template-thumb--empty { display: flex; align-items: center; justify-content: center; background: var(--ps-surface-container-low,#f3f4f8); }
.mw-mc-template-thumb--empty .material-symbols-outlined { font-size: 2.5rem; color: var(--ps-outline-variant,#ccc); }
.mw-mc-template-info { padding: .6rem .75rem; }
.mw-mc-template-name { font-size: .83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-mc-template-date { font-size: .72rem; color: var(--ps-on-surface-variant); }

/* Loading / empty / error */
.mw-mc-loading, .mw-mc-empty, .mw-mc-error {
  text-align: center;
  padding: 2.5rem;
  color: var(--ps-on-surface-variant);
  font-size: .9rem;
}
.mw-mc-error { color: #dc2626; }

/* Extra small buttons */
.mw-btn--xs {
  padding: .2rem .55rem !important;
  font-size: .75rem !important;
  height: auto !important;
}
.mw-btn--danger-ghost {
  color: var(--ps-error, #dc2626) !important;
}
.mw-btn--danger-ghost:hover {
  background: rgba(239,68,68,.08) !important;
}

/* ================================================================
   LABORATORIO DE CREATIVIDAD
================================================================ */

/* Layout principal */
.mw-lab-layout {
  display: flex;
  height: calc(100vh - var(--mw-header-h, 60px) - 4rem);
  min-height: 500px;
  gap: 0;
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  overflow: hidden;
  background: var(--mw-surface);
}

/* Sidebar de proyectos */
.mw-lab-sidebar {
  width: 240px;
  min-width: 240px;
  border-right: 1px solid var(--mw-border-light);
  display: flex;
  flex-direction: column;
  background: var(--mw-surface2);
  overflow: hidden;
}
.mw-lab-sidebar-header {
  padding: .9rem 1rem .7rem;
  border-bottom: 1px solid var(--mw-border-light);
  background: var(--mw-surface);
}
.mw-lab-sidebar-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mw-text-muted);
}
.mw-lab-projects-list {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}
.mw-lab-project-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  cursor: pointer;
  transition: background var(--mw-transition);
  border-radius: 0;
}
.mw-lab-project-item:hover { background: var(--mw-primary-bg); }
.mw-lab-project-item.active { background: var(--mw-primary-bg); border-left: 3px solid var(--mw-primary); }
.mw-lab-project-item-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mw-lab-project-item-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--mw-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Panel principal */
.mw-lab-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mw-bg);
}

/* Welcome state */
.mw-lab-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem;
  color: var(--mw-text-muted);
}
.mw-lab-welcome-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: .35;
}
.mw-lab-welcome h3 { font-size: 1.1rem; font-weight: 700; color: var(--mw-text); margin-bottom: .5rem !important; }
.mw-lab-welcome p  { font-size: .85rem; max-width: 280px; line-height: 1.5; }

/* Header del proyecto activo */
.mw-lab-project-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.mw-lab-project-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mw-border-light);
  background: var(--mw-surface);
  flex-shrink: 0;
}
.mw-lab-project-color {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mw-lab-project-info { flex: 1; min-width: 0; }
.mw-lab-project-name { font-size: 1rem; font-weight: 800; color: var(--mw-text); margin: 0 !important; }
.mw-lab-project-desc { font-size: .78rem; color: var(--mw-text-muted); margin: .15rem 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-lab-project-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* Tabs */
.mw-lab-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--mw-border-light);
  background: var(--mw-surface);
  flex-shrink: 0;
  padding: 0 1rem;
}
.mw-lab-tab {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mw-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--mw-transition);
}
.mw-lab-tab .material-symbols-outlined { font-size: 1rem; }
.mw-lab-tab:hover { color: var(--mw-text); }
.mw-lab-tab.active { color: var(--mw-primary); border-bottom-color: var(--mw-primary); }

.mw-lab-tab-content { display: none; flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.mw-lab-tab-content.active { display: block; }

/* ── KANBAN ── */
.mw-lab-tasks-toolbar { margin-bottom: 1rem; }
.mw-lab-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.mw-lab-kanban-col {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.mw-lab-kanban-col-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  font-size: .75rem;
  font-weight: 800;
  color: var(--mw-text);
  background: var(--mw-surface2);
  border-bottom: 1px solid var(--mw-border-light);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mw-lab-kanban-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mw-lab-dot-pendiente  { background: #cbd5e1; }
.mw-lab-dot-en_curso   { background: var(--mw-primary); }
.mw-lab-dot-completada { background: var(--mw-success); }
.mw-lab-kanban-count {
  margin-left: auto;
  background: var(--mw-border-light);
  border-radius: 99px;
  padding: .05rem .45rem;
  font-size: .68rem;
  font-weight: 700;
}
.mw-lab-kanban-cards {
  flex: 1;
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mw-lab-kanban-empty {
  font-size: .75rem;
  color: var(--mw-text-muted);
  text-align: center;
  padding: 1.5rem .5rem;
  border: 2px dashed var(--mw-border-light);
  border-radius: 8px;
}

/* Tarjeta de tarea */
.mw-lab-task-card {
  background: var(--mw-bg);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  padding: .7rem .8rem;
  cursor: default;
  transition: box-shadow var(--mw-transition), transform var(--mw-transition);
}
.mw-lab-task-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.mw-lab-task-card-title { font-size: .82rem; font-weight: 700; color: var(--mw-text); margin-bottom: .25rem !important; }
.mw-lab-task-card-desc  { font-size: .75rem; color: var(--mw-text-muted); line-height: 1.4; margin-bottom: .4rem !important; }
.mw-lab-task-card-meta  { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem !important; }
.mw-lab-task-assignee, .mw-lab-task-due { font-size: .7rem; color: var(--mw-text-muted); }
.mw-lab-task-card-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.mw-lab-task-btn-edit,
.mw-lab-task-btn-move,
.mw-lab-task-btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem;
  border-radius: 4px;
  color: var(--mw-text-muted);
  transition: color var(--mw-transition), background var(--mw-transition);
  display: flex;
  align-items: center;
}
.mw-lab-task-btn-edit .material-symbols-outlined,
.mw-lab-task-btn-move .material-symbols-outlined,
.mw-lab-task-btn-delete .material-symbols-outlined { font-size: .9rem; }
.mw-lab-task-btn-edit:hover   { color: var(--mw-primary); background: var(--mw-primary-bg); }
.mw-lab-task-btn-move:hover   { color: var(--mw-warning); background: rgba(245,158,11,.08); }
.mw-lab-task-btn-delete:hover { color: var(--mw-danger);  background: rgba(239,68,68,.08); }

/* ── CREATIVIDADES ── */
.mw-lab-creatives-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.mw-lab-type-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.mw-lab-type-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--mw-text-muted);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: 99px;
  cursor: pointer;
  transition: all var(--mw-transition);
}
.mw-lab-type-btn .material-symbols-outlined { font-size: .9rem; }
.mw-lab-type-btn:hover { border-color: var(--mw-primary); color: var(--mw-primary); }
.mw-lab-type-btn.active { background: var(--mw-primary); color: #fff; border-color: var(--mw-primary); }

.mw-lab-creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Tarjeta de creatividad */
.mw-lab-creative-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border-light);
  border-radius: var(--mw-radius);
  overflow: hidden;
  transition: box-shadow var(--mw-transition), transform var(--mw-transition);
}
.mw-lab-creative-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.mw-lab-creative-card-header {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--mw-border-light);
}
.mw-lab-creative-type-icon {
  font-size: 1.1rem;
  color: var(--mw-primary);
  flex-shrink: 0;
  margin-top: .05rem;
}
.mw-lab-creative-card-info { flex: 1; min-width: 0; }
.mw-lab-creative-card-title { font-size: .82rem; font-weight: 700; color: var(--mw-text); margin-bottom: .2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-lab-creative-card-meta { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mw-lab-creative-card-btns { display: flex; gap: .2rem; flex-shrink: 0; }
.mw-lab-tags { font-size: .68rem; color: var(--mw-text-muted); }

/* Previews */
.mw-lab-creative-preview { padding: .75rem .85rem; }
.mw-lab-preview-image img { width: 100%; border-radius: 6px; display: block; max-height: 200px; object-fit: cover; }
.mw-lab-preview-image { padding: 0; }
.mw-lab-preview-text {
  font-size: .8rem;
  color: var(--mw-text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}
.mw-lab-preview-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
}
.mw-lab-preview-link .material-symbols-outlined { font-size: 1rem; color: var(--mw-primary); flex-shrink: 0; }
.mw-lab-preview-link a { color: var(--mw-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-lab-preview-link a:hover { text-decoration: underline; }
.mw-lab-preview-file {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mw-lab-preview-file .material-symbols-outlined { font-size: 1.5rem; color: var(--mw-primary); flex-shrink: 0; }
.mw-lab-file-name { font-size: .78rem; font-weight: 600; color: var(--mw-text); }
.mw-lab-file-size { font-size: .68rem; color: var(--mw-text-muted); }

/* Badges */
.mw-lab-badge {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 99px;
  letter-spacing: .02em;
}
.mw-lab-badge-high     { background: rgba(239,68,68,.12);  color: #dc2626; }
.mw-lab-badge-normal   { background: var(--mw-primary-bg); color: var(--mw-primary); }
.mw-lab-badge-low      { background: rgba(100,116,139,.1); color: #64748b; }
.mw-lab-badge-archived { background: rgba(100,116,139,.1); color: #64748b; }
.mw-lab-badge-type-image { background: rgba(16,185,129,.1); color: #059669; }
.mw-lab-badge-type-text  { background: var(--mw-primary-bg); color: var(--mw-primary); }
.mw-lab-badge-type-link  { background: rgba(245,158,11,.1);  color: #d97706; }
.mw-lab-badge-type-file  { background: rgba(139,92,246,.1);  color: #7c3aed; }

/* Selector de tipo en modal */
.mw-lab-type-select { display: flex; gap: .4rem; flex-wrap: wrap; }
.mw-lab-type-sel-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mw-text-muted);
  background: var(--mw-surface2);
  border: 1px solid var(--mw-border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--mw-transition);
}
.mw-lab-type-sel-btn .material-symbols-outlined { font-size: .95rem; }
.mw-lab-type-sel-btn:hover  { border-color: var(--mw-primary); color: var(--mw-primary); }
.mw-lab-type-sel-btn.active { background: var(--mw-primary); color: #fff; border-color: var(--mw-primary); }

/* Input color */
.mw-input-color { height: 38px; padding: .2rem !important; cursor: pointer; }

/* Empty state */
.mw-lab-empty {
  text-align: center;
  font-size: .78rem;
  color: var(--mw-text-muted);
  padding: 2rem 1rem;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .mw-lab-layout { flex-direction: column; height: auto; }
  .mw-lab-sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--mw-border-light); }
  .mw-lab-projects-list { max-height: 160px; }
  .mw-lab-kanban { grid-template-columns: 1fr; }
}

/* v2.1 — presencia: conectado vs. en segundo plano */
.mw-presence-away img { border-color: var(--ps-warning) !important; opacity: .75; }
.mw-presence-away .mw-presence-dot { background: var(--ps-warning) !important; box-shadow: none !important; animation: none !important; }