/* =============================================================
   Veqco — Design System
   Inspired by Apple HIG: clarity, deference, depth
   ============================================================= */

/* ---- Custom Properties ---- */
:root {
  /* Accent */
  --accent:          #5856d6;
  --accent-hover:    #4845c4;
  --accent-light:    #eeedff;
  --accent-muted:    rgba(88,86,214,.12);

  /* Neutrals */
  --bg:              #f5f5f7;
  --surface:         #ffffff;
  --surface-2:       #f9f9fb;
  --border:          rgba(0,0,0,.08);
  --border-strong:   rgba(0,0,0,.14);

  /* Text */
  --text-primary:    #1d1d1f;
  --text-secondary:  #6e6e73;
  --text-tertiary:   #aeaeb2;

  /* Status */
  --green:  #34c759;
  --orange: #ff9f0a;
  --red:    #ff3b30;
  --blue:   #007aff;
  --purple: #af52de;
  --teal:   #5ac8fa;

  /* Spacing */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 76px;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --accent:          #7b79e8;
  --accent-hover:    #6a68d6;
  --accent-light:    rgba(123,121,232,.15);
  --accent-muted:    rgba(123,121,232,.12);

  --bg:              #0d0d0f;
  --surface:         #1c1c1e;
  --surface-2:       #2c2c2e;
  --border:          rgba(255,255,255,.08);
  --border-strong:   rgba(255,255,255,.14);

  --text-primary:    #f5f5f7;
  --text-secondary:  #98989d;
  --text-tertiary:   #636366;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow:     0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] .card-header {
  background: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .card {
  background: #17171a;
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .card-title {
  color: #f5f5f7;
}
[data-theme="dark"] .card-body {
  background: transparent;
}

/* Dark mode — vecqo-gpt-card */
[data-theme="dark"] .vecqo-gpt-card {
  background: #1e1e22;
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
[data-theme="dark"] .vecqo-gpt-card-header {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(255,255,255,.09);
}

/* Dark mode — project-status-option & deal-stage-option: soft colors */
[data-theme="dark"] .project-status-option[data-status="active"]      { --project-status-soft: rgba(31,165,91,.2);   --project-status-glow: rgba(31,165,91,.25); }
[data-theme="dark"] .project-status-option[data-status="on_hold"]     { --project-status-soft: rgba(201,128,8,.2);  --project-status-glow: rgba(201,128,8,.22); }
[data-theme="dark"] .project-status-option[data-status="completed"]   { --project-status-soft: rgba(90,82,219,.22); --project-status-glow: rgba(90,82,219,.28); }
[data-theme="dark"] .project-status-option[data-status="cancelled"]   { --project-status-soft: rgba(239,78,58,.18); --project-status-glow: rgba(239,78,58,.2); }

[data-theme="dark"] .deal-stage-option[data-stage="new"]         { --project-status-soft: rgba(138,138,170,.18); --project-status-glow: rgba(138,138,170,.2); }
[data-theme="dark"] .deal-stage-option[data-stage="contacted"]   { --project-status-soft: rgba(37,99,235,.2);   --project-status-glow: rgba(37,99,235,.22); }
[data-theme="dark"] .deal-stage-option[data-stage="proposal"]    { --project-status-soft: rgba(196,123,0,.2);   --project-status-glow: rgba(196,123,0,.22); }
[data-theme="dark"] .deal-stage-option[data-stage="negotiation"] { --project-status-soft: rgba(123,121,232,.22);--project-status-glow: rgba(123,121,232,.28); }
[data-theme="dark"] .deal-stage-option[data-stage="won"]         { --project-status-soft: rgba(26,158,63,.2);   --project-status-glow: rgba(26,158,63,.24); }
[data-theme="dark"] .deal-stage-option[data-stage="lost"]        { --project-status-soft: rgba(239,78,58,.18);  --project-status-glow: rgba(239,78,58,.2); }

/* Dark mode — base background y active state */
[data-theme="dark"] .project-status-option {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .project-status-option:hover {
  background: #2e2e33;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
[data-theme="dark"] .project-status-option.is-active[data-status] {
  background: var(--project-status-soft);
  border-color: var(--project-status-accent);
}
[data-theme="dark"] .project-status-check {
  background: var(--project-status-soft);
}
[data-theme="dark"] .project-status-option.is-active .project-status-check {
  background: var(--project-status-accent);
  color: #fff;
}
[data-theme="dark"] .project-status-icon {
  background: var(--project-status-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] .topbar {
  background: #161619;
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .sidebar {
  background: #151518;
  border-right-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-footer {
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .user-menu:hover,
[data-theme="dark"] .nav-link-item:hover {
  background: rgba(255,255,255,.05);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1f1f23;
  color: #f5f5f7;
  border-color: rgba(255,255,255,.14);
  color-scheme: dark;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #8b8b93;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: #232329;
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123,121,232,.18);
}
[data-theme="dark"] input[type="date"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="date"]::-webkit-clear-button,
[data-theme="dark"] input[type="time"]::-webkit-clear-button,
[data-theme="dark"] input[type="datetime-local"]::-webkit-clear-button {
  filter: invert(1);
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit,
[data-theme="dark"] input[type="time"]::-webkit-datetime-edit,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-text,
[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-text,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-text,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field,
[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-hour-field,
[data-theme="dark"] input[type="time"]::-webkit-datetime-edit-minute-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-day-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-month-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-year-field {
  color: #f5f5f7;
}
[data-theme="dark"] input[type="date"]::-webkit-date-and-time-value,
[data-theme="dark"] input[type="time"]::-webkit-date-and-time-value,
[data-theme="dark"] input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] .veqco-date-control,
[data-theme="dark"] .veqco-time-control,
[data-theme="dark"] .veqco-datetime-control {
  color-scheme: dark !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background-image: none !important;
  padding-right: 3rem !important;
}
[data-theme="dark"] .veqco-picker-wrap {
  position: relative;
  display: block;
  width: 100%;
}
[data-theme="dark"] .veqco-picker-wrap > input[type="date"],
[data-theme="dark"] .veqco-picker-wrap > input[type="time"],
[data-theme="dark"] .veqco-picker-wrap > input[type="datetime-local"] {
  padding-right: 3rem !important;
}
[data-theme="dark"] .veqco-picker-wrap > input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .veqco-picker-wrap > input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .veqco-picker-wrap > input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 100% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: absolute;
  right: 0;
}
[data-theme="dark"] .veqco-picker-trigger {
  position: absolute;
  top: 50%;
  right: .78rem;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 2;
  opacity: .96;
}
[data-theme="dark"] .veqco-picker-trigger:hover,
[data-theme="dark"] .veqco-picker-trigger:focus-visible {
  opacity: 1;
  outline: 0;
  filter: drop-shadow(0 0 6px rgba(176, 114, 255, .55));
}
[data-theme="dark"] .veqco-picker-trigger.is-date,
[data-theme="dark"] .veqco-picker-trigger.is-datetime {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.25' y='3.25' width='11.5' height='10.5' rx='1.75' stroke='%23b277ff' stroke-width='1.5'/%3E%3Cpath d='M5 1.75V4.25' stroke='%23b277ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M11 1.75V4.25' stroke='%23b277ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2.5 6H13.5' stroke='%23b277ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .veqco-picker-trigger.is-time {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.75' stroke='%23b277ff' stroke-width='1.5'/%3E%3Cpath d='M8 4.75V8.15L10.35 9.55' stroke='%23b277ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .veqco-picker-trigger {
  display: none !important;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }

/* ---- Layout wrapper ---- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  padding: 0;
  transition: width .22s ease, transform .28s cubic-bezier(.4,0,.2,1);
}

.sidebar-brand {
  padding: 1rem .9rem .9rem;
  border-bottom: 1px solid var(--border);
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

.brand-copy { min-width: 0; }

.sidebar-brand .brand-text {
  font-size: 1.3rem;
  font-weight: 620;
  letter-spacing: -.04em;
  color: var(--text-primary);
}

.sidebar-brand .brand-text span { color: var(--accent); }

.sidebar-brand .org-name {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-collapse-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: var(--bg);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
}

.vecqo-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.35) transparent;
}

.vecqo-sidebar-scroll::-webkit-scrollbar {
  width: 7px;
}

.vecqo-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.vecqo-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35);
  border-radius: 999px;
  transition: background .2s ease, opacity .2s ease;
}

.vecqo-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.65);
}

.dark .vecqo-sidebar-scroll,
body.dark .vecqo-sidebar-scroll,
[data-theme="dark"] .vecqo-sidebar-scroll {
  scrollbar-color: rgba(99,102,241,.75) transparent;
}

.dark .vecqo-sidebar-scroll::-webkit-scrollbar-track,
body.dark .vecqo-sidebar-scroll::-webkit-scrollbar-track,
[data-theme="dark"] .vecqo-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.dark .vecqo-sidebar-scroll::-webkit-scrollbar-thumb,
body.dark .vecqo-sidebar-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .vecqo-sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.75), rgba(14,165,233,.45));
  border-radius: 999px;
  border: 2px solid rgba(15,15,18,.95);
}

.dark .vecqo-sidebar-scroll::-webkit-scrollbar-thumb:hover,
body.dark .vecqo-sidebar-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .vecqo-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(129,140,248,.95), rgba(56,189,248,.75));
}

.nav-section-title {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  padding: .75rem .75rem .3rem;
  margin-top: .5rem;
}

.nav-item { list-style: none; }

.nav-link-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background .15s, color .15s;
  cursor: pointer;
  user-select: none;
}

.nav-link-item:hover {
  background: var(--bg);
  color: var(--text-primary);
}

.nav-link-item.active {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 500;
}

.nav-link-item .nav-icon {
  width: 18px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

@media (max-width: 1600px) and (min-width: 1025px) {
  html { font-size: 15px; }
  :root { --sidebar-width: 228px; }
  .sidebar-brand { padding: 1rem 1.15rem .85rem; }
  .sidebar-brand .brand-text { font-size: 1.16rem; }
  .sidebar-brand .org-name { font-size: .74rem; }
  .sidebar-nav { padding: .82rem .62rem; }
  .page-content { padding: 1.18rem; }
  .card { border-radius: 18px; }
  .card-header { padding: .85rem 1rem; }
  .card-body { padding: 1rem; }
  .card-footer { padding: .75rem 1rem; }
  .card-title { font-size: .9rem; }
  .btn { padding: .52rem .88rem; font-size: .88rem; }
  .btn-sm { height: 32px; padding: .26rem .68rem; font-size: .78rem; }
  .btn-lg { padding: .62rem 1.15rem; font-size: .93rem; }
  .form-control, .form-select { padding: .54rem .78rem; font-size: .89rem; min-height: 40px; }
  textarea.form-control { min-height: 82px; }
  h1, .page-title { font-size: 1.55rem; }
  h2 { font-size: 1.22rem; }
  h3 { font-size: 1rem; }
}

.nav-group {
  margin: .2rem 0;
}

.nav-group-toggle {
  width: 100%;
  justify-content: space-between;
  background: transparent;
  border: none;
}

.nav-group-label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}

.nav-group-chevron {
  font-size: .72rem;
  color: var(--text-tertiary);
  transition: transform .18s ease;
}

.nav-group.open .nav-group-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  list-style: none;
  margin: .15rem 0 .45rem;
  padding: 0 0 0 1.9rem;
  display: none;
}

.nav-group.open .nav-submenu {
  display: block;
}

.nav-submenu-link {
  font-size: .8125rem;
  padding: .46rem .75rem;
  border-radius: 10px;
}

.nav-submenu-link .nav-icon {
  width: 16px;
  font-size: .88rem;
}

.sidebar-submenu-popover {
  position: fixed;
  min-width: 220px;
  padding: 10px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 45px rgba(15,23,42,.18);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px) scale(.96);
  transform-origin: left center;
  transition: opacity .18s ease, transform .18s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.35) transparent;
}

.sidebar-submenu-popover::-webkit-scrollbar {
  width: 6px;
}

.sidebar-submenu-popover::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-submenu-popover::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35);
  border-radius: 999px;
}

.sidebar-submenu-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.dark .sidebar-submenu-popover,
body.dark .sidebar-submenu-popover,
[data-theme="dark"] .sidebar-submenu-popover {
  background: #111116;
  border-color: rgba(148,163,184,.14);
  scrollbar-color: rgba(99,102,241,.75) transparent;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 24px rgba(99,102,241,.12);
}

.dark .sidebar-submenu-popover::-webkit-scrollbar-thumb,
body.dark .sidebar-submenu-popover::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-submenu-popover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.75), rgba(14,165,233,.45));
  border: 2px solid rgba(15,15,18,.95);
}

.sidebar-submenu-popover__title {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 6px 8px 8px;
}

.sidebar-submenu-popover__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.sidebar-submenu-popover__link:hover,
.sidebar-submenu-popover__link.active {
  background: rgba(99,102,241,.10);
  color: #4f46e5;
  transform: translateX(2px);
}

.sidebar-submenu-popover__link-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.dark .sidebar-submenu-popover__link,
body.dark .sidebar-submenu-popover__link,
[data-theme="dark"] .sidebar-submenu-popover__link {
  color: #cbd5e1;
}

.dark .sidebar-submenu-popover__link:hover,
.dark .sidebar-submenu-popover__link.active,
body.dark .sidebar-submenu-popover__link:hover,
body.dark .sidebar-submenu-popover__link.active,
[data-theme="dark"] .sidebar-submenu-popover__link:hover,
[data-theme="dark"] .sidebar-submenu-popover__link.active {
  background: rgba(99,102,241,.16);
  color: #a5b4fc;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-submenu-popover,
  .sidebar-submenu-popover__link {
    transition: none;
  }
}

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: .65rem;
  font-weight: 620;
  padding: .1rem .45rem;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 1rem .75rem;
  border-top: 1px solid var(--border);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
}
.user-menu:hover { background: var(--bg); }

.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 620;
  flex-shrink: 0;
}

.user-info .user-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info .user-role {
  font-size: .7rem;
  color: var(--text-tertiary);
}

/* ---- Main content ---- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left .22s ease;
}

/* ---- Topbar ---- */
.topbar {
  /* ----background: rgba(255,255,255,.85);---- */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 90;
}

.topbar-title {
  font-size: 1.1rem;
  font-weight: 620;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ---- Page content ---- */
.page-content {
  padding: 1.75rem;
  flex: 1;
}

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
}

.card-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
}

.card-body { padding: 1.25rem; }

.card-footer {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ---- KPI Cards ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}

.kpi-card.green::before  { background: var(--green); }
.kpi-card.orange::before { background: var(--orange); }
.kpi-card.red::before    { background: var(--red); }
.kpi-card.blue::before   { background: var(--blue); }
.kpi-card.purple::before { background: var(--purple); }

.kpi-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 620;
  color: var(--text-primary);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.kpi-sub {
  font-size: .78rem;
  color: var(--text-tertiary);
  margin-top: .25rem;
}

.kpi-icon {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  opacity: .12;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:focus-visible { outline: 3px solid var(--accent-muted); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg); color: var(--text-primary); }

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover { background: #e02d22; }

.btn-sm { padding: .3rem .75rem; font-size: .8125rem; border-radius: 7px; height: 34px; }

/* Botones de acción en topbar de cotización — misma altura, con borde */
.quote-action-btn { height: 34px !important; padding: 0 .75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Celda de contacto en tabla de clientes */
.client-contact-cell { font-size: .8rem; }
/* Label "Contacto" oculto en desktop (ya existe el encabezado de columna) */
.client-contact-label { display: none; font-size: .68rem; font-weight: 620; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: .15rem; }
.client-contact-line { display: flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; max-width: 220px; color: var(--text-secondary); line-height: 1.6; }
.client-contact-line span { overflow: hidden; text-overflow: ellipsis; }
.client-wa-link { display: flex; align-items: center; gap: .3rem; color: #25d366; text-decoration: none; overflow: hidden; max-width: 100%; }
.client-wa-link span { overflow: hidden; text-overflow: ellipsis; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; border-radius: var(--radius); }
.btn-xl { padding: .9rem 1.8rem; font-size: 1.0625rem; border-radius: var(--radius); }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}

/* ---- Forms ---- */
.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .4rem;
}

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: .6rem .875rem;
  font-size: .9375rem;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

@media (min-width: 1025px) {
  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
  }
  body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
  }
  body.sidebar-collapsed .sidebar-brand {
    padding: .9rem .65rem;
  }
  body.sidebar-collapsed .brand-mark {
    justify-content: center;
  }
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-text,
  body.sidebar-collapsed .nav-section-title,
  body.sidebar-collapsed .nav-group-chevron,
  body.sidebar-collapsed .user-info,
  body.sidebar-collapsed .user-menu .ms-auto {
    display: none !important;
  }
  body.sidebar-collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
  }
  body.sidebar-collapsed .sidebar-nav {
    padding: .82rem .45rem .82rem .55rem;
  }
  body.sidebar-collapsed .vecqo-sidebar-scroll {
    padding-right: 4px;
  }
  body.sidebar-collapsed .vecqo-sidebar-scroll::-webkit-scrollbar {
    width: 5px;
  }
  body.sidebar-collapsed .nav-link-item,
  body.sidebar-collapsed .nav-group-toggle,
  body.sidebar-collapsed .user-menu {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    min-height: 38px;
  }
  body.sidebar-collapsed .nav-link-item .nav-icon {
    width: auto;
    font-size: 1.05rem;
  }
  body.sidebar-collapsed .nav-submenu {
    display: none !important;
  }
  body.sidebar-collapsed .sidebar-footer {
    padding: .85rem .55rem;
  }
  body.sidebar-collapsed #user-menu-dd .nav-link-item {
    justify-content: center;
  }
}

.form-select {
  appearance: none;
}

.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"] {
  appearance: auto;
  -webkit-appearance: auto;
  min-height: 42px;
  padding-right: 2.6rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.form-control::placeholder { color: var(--text-tertiary); }

textarea.form-control { resize: vertical; min-height: 90px; }

.form-text {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: .3rem;
}

.form-error {
  font-size: .78rem;
  color: var(--red);
  margin-top: .3rem;
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: .02em;
}

.badge-gray    { background: var(--bg); color: var(--text-secondary); }
.badge-blue    { background: #e8f4ff; color: var(--blue); }
.badge-green   { background: #e8faf0; color: #1a9e3f; }
.badge-orange  { background: #fff4e0; color: #c47b00; }
.badge-red     { background: #fff0ee; color: var(--red); }
.badge-purple  { background: #f5eeff; color: var(--purple); }
.badge-accent  { background: var(--accent-light); color: var(--accent); }

/* Stage badges */
.stage-new          { background: #f0f0f5; color: var(--text-secondary); }
.stage-contacted    { background: #e8f4ff; color: var(--blue); }
.stage-proposal     { background: #fff4e0; color: #c47b00; }
.stage-negotiation  { background: var(--accent-light); color: var(--accent); }
.stage-won          { background: #e8faf0; color: #1a9e3f; }
.stage-lost         { background: #fff0ee; color: var(--red); }

/* Deal stage option — misma estructura que project-status-option */
.deal-stage-option[data-stage="new"]         { --project-status-accent:#8a8aaa; --project-status-soft:#f0f0f5; --project-status-glow:rgba(138,138,170,.14); }
.deal-stage-option[data-stage="contacted"]   { --project-status-accent:var(--blue); --project-status-soft:#e8f4ff; --project-status-glow:rgba(37,99,235,.14); }
.deal-stage-option[data-stage="proposal"]    { --project-status-accent:#c47b00; --project-status-soft:#fff4e0; --project-status-glow:rgba(196,123,0,.14); }
.deal-stage-option[data-stage="negotiation"] { --project-status-accent:var(--accent); --project-status-soft:var(--accent-light); --project-status-glow:rgba(90,82,219,.16); }
.deal-stage-option[data-stage="won"]         { --project-status-accent:#1a9e3f; --project-status-soft:#e8faf0; --project-status-glow:rgba(26,158,63,.16); }
.deal-stage-option[data-stage="lost"]        { --project-status-accent:var(--red); --project-status-soft:#fff0ee; --project-status-glow:rgba(239,78,58,.14); }

/* Quote status */
.status-draft          { background: #f0f0f5; color: var(--text-secondary); }
.status-sent           { background: #e8f4ff; color: var(--blue); }
.status-viewed         { background: #fff4e0; color: #c47b00; }
.status-accepted       { background: var(--accent-light); color: var(--accent); }
.status-partially_paid { background: #fff4e0; color: #c47b00; }
.status-paid           { background: #e8faf0; color: #1a9e3f; }
.status-expired        { background: #f0f0f5; color: var(--text-tertiary); }
.status-cancelled      { background: #fff0ee; color: var(--red); }
.status-rejected       { background: #fff0ee; color: var(--red); }

/* Project status */
.status-active     { background: #e8faf0; color: #1a9e3f; }
.status-on_hold    { background: #fff4e0; color: #c47b00; }
.status-completed  { background: var(--accent-light); color: var(--accent); }
.status-archived   { background: #f0f0f5; color: var(--text-tertiary); }

.vecqo-gpt-card {
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--border) 88%, white);
  background:
    radial-gradient(circle at top left, rgba(90, 82, 219, 0.035), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  box-shadow: 0 14px 36px rgba(22, 27, 52, 0.07);
}

.vecqo-gpt-card-compact .vecqo-gpt-card-header {
  padding: .9rem 1rem;
}

.vecqo-gpt-card-compact .vecqo-gpt-card-body {
  padding: .9rem 1rem 1rem;
}

.vecqo-gpt-card-header {
  border-bottom: 1px solid var(--border);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, white);
  background: linear-gradient(180deg, rgba(250, 250, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.vecqo-gpt-title {
  font-size: .96rem;
  font-weight: 620;
  letter-spacing: -.01em;
}

.vecqo-gpt-subtle {
  color: var(--text-secondary);
}

.vecqo-gpt-empty {
  color: var(--text-tertiary);
}

.vecqo-gpt-member-row {
  transition: background .16s ease;
}

.vecqo-gpt-member-row:hover {
  background: rgba(90, 82, 219, 0.03);
}

.project-status-mobile-card {
  display: none;
}

.project-status-mobile-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  margin-bottom: .45rem;
}

.project-status-mobile-select-wrap {
  position: relative;
}

.project-status-mobile-select {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  padding-right: 2.4rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--border) 88%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.project-status-mobile-caret {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: .9rem;
}

.project-status-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.project-status-option {
  width: 100%;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-radius: 16px;
  padding: .7rem .85rem;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: .8rem;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.project-status-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31, 35, 68, 0.08);
}

.project-status-option.is-active {
  box-shadow: 0 12px 24px rgba(90, 82, 219, 0.16);
}

.project-status-option[data-status="active"] {
  --project-status-accent: #1fa55b;
  --project-status-soft: #ecfbf2;
  --project-status-glow: rgba(31, 165, 91, 0.18);
}

.project-status-option[data-status="on_hold"] {
  --project-status-accent: #c98008;
  --project-status-soft: #fff8ea;
  --project-status-glow: rgba(201, 128, 8, 0.16);
}

.project-status-option[data-status="completed"] {
  --project-status-accent: #5a52db;
  --project-status-soft: #f4f1ff;
  --project-status-glow: rgba(90, 82, 219, 0.18);
}

.project-status-option[data-status="cancelled"] {
  --project-status-accent: #ef4e3a;
  --project-status-soft: #fff1ef;
  --project-status-glow: rgba(239, 78, 58, 0.14);
}

.project-status-option.is-active[data-status] {
  border-color: var(--project-status-accent);
  border-color: color-mix(in srgb, var(--project-status-accent) 38%, white);
  background: var(--project-status-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--project-status-soft) 92%, white) 0%, #ffffff 100%);
}

.project-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--project-status-soft);
  color: var(--project-status-accent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-status-accent) 14%, white);
  flex-shrink: 0;
  font-size: 1rem;
}

.project-status-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.project-status-label {
  font-size: .9rem;
  font-weight: 620;
  color: var(--text-primary);
  line-height: 1.2;
}

.project-status-hint {
  font-size: .72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.project-status-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--project-status-accent);
  background: var(--project-status-soft);
  background: color-mix(in srgb, var(--project-status-soft) 75%, white);
  flex-shrink: 0;
  font-size: .9rem;
}

.project-status-option.is-active .project-status-check {
  background: var(--project-status-accent);
  color: #fff;
  box-shadow: 0 8px 18px var(--project-status-glow);
}

@media (max-width: 640px) {
  .vecqo-gpt-card-compact .vecqo-gpt-card-header {
    padding: .82rem .9rem;
  }

  .vecqo-gpt-card-compact .vecqo-gpt-card-body {
    padding: .82rem .9rem .9rem;
  }

  .project-status-option {
    padding: .8rem;
    gap: .7rem;
  }

  .project-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .project-status-label {
    font-size: .9rem;
  }

  .project-status-hint {
    font-size: .72rem;
  }
}

@media (max-width: 768px) {
  .project-status-mobile-card {
    display: block;
  }

  .project-status-desktop-card {
    display: none;
  }

  .project-status-mobile-options {
    display: none !important;
  }

  .project-status-mobile-select-ui {
    display: block !important;
  }
}

/* Task status */
.task-todo    { background: #f0f0f5; color: var(--text-secondary); }
.task-doing   { background: #e8f4ff; color: var(--blue); }
.task-review  { background: #fff4e0; color: #c47b00; }
.task-done    { background: #e8faf0; color: #1a9e3f; }
.task-blocked { background: #fff0ee; color: var(--red); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }

table.veqco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

table.veqco-table th {
  padding: .75rem 1rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

table.veqco-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

table.veqco-table tr:last-child td { border-bottom: none; }
table.veqco-table tbody tr:hover td { background: var(--surface-2); }

/* ---- Progress ---- */
.progress-bar-wrap {
  background: var(--bg);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
  transition: width .4s ease;
}

.progress-bar-fill.green  { background: var(--green); }
.progress-bar-fill.orange { background: var(--orange); }
.progress-bar-fill.red    { background: var(--red); }

/* ---- Kanban board ---- */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}

.kanban-col {
  min-width: 260px;
  max-width: 280px;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: .875rem;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .875rem;
}

.kanban-col-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.kanban-count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: .1rem .5rem;
}

.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem;
  margin-bottom: .625rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}

.kanban-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.kanban-card-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .3rem;
}

.kanban-card-client {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
}

.kanban-amount {
  font-size: .8125rem;
  font-weight: 620;
  color: var(--text-primary);
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: scaleIn .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}

.modal-box.modal-lg { max-width: 760px; }
.modal-box.modal-xl { max-width: 960px; }

.modal-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -.02em;
}

.modal-close {
  width: 30px; height: 30px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background .15s;
}
.modal-close:hover { background: var(--border); }

.modal-body { padding: 1.25rem 1.5rem; }

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .625rem;
  background: var(--surface-2);
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 2.5rem;
  color: var(--text-tertiary);
  margin-bottom: .875rem;
  display: block;
}

.empty-state-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .375rem;
}

.empty-state-desc {
  font-size: .875rem;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 auto .875rem;
}

/* ---- Alert / Toast ---- */
.alert {
  padding: .875rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.alert-success { background: #e8faf0; color: #1a9e3f; border: 1px solid #b3e6c4; }
.alert-error   { background: #fff0ee; color: var(--red); border: 1px solid #ffcdc9; }
.alert-warning { background: #fff4e0; color: #c47b00; border: 1px solid #ffd98a; }
.alert-info    { background: #e8f4ff; color: var(--blue); border: 1px solid #b3d7ff; }

/* Toast container */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  background: var(--text-primary);
  color: #fff;
  padding: .75rem 1.1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toastIn .25s ease;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.toast.success { background: #1a9e3f; }
.toast.error   { background: var(--red); }
.toast.warning { background: #c47b00; }

/* ---- Divider ---- */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* ---- Task status mobile select (hidden on desktop) ---- */
.task-status-mobile { display: none; }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  padding: 0 .25rem;
  margin-bottom: 1.25rem;
}

.tab-btn {
  padding: .625rem .875rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}

.tab-btn:hover { color: var(--text-primary); }

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 620;
  color: #FF0000;
  margin-left: .35rem;
  padding: .1rem .4rem;
}
.tab-count.todo    { background: #9a9aaf; }
.tab-count.doing   { background: #007aff; }
.tab-count.review  { background: #ff9500; }
.tab-count.done    { background: #34c759; }
.tab-count.blocked { background: #ff3b30; }

/* ---- Steps (wizard) ---- */
.steps {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 0;
}

.step-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem;
  font-weight: 620;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all .2s;
}

.step-item.active .step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.step-item.done .step-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.step-label {
  font-size: .78rem;
  color: var(--text-tertiary);
  margin-left: .5rem;
  white-space: nowrap;
}

.step-item.active .step-label { color: var(--accent); font-weight: 600; }
.step-item.done .step-label   { color: var(--green); }

.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 .5rem;
}

.step-line.done { background: var(--green); }

/* ---- Subscription trial bar ---- */
/* Sidebar is position:fixed at 240px — offset the bar so it aligns with main content */
.trial-bar {
  background: linear-gradient(90deg, var(--accent) 0%, #7c3aed 100%);
  color: #fff;
  padding: .6rem 1.5rem;
  font-size: .8125rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: 240px;
}
.trial-bar-icon { flex-shrink: 0; }
.trial-bar-content {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex-wrap: wrap;
}
.trial-bar-label,
.trial-bar-copy,
.trial-bar-link {
  line-height: 1.35;
}
@media (max-width: 1024px) {
  .trial-bar { margin-left: 0; }

  /* Task status tabs: texto más compacto en tablet para evitar wrapping */
  .task-status-tabs .tab-btn {
    font-size: .72rem;
    padding: .5rem .45rem;
    white-space: nowrap;
  }
  .tab-count {
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: .65rem;
    padding: .05rem .3rem;
    margin-left: .2rem;
  }
}

.trial-bar a { color: rgba(255,255,255,.9); text-decoration: underline; }
.trial-bar a:hover { color: #fff; }

.dashboard-goals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.dashboard-goal-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 1rem;
  min-width: 0;
}
.dashboard-goal-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .625rem;
}
.dashboard-goal-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 0;
}
.dashboard-goal-value {
  font-size: 1.375rem;
  font-weight: 620;
  color: var(--text-primary);
  margin-bottom: .25rem;
  overflow-wrap: anywhere;
}
.dashboard-goal-target {
  font-size: .75rem;
  color: var(--text-tertiary);
  margin-bottom: .625rem;
  overflow-wrap: anywhere;
}
.dashboard-goal-track {
  background: var(--border);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
}
.dashboard-goal-pct {
  font-size: .72rem;
  font-weight: 620;
  margin-top: .3rem;
  text-align: right;
}

/* ---- Auth pages ---- */
.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 1.5rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}

.auth-brand {
  font-size: 1.6rem;
  font-weight: 620;
  letter-spacing: -.04em;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: .25rem;
}

.auth-brand span { color: var(--accent); }

.auth-subtitle {
  text-align: center;
  font-size: .875rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* ---- Landing ---- */
.landing-hero {
  min-height: 100vh;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.landing-nav {
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hero-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--accent-light);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .875rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
}

.hero-title {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 620;
  letter-spacing: -.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.hero-title span { color: var(--accent); }

.hero-desc {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ---- Pricing cards ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: relative;
}

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted), var(--shadow);
}

.pricing-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 620;
  padding: .2rem .875rem;
  border-radius: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pricing-plan { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: .5rem; }

.pricing-price {
  font-size: 2.5rem;
  font-weight: 620;
  letter-spacing: -.06em;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: .25rem;
}

.pricing-price sup { font-size: 1rem; vertical-align: top; margin-top: .5rem; font-weight: 600; }
.pricing-period { font-size: .8rem; color: var(--text-secondary); margin-bottom: 1.5rem; }

.pricing-features { list-style: none; margin-bottom: 1.5rem; }
.pricing-features li {
  font-size: .875rem;
  color: var(--text-secondary);
  padding: .35rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pricing-features li i { color: var(--green); flex-shrink: 0; }

/* ---- Animations ---- */
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(.95); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes toastIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn .3s ease; }

/* ---- Sidebar toggle button (hidden desktop, shown mobile) ---- */
.sidebar-toggle-btn { display: none; }

/* ---- Panel derecho proyecto: visible en desktop, toggle en móvil ---- */
.project-right-col { display: block; min-width: 0; }
.project-panel-toggle-wrap { display: none; }

/* ---- Layout grids (controlables por media queries) ---- */
.layout-2col      { display: grid; grid-template-columns: 2fr 1fr;    gap: 1.25rem; align-items: start; }
.layout-2col > * { min-width: 0; }
.layout-sidebar   { display: grid; grid-template-columns: 1fr 340px;  gap: 1.25rem; align-items: start; }
.settings-layout  { display: grid; grid-template-columns: 200px 1fr;  gap: 1.25rem; align-items: start; }
.meetings-layout  { display: grid; grid-template-columns: 1fr 300px;  gap: 1.25rem; align-items: start; }
/* Dashboard grids (responsive) */
.dash-2col      { display: grid; grid-template-columns: 1fr 1fr;    gap: 1.25rem; margin-bottom: 1.25rem; }
.dash-2col-wide { display: grid; grid-template-columns: 1.5fr 1fr;  gap: 1.25rem; }
/* KPI 4-column grid */
.kpi-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
/* Generic 2-col grid for forms — collapses on mobile */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- Settings horizontal tabs ---- */
.settings-tabs-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 .375rem;
}
.settings-tabs-nav::-webkit-scrollbar { display: none; }
/* Thin line below the nav to connect with content */
.settings-tabs-nav + * {
  border-top: 2px solid var(--border);
  padding-top: 1.5rem;
}
.settings-tab-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.125rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
}
.settings-tab-link:hover { color: var(--text-primary); background: var(--surface-2); }
.settings-tab-link.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-muted); }
.settings-tab-link i { font-size: .875rem; flex-shrink: 0; }
/* Separator before personal-settings group */
.settings-tab-sep {
  width: 1px;
  background: var(--border);
  margin: .625rem .25rem;
  flex-shrink: 0;
}

/* Settings dropdown (mobile) */
.settings-mobile-dropdown {
  display: none;
  position: relative;
  margin-bottom: 0;
}
.settings-mobile-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.settings-mobile-dropdown-btn i.toggle-icon { transition: transform .2s; font-size: .85rem; }
.settings-mobile-dropdown-btn.open i.toggle-icon { transform: rotate(180deg); }
.settings-mobile-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.settings-mobile-dropdown-menu.open { display: block; }
.settings-mobile-menu-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.settings-mobile-menu-item:last-child { border-bottom: none; }
.settings-mobile-menu-item:hover { background: var(--surface-2); color: var(--text-primary); }
.settings-mobile-menu-item.active { color: var(--accent); background: var(--accent-muted); font-weight: 620; }
.settings-mobile-menu-sep { height: 1px; background: var(--border); margin: .25rem 0; }

/* ---- Sidebar overlay ---- */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  backdrop-filter: blur(2px);
}
#sidebar-overlay.active { display: block; }

/* Evitar scroll horizontal global en mobile */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .main-content { overflow-x: hidden; }
}

/* =====================================================
   Tablet ≤1024px
===================================================== */
@media (max-width: 1024px) {
  .sidebar {
    width: 240px;
    transform: translateX(-100%);
    z-index: 200;
  }
  .sidebar-collapse-btn { display: none; }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .main-content { margin-left: 0; }
  .sidebar-toggle-btn { display: flex; }
  .topbar { padding: .65rem 1rem; }
}

/* =====================================================
   Tablet/Mobile ≤768px
===================================================== */
@media (max-width: 768px) {
  /* Page */
  .page-content { padding: 1rem .875rem; }

  .trial-bar {
    padding: .65rem .875rem;
    align-items: flex-start;
  }
  .trial-bar-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: .125rem;
  }
  .trial-bar-link {
    margin-top: .15rem;
  }

  /* KPI */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-goals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }

  /* Auth */
  .auth-card { padding: 1.75rem 1.5rem; }

  /* Layout grids → single column */
  .layout-2col      { grid-template-columns: 1fr; }
  .layout-sidebar   { grid-template-columns: 1fr; }
  .settings-layout  { grid-template-columns: 1fr; }
  .meetings-layout  { grid-template-columns: 1fr; }
  .kpi-4col         { grid-template-columns: repeat(2, 1fr); }

  /* Settings: ocultar tab nav y mostrar dropdown */
  .settings-tabs-nav { display: none !important; }
  .settings-mobile-dropdown { display: block; margin-bottom: 1rem; }
  .settings-tabs-nav + * { border-top: none; padding-top: 0; }

  /* Celda contacto en móvil: label visible, líneas apiladas */
  .client-contact-cell { flex-direction: column !important; align-items: flex-start !important; gap: .1rem !important; }
  .client-contact-cell::before { display: none !important; }
  .client-contact-label { display: block; }
  .client-contact-line, .client-wa-link { max-width: 100%; white-space: normal; overflow-wrap: break-word; }

  /* Alert info en payments/notifications: código que desborda */
  .alert { flex-wrap: wrap; }
  .alert > i { flex-shrink: 0; }
  .alert code { word-break: break-all; overflow-wrap: break-word; }
  .alert-info { display: block; }
  .alert-info i.bi { margin-right: .35rem; }

  /* Grids 1fr 1fr en settings → 1 columna en móvil */
  #epc-fields    { grid-template-columns: 1fr !important; }
  #stripe-fields { grid-template-columns: 1fr !important; }
  .grid-2col        { grid-template-columns: 1fr; }

  /* Tables → card-stack: toda la info visible, sin scroll horizontal */
  .hide-sm { /* mostrar todas las columnas en móvil */ }
  .table-wrap { overflow-x: visible; padding: .625rem .75rem; }
  table.veqco-table { display: block; min-width: 0; }
  table.veqco-table thead { display: none; }
  table.veqco-table tbody { display: block; }
  table.veqco-table tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .625rem;
    padding: .5rem .875rem;
    cursor: default;
  }
  table.veqco-table tr[style*="cursor:pointer"] { cursor: pointer; }
  table.veqco-table tr:last-child { margin-bottom: 0; }
  table.veqco-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem 0;
    border: none;
    font-size: .8125rem;
    white-space: normal;
    word-break: break-word;
  }
  table.veqco-table td[data-label]::before {
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 620;
    color: var(--text-tertiary);
    flex-shrink: 0;
    min-width: 76px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: .15rem;
  }
  table.veqco-table td:not([data-label]) {
    justify-content: flex-end;
    padding-top: .375rem;
    flex-wrap: wrap;
    gap: .25rem;
  }
  table.veqco-table tbody tr:hover td { background: transparent; }
  /* Search bars full width on mobile */
  form[method="GET"] { max-width: 100% !important; }
  /* Stats pills wrappable */
  .page-content > div[style*="overflow-x:auto"] { overflow-x: auto; }

  /* Topbar */
  .topbar { flex-wrap: wrap; gap: .5rem; }
  .topbar-title { font-size: .95rem; min-width: 0; }
  .project-topbar {
    align-items: center;
    gap: .65rem !important;
  }
  .project-topbar-title-wrap {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    overflow: visible !important;
  }
  .project-topbar .topbar-title {
    display: block;
    max-width: calc(100vw - 6rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .project-topbar-actions {
    order: 2;
    width: 100%;
    display: grid !important;
    grid-template-columns: 36px 36px minmax(0, 1fr) 42px;
    gap: .45rem;
    align-items: center;
  }
  .project-topbar-btn,
  .project-topbar-status {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .project-topbar-btn-icon {
    width: 36px;
    padding: 0;
  }
  .project-topbar-status {
    padding: 0 .6rem;
    justify-content: center;
    text-align: center;
    font-size: .78rem;
    white-space: nowrap;
  }
  .project-topbar-btn-primary {
    width: 100%;
    white-space: nowrap;
    padding-inline: .8rem;
  }
  .project-topbar-btn-danger {
    min-width: 42px;
    height: 42px !important;
    padding: 0 .6rem !important;
  }
  .project-summary-grid {
    flex-direction: column;
    align-items: stretch !important;
  }
  .project-summary-main {
    width: 100%;
  }
  .project-summary-progress {
    width: 100%;
    text-align: left !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
  }
  .project-summary-progress-value {
    font-size: 1.45rem !important;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .project-summary-progress-label {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Cards */
  .card-header { padding: .875rem 1rem; }
  .card-body   { padding: 1rem; }
  .card-footer { padding: .75rem 1rem; }

  /* Modal — padding ajustado para móvil */
  .modal-overlay { padding: .75rem; align-items: flex-start; padding-top: 1.5rem; }
  .modal-box { max-height: 92vh; }
  .modal-body { padding: 1rem 1.25rem; }
  .modal-footer { padding: .75rem 1.25rem; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* Kanban → columnas apiladas verticalmente en móvil */
  .kanban-board { flex-direction: column; overflow-x: visible; gap: .75rem; }
  .kanban-col { min-width: 100%; max-width: 100%; }

  /* Page content overflow */
  .page-content { overflow-x: hidden; }

  /* Ocultar badge de estado en topbar — ya aparece en la tarjeta de estado */
  .project-topbar-status { display: none !important; }

  /* Segunda columna: ocultar en móvil por defecto, toggle via botón */
  .project-right-col { display: none; }
  .project-right-col.is-open { display: block; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .project-right-col.is-open .card { max-width: 100%; overflow: hidden; }
  .project-panel-toggle-wrap { display: block; margin-bottom: 1rem; }

  /* Calendario y Gantt: permitir scroll horizontal interno */
  #view-calendar .card-body,
  #view-gantt .card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #view-gantt .card-body { overflow-y: visible; }

  /* Task status tabs → hide on mobile, show select */
  .task-status-tabs { display: none !important; }
  .task-status-mobile { display: block !important; }

  /* Topbar actions → wrap */
  .topbar-actions { flex-wrap: wrap; gap: .375rem; }

  /* Quote item rows → single column */
  .quote-item-row { grid-template-columns: 1fr !important; }

  /* Collapse all inline 2-col form grids → single column (covers settings, modals, etc.) */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Steps wizard: ocultar etiquetas */
  .step-label { display: none; }

  /* Quote topbar buttons más compactos */
  .topbar > div { flex-wrap: wrap; gap: .375rem; }
}

/* =====================================================
   Mobile ≤480px
===================================================== */
@media (max-width: 480px) {
  .page-content { padding: .75rem .625rem; }

  .trial-bar {
    padding: .625rem .75rem;
    gap: .5rem;
  }
  .trial-bar-icon {
    margin-top: .1rem;
  }
  .trial-bar-content {
    width: 100%;
  }
  .dashboard-goals-grid { grid-template-columns: 1fr; gap: .75rem; }

  /* KPI */
  .kpi-grid { grid-template-columns: 1fr; }

  /* Dashboard 2-col → single column on small phones */
  .dash-2col      { grid-template-columns: 1fr; }
  .dash-2col-wide { grid-template-columns: 1fr; }

  /* Auth */
  .auth-card { padding: 1.25rem 1rem; }

  /* Toast ocupa todo el ancho */
  #toast-container { right: .75rem; left: .75rem; }
  .toast { max-width: 100%; }

  /* Kanban — full width en móvil pequeño */
  .kanban-col { min-width: 100%; }

  /* Topbar: título compacto */
  .topbar-title { font-size: .875rem; }
  .topbar { padding: .5rem .75rem; }
  .project-topbar-actions {
    grid-template-columns: 34px 34px minmax(0, 1fr) 40px;
    gap: .35rem;
  }
  .project-topbar-btn,
  .project-topbar-status {
    min-height: 40px;
  }
  .project-topbar-btn-primary {
    font-size: .82rem;
    padding-inline: .65rem;
  }
  .project-topbar .topbar-title {
    max-width: calc(100vw - 5.25rem);
  }
  .project-summary-progress-value {
    font-size: 1.28rem !important;
  }
  .project-summary-progress-label {
    font-size: .68rem !important;
  }

  /* Proyecto / cotización: botones icon-only en topbar */
  .topbar-sm-icon span { display: none; }
}

/* ---- Utility ---- */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary  { color: var(--text-tertiary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-green     { color: var(--green) !important; }
.text-orange    { color: var(--orange) !important; }
.text-red       { color: var(--red) !important; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 620; }
.fw-800 { font-weight: 620; }

.fs-xs  { font-size: .72rem; }
.fs-sm  { font-size: .8125rem; }
.fs-md  { font-size: .9375rem; }
.fs-lg  { font-size: 1.0625rem; }

.rounded-full { border-radius: 9999px !important; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }

.mt-auto { margin-top: auto; }
.ms-auto { margin-left: auto; }

.p-0  { padding: 0; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }

.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }



/* ==========================================================
   V3 — Dashboard cards con un poco más de presencia
   ========================================================== */
.kpi-grid .kpi-card,
.dashboard-goals-grid .dashboard-goal-card,
.card.dashboard-card,
.dashboard-card,
.dashboard-main .card,
.dashboard-page .card{
  min-height: 118px;
}

.kpi-card{
  padding: 1.45rem 1.35rem;
}

.dashboard-goal-card{
  padding: 1.15rem;
}

.kpi-value{
  font-size: 2.15rem;
}

.dashboard-goal-value{
  font-size: 1.5rem;
}



/* ==========================================================
   V4 — Ajustes globales solicitados
   ========================================================== */

/* Color de botones activos igual al aprobado en Mail OS */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg,#2563eb,#0f766e) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(37,99,235,.18);
}

/* Dashboard principal: tipografía y cards un poco más grandes */
.kpi-grid{
  gap:1.15rem;
}
.kpi-card{
  min-height:136px !important;
  padding:1.55rem 1.45rem !important;
}
.kpi-label{
  font-size:.86rem !important;
  font-weight:620 !important;
}
.kpi-value{
  font-size:2.35rem !important;
  font-weight:620 !important;
}
.kpi-sub{
  font-size:.86rem !important;
}
.dashboard-goal-card{
  min-height:118px !important;
  padding:1.25rem !important;
}
.dashboard-goal-label{
  font-size:.86rem !important;
  font-weight:620 !important;
}
.dashboard-goal-value{
  font-size:1.7rem !important;
}
.dashboard-goal-target{
  font-size:.82rem !important;
}

/* Modales: puntas curvas, scroll interno correcto y sin desbordes */
.modal-overlay{
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:1rem !important;
}
.modal-box{
  border-radius:24px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(100vh - 2rem) !important;
}
.modal-box > form{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.modal-header,
.modal-footer{
  flex:0 0 auto !important;
}
.modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  scrollbar-width:thin;
}
.modal-body::-webkit-scrollbar{
  width:8px;
}
.modal-body::-webkit-scrollbar-thumb{
  background:rgba(88,86,214,.28);
  border-radius:999px;
}
.modal-close{
  border-radius:50% !important;
}



/* ==========================================================
   V5 — Aumentar un poco tamaño del Dashboard principal
   Alcance: solo app/dashboard.php y dashboard_main_redesign.php
   ========================================================== */
.dashboard-main-size-v5 .kpi-grid{
  gap: 1.35rem !important;
  margin-bottom: 1.65rem !important;
}

.dashboard-main-size-v5 .kpi-card{
  min-height: 148px !important;
  padding: 1.65rem 1.55rem !important;
  border-radius: 18px !important;
}

.dashboard-main-size-v5 .kpi-label{
  font-size: .9rem !important;
  font-weight: 620 !important;
  letter-spacing: .065em !important;
}

.dashboard-main-size-v5 .kpi-value{
  font-size: 2.45rem !important;
  font-weight: 620 !important;
  line-height: 1.04 !important;
}

.dashboard-main-size-v5 .kpi-sub{
  font-size: .9rem !important;
  line-height: 1.4 !important;
  margin-top: .25rem !important;
}

.dashboard-main-size-v5 .kpi-icon{
  font-size: 1.45rem !important;
  width: 62px !important;
  height: 62px !important;
}

.dashboard-main-size-v5 > .card,
.dashboard-main-size-v5 .card{
  border-radius: 18px;
}

.dashboard-main-size-v5 .card-header{
  padding: 1.15rem 1.35rem !important;
}

.dashboard-main-size-v5 .card-title{
  font-size: 1.06rem !important;
  font-weight: 620 !important;
}

.dashboard-main-size-v5 .card-body{
  padding: 1.25rem 1.35rem !important;
}

.dashboard-main-size-v5 .dashboard-goals-grid{
  gap: 1.35rem !important;
}

.dashboard-main-size-v5 .dashboard-goal-card{
  min-height: 132px !important;
  padding: 1.35rem !important;
  border-radius: 16px !important;
}

.dashboard-main-size-v5 .dashboard-goal-label{
  font-size: .9rem !important;
  font-weight: 620 !important;
}

.dashboard-main-size-v5 .dashboard-goal-value{
  font-size: 1.9rem !important;
  font-weight: 620 !important;
  line-height: 1.05 !important;
}

.dashboard-main-size-v5 .dashboard-goal-target{
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 900px){
  .dashboard-main-size-v5 .kpi-card{
    min-height: 132px !important;
  }
  .dashboard-main-size-v5 .kpi-value{
    font-size: 2.1rem !important;
  }
}



/* ==========================================================
   V7 — Estándar global de negrilla Vecqo
   Regla solicitada: toda negrilla visual debe ser font-weight 620.
   ========================================================== */
strong,
b,
.fw-bold,
.font-bold,
.text-bold,
.font-semibold,
.card-title,
.modal-title,
.page-title,
h1,h2,h3,h4,h5,h6{
  font-weight:620 !important;
}



/* ==========================================================
   V9 — Fix modal/toast y estándar weight 620
   ========================================================== */
strong,
b,
.fw-bold,
.font-bold,
.text-bold,
.font-semibold,
.card-title,
.modal-title,
.page-title,
h1,h2,h3,h4,h5,h6{
  font-weight:620 !important;
}

/* Los modales deben quedar por encima de drawers y overlays */
.modal-overlay{
  z-index:3000 !important;
}
.modal-box{
  z-index:3001 !important;
}

/* Toasts siempre visibles encima de modales/drawers */
#toast-container{
  z-index:5000 !important;
}
.toast,
.toast-notification,
.alert-toast{
  z-index:5001 !important;
}



/* ==========================================================
   V10 — Cotizaciones compactas tipo Clientes
   ========================================================== */
.vq-quotes-compact-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(190px,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

.vq-quote-kpi-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  min-height:104px;
  padding:1rem 1.1rem;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:.85rem;
  align-items:center;
}

.vq-quote-kpi-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--accent-light);
  color:var(--accent);
  font-size:1.1rem;
}

.vq-quote-kpi-card span,
.vq-quote-kpi-card small{
  display:block;
  color:var(--text-secondary);
}

.vq-quote-kpi-card span{
  font-size:.82rem;
  font-weight:620;
}

.vq-quote-kpi-card strong{
  display:block;
  color:var(--text-primary);
  font-size:1.3rem;
  font-weight:620;
  line-height:1.1;
  margin:.12rem 0;
}

.vq-quote-kpi-card small{
  font-size:.78rem;
  line-height:1.35;
}

.vq-quote-kpi-card small i{
  color:var(--green);
  margin-right:.25rem;
}

.vq-quote-state-card{
  display:block;
}

.vq-quote-state-head{
  font-size:.9rem;
  color:var(--text-primary);
  font-weight:620;
  margin-bottom:.6rem;
}

.vq-quote-state-list{
  display:grid;
  gap:.42rem;
}

.vq-quote-state-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.82rem;
  color:var(--text-secondary);
}

.vq-quote-state-row span{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.vq-quote-state-row i{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
}

.vq-quote-state-row strong{
  color:var(--text-primary);
  font-size:.86rem;
  font-weight:620;
}

/* Filtros igual estilo Clientes */
.vq-quote-filter-pills{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.vq-quote-pill{
  height:36px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:0 .85rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-primary);
  text-decoration:none;
  font-size:.82rem;
  font-weight:620;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.vq-quote-pill.active{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
}

.vq-quote-pill .vq-pill-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--accent);
}

.quote-pill-draft .vq-pill-dot{background:#9ca3af}
.quote-pill-sent .vq-pill-dot{background:#5b6bff}
.quote-pill-accepted .vq-pill-dot{background:#22c55e}
.quote-pill-partially_paid .vq-pill-dot{background:#f59e0b}
.quote-pill-paid .vq-pill-dot{background:#16a34a}
.quote-pill-rejected .vq-pill-dot{background:#ff4d6d}

/* Búsqueda compacta */
.vq-quote-searchbar{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-bottom:1.1rem;
  max-width:520px;
}

.vq-quote-search-input{
  position:relative;
  flex:1;
}

.vq-quote-search-input i{
  position:absolute;
  left:.78rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-tertiary);
  pointer-events:none;
}

.vq-quote-search-input .form-control{
  padding-left:2.35rem;
}

/* Modal de cambio de estado: Pagada y Pago parcial incluidos */
#modal-edit-status .modal-body{
  gap:.55rem !important;
}

#modal-edit-status .btn{
  min-height:38px;
  border-radius:12px;
}

@media (max-width:1280px){
  .vq-quotes-compact-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .vq-quotes-compact-kpis{
    grid-template-columns:1fr;
  }

  .vq-quote-searchbar{
    flex-direction:column;
    align-items:stretch;
  }
}



/* ==========================================================
   V11 — Cotizaciones: sin card Por estado + editar vencimiento
   ========================================================== */
.vq-quotes-compact-kpis{
  grid-template-columns:repeat(3,minmax(210px,1fr)) !important;
}

#modal-edit-expiration .modal-box{
  border-radius:22px;
}

#modal-edit-expiration .form-control[type="date"]{
  min-height:44px;
}

@media (max-width:980px){
  .vq-quotes-compact-kpis{
    grid-template-columns:1fr !important;
  }
}



/* ==========================================================
   V12 — Proyectos rediseño según propuesta visual
   ========================================================== */
.vq-projects-v12{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.vq-project-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,430px) auto 1fr auto;
  gap:.75rem;
  align-items:center;
}

.vq-project-search{
  min-height:44px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 34px;
  align-items:center;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.vq-project-search > i{
  color:var(--text-tertiary);
  display:grid;
  place-items:center;
}

.vq-project-search input{
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font-size:.92rem;
  min-width:0;
}

.vq-project-search input::placeholder{color:var(--text-tertiary)}
.vq-project-clear{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:var(--text-secondary);
  text-decoration:none;
}

.vq-project-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
}

.vq-project-tab{
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-primary);
  text-decoration:none;
  font-size:.84rem;
  font-weight:620;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.vq-project-tab.active{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#6d45f5);
  box-shadow:0 10px 20px rgba(80,80,220,.18);
}

.vq-project-more-filter{
  height:38px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-primary);
  border-radius:12px;
  padding:0 .95rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.82rem;
  font-weight:620;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}

/* KPIs */
.vq-project-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:1rem;
}

.vq-project-kpi{
  min-height:104px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  padding:1.05rem 1.15rem;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:.85rem;
  align-items:center;
}

.vq-project-kpi-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.15rem;
}

.vq-project-kpi-icon.is-blue{background:#edf4ff;color:#2563eb}
.vq-project-kpi-icon.is-orange{background:#fff3df;color:#f59e0b}
.vq-project-kpi-icon.is-green{background:#e9fbf0;color:#22c55e}
.vq-project-kpi-icon.is-red{background:#fff0f1;color:#ef4444}

.vq-project-kpi strong{
  display:block;
  font-size:1.3rem;
  line-height:1.08;
  font-weight:620;
  color:var(--text-primary);
}

.vq-project-kpi span{
  display:block;
  color:var(--text-secondary);
  font-size:.84rem;
  margin-top:.08rem;
}

.vq-project-kpi small{
  display:block;
  margin-top:.12rem;
  font-size:.76rem;
  line-height:1.35;
}

.vq-project-kpi small.is-green{color:#16a34a}
.vq-project-kpi small.is-orange{color:#f59e0b}
.vq-project-kpi small.is-red{color:#ef4444}

/* Clientes */
.vq-project-client-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.vq-project-client-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.vq-project-client-head{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.15rem;
  cursor:pointer;
  user-select:none;
}

.vq-project-client-main{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width:0;
}

.vq-project-client-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#673cf6,#8b5cf6);
  font-weight:620;
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(103,60,246,.20);
}

.vq-project-client-main h3{
  margin:0;
  font-size:1rem;
  font-weight:620;
  color:var(--text-primary);
}

.vq-project-client-main p{
  margin:.14rem 0 0;
  color:var(--text-secondary);
  font-size:.82rem;
}

.vq-project-client-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
  flex:0 0 auto;
  color:var(--text-secondary);
  font-size:.82rem;
}

.vq-project-client-progress{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:190px;
}

.vq-project-client-progress small{
  color:var(--text-secondary);
  font-size:.78rem;
  white-space:nowrap;
}

.vq-project-client-progress i{
  width:92px;
  height:5px;
  border-radius:999px;
  background:#edf0f6;
  overflow:hidden;
  display:block;
}

.vq-project-client-progress b{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#5b6bff,#7c3aed);
}

.vq-project-client-new,
.vq-project-ellipsis{
  height:36px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-primary);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:0 .8rem;
  font-size:.82rem;
  font-weight:620;
  cursor:pointer;
}

.vq-project-ellipsis{
  width:36px;
  padding:0;
}

.vq-project-chevron{
  color:var(--text-secondary);
  transition:transform .2s ease;
}

.vq-project-client-body{
  border-top:1px solid var(--border);
  padding:1.2rem;
  background:linear-gradient(180deg,#fff,rgba(248,249,252,.75));
}

.vq-project-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(240px,1fr));
  gap:1rem;
}

/* Cards proyecto */
.vq-project-card{
  min-height:230px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 10px 22px rgba(15,23,42,.035);
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.vq-project-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
  border-color:color-mix(in srgb, var(--accent) 28%, var(--border));
}

.vq-project-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.vq-project-card h4{
  margin:0;
  font-size:.98rem;
  font-weight:620;
  line-height:1.25;
  color:var(--text-primary);
  max-width:78%;
}

.vq-project-status{
  border-radius:999px;
  padding:.28rem .62rem;
  font-size:.72rem;
  font-weight:620;
  white-space:nowrap;
}

.vq-project-status.tone-green{background:#e9fbf0;color:#16a34a}
.vq-project-status.tone-orange{background:#fff4df;color:#d97706}
.vq-project-status.tone-purple{background:var(--accent-light);color:var(--accent)}
.vq-project-status.tone-red{background:#fff0f1;color:#ef4444}

.vq-project-progress-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:.55rem;
}

.vq-project-progress-line::before{
  content:"";
  grid-column:1;
  grid-row:1;
  height:6px;
  border-radius:999px;
  background:#edf0f6;
}

.vq-project-progress-line span{
  grid-column:1;
  grid-row:1;
  height:6px;
  border-radius:999px;
  z-index:1;
}

.vq-project-card.tone-green .vq-project-progress-line span{background:#22c55e}
.vq-project-card.tone-orange .vq-project-progress-line span{background:#f59e0b}
.vq-project-card.tone-purple .vq-project-progress-line span{background:#7c3aed}
.vq-project-card.tone-red .vq-project-progress-line span{background:#ef4444}

.vq-project-progress-line strong{
  grid-column:2;
  font-size:.82rem;
  font-weight:620;
  color:var(--text-secondary);
  text-align:right;
}

.vq-project-card-data{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.vq-project-card-data small{
  display:block;
  font-size:.72rem;
  color:var(--text-tertiary);
  margin-bottom:.18rem;
}

.vq-project-card-data strong{
  font-size:.83rem;
  color:var(--text-secondary);
  font-weight:620;
}

.vq-project-card-data strong.is-overdue{
  color:var(--red);
}

.vq-project-owners small{
  display:block;
  font-size:.72rem;
  color:var(--text-tertiary);
  margin-bottom:.38rem;
}

.vq-project-owners div{
  display:flex;
  align-items:center;
}

.vq-project-owners span{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent-light);
  color:var(--accent);
  border:2px solid var(--surface);
  font-size:.7rem;
  font-weight:620;
  margin-left:-5px;
}

.vq-project-owners span:first-child{margin-left:0}

/* Timeline */
.vq-project-timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.2rem;
  margin-top:auto;
}

.vq-project-timeline div{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.15rem;
  min-width:0;
}

.vq-project-timeline div::before{
  content:"";
  position:absolute;
  top:7px;
  left:-50%;
  right:50%;
  height:2px;
  background:#dbe2ee;
  z-index:0;
}

.vq-project-timeline div:first-child::before{display:none}

.vq-project-timeline i{
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid #cfd8e6;
  background:var(--surface);
  z-index:1;
}

.vq-project-timeline .done i{
  background:#22c55e;
  border-color:#22c55e;
}

.vq-project-timeline .active i{
  background:#f59e0b;
  border-color:#f59e0b;
}

.vq-project-timeline span{
  font-size:.66rem;
  color:var(--text-secondary);
}

.vq-project-timeline small{
  font-size:.62rem;
  color:var(--text-tertiary);
}

.vq-project-card.tone-orange .vq-project-timeline .done i,
.vq-project-card.tone-orange .vq-project-timeline .active i{
  background:#f59e0b;
  border-color:#f59e0b;
}

.vq-project-card-footer{
  display:flex;
  justify-content:flex-end;
}

.vq-project-detail-btn{
  height:34px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-primary);
  border-radius:10px;
  padding:0 .8rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  font-weight:620;
  cursor:pointer;
}

.vq-project-detail-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

@media (max-width:1400px){
  .vq-project-card-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}
}

@media (max-width:1100px){
  .vq-project-toolbar{
    grid-template-columns:1fr;
  }
  .vq-project-more-filter{
    justify-self:start;
  }
  .vq-project-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .vq-project-client-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .vq-project-client-meta{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }
}

@media (max-width:760px){
  .vq-project-kpis,
  .vq-project-card-grid{
    grid-template-columns:1fr;
  }
  .vq-project-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:.2rem;
  }
  .vq-project-client-progress{
    min-width:150px;
  }
}


/* ==========================================================
   V13 — Project view redesign
   ========================================================== */
.project-view-v13{
  --pv-radius: 22px;
  --pv-border: #e7eaf2;
  --pv-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.project-view-v13 .project-view-header{background:transparent;border:0;padding:0 0 1rem;margin-bottom:1rem}
.project-view-v13 .project-topbar-title-wrap .topbar-title{font-size:1.15rem;font-weight:620;color:var(--text-primary)}
.project-view-v13 .project-topbar-status{border-radius:999px;padding:.42rem .9rem;font-weight:620}
.project-view-v13 .layout-2col.project-view-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,.9fr);gap:1.2rem;align-items:start}
.project-view-v13 .card,.project-view-v13 .vecqo-gpt-card{border-radius:var(--pv-radius);border:1px solid var(--pv-border);box-shadow:var(--pv-shadow);overflow:hidden}
.project-view-v13 .card-header,.project-view-v13 .vecqo-gpt-card-header{min-height:58px;padding:1rem 1.2rem;background:#fff;border-bottom:1px solid var(--pv-border)}
.project-view-v13 .card-title,.project-view-v13 .vecqo-gpt-title{font-size:1rem;font-weight:620}
.project-view-v13 .project-summary-card .card-body{padding:1.2rem 1.25rem}.project-view-v13 .project-summary-card{background:#fff}
.project-view-v13 .project-summary-progress-value{font-size:2rem !important;line-height:1}
.project-view-v13 .progress-bar-wrap{background:#edf1f7;border-radius:999px;overflow:hidden}.project-view-v13 .progress-bar-fill{border-radius:999px}
.project-view-v13 .project-view-switcher{gap:.55rem !important;margin-bottom:1rem !important;padding-bottom:.95rem !important}
.project-view-v13 .project-view-switcher .btn{height:40px;border-radius:12px;padding:0 .95rem;font-weight:620}
.project-view-v13 .tabs.task-status-tabs{gap:1.1rem;padding:0 .15rem .65rem;border-bottom:1px solid var(--pv-border);margin-bottom:1rem;overflow-x:auto}
.project-view-v13 .tabs.task-status-tabs .tab-btn{background:transparent;border:0;padding:.5rem .1rem;border-bottom:2px solid transparent;border-radius:0;font-weight:620;color:var(--text-secondary);white-space:nowrap}
.project-view-v13 .tabs.task-status-tabs .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.project-view-v13 [data-tab-id="avance"] > .card > div:first-child{padding:1.35rem 1.25rem !important}
.project-view-v13 [data-tab-id="avance"] .card-body{padding:1.15rem}
.project-view-v13 [data-tab-id="avance"] .card-body > div[style*="grid-template-columns:repeat(4,1fr)"]{gap:.85rem !important}
.project-view-v13 [data-tab-id="avance"] .card-body > div[style*="grid-template-columns:repeat(4,1fr)"] > div,.project-view-v13 [data-tab-id="avance"] .project-advance-grid .card{border-radius:18px;border:1px solid var(--pv-border);box-shadow:none}
.project-view-v13 .project-status-option,.project-view-v13 .vecqo-gpt-status-option{border:1px solid var(--pv-border);border-radius:18px;padding:.95rem 1rem;min-height:74px;margin-bottom:.8rem;background:#fff;display:grid;grid-template-columns:48px minmax(0,1fr) 34px;gap:.8rem;align-items:center}
.project-view-v13 .project-status-option:last-child,.project-view-v13 .vecqo-gpt-status-option:last-child{margin-bottom:0}
.project-view-v13 .project-status-option.is-active,.project-view-v13 .vecqo-gpt-status-option.is-active{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);background:linear-gradient(180deg,#fff,rgba(109,69,245,.03))}
.project-view-v13 .project-status-icon,.project-view-v13 .vecqo-gpt-status-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#f5f7fc;color:var(--accent)}
.project-view-v13 .project-status-option[data-status="active"] .project-status-icon{background:#ecfdf3;color:#16a34a}.project-view-v13 .project-status-option[data-status="on_hold"] .project-status-icon{background:#fff5e8;color:#d97706}.project-view-v13 .project-status-option[data-status="completed"] .project-status-icon{background:#f1efff;color:#6d45f5}.project-view-v13 .project-status-option[data-status="cancelled"] .project-status-icon{background:#fff1f1;color:#ef4444}
.project-view-v13 .project-status-label,.project-view-v13 .vecqo-gpt-status-label{display:block;font-size:1rem;font-weight:620;color:var(--text-primary)}.project-view-v13 .project-status-hint,.project-view-v13 .vecqo-gpt-status-hint{display:block;font-size:.8rem;color:var(--text-secondary);margin-top:.1rem}
.project-view-v13 .project-status-check,.project-view-v13 .vecqo-gpt-status-check{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f7f8fb;color:var(--text-secondary)}
.project-view-v13 .project-status-option.is-active .project-status-check{background:var(--accent);color:#fff}
.project-view-v13 .project-responsibles-card .member-row{padding:.85rem 1.15rem !important}
.project-view-v13 .project-portal-card .btn,.project-view-v13 .project-suggestions-card .btn,.project-view-v13 .project-activity-card .btn{border-radius:12px}
.project-view-v13 .project-portal-card .btn-primary{min-height:42px}
.project-view-v13 .project-suggestions-card .empty-state,.project-view-v13 .project-activity-card .empty-state{padding:1.75rem 1.25rem !important}
.project-view-v13 .project-activity-card #activity-recent-body > div{padding:.9rem 1.2rem !important}
.project-view-v13 #view-calendar .card,.project-view-v13 #view-gantt .card,.project-view-v13 [data-tab-panel="tasks"][data-tab-id!="avance"] .card{border-radius:18px}
.project-view-v13 [data-tab-panel="tasks"][data-tab-id!="avance"] .card > div[style*="padding:.875rem 1.25rem"]{padding:1rem 1.1rem !important}
.project-view-v13 .project-panel-toggle-wrap{display:none}
@media (max-width:1200px){.project-view-v13 .layout-2col.project-view-layout{grid-template-columns:1fr}.project-view-v13 .project-panel-toggle-wrap{display:block;margin:0 0 1rem}}
@media (max-width:768px){.project-view-v13 .project-view-header{padding-bottom:.8rem}.project-view-v13 .project-topbar-actions{width:100%;justify-content:flex-start}.project-view-v13 .project-summary-progress{width:100%;text-align:left !important}.project-view-v13 .project-status-option{grid-template-columns:42px minmax(0,1fr) 30px;padding:.85rem}}


/* ==========================================================
   V14 — Proyectos index compact + icons fix
   ========================================================== */
.vq-projects-v12 .vq-project-toolbar{
  grid-template-columns:minmax(260px,430px) 1fr;
  gap:.7rem 1rem;
}
.vq-projects-v12 .vq-project-tabs{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:.15rem;
}
.vq-projects-v12 .vq-project-kpis{gap:.85rem}
.vq-projects-v12 .vq-project-kpi{
  min-height:96px;
  grid-template-columns:64px minmax(0,1fr);
  gap:.95rem;
  padding:1rem 1.1rem;
}
.vq-projects-v12 .vq-project-kpi-icon{
  width:56px;
  height:56px;
  font-size:1.4rem;
}
.vq-projects-v12 .vq-project-kpi strong{font-size:1.55rem}
.vq-projects-v12 .vq-project-kpi span{font-size:.9rem}
.vq-projects-v12 .vq-project-client-head{
  min-height:60px;
  padding:.9rem 1rem;
}
.vq-projects-v12 .vq-project-client-avatar{
  width:46px;
  height:46px;
  font-size:1rem;
}
.vq-projects-v12 .vq-project-client-main h3{font-size:1.05rem}
.vq-projects-v12 .vq-project-client-meta{gap:.65rem}
.vq-projects-v12 .vq-project-client-progress{min-width:170px}
.vq-projects-v12 .vq-project-client-progress i{width:84px}
.vq-projects-v12 .vq-project-client-new,
.vq-projects-v12 .vq-project-ellipsis{
  height:34px;
  border-radius:10px;
}
.vq-projects-v12 .vq-project-client-body{
  padding:.9rem 1rem 1rem;
}
.vq-projects-v12 .vq-project-card-grid{
  gap:.8rem;
}
.vq-projects-v12 .vq-project-card{
  min-height:198px;
  padding:.85rem .9rem;
  gap:.7rem;
  border-radius:15px;
}
.vq-projects-v12 .vq-project-card h4{
  font-size:.94rem;
  max-width:74%;
}
.vq-projects-v12 .vq-project-status{
  padding:.24rem .56rem;
  font-size:.68rem;
}
.vq-projects-v12 .vq-project-progress-line{gap:.45rem}
.vq-projects-v12 .vq-project-progress-line::before,
.vq-projects-v12 .vq-project-progress-line span{height:5px}
.vq-projects-v12 .vq-project-progress-line strong{font-size:.78rem}
.vq-projects-v12 .vq-project-card-data{gap:.75rem}
.vq-projects-v12 .vq-project-card-data small{font-size:.69rem;margin-bottom:.12rem}
.vq-projects-v12 .vq-project-card-data strong{font-size:.8rem}
.vq-projects-v12 .vq-project-owners small{font-size:.69rem;margin-bottom:.28rem}
.vq-projects-v12 .vq-project-owners span{
  width:24px;
  height:24px;
  font-size:.66rem;
}
.vq-projects-v12 .vq-project-timeline{
  gap:.1rem;
}
.vq-projects-v12 .vq-project-timeline div{gap:.12rem}
.vq-projects-v12 .vq-project-timeline i{
  width:9px;
  height:9px;
}
.vq-projects-v12 .vq-project-timeline span{font-size:.63rem}
.vq-projects-v12 .vq-project-timeline small{font-size:.59rem}
.vq-projects-v12 .vq-project-card-footer{margin-top:-.1rem}
.vq-projects-v12 .vq-project-detail-btn{
  height:32px;
  padding:0 .72rem;
  font-size:.75rem;
}
@media (max-width:1100px){
  .vq-projects-v12 .vq-project-toolbar{grid-template-columns:1fr}
}


/* ==========================================================
   V15 — Proyectos index iconos más visibles + cards compactas
   ========================================================== */
.vq-projects-v12 .vq-project-kpi{
  min-height:90px;
  grid-template-columns:72px minmax(0,1fr);
}
.vq-projects-v12 .vq-project-kpi-icon{
  width:62px;
  height:62px;
  font-size:1.75rem;
}
.vq-projects-v12 .vq-project-kpi-icon i{
  font-size:1.75rem;
  line-height:1;
}
.vq-projects-v12 .vq-project-kpi strong{font-size:1.62rem}
.vq-projects-v12 .vq-project-client-head{
  min-height:56px;
  padding:.82rem .95rem;
}
.vq-projects-v12 .vq-project-client-body{
  padding:.72rem .85rem .85rem;
}
.vq-projects-v12 .vq-project-card-grid{
  gap:.7rem;
}
.vq-projects-v12 .vq-project-card{
  min-height:172px;
  padding:.75rem .82rem;
  gap:.55rem;
  border-radius:14px;
}
.vq-projects-v12 .vq-project-card h4{
  font-size:.92rem;
  line-height:1.22;
}
.vq-projects-v12 .vq-project-progress-line{margin-top:-.05rem}
.vq-projects-v12 .vq-project-card-data{
  gap:.55rem;
}
.vq-projects-v12 .vq-project-card-data div{
  min-width:0;
}
.vq-projects-v12 .vq-project-card-data small{
  font-size:.67rem;
  margin-bottom:.08rem;
}
.vq-projects-v12 .vq-project-card-data strong{
  font-size:.78rem;
}
.vq-projects-v12 .vq-project-owners small{
  font-size:.67rem;
  margin-bottom:.2rem;
}
.vq-projects-v12 .vq-project-owners span{
  width:22px;
  height:22px;
  font-size:.62rem;
}
.vq-projects-v12 .vq-project-timeline{
  gap:0;
  margin-top:.02rem;
}
.vq-projects-v12 .vq-project-timeline div{gap:.08rem}
.vq-projects-v12 .vq-project-timeline i{
  width:8px;
  height:8px;
}
.vq-projects-v12 .vq-project-timeline span{font-size:.60rem}
.vq-projects-v12 .vq-project-timeline small{font-size:.56rem}
.vq-projects-v12 .vq-project-card-footer{
  margin-top:-.18rem;
}
.vq-projects-v12 .vq-project-detail-btn{
  height:30px;
  padding:0 .68rem;
  font-size:.73rem;
}


/* ==========================================================
   V16 — Proyectos index centrar iconos KPI dentro del círculo
   ========================================================== */
.vq-projects-v12 .vq-project-kpi-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.vq-projects-v12 .vq-project-kpi-icon i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  line-height:1;
}
.vq-projects-v12 .vq-project-kpi-icon i::before{
  display:block;
  line-height:1;
  margin:0;
}


/* ==========================================================
   V20 — Restore V17 + ajuste de pantalla tipo Cotizaciones
   Base visual: V17. Cambio quirúrgico: solo ancho/layout.
   ========================================================== */
.project-view-v13{
  width:100% !important;
  max-width:none !important;
  overflow:visible !important;
}

.project-view-v13 .layout-2col.project-view-layout{
  display:grid !important;
  grid-template-columns:minmax(0, calc(100% - 440px)) 420px !important;
  gap:1rem !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
}

.project-view-v13 .layout-2col.project-view-layout > div:first-child{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
}

.project-view-v13 .project-right-col,
.project-view-v13 .project-view-sidebar{
  width:420px !important;
  max-width:420px !important;
  min-width:0 !important;
}

.project-view-v13 .project-summary-card,
.project-view-v13 .project-advance-panel,
.project-view-v13 #view-tasks,
.project-view-v13 [data-tab-panel="tasks"]{
  width:100% !important;
  max-width:100% !important;
}

.project-view-v13 .project-right-col .card{
  width:100% !important;
  max-width:100% !important;
}

/* Mantener la pantalla contenida y pareja como Cotizaciones */
.project-view-v13 .project-shell-header,
.project-view-v13 .project-summary-card,
.project-view-v13 .project-view-switcher,
.project-view-v13 .task-status-tabs,
.project-view-v13 .project-advance-panel{
  box-sizing:border-box !important;
}

@media (max-width: 1280px){
  .project-view-v13 .layout-2col.project-view-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .project-view-v13 .project-right-col,
  .project-view-v13 .project-view-sidebar{
    width:100% !important;
    max-width:none !important;
  }
}

@media (min-width: 1500px){
  .project-view-v13 .layout-2col.project-view-layout{
    grid-template-columns:minmax(0, calc(100% - 460px)) 440px !important;
  }
  .project-view-v13 .project-right-col,
  .project-view-v13 .project-view-sidebar{
    width:440px !important;
    max-width:440px !important;
  }
}


/* V34 — Campañas OS como burbuja desplegable */
@media (min-width: 1025px) {
  .nav-group-bubble .nav-submenu {
    display: none !important;
  }

  .nav-group-bubble.open .nav-group-chevron {
    transform: none;
  }

  .nav-group-bubble .nav-group-toggle {
    border-radius: 14px;
    position: relative;
  }

  .nav-group-bubble .nav-group-toggle.active,
  .nav-group-bubble .nav-group-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(88,86,214,.12), rgba(14,165,233,.08));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(88,86,214,.10);
  }

  .nav-group-bubble .nav-group-toggle[aria-expanded="true"] .nav-group-chevron {
    transform: rotate(-90deg);
    color: var(--accent);
  }

  .sidebar-submenu-popover {
    min-width: 255px;
  }

  .sidebar-submenu-popover__title {
    display:flex;
    align-items:center;
    gap:.45rem;
    padding: 8px 10px 10px;
  }

  .sidebar-submenu-popover__title::before {
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg,#5856d6,#0ea5e9);
    box-shadow:0 0 0 4px rgba(88,86,214,.10);
  }

  .sidebar-submenu-popover__link {
    border:1px solid transparent;
  }

  .sidebar-submenu-popover__link:hover,
  .sidebar-submenu-popover__link.active {
    border-color: rgba(88,86,214,.12);
    background: linear-gradient(135deg, rgba(88,86,214,.12), rgba(14,165,233,.08));
  }
}