/* ═══════════════════════════════════════════════════════════════
   scan·IT Projects — Tema VS Code Dark (PROVA_003)
═══════════════════════════════════════════════════════════════ */

:root {
  --bg:           #1e1e1e;
  --bg2:          #252526;
  --bg3:          #2d2d2d;
  --bg4:          #3c3c3c;
  --bg5:          #505050;
  --border:       #454545;
  --border-focus: #6a6a6a;
  --text:         #cccccc;
  --text-dim:     #888888;
  --text-bright:  #ffffff;
  --accent:       #7a1c1b;
  --accent-hover: #9a2524;
  --accent-dim:   rgba(122, 28, 27, 0.20);
  --danger:       #f14c4c;
  --success:      #89d185;
  --warning:      #cca700;
  --info:         #569cd6;
  --toolbar-h:    52px;
  --statusbar-h:  24px;
  --radius:       5px;
  --card-w:       272px;
  --font:         'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6a6a6a; }

/* ── Login ────────────────────────────────────────────────────── */
.login-page {
  width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

.login-card {
  width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  overflow: hidden;
}

.login-header {
  padding: 40px 36px 32px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.login-logo        { margin-bottom: 4px; }
.login-logo-text   { font-size: 36px; font-weight: 200; letter-spacing: 0.08em; color: var(--text-bright); line-height: 1; }
.login-logo-dot    { color: var(--text-bright); font-weight: 700; }
.login-subtitle    { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }

.login-form        { padding: 28px 36px 36px; display: flex; flex-direction: column; gap: 14px; }
.form-field        { display: flex; flex-direction: column; gap: 5px; }
.form-label        { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }

.form-input {
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.form-input:focus       { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-dim); }

.login-btn {
  margin-top: 6px; padding: 11px;
  background: #fff; color: #1a1a1a;
  border: none; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer; transition: background 0.15s;
}
.login-btn:hover    { background: #e2e2e2; }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
  padding: 8px 12px;
  background: rgba(255,85,85,0.12);
  border: 1px solid rgba(255,85,85,0.3);
  border-radius: var(--radius);
  color: #ff8080;
  font-size: 12px;
  display: none;
}

.login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-error.visible { display: block; }

/* ── App layout (sidebar + main) ─────────────────────────────── */
#app  { width: 100vw; height: 100vh; display: flex; flex-direction: row; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────── */
#sidebar {
  width: 210px; min-width: 210px; height: 100vh;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; z-index: 50;
  flex-shrink: 0;
}

.sb-brand {
  height: 52px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 16px; border-bottom: 1px solid var(--border);
}
.sb-logo     { font-size: 16px; font-weight: 200; letter-spacing: 0.06em; color: var(--text-bright); line-height: 1; }
.sb-dot      { color: var(--text-bright); font-weight: 700; }
.sb-sub      { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }

.sb-nav      { display: flex; flex-direction: column; padding: 6px 0; }
.sb-spacer   { flex: 1; }
.sb-bottom   { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: 6px 0; }

/* ── Sidebar timer widget ───────────────────────────────────── */
#sb-timer { border-top: 1px solid var(--border); }

.sb-timer-idle   { padding: 8px 10px; }
.sb-timer-play-btn {
  width: 100%; padding: 7px 8px; border-radius: 6px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1px dashed var(--border); background: transparent; color: var(--text-dim);
  transition: border-color .15s, color .15s, background .15s;
}
.sb-timer-play-btn:hover { border-color: var(--border); color: #111; background: #fff; }

.sb-timer-form          { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.sb-timer-form.hidden   { display: none; }
.sb-timer-sel {
  width: 100%; height: 28px; padding: 0 6px; border-radius: 5px; font-size: 11px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
}
.sb-timer-desc-inp {
  width: 100%; height: 26px; padding: 0 6px; border-radius: 5px; font-size: 11px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
}
.sb-timer-form-btns   { display: flex; gap: 4px; }
.sb-timer-start-btn {
  flex: 1; height: 28px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: filter .15s;
}
.sb-timer-start-btn:hover { filter: brightness(1.12); }
.sb-timer-x-btn {
  width: 28px; height: 28px; border-radius: 5px; font-size: 12px;
  background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.sb-timer-running {
  margin: 6px 8px 8px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(192,57,43,.07);
  border: 2px solid var(--accent);
}
.sb-timer-run-top    { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 5px; }
.sb-timer-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 3px;
  animation: te-pulse 1.2s ease-in-out infinite;
}
.sb-timer-run-meta   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-timer-run-task   { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-timer-run-proj   { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-timer-run-bottom { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sb-timer-run-since  { font-size: 10px; color: var(--text-dim); }
.sb-timer-elapsed    {
  font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: #fff;
  letter-spacing: .02em;
}
.sb-timer-stop-btn {
  width: 100%; height: 30px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; border: none; cursor: pointer;
  transition: filter .15s;
}
.sb-timer-stop-btn:hover { filter: brightness(1.12); }

.sb-divider  { height: 1px; background: var(--border); margin: 4px 10px; }

.sb-viewas {
  padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.sb-viewas-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}
.sb-viewas-select { font-size: 11px; padding: 5px 8px; }
.sb-viewas-active .sb-viewas-select { border-color: var(--accent); color: var(--accent); }
.sb-viewas-active .sb-viewas-label  { color: var(--accent); }

.sb-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 16px;
  border: none; background: transparent;
  color: var(--text-dim); font-size: 13px; font-family: var(--font);
  cursor: pointer; text-align: left; border-radius: 0;
  transition: background 0.1s, color 0.1s;
  position: relative; white-space: nowrap;
}
.sb-item:hover:not(:disabled)  { background: var(--bg3); color: var(--text); }
.sb-item.active                { background: rgba(86,156,214,0.12); color: var(--text-bright); }
.sb-item.active::before        { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--info); }
.sb-item:disabled              { opacity: 0.45; cursor: default; }
.sb-icon   { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.sb-soon   { margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; background: var(--bg4); color: var(--text-dim); }

/* Sidebar user section */
.sb-user {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; cursor: pointer;
  border-radius: 0; transition: background 0.1s; position: relative;
}
.sb-user:hover           { background: var(--bg3); }
.sb-user-avatar          { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sb-user-info            { flex: 1; min-width: 0; }
.sb-user-name            { display: block; font-size: 12px; color: var(--text); font-weight: 500; }
.sb-user-role            { display: block; font-size: 10px; color: var(--text-dim); }
.sb-user-menu {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 200; overflow: hidden;
}
.sb-user-menu.open   { display: block; }
.sb-menu-item        { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: 12px; color: var(--text); transition: background 0.1s; }
.sb-menu-item:hover  { background: var(--bg4); }
.sb-menu-item svg    { width: 13px; height: 13px; fill: currentColor; }
.sb-menu-item.danger { color: var(--danger); }

/* ── Main ─────────────────────────────────────────────────────── */
#main    { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
#content { flex: 1; overflow: hidden; position: relative; }

/* ── Status bar ───────────────────────────────────────────────── */
#statusbar {
  height: var(--statusbar-h); flex-shrink: 0;
  background: #fff; color: rgba(0,0,0,0.70);
  font-size: 11px; display: flex; align-items: center;
  padding: 0 12px; gap: 8px; z-index: 100;
}
.status-dot   { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.6); flex-shrink: 0; }
#status-msg   { flex: 1; }
.status-right { display: flex; align-items: center; gap: 10px; }
.status-sep   { color: rgba(255,255,255,0.35); }

/* ── Module base ──────────────────────────────────────────────── */
.module { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Module header (toolbar inside each module) */
.mod-header {
  height: var(--toolbar-h); flex-shrink: 0;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px; z-index: 10;
}
.mod-title   { font-size: 14px; font-weight: 600; color: var(--text-bright); flex-shrink: 0; }
.mod-header-spacer { flex: 1; }
.mod-header-actions { display: flex; align-items: center; gap: 8px; }

.search-wrap  { position: relative; display: flex; align-items: center; }
.search-icon  { position: absolute; left: 8px; width: 13px; height: 13px; fill: currentColor; color: var(--text-dim); pointer-events: none; }
#search-input {
  width: 200px; padding: 6px 10px 6px 30px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-size: 12px; font-family: var(--font); outline: none;
  transition: border-color 0.15s, width 0.2s;
}
#search-input:focus        { border-color: var(--border-focus); width: 240px; }
#search-input::placeholder { color: var(--text-dim); }

/* ── Board ────────────────────────────────────────────────────── */
#kanban-board { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 14px; overflow-x: auto; overflow-y: hidden; align-items: flex-start; cursor: grab; }
#kanban-board .kanban-card { cursor: pointer; }

/* Botón de zoom a una columna (solo móvil, ver @media 720px) */
.kanban-zoom-toggle { display: none; }

/* ── Home / Dashboard ─────────────────────────────────────────── */
.module-home { overflow-y: auto; overflow-x: hidden; }
.module-ajustes { overflow-y: auto; overflow-x: hidden; }

.home-welcome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 28px 20px;
}
.home-greeting { font-size: 20px; font-weight: 300; color: var(--text-bright); letter-spacing: 0.01em; }
.home-date     { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.home-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 0 28px 24px;
}
.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px;
  transition: border-color 0.15s;
}
.stat-card:hover        { border-color: var(--border-focus); }
.stat-card.stat-info    { border-left: 3px solid var(--info); }
.stat-card.stat-danger  { border-left: 3px solid var(--danger); }
.stat-card.stat-success { border-left: 3px solid var(--success); }
.stat-val  { font-size: 28px; font-weight: 200; color: var(--text-bright); line-height: 1; }
.stat-lbl  { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; }

.home-section { padding: 0 28px 24px; }
.home-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }

.home-quick {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.quick-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 12px; cursor: pointer;
  text-align: left; transition: background 0.12s, border-color 0.12s;
  display: flex; flex-direction: column; gap: 4px; position: relative;
  font-family: var(--font);
}
.quick-card:hover:not(:disabled) { background: var(--bg3); border-color: var(--border-focus); }
.quick-card:disabled              { opacity: 0.45; cursor: default; }
.quick-icon { margin-bottom: 4px; }
.quick-icon svg    { width: 18px; height: 18px; fill: var(--text-dim); }
.quick-name  { font-size: 12px; font-weight: 600; color: var(--text-bright); }
.quick-desc  { font-size: 10px; color: var(--text-dim); }
.quick-badge {
  position: absolute; top: 7px; right: 7px;
  font-size: 8px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg4); color: var(--text-dim); border: 1px solid var(--border);
}

/* Home — widget "Para hoy" */
.home-today-widget {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 8px; overflow: hidden;
  margin: 0 28px 16px;
}
.home-today-badge {
  background: var(--info); color: #fff;
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  padding: 1px 8px; border-radius: 20px;
  min-width: 20px; text-align: center;
}
.home-today-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.home-today-row:last-child { border-bottom: none; }
.home-today-row:hover { background: var(--bg3); }
.home-today-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.home-today-text { flex: 1; min-width: 0; }
.home-today-label { font-size: 12px; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-today-sub   { font-size: 10px; color: var(--text-dim); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-today-more  { padding: 7px 16px; font-size: 11px; color: var(--text-dim); font-style: italic; }

/* Home widgets */
.home-widgets {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 0 28px 28px;
}
.home-widget {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--border);
}
.widget-title  { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.widget-link   { font-size: 11px; color: var(--info); background: transparent; border: none; cursor: pointer; padding: 0; font-family: var(--font); }
.widget-link:hover { text-decoration: underline; }
.widget-body   { padding: 8px 0; }
.widget-empty  { padding: 20px 16px; font-size: 12px; color: var(--text-dim); font-style: italic; }

.deadline-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px; cursor: pointer; gap: 8px;
  transition: background 0.1s;
}
.deadline-row:hover  { background: var(--bg3); }
.deadline-left       { min-width: 0; }
.deadline-ref        { font-size: 9px; font-family: var(--font-mono); color: var(--text-dim); margin-right: 5px; }
.deadline-name       { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deadline-right      { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.deadline-col-tag    { font-size: 9px; font-weight: 600; }
.deadline-date       { font-size: 10px; font-family: var(--font-mono); color: var(--text-dim); }
.deadline-overdue    { color: var(--danger) !important; font-weight: 700; }

.wl-row   { display: flex; align-items: center; gap: 10px; padding: 6px 16px; }
.wl-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; }
.wl-info   { flex: 1; min-width: 0; }
.wl-name   { font-size: 11px; color: var(--text); display: block; margin-bottom: 3px; }
.wl-bar-track { height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.wl-bar       { height: 100%; border-radius: 2px; opacity: 0.8; transition: width 0.3s; }
.wl-count  { font-size: 12px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; width: 20px; text-align: right; }

/* ── Ajustes module ───────────────────────────────────────────── */
.ajustes-tabs {
  display: flex; gap: 4px; padding: 0 28px; margin-top: 4px;
  border-bottom: 1px solid var(--border);
}
.ajustes-tab-btn {
  padding: 9px 14px; font-size: 12px; font-family: var(--font);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); cursor: pointer; transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.ajustes-tab-btn:hover  { color: var(--text); }
.ajustes-tab-btn.active { color: var(--text-bright); border-bottom-color: var(--accent); }
.ajustes-content { padding: 24px 28px; }
.ajustes-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; max-width: 800px;
}
.ajustes-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ajustes-card-title { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.ajustes-card-desc  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── Módulo Tiempo (control horario) ─────────────────────────── */
.te-view {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* Barra del timer */
.te-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-wrap: wrap;
}
.te-bar-running { background: var(--bg2); border-left: 3px solid var(--danger); }

.te-running-left  { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.te-running-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.te-running-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
  animation: te-pulse 1.2s ease-in-out infinite;
}
@keyframes te-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.te-running-worker { font-weight: 700; font-size: 13px; }
.te-running-divider { color: var(--text-dim); }
.te-running-meta { font-size: 13px; color: var(--text); }
.te-running-desc { font-size: 11px; color: var(--text-dim); font-style: italic; }

.te-elapsed { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--danger); min-width: 80px; }
.te-elapsed-bar { font-size: 22px; }

.te-sel {
  height: 32px; padding: 0 8px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
  cursor: pointer;
}
.te-sel:focus { outline: none; border-color: var(--border-focus); }
.te-desc-inp {
  flex: 1; min-width: 140px; height: 32px; padding: 0 10px; border-radius: 6px;
  font-size: 12px; border: 1px solid var(--border); background: var(--bg3); color: var(--text);
}
.te-desc-inp:focus { outline: none; border-color: var(--border-focus); }
.te-time-inp { width: 90px; }


.te-start-btn, .te-stop-bar-btn {
  display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 32px;
  border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; border: none;
}
.te-start-btn { background: var(--accent); color: #fff; }
.te-start-btn:hover { background: var(--accent-hover, #a01515); }
.te-stop-bar-btn { background: var(--danger); color: #fff; }
.te-stop-bar-btn:hover { filter: brightness(1.1); }

/* Filtro por trabajador */
.te-filter-bar {
  display: flex; gap: 6px; padding: 8px 20px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.te-filter-btn {
  padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text-dim);
}
.te-filter-btn:hover { background: var(--bg4); color: var(--text); }
.te-filter-btn.active {
  background: var(--wc, var(--border-focus)); border-color: var(--wc, var(--border-focus)); color: #fff;
}

/* Entrada manual */
.te-manual-wrap { padding: 8px 20px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.te-manual-toggle {
  font-size: 11px; font-weight: 600; color: var(--text-dim); background: none;
  border: none; cursor: pointer; padding: 0;
}
.te-manual-toggle:hover { color: var(--text); }
.te-manual-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.te-manual-form.hidden { display: none; }
.te-add-btn {
  padding: 0 14px; height: 32px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
}
.te-add-btn:hover { filter: brightness(1.1); }
.te-cancel-btn {
  padding: 0 14px; height: 32px; border-radius: 6px; font-size: 12px;
  background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); cursor: pointer;
}
.te-cancel-btn:hover { background: var(--bg4); color: var(--text); }

/* Lista de entradas */
.te-list { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.te-empty { color: var(--text-dim); font-size: 13px; padding: 32px 0; text-align: center; }

.te-day-group { margin-bottom: 24px; }
.te-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.te-day-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.te-day-total { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.te-day-entries { display: flex; flex-direction: column; gap: 2px; }

.te-entry { border-radius: 6px; overflow: hidden; border: 1px solid transparent; transition: border-color .1s; }
.te-entry:hover { border-color: var(--border); background: var(--bg2); }
.te-entry-running { border-color: rgba(220,70,70,.3) !important; background: rgba(220,70,70,.04) !important; }

.te-entry-main {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 40px;
}
.te-worker-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.te-entry-proj { font-size: 12px; font-weight: 600; white-space: nowrap; }
.te-entry-sep  { color: var(--text-dim); font-size: 12px; }
.te-entry-task { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.te-entry-desc { font-size: 11px; color: var(--text-dim); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.te-spacer     { flex: 1; }
.te-time-range { font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.te-dur        { font-size: 12px; font-weight: 600; color: var(--text); min-width: 54px; text-align: right; flex-shrink: 0; }

.te-start-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.te-running-since { margin-right: 4px; }
.te-stop-entry-btn { color: var(--danger) !important; }
.te-edit-btn, .te-del-btn, .te-stop-entry-btn {
  opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.te-entry:hover .te-edit-btn,
.te-entry:hover .te-del-btn,
.te-entry:hover .te-stop-entry-btn,
.te-entry-running .te-stop-entry-btn { opacity: 1; }

/* Formulario edición inline */
.te-entry-edit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px 10px; border-top: 1px solid var(--border); background: var(--bg2);
}
.te-entry-edit.hidden { display: none; }

/* Formulario solicitud de cambio (trabajador) */
.te-req-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 10px; border-top: 1px solid var(--border); background: var(--bg2);
}
.te-req-form.hidden { display: none; }
.te-req-textarea {
  width: 100%; resize: vertical; min-height: 52px; padding: 6px 8px; border-radius: 6px;
  font-size: 12px; border: 1px solid var(--border); background: var(--bg3); color: var(--text);
  font-family: inherit;
}
.te-req-textarea:focus { outline: none; border-color: var(--border-focus); }
.te-req-form-actions { display: flex; gap: 6px; }

/* Badge "Pendiente" en entrada no-admin */
.te-req-pending-badge {
  font-size: 10px; font-weight: 600; color: #f59342;
  background: rgba(245,147,66,.12); padding: 2px 7px; border-radius: 4px;
  border: 1px solid rgba(245,147,66,.3); white-space: nowrap; flex-shrink: 0;
}

/* Botón solicitar cambio */
.te-req-btn { color: var(--text-dim) !important; }
.te-req-btn:hover { color: var(--accent) !important; }

/* Panel de solicitudes pendientes (admin) */
.te-requests-panel {
  margin: 0; border-bottom: 1px solid var(--border);
  background: rgba(245,147,66,.06); flex-shrink: 0;
}
.te-requests-hdr {
  display: flex; align-items: center; gap: 7px; padding: 8px 20px;
  font-size: 11px; font-weight: 700; color: #c97d2a;
  border-bottom: 1px solid rgba(245,147,66,.2);
}
.te-req-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f59342; color: #fff; font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
}
.te-req-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid rgba(245,147,66,.1);
}
.te-req-item:last-child { border-bottom: none; }
.te-req-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.te-req-body { flex: 1; min-width: 0; }
.te-req-entry-info { font-size: 12px; color: var(--text); margin-bottom: 3px; }
.te-req-msg { font-size: 11px; color: var(--text-dim); font-style: italic; }
.te-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Equipo module ────────────────────────────────────────────── */
.module-equipo  { overflow: hidden; }
.equipo-scroll  { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; }

.eq-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.eq-chip    { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); }
.eq-chip-info   { background: rgba(86,156,214,0.12); color: var(--info); border-color: rgba(86,156,214,0.3); }
.eq-chip-warn   { background: rgba(204,167,0,0.12); color: var(--warning); border-color: rgba(204,167,0,0.3); }
.eq-chip-danger { background: rgba(241,76,76,0.12); color: var(--danger); border-color: rgba(241,76,76,0.3); }

.equipo-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin-bottom: 16px; }
.equipo-grid-idle { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.eq-idle-title    { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }

/* Calendario visual del equipo (disponibilidad / ocupación / entregas) —
   ocupa todo el ancho de pantalla: márgenes negativos que compensan el
   padding lateral de .equipo-scroll. */
.eqcal-wrap   { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 0 4px; margin: 0 -28px 18px; overflow: hidden; }
.eqcal-header { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; flex-wrap: wrap; }
.eqcal-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eqcal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.eqcal-legend-dot  { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.eqcal-free   { background: rgba(76,201,78,0.10); }
.eqcal-role   { font-size: 9px; color: var(--text-dim); }
#eqcal-scroll td[data-pid] { cursor: pointer; }
#eqcal-scroll .gantt-row    { cursor: default; }
.eqcal-multi  {
  position: absolute; top: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 7.5px; font-weight: 800; line-height: 11px; text-align: center;
  z-index: 1;
}

.member-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; transition: border-color 0.15s;
}
.member-card:hover         { border-color: var(--border-focus); }
.member-card-idle          { opacity: 0.55; }
.member-card-idle:hover    { opacity: 0.75; }

.member-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.member-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.member-info   { flex: 1; min-width: 0; }
.member-name   { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.member-sub    { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.member-badge  {
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.member-badge-idle { background: transparent; color: var(--text-dim); border-color: var(--border); }

.member-wl      { height: 3px; background: var(--bg4); margin: 0; }
.member-wl-fill { height: 100%; transition: width 0.4s ease; }

.member-projects { padding: 4px 0; }

.eq-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px; cursor: pointer;
  transition: background 0.1s; border-left: 2px solid transparent;
}
.eq-row:hover { background: var(--bg3); border-left-color: var(--border-focus); }

.eq-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.eq-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; }
.eq-ref    { font-size: 9px; font-family: var(--font-mono); color: var(--text-dim); flex-shrink: 0; }
.eq-name   { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eq-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.eq-col      { font-size: 9px; font-weight: 600; white-space: nowrap; }
.eq-date     { font-size: 9px; font-family: var(--font-mono); color: var(--text-dim); white-space: nowrap; }
.eq-overdue  { color: var(--danger) !important; font-weight: 700; }
.eq-empty    { padding: 14px 14px; font-size: 11px; color: var(--text-dim); font-style: italic; }

/* ── Calendario module ────────────────────────────────────────── */
.module-calendario { overflow: hidden; }

.cal-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg3); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cal-wd {
  padding: 5px 0; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}

.cal-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  overflow: hidden;
}
.cal-day {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 4px 4px 2px; overflow: hidden; min-height: 0;
  transition: background 0.1s;
}
.cal-day:hover { background: var(--bg3); }
.cal-day-other { background: rgba(0,0,0,0.15); }
.cal-day-other:hover { background: rgba(0,0,0,0.1); }
.cal-day-today { background: rgba(86,156,214,0.06); }
.cal-day-past  { opacity: 0.7; }

.cal-day-num {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 2px; line-height: 1;
}
.cal-today-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--info); color: #fff;
  font-size: 11px; font-weight: 700;
}

.cal-event {
  display: flex; align-items: center; gap: 3px;
  padding: 1px 5px 1px 3px; border-radius: 2px; margin-bottom: 1px;
  font-size: 10px; cursor: pointer; overflow: hidden;
  transition: opacity 0.12s;
}
.cal-event:hover { opacity: 0.80; }
.cal-event-tag  { font-size: 7px; font-weight: 900; letter-spacing: 0.06em; flex-shrink: 0; color: rgba(255,255,255,0.75); }
.cal-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.92); }
.cal-overflow   { font-size: 9px; color: var(--text-dim); padding: 1px 4px; }

.cal-nav-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
  transition: background 0.1s;
}
.cal-nav-btn:hover { background: var(--bg4); }
.cal-nav-btn svg   { width: 13px; height: 13px; fill: currentColor; }

.cal-today-btn {
  padding: 5px 12px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 11px;
  font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: background 0.1s;
}
.cal-today-btn:hover { background: var(--bg4); }

.cal-legend {
  display: flex; align-items: center; gap: 12px; margin-right: 12px;
}
.cal-leg-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); }
.cal-leg-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Contactos module ────────────────────────────────────────── */
.module-contactos { overflow: hidden; }
.contactos-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.ct-type-filters  { display: flex; gap: 2px; }
.ct-filter-btn    { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-dim); font-size: 11px; cursor: pointer; font-family: var(--font); transition: all .15s; }
.ct-filter-btn:hover  { background: var(--bg3); color: var(--text); }
.ct-filter-btn.active { background: #fff; border-color: #aaa; color: #444; }

.mod-search-wrap  { display: flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 8px; margin-left: 10px; }
.mod-search-icon  { width: 12px; height: 12px; color: var(--text-dim); flex-shrink: 0; }
.mod-search-input { background: transparent; border: none; outline: none; font-size: 12px; color: var(--text); font-family: var(--font); width: 200px; height: 28px; }
.mod-search-input::placeholder { color: var(--text-dim); }

.btn-sm { padding: 5px 10px; font-size: 12px; gap: 4px; }

.ct-table      { width: 100%; border-collapse: collapse; font-size: 12px; }
.ct-table thead th {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  position: sticky; top: 0; z-index: 1;
}
.ct-row        { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.ct-row:hover  { background: var(--bg3); }
.ct-row td     { padding: 9px 12px; vertical-align: middle; }
.ct-name-cell  { font-weight: 500; color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-meta       { color: var(--text-dim); }
.ct-empty      { text-align: center; padding: 40px 20px !important; color: var(--text-dim); font-size: 13px; }

.ct-type-badge  { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ct-empresa     { background: rgba(74,159,213,.15); color: #4a9fd5; }
.ct-persona     { background: rgba(137,209,133,.15); color: #89d185; }
.ct-lang-badge  { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--bg3); color: var(--text-dim); font-size: 10px; font-family: monospace; letter-spacing: .05em; }

/* ── Gantt ───────────────────────────────────────────────────── */
.cal-view-toggle       { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-right: 8px; }
.cal-toggle-btn        { padding: 4px 13px; background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; font-family: var(--font); transition: background .15s, color .15s; }
.cal-toggle-btn.active { background: #fff; color: #444; }
.cal-toggle-btn:hover:not(.active) { background: var(--bg3); color: var(--text); }

.gantt-phase-btns { display: flex; gap: 4px; align-items: center; margin-right: 10px; }
.gantt-phase-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius); font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap;
}
.gantt-phase-btn:hover { filter: brightness(1.15); }
.gantt-phase-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Gantt user-filter dropdown */
.gantt-uf-wrap   { position: relative; margin-right: 8px; }
.gantt-uf-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius); font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg4); color: var(--text);
  cursor: pointer; font-family: var(--font); transition: border-color .15s; white-space: nowrap;
}
.gantt-uf-toggle:hover  { border-color: var(--text-dim); }
.gantt-uf-wrap.open .gantt-uf-toggle { border-color: var(--accent); }

.gantt-uf-panel {
  display: none; position: fixed; z-index: 1000;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px; min-width: 190px; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.gantt-uf-wrap.open .gantt-uf-panel { display: block; }

.gantt-uf-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 8px; border-radius: 4px; border: none;
  background: none; color: var(--text-dim); font-size: 12px;
  cursor: pointer; font-family: var(--font); text-align: left; transition: background .1s;
}
.gantt-uf-item:hover       { background: var(--bg4); color: var(--text); }
.gantt-uf-item.gantt-uf-active { color: var(--text-bright); }
.gantt-uf-chk {
  width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px;
  flex-shrink: 0; transition: all .12s;
}
.gantt-uf-active .gantt-uf-chk { background: var(--accent); border-color: var(--accent); }
.gantt-uf-active .gantt-uf-chk::after {
  content: ''; display: block; width: 8px; height: 4px; margin: 3px auto 0;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.gantt-uf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gantt-uf-sep { height: 1px; background: var(--border); margin: 4px 2px; }

.gantt-outer  { flex: 1; min-height: 0; overflow: hidden; }
.gantt-scroll { width: 100%; height: 100%; overflow: auto; }
.gantt-empty  { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-size: 13px; }

.gantt-table  { border-collapse: collapse; table-layout: fixed; }

/* Info column (sticky) */
.gantt-th-info { position: sticky; left: 0; z-index: 3; background: var(--bg2); width: 260px; min-width: 260px; padding: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gantt-td-info { position: sticky; left: 0; z-index: 2; background: var(--bg2); width: 260px; min-width: 260px; padding: 5px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.gantt-th-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 5px 8px; }

/* Month header */
.gantt-th-month { font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: .04em; text-align: left; padding: 4px 4px 2px; border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; }

/* Day header */
.gantt-th-day  { width: 24px; min-width: 24px; max-width: 24px; font-size: 10px; color: var(--text-dim); text-align: center; padding: 2px 0; border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,.04); line-height: 1.2; vertical-align: bottom; }
.gantt-dl      { display: block; font-size: 8px; color: var(--text-dim); opacity: .6; }
.gantt-th-today { background: rgba(255,255,255,.08); color: var(--text); font-weight: 700; }
.gantt-th-today .gantt-dl { opacity: 1; }

/* Day cells */
.gantt-td      { width: 24px; min-width: 24px; max-width: 24px; border-right: 1px solid rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.03); padding: 0; position: relative; }
.gantt-td-today { box-shadow: inset 1px 0 0 rgba(255,255,255,.25), inset -1px 0 0 rgba(255,255,255,.25); }

/* Phases — same solid colors as the mini-Gantt bars in cards */
.gantt-ph-scan    { background: #e8850a; }
.gantt-ph-process { background: #cca700; }
.gantt-ph-draw    { background: #4a9fd5; }

/* Deadline & partial */
.gantt-deadline   { background: #4ec94e !important; }
.gantt-partial    { background: #6db8e8 !important; }
.gantt-marker     {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.95);
  line-height: 1; z-index: 1; pointer-events: none;
}

/* Row info */
.gantt-row        { cursor: pointer; }
.gantt-row:hover .gantt-td-info { background: var(--bg3); }
.gantt-row:hover .gantt-td      { filter: brightness(1.1); }
.gantt-done       { opacity: .45; }
.gantt-ovd .gantt-td-info { border-left: 2px solid var(--danger); }

.gantt-avs   { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.gantt-av    { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.gantt-av-empty { width: 22px; height: 22px; border-radius: 50%; background: #444; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-dim); }
.gantt-lbl   { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.gantt-ref   { font-size: 9px; color: var(--text-dim); font-family: monospace; letter-spacing: .03em; }
.gantt-name  { font-size: 11px; color: var(--text); white-space: normal; line-height: 1.35; word-break: break-word; }
.gantt-st    { font-size: 9px; flex-shrink: 0; }

/* ── Métricas module ─────────────────────────────────────────── */
.module-metricas { overflow: hidden; }
.metricas-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 0; }

.metric-card       { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; }
.metric-card-head  { margin-bottom: 8px; }
.metric-card-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }

/* Layout principal: pipeline (2fr) + columna derecha (1fr) */
.met-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.met-right-col { display: flex; flex-direction: column; gap: 10px; }

/* SVG responsive */
.met-svg-wrap { width: 100%; overflow: hidden; }
.met-svg      { width: 100%; height: auto; display: block; }

/* Donut */
.met-donut-row  { display: flex; align-items: center; gap: 16px; }
.met-donut-wrap { position: relative; flex-shrink: 0; width: 100px; height: 100px; }
.met-donut-wrap svg { width: 100%; height: 100%; }
.met-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.met-donut-val  { font-size: 20px; font-weight: 200; color: var(--text-bright); line-height: 1; }
.met-donut-sub  { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.met-legend     { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.met-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.met-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.met-legend-name { flex: 1; color: var(--text-dim); }
.met-legend-val  { font-weight: 700; color: var(--text-bright); font-family: var(--font-mono); min-width: 18px; text-align: right; }

/* Barras técnicos */
.met-bars    { display: flex; flex-direction: column; gap: 7px; }
.met-bar-row { display: flex; align-items: center; gap: 8px; }
.met-bar-label { font-size: 11px; color: var(--text); white-space: nowrap; width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; }
.met-bar-track { flex: 1; height: 7px; background: var(--bg4); border-radius: 4px; overflow: hidden; }
.met-bar-fill  { height: 100%; border-radius: 4px; transition: width .3s ease; }
.met-bar-val   { font-size: 11px; font-weight: 700; color: var(--text-bright); width: 20px; text-align: right; flex-shrink: 0; }
.met-avatar    { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 7px; font-weight: 800; color: #fff; flex-shrink: 0; }

/* ── Toggle de vista (Kanban / Lista) ────────────────────────── */
.view-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 11px; font-family: var(--font);
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; transition: background 0.12s, color 0.12s; line-height: 1;
}
.view-toggle-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.view-toggle-btn:hover { background: var(--bg4); color: var(--text); }
.view-toggle-btn.active { background: var(--bg4); color: var(--text-bright); }

/* ── Separador en filter-bar ─────────────────────────────────── */
.filter-sep { width: 1px; background: var(--border); height: 18px; margin: 0 4px; flex-shrink: 0; }

/* ── Vista lista ─────────────────────────────────────────────── */
#proj-content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#proj-content #kanban-board { flex: 1; min-height: 0; }
#proj-content .module-calendario { flex: 1; height: auto; }

/* ── List View ──────────────────────────────────────────────────── */
.list-wrap  { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 20px; }
.list-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.list-th {
  padding: 7px 10px; text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim);
  border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0;
  background: var(--bg2); z-index: 1;
}
.lv-th-main { width: 100%; }
.list-th-sort { cursor: pointer; user-select: none; transition: color 0.12s; }
.list-th-sort:hover { color: var(--text); }
.list-th-sorted { color: var(--accent); }
.list-td  { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.list-row { cursor: pointer; transition: background 0.1s; }
.list-row:hover td { background: var(--bg4); }
.list-row-overdue td { background: rgba(231,76,60,0.04); }
.list-row-overdue:hover td { background: rgba(231,76,60,0.1); }
.list-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 13px; padding: 60px; }

/* Estado column */
.lv-td-status { white-space: nowrap; padding-left: 12px; min-width: 110px; }
.lv-status-label { font-size: 11px; color: var(--text-dim); }

/* Proyecto column */
.lv-td-main { min-width: 180px; max-width: 260px; }
.lv-ref  { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-bottom: 1px; letter-spacing: .04em; }
.lv-name { font-size: 13px; font-weight: 600; color: var(--text-bright); line-height: 1.3; white-space: normal; word-break: break-word; }
.lv-client { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Progress column */
.lv-td-progress { white-space: nowrap; }
.lv-phase-pills { display: flex; gap: 3px; }
.lv-phase-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  letter-spacing: .04em; white-space: nowrap;
}

/* Fechas column */
.lv-td-dates { white-space: nowrap; }
.lv-date-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.lv-date-row:last-child { margin-bottom: 0; }
.lv-date-ph  { font-size: 9px; font-weight: 800; width: 10px; text-align: center; flex-shrink: 0; }
.lv-date-val { font-size: 11px; color: var(--text); font-family: var(--font-mono); }

/* Técnicos column */
.lv-td-techs { white-space: nowrap; }
.lv-tech-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.lv-tech-row:last-child { margin-bottom: 0; }
.lv-tech-letter { font-size: 9px; font-weight: 800; width: 10px; text-align: center; flex-shrink: 0; }
.lv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 800; color: #fff; flex-shrink: 0; }
.lv-tech-name { font-size: 11px; color: var(--text); }

/* Plazo / Entregables column */
.lv-td-end { white-space: nowrap; }
.lv-td-end .card-deadline { margin-bottom: 5px; display: block; }
.lv-deliverables { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.lv-deliv { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: var(--text-dim); background: var(--bg4); padding: 2px 6px; border-radius: 4px; }

/* Shared dim placeholder */
.lv-no-data { color: var(--text-dim); font-size: 11px; }

/* ── Coming soon module ───────────────────────────────────────── */
.module-soon {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--text-dim);
}
.soon-icon  { font-size: 40px; opacity: 0.3; }
.soon-title { font-size: 16px; font-weight: 600; color: var(--text); }
.soon-text  { font-size: 13px; }

/* ── Toolbar (legacy, used by old filter bar) ─────────────────── */
.tb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: none; border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-size: 12px; cursor: pointer; transition: background 0.1s;
  white-space: nowrap; font-family: var(--font);
}
.tb-btn:hover    { background: var(--bg4); }
.tb-btn svg      { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ── Columna ──────────────────────────────────────────────────── */
.kanban-col {
  width: var(--card-w); min-width: var(--card-w); max-height: 100%;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--col-color, var(--accent)) 10%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--col-color, var(--accent)) 30%, var(--border));
  border-radius: 8px; overflow: hidden;
}

.col-header      { flex-shrink: 0; background: color-mix(in srgb, var(--col-color, var(--accent)) 14%, var(--bg3)); border-bottom: 1px solid color-mix(in srgb, var(--col-color, var(--accent)) 25%, var(--border)); }
.col-accent-bar  { height: 3px; background: var(--col-color, var(--accent)); }
.col-header-row  { display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 12px; }

.col-title {
  flex: 1; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-bright); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--bg5); border: 1px solid var(--border);
  border-radius: 9px; font-size: 10px; font-weight: 700;
  color: var(--text-dim); flex-shrink: 0;
}
.col-add-btn {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.1s, color 0.1s;
}
.col-add-btn:hover { background: var(--accent-dim); color: var(--accent); }

.col-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 6px 6px 8px; display: flex; flex-direction: column;
  gap: 6px; min-height: 60px;
}
.col-body.drag-over {
  background: rgba(86,156,214,0.06);
  outline: 2px dashed rgba(86,156,214,0.3);
  outline-offset: -4px; border-radius: 4px;
}
.col-empty { padding: 24px 12px; text-align: center; color: var(--text-dim); font-size: 11px; font-style: italic; opacity: 0.6; }

/* ── Week sections (Por Escanear) ─────────────────── */
.col-body-weeks { padding: 4px 6px 8px; gap: 0; }
.week-section   { margin-bottom: 2px; }
.week-section-past { opacity: 0.60; }
.week-sep {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px 8px;
  margin-top: 8px;
  background: #717171; border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.01em;
  color: #1e1e1e; user-select: none;
}
.week-section:first-child .week-sep { margin-top: 0; }
.week-section-current .week-sep { background: #fff; color: #1a1a1a; border-color: rgba(0,0,0,0.08); }
.week-section-current .week-sep-count { background: rgba(0,0,0,0.08); color: #1a1a1a; }
.week-sep-label { flex: 1; }
.week-sep-count {
  background: rgba(0,0,0,0.12); color: #1e1e1e;
  border-radius: 8px; padding: 1px 6px; font-size: 9px; font-weight: 800;
  min-width: 16px; text-align: center;
}
.week-body {
  padding: 4px 0 3px; display: flex; flex-direction: column; gap: 5px;
  min-height: 38px; border-radius: 4px; transition: background 0.1s;
}
.week-body.drag-over {
  background: rgba(255,255,255,0.04);
  outline: 2px dashed rgba(255,255,255,0.20);
  outline-offset: -3px;
}
.week-empty {
  padding: 8px 8px; text-align: center; color: var(--text-dim);
  font-size: 10px; font-style: italic; opacity: 0.35;
  border: 1px dashed rgba(255,255,255,0.07); border-radius: 4px;
}

/* ── Tarjeta ──────────────────────────────────────────────────── */
.kanban-card {
  background: var(--bg3); border: 2px solid var(--col-color, var(--border));
  border-radius: 6px; cursor: pointer; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.1s;
  position: relative; flex-shrink: 0;
}
.card-corner-stack {
  position: absolute; bottom: 9px; right: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  z-index: 2; pointer-events: none;
}
.card-draw-dot {
  width: 30px; height: 10px; border-radius: 50px; flex-shrink: 0;
}
.card-corner-stack .card-deadline {
  width: 30px; box-sizing: border-box; justify-content: center; padding: 1px 0;
}
.kanban-card:hover     { box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.kanban-card:hover .card-body { background: var(--bg4); }
.kanban-card:hover .card-body { background: var(--bg4); }
.kanban-card.dragging  { opacity: 0.35; transform: scale(0.97); }
.kanban-card.drop-before { box-shadow: 0 -3px 0 0 var(--info); margin-top: 3px; }
.kanban-card.drop-after  { box-shadow: 0  3px 0 0 var(--info); margin-bottom: 3px; }

.card-cover { width: 100%; height: 90px; overflow: hidden; flex-shrink: 0; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body  { padding: 9px 46px 10px 11px; position: relative; }

.card-name    { font-size: 12px; font-weight: 600; color: var(--text-bright); line-height: 1.4; margin-bottom: 2px; word-break: break-word; }
.card-techs         { display: flex; flex-direction: column; gap: 2px; margin: 5px 0 2px; }
.card-tech-row      { display: flex; align-items: center; gap: 5px; }
.card-tech-row-last { justify-content: space-between; }
.card-tech-phase    { font-size: 10px; font-weight: 800; flex-shrink: 0; line-height: 1; color: var(--text-dim); }
.card-tech-sep      { font-size: 10px; color: var(--text-dim); opacity: 0.4; flex-shrink: 0; }
.card-tech-name     { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.card-tech-unassigned { font-style: italic; opacity: 0.5; }
.card-footer-badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.card-due     { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.card-due.overdue { color: var(--danger); font-weight: 600; }
.card-due svg { width: 11px; height: 11px; fill: currentColor; }
.card-notes-icon { color: var(--text-dim); opacity: 0.5; flex-shrink: 0; }
.card-notes-icon svg { width: 11px; height: 11px; fill: currentColor; }

/* ── Paneles flotantes: calendarios de proyectos ──────────────── */
#proj-cal-wrapper {
  position: fixed; bottom: 53px; right: 20px; z-index: 200;
  display: flex; gap: 10px; align-items: stretch;
}
.scal-panel {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  width: 268px; min-width: 268px; max-width: 268px;
  box-sizing: border-box;
}
.scal-panel-collapsed {
  width: auto; min-width: auto; max-width: none;
  padding: 6px;
}
.scal-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 82px; flex-shrink: 0;
}
.scal-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; flex-wrap: nowrap; }
.scal-phase-btns { display: flex; gap: 4px; }
.scal-phase-btn {
  font-family: var(--font); font-size: 9px; font-weight: 800;
  letter-spacing: 0.03em; padding: 3px 7px; border-radius: 5px;
  border: 1px solid; background: transparent; cursor: pointer;
  transition: all .12s;
}
.scal-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer; flex-shrink: 0;
}
.scal-toggle-btn svg { width: 13px; height: 13px; fill: currentColor; }
.scal-toggle-btn:hover { background: var(--bg4); color: var(--text); }
.scal-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.scal-header, .scal-week {
  display: grid; grid-template-columns: 30px repeat(7, 1fr);
  gap: 3px; align-items: center;
}
.scal-day-label {
  text-align: center; font-size: 9px; font-weight: 700;
  color: var(--text-dim); opacity: 0.4; text-transform: uppercase;
}
.scal-header { margin-bottom: 4px; }
.scal-month-label {
  font-size: 9px; font-weight: 700; color: var(--text-dim);
  opacity: 0.35; text-transform: uppercase; letter-spacing: 0.04em;
}
.scal-week { margin-bottom: 3px; }
.scal-week-current { background: rgba(255,255,255,0.03); border-radius: 5px; }
.scal-week-current .scal-month-label { opacity: 0.6; }
.scal-day {
  position: relative;
  height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  border-radius: 6px; cursor: default;
}
.scal-count {
  position: absolute; top: -3px; right: -2px;
  font-size: 10px; font-weight: 400; line-height: 1;
  color: var(--scal-clr, var(--text-dim));
  pointer-events: none;
}
.scal-today .scal-count { color: var(--scal-clr, var(--text-dim)); }
.scal-weekend { opacity: 0.35; }
.scal-today   { background: rgba(255,255,255,0.08); color: var(--text-bright); font-weight: 700; outline: 1px solid rgba(255,255,255,0.18); outline-offset: -1px; }
.scal-active  { background: color-mix(in srgb, var(--scal-clr) 22%, transparent); color: var(--scal-clr); font-weight: 700; }
.scal-active.scal-today { background: color-mix(in srgb, var(--scal-clr) 38%, transparent); outline-color: var(--scal-clr); }

.card-priority  { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.priority-alto  { background: rgba(230,126,34,0.2); color: #e67e22; border: 1px solid rgba(230,126,34,0.4); }
.priority-normal{ background: rgba(127,140,141,0.12); color: #95a5a6; border: 1px solid rgba(127,140,141,0.25); }
.priority-bajo  { background: rgba(52,152,219,0.12); color: #5dade2; border: 1px solid rgba(52,152,219,0.25); }

/* ── Fase en tarjeta (bloque único, ancho completo) ──────────── */
.card-phases  { margin: 7px 0 3px; }
.phase-block  {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 3px;
  border-left: 3px solid; background: rgba(0,0,0,0.20);
}
.phase-label  {
  font-size: 8px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; flex-shrink: 0;
}
.phase-dates  {
  font-size: 10px; font-family: var(--font-mono);
  color: var(--text); line-height: 1.3;
}
.phase-overdue { color: var(--danger) !important; font-weight: 700; font-style: normal; }

.phase-scan    { border-color: #e8850a; }
.phase-scan    .phase-label { color: #f0a040; }
.phase-process { border-color: #cca700; }
.phase-process .phase-label { color: #e0c000; }
.phase-draw    { border-color: #4a9fd5; }
.phase-draw    .phase-label { color: #6ab8e8; }

/* ── Barra de fecha de fase en tarjeta ────────────────────────── */
.card-date-bar {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 4px; padding: 5px 8px; margin: 5px 0 3px;
  border: 1.5px solid var(--bar-color, var(--border));
  color: var(--bar-color, var(--text));
}
.cdb-date   { font-size: 10.5px; font-weight: 700; color: inherit; white-space: nowrap; }
.cdb-active { font-weight: 700; }
.cdb-dim    { opacity: 0.4; font-weight: 500; }
.cdb-done   { opacity: 0.5; font-weight: 500; }
.cdb-arrow  { font-size: 10px; color: inherit; opacity: 0.55; }
.cdb-sep    { font-size: 10px; color: inherit; opacity: 0.45; }
.cdb-waiting { font-size: 10.5px; font-weight: 600; font-style: italic; color: inherit; }

/* ── Mini Gantt (usado solo en modal) ─────────────────────────── */
.mg-track {
  position: relative; height: 18px;
  background: rgba(0,0,0,0.25); border-radius: 4px; overflow: hidden;
}
.mg-bar {
  position: absolute; top: 2px; height: 14px; border-radius: 3px;
  transition: opacity 0.15s;
}
.mg-bar:hover { opacity: 0.8; }
.mg-scan    { background: #e8850a; }
.mg-process { background: #cca700; }
.mg-draw    { background: #4a9fd5; }
.mg-today {
  position: absolute; top: 0; height: 100%; width: 2px;
  background: rgba(255,255,255,0.85); border-radius: 1px; pointer-events: none;
}


/* ── Badge de deadline ────────────────────────────────────────── */
.card-deadline {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0;
}
.cdl-overdue { background: rgba(231,76,60,0.2);  color: #e74c3c; border: 1px solid rgba(231,76,60,0.45); }
.cdl-urgent  { background: rgba(230,126,34,0.18); color: #e67e22; border: 1px solid rgba(230,126,34,0.4); }
.cdl-soon    { background: rgba(204,167,0,0.15);  color: #cca700; border: 1px solid rgba(204,167,0,0.35); }
.cdl-ok      { background: rgba(78,201,78,0.1);   color: #4ec94e; border: 1px solid rgba(78,201,78,0.25); }

/* ── Cover upload en modal ────────────────────────────────────── */
.cover-drop-area {
  position: relative; width: 100%; height: 130px;
  border: 2px dashed var(--border); border-radius: 6px;
  overflow: hidden; cursor: pointer; transition: border-color 0.15s;
}
.cover-drop-area:hover { border-color: var(--border-focus); }
.cover-drop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; color: var(--text-dim); font-size: 11px;
}
.cover-drop-empty svg { width: 28px; height: 28px; fill: currentColor; opacity: 0.4; }
#cover-preview { width: 100%; height: 100%; object-fit: cover; display: none; }
.cover-drop-actions { display: none; gap: 6px; margin-top: 6px; }

/* ── Modal: grupos de fases ───────────────────────────────────── */
.modal-phase-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: -2px;
}
.modal-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim); padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  margin-top: 2px;
}
.phase-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.modal-row-3     { grid-template-columns: 1fr 1fr 1fr; }
.modal-row-4     { grid-template-columns: 1fr 1fr 1fr 1fr; }
.modal-row.modal-row-name { grid-template-columns: 1fr 88px; }
.modal-row-inline { display: flex; gap: 8px; }
.modal-row-inline .modal-field { flex-direction: row; align-items: center; flex: 1; min-width: 0; gap: 4px; }
.modal-row-inline .field-label { white-space: nowrap; flex-shrink: 0; padding-bottom: 0; }
.modal-row-inline .field-input { min-width: 0; flex: 1; padding: 6px 5px; text-align: center; }
.field-computed  { background: var(--bg) !important; color: var(--text-dim); font-weight: 600; cursor: default; }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 500; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; width: 540px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7); overflow: hidden;
}
.modal-box-wide { width: 860px; }

.modal-header   { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-title    { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.modal-close    { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; transition: background 0.1s, color 0.1s; }
.modal-close:hover { background: var(--bg5); color: var(--text); }

.modal-body     { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-field    { display: flex; flex-direction: column; gap: 5px; }
.modal-field.full { grid-column: 1 / -1; }

/* ── Modal 2 columnas (modal proyecto) ────────────────────────── */
.modal-body-2col {
  flex-direction: row !important; padding: 0 !important; gap: 0 !important;
  overflow: hidden !important;
}
.modal-col {
  flex: 1; display: flex; flex-direction: column;
  gap: 13px; padding: 18px 20px;
  overflow-y: auto; min-width: 0;
}
.modal-col-left  { border-right: 1px solid var(--border); }
.modal-col-right { background: var(--bg); }
.modal-field-grow { flex: 1; min-height: 0; }
.field-textarea-grow { flex: 1; min-height: 70px; resize: none; }

/* ── Timeline preview en modal ────────────────────────────────── */
.modal-timeline-wrap { display: flex; flex-direction: column; gap: 6px; }
.modal-timeline-legend {
  display: flex; gap: 12px; font-size: 10px; color: var(--text-dim);
}
.modal-timeline-legend span { display: flex; align-items: center; gap: 4px; }
.mtl-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.modal-timeline-track {
  background: rgba(0,0,0,0.25); border-radius: 4px;
  height: 28px; position: relative; overflow: hidden;
}
.modal-timeline-track .mg-bar {
  top: 3px; height: 22px; border-radius: 3px;
}
.modal-timeline-track .mg-today { width: 2px; background: rgba(255,255,255,0.9); }
.modal-timeline-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 10px; color: var(--text-dim); font-style: italic;
}

.field-label    { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.field-input, .field-select, .field-textarea {
  padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-bright);
  font-size: 12px; font-family: var(--font); outline: none;
  transition: border-color 0.15s; width: 100%;
}
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--accent); }
.field-input[readonly] { opacity: 0.55; cursor: default; font-family: var(--font-mono); letter-spacing: 0.05em; }
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-dim); }
.field-select option { background: var(--bg3); }
.field-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.field-with-action               { display: flex; gap: 6px; align-items: stretch; }
.field-with-action .field-select { flex: 1; }
.field-with-action .field-input  { flex: 1; min-width: 0; }
#f-status { transition: border-color .2s, box-shadow .2s; }
.btn-field-action:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.btn-field-action { padding: 0 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; font-family: var(--font); transition: background .15s, color .15s, border-color .15s; }
.btn-field-action:hover          { background: var(--accent); border-color: var(--accent); color: #fff; }

.modal-footer   { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-spacer   { flex: 1; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: none; border-radius: var(--radius); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background 0.12s, opacity 0.12s; white-space: nowrap; }
.btn svg         { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.btn-primary     { background: #fff; color: #1a1a1a; }
.btn-primary:hover { background: #e2e2e2; }
.btn-secondary   { background: var(--bg4); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg5); }
.btn-danger      { background: transparent; color: var(--danger); border: 1px solid rgba(255,85,85,0.3); }
.btn-danger:hover { background: rgba(255,85,85,0.12); }
.btn:disabled    { opacity: 0.4; cursor: not-allowed; }

/* ── Tabla usuarios ───────────────────────────────────────────── */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th { padding: 7px 12px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.users-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; color: var(--text); }
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover td { background: var(--bg3); }

.user-row-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; vertical-align: middle; margin-right: 7px; }
.role-badge      { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.color-badge     { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 10px; font-family: var(--font-mono); color: var(--text-dim); vertical-align: middle; }
.color-badge-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15); }
.role-admin      { background: rgba(192,57,43,0.2); color: #e74c3c; border: 1px solid rgba(192,57,43,0.35); }
.role-user       { background: rgba(255,255,255,0.06); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.1); }

.icon-btn        { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s, color 0.1s; }
.icon-btn svg    { width: 13px; height: 13px; fill: currentColor; }

.gmail-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
}
.gmail-ok      { background: rgba(78,201,78,0.15); color: #4ec94e; }
.gmail-missing { background: rgba(231,76,60,0.12); color: var(--text-dim); }

.perm-table-wrap  { overflow-x: auto; }
.perm-table th    { white-space: nowrap; text-align: center; }
.perm-table td    { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.perm-select      { font-size: 11px; padding: 4px 6px; min-width: 90px; }
.perm-full-access { font-size: 11px; color: var(--text-dim); font-style: italic; }
.icon-btn:hover  { background: var(--bg5); color: var(--text); }
.icon-btn.danger:hover { background: rgba(255,85,85,0.15); color: var(--danger); }

/* ── Toast ────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: calc(var(--statusbar-h) + 12px); right: 14px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast           { padding: 9px 14px; border-radius: var(--radius); font-size: 12px; color: #fff; max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); animation: toast-in 0.2s ease; pointer-events: auto; }
.toast-success   { background: #2a6e2a; border: 1px solid #3a9e3a; }
.toast-error     { background: #6e1a1a; border: 1px solid #9e2a2a; }
.toast-info      { background: #1a4a6e; border: 1px solid #2a6a9e; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Filter bar ───────────────────────────────────────────────── */
#filter-bar   { height: 36px; flex-shrink: 0; background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
#filter-bar::-webkit-scrollbar { display: none; }
.filter-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.filter-chip  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 11px; font-family: var(--font); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.filter-chip:hover { background: var(--bg4); color: var(--text); }
.filter-chip.active { background: #fff; border-color: #aaa; color: #444; }

/* Colores por columna (fallback si JS no aplica inline) */
.col-por-presupuestar    { --col-color: #d05555; }
.col-por-enviar          { --col-color: #d05555; }
.col-por-agendar         { --col-color: #d05555; }
.col-por-escanear        { --col-color: #e8850a; }
.col-por-procesar        { --col-color: #cca700; }
.col-en-espera           { --col-color: #888888; }
.col-por-dibujar-parcial { --col-color: #4a9fd5; }
.col-por-dibujar-final   { --col-color: #4a9fd5; }
.col-por-entregar        { --col-color: #4ec94e; }
.col-por-facturar        { --col-color: #4ec94e; }
.col-entregado-facturado { --col-color: #89d185; }

/* Color picker */
.color-row    { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; }
.color-swatch:hover    { transform: scale(1.2); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* Color picker preciso */
.color-pick-row   { display: flex; align-items: center; gap: 8px; }
.color-pick-swatch {
  width: 36px; height: 36px; border-radius: 6px; border: 2px solid var(--border);
  cursor: pointer; padding: 0; flex-shrink: 0;
  background: none;
}
.color-pick-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-pick-hex { font-family: var(--font-mono); width: 90px; flex-shrink: 0; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   CALENDARIO INTERACTIVO DE FECHAS (modal proyecto, col derecha)
═══════════════════════════════════════════════════════════════ */
.dcal-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Grupos de slots por fase ── */
.dcal-slots { display: flex; flex-direction: column; gap: 4px; }
.dcal-phase-group { display: flex; align-items: center; gap: 3px; }
.dcal-phase-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; }

.dcal-slot-btn {
  flex: 1; position: relative; padding: 4px 5px 5px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg2); cursor: pointer; color: var(--text-dim);
  text-align: center; line-height: 1.3; overflow: visible;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.dcal-slot-btn:hover { border-color: rgba(255,255,255,0.2); }
.dcal-slot-btn.active {
  border-color: var(--slot-clr, var(--accent));
  background: color-mix(in srgb, var(--slot-clr, var(--accent)) 14%, var(--bg2));
  color: var(--slot-clr, var(--text));
}
.dcal-slot-label {
  display: block; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7;
}
.dcal-slot-val   { display: block; font-size: 10px; font-weight: 600; }
.dcal-slot-btn.active .dcal-slot-label { opacity: 0.9; }

.dcal-slot-x {
  position: absolute; top: -5px; right: -5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg4); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-style: normal; line-height: 1;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.dcal-slot-x:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Navegación de semanas ── */
.dcal-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg3); border-radius: 6px;
  padding: 2px 4px;
}
.dcal-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background .12s, color .12s;
}
.dcal-nav-btn:hover { background: var(--bg4); color: var(--text-bright); }
.dcal-nav-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.03em; text-align: center; min-width: 70px;
}

/* ── Cuadrícula del calendario ── */
.dcal-grid { width: 100%; }
.dcal-row {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
}
.dcal-header-row { margin-bottom: 1px; }
.dcal-month-lbl {
  font-size: 8px; font-weight: 600; color: var(--text-dim); opacity: 0.45;
  text-transform: capitalize; display: flex; align-items: center; justify-content: center;
}
.dcal-hdr {
  font-size: 9.5px; font-weight: 700; color: var(--text-dim); opacity: 0.45;
  text-align: center; padding: 3px 0 5px;
}

/* ── Celda de día ── */
.dcal-day {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 30px; user-select: none;
}
.dcal-num {
  position: relative; z-index: 2;
  font-size: 11px; font-weight: 500; color: var(--text-dim); line-height: 1;
}
.dcal-marker {
  position: relative; z-index: 2;
  font-size: 7.5px; font-weight: 800; color: #fff;
  line-height: 1; margin-top: 1px; letter-spacing: 0.04em;
}

/* Capa de franja de rango (::before) y círculo/relleno (::after) */
.dcal-day::before {
  content: ''; position: absolute;
  top: 4px; bottom: 4px; left: 0; right: 0;
  pointer-events: none; background: transparent;
}
.dcal-day::after {
  content: ''; position: absolute;
  top: 3px; bottom: 3px; left: 3px; right: 3px;
  border-radius: 5px; pointer-events: none; background: transparent;
}

/* Día en el interior de un rango */
.dcal-mid::before { background: color-mix(in srgb, var(--day-clr) 20%, transparent); }
.dcal-mid .dcal-num { color: var(--day-clr); font-weight: 600; }

/* Hito intermedio (entrega parcial): franja + círculo relleno encima */
.dcal-milestone::after { background: color-mix(in srgb, var(--day-clr) 65%, #1e1e1e); }
.dcal-milestone .dcal-num { color: #fff; font-weight: 700; }

/* Inicio del rango: franja en la mitad derecha + círculo */
.dcal-start::before { background: color-mix(in srgb, var(--day-clr) 20%, transparent); left: 50%; }
.dcal-start::after  { background: color-mix(in srgb, var(--day-clr) 65%, #1e1e1e); }
.dcal-start .dcal-num { color: #fff; font-weight: 700; }

/* Fin del rango: franja en la mitad izquierda + círculo */
.dcal-end::before { background: color-mix(in srgb, var(--day-clr) 20%, transparent); right: 50%; }
.dcal-end::after  { background: color-mix(in srgb, var(--day-clr) 65%, #1e1e1e); }
.dcal-end .dcal-num { color: #fff; font-weight: 700; }

/* Punto único (fecha suelta o hito de dibujo) */
.dcal-single::after { background: color-mix(in srgb, var(--day-clr) 65%, #1e1e1e); }
.dcal-single .dcal-num { color: #fff; font-weight: 700; }

/* Hoy */
.dcal-today::after { outline: 1.5px solid rgba(255,255,255,0.22); outline-offset: -1px; }
.dcal-today .dcal-num { color: var(--text-bright); font-weight: 700; }
.dcal-today.dcal-start .dcal-num,
.dcal-today.dcal-end .dcal-num,
.dcal-today.dcal-single .dcal-num { color: #fff; }
.dcal-today.dcal-mid .dcal-num { color: var(--day-clr); font-weight: 700; }

/* Fin de semana atenuado */
.dcal-weekend { opacity: 0.4; }

/* Hover en días sin fase asignada */
.dcal-day:not(.dcal-mid):not(.dcal-start):not(.dcal-end):not(.dcal-single):hover::after {
  background: rgba(255,255,255,0.07);
}
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; }

/* ── Panel lateral de detalle de proyecto ──────────────────────── */
#proj-detail-overlay {
  position: fixed; inset: 0; z-index: 450;
  pointer-events: none;
}
#proj-detail-overlay.open { pointer-events: auto; }

.pdp-backdrop {
  position: absolute; inset: 0;
  background: transparent;
  transition: background 0.25s ease;
}
#proj-detail-overlay.open .pdp-backdrop { background: rgba(0,0,0,0.45); }

.pdp-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 525px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#proj-detail-overlay.open .pdp-panel { transform: translateX(0); }

.pdp-inner {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

/* Header */
.pdp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdp-ref {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-dim); background: var(--bg4);
  padding: 2px 6px; border-radius: 3px;
}
.pdp-status-pill {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 4px; border: 1px solid; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.pdp-close {
  margin-left: auto; background: transparent; border: none;
  color: var(--text-dim); cursor: pointer; padding: 5px;
  border-radius: 4px; display: flex; align-items: center;
  transition: background .1s, color .1s;
}
.pdp-close:hover { background: var(--bg4); color: var(--text); }
.pdp-close svg { width: 12px; height: 12px; }

/* Body */
.pdp-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 18px 18px 12px;
  display: flex; flex-direction: column; gap: 18px;
}
.pdp-body::-webkit-scrollbar { width: 4px; }
.pdp-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.pdp-name-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.pdp-name {
  font-size: 15px; font-weight: 700; color: var(--text-bright);
  line-height: 1.35; margin: 0;
}
.pdp-deadline { flex-shrink: 0; font-size: 11px !important; padding: 4px 10px !important; }
.pdp-client { font-size: 12px; color: var(--text-dim); margin: -12px 0 0; }

/* Section */
.pdp-section { display: flex; flex-direction: column; gap: 8px; }
.pdp-section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
}

/* Timeline */
.pdp-tl-track {
  position: relative; height: 8px;
  background: var(--bg4); border-radius: 4px; overflow: hidden;
}
.pdp-tl-seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; opacity: 0.9; }
.pdp-tl-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-dim); margin-top: 4px;
}

/* Phase blocks */
.pdp-phases { display: flex; flex-direction: column; gap: 6px; }
.pdp-phase-block {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  transition: opacity .15s;
}
.pdp-phase-done    { opacity: 0.65; }
.pdp-phase-active  { border-color: rgba(255,255,255,0.12); }
.pdp-phase-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.pdp-phase-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pdp-phase-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pdp-phase-lbl {
  font-size: 11px; font-weight: 700; color: var(--text-bright);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pdp-phase-dates { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; }
.pdp-phase-row2 { display: flex; align-items: center; gap: 6px; }
.pdp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 7px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.pdp-phase-names { font-size: 11px; color: var(--text-dim); }
.pdp-draw-dates { display: flex; gap: 14px; flex-wrap: wrap; }
.pdp-draw-dates span { font-size: 10px; color: var(--text-dim); }
.pdp-draw-dates b { color: var(--text); }

/* Tiempos */
.pdp-times { display: flex; flex-direction: column; gap: 6px; }
.pdp-times-group {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.pdp-times-group-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 8px;
}
.pdp-times-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-size: 12px; color: var(--text-dim);
}
.pdp-times-row span:last-child {
  font-family: var(--font-mono); font-weight: 600; color: var(--text-bright);
}
.pdp-times-total {
  border-top: 1px solid var(--border);
  margin-top: 5px; padding-top: 7px;
}
.pdp-times-total span:first-child { color: var(--text); font-weight: 600; }
.pdp-times-total span:last-child  { color: var(--text-bright); }

/* Notes */
.pdp-note { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.55; }
.pdp-note b { color: var(--text); }

/* Tabs (solo socios) */
.pdp-tabs {
  display: flex; gap: 4px; padding: 0 18px; margin-top: 10px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.pdp-tab-btn {
  padding: 8px 4px; font-size: 12px; font-family: var(--font);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); cursor: pointer; transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px; margin-right: 14px;
}
.pdp-tab-btn:hover  { color: var(--text); }
.pdp-tab-btn.active { color: var(--text-bright); border-bottom-color: var(--accent); }

/* Checklist de tareas del punto actual (socios) */
.pdp-tasks-list  { display: flex; flex-direction: column; gap: 2px; }
.pdp-task-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px; color: var(--text);
}
.pdp-task-row:last-child { border-bottom: none; }
.pdp-task-check {
  width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center;
}
.pdp-task-row.pdp-task-done .pdp-task-check { background: #2e9e4f; border-color: #2e9e4f; color: #fff; }
.pdp-task-row.pdp-task-done .pdp-task-check svg { width: 9px; height: 9px; }
.pdp-task-row.pdp-task-done .pdp-task-label { color: var(--text-dim); text-decoration: line-through; }
.pdp-task-label { flex: 1; min-width: 0; }
.pdp-task-date  { font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.pdp-tasks-summary { font-size: 11px; color: var(--text-dim); }

/* Footer */
.pdp-footer {
  padding: 14px 16px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ── Módulo Gestión ────────────────────────────────────────────── */
.module-gestion { padding: 0; overflow: hidden; }

.gt-toolbar {
  height: 36px; flex-shrink: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.gt-undo-toolbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius); max-width: 220px;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text-dim); font-size: 11px; font-family: var(--font);
  cursor: pointer; transition: background .12s, color .12s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-undo-toolbar-btn:hover { background: var(--bg4); color: var(--text); }
.gt-flujos-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-size: 11px; font-family: var(--font);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.gt-flujos-btn:hover { background: var(--bg4); color: var(--text); }
.gt-flujos-btn.active { background: var(--bg4); color: var(--text-bright); border-color: var(--border-focus); }
.gt-filter-bar {
  display: flex; gap: 2px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px; margin-left: 0;
}
.gt-filter-btn {
  padding: 4px 14px; border: none; border-radius: 4px; background: transparent;
  color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: background .12s, color .12s;
}
.gt-filter-btn:hover { background: var(--bg4); color: var(--text); }
.gt-filter-btn.active { background: #fff; color: #444; }

.gt-body {
  flex: 1; min-height: 0;
  display: flex; gap: 12px;
  padding: 12px 20px 20px; overflow: hidden;
}

/* Sections */
.gt-section {
  --sec-color: var(--accent);
  flex: 1; min-width: 0; min-height: 0;
  background: var(--bg2);
  border: 1px solid color-mix(in srgb, var(--sec-color) 30%, var(--border));
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.gt-sec-header {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--sec-color) 14%, var(--bg3));
  border-bottom: 1px solid color-mix(in srgb, var(--sec-color) 25%, var(--border));
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.gt-sec-header:hover { background: color-mix(in srgb, var(--sec-color) 22%, var(--bg3)); }
.gt-sec-accent-bar { height: 3px; background: var(--sec-color); flex-shrink: 0; }
.gt-sec-header-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 12px;
}
.gt-sec-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-bright); flex: 1;
}
.gt-sec-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--bg4); color: var(--text-dim);
}
.gt-sec-chevron { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; transition: transform .2s; }
.gt-sec-chevron svg { width: 14px; height: 14px; display: block; }
.gt-section.gt-sec-collapsed .gt-sec-chevron { transform: rotate(-90deg); }
.gt-sec-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.gt-section.gt-sec-collapsed .gt-sec-body { display: none; }

.gt-empty { font-size: 12px; color: var(--text-dim); padding: 8px 4px; }
.gt-week-nav { display: flex; align-items: center; gap: 6px; }
.gt-week-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background .12s, color .12s;
}
.gt-week-nav-btn:hover { background: var(--bg4); color: var(--text); }
.gt-week-range { font-size: 12px; font-weight: 600; color: var(--text-dim); min-width: 110px; text-align: center; }

/* ── Vista semanal (Gestión) ───────────────────────────────────── */
.gt-body.gt-body-semanal { /* single flex child fills automatically */ }

/* ── Vista Flujos ───────────────────────────────────────────────── */
.gt-body.gt-body-flujos { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; align-items: stretch; cursor: grab; }
.gt-body.gt-body-flujos:active { cursor: grabbing; }
.fl-col {
  flex: 0 0 220px; min-height: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.fl-col-header {
  --col-color: #888;
  flex-shrink: 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--col-color) 12%, var(--bg3));
  border-bottom: 1px solid color-mix(in srgb, var(--col-color) 25%, var(--border));
}
.fl-col-accent { height: 3px; background: var(--col-color); }
.fl-col-title-row { display: flex; align-items: center; gap: 7px; padding: 8px 10px; }
.fl-col-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fl-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-bright); flex: 1; }
.fl-col-count { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg4); color: var(--text-dim); }
.fl-col-body  { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.fl-action-row {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 6px; flex-shrink: 0;
}
.fl-action-top { display: flex; align-items: center; gap: 6px; }
.fl-action-bot { padding-left: 18px; }
.fl-action-drag { color: var(--text-dim); font-size: 13px; cursor: grab; flex-shrink: 0; line-height: 1; }
.fl-action-label {
  flex: 1; font-size: 11px; color: var(--text); line-height: 1.35;
  word-break: break-word; outline: none; cursor: text;
  border-radius: 3px; padding: 1px 3px; min-width: 0;
}
.fl-action-label:focus { background: var(--bg4); }
.fl-action-del { flex-shrink: 0; opacity: 0; transition: opacity .1s; }
.fl-action-row:hover .fl-action-del { opacity: 1; }
.fl-advance-toggle {
  flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--text-dim); opacity: 0; transition: opacity .1s, color .1s;
  padding: 2px 5px; border-radius: 3px;
}
.fl-action-row:hover .fl-advance-toggle { opacity: 1; }
.fl-advance-toggle.active { opacity: 1; color: #4ec94e; background: rgba(78,201,78,0.12); }
.fl-action-row-trigger { border-left: 2px solid #4ec94e; padding-left: 4px; }
.fl-add-btn {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 5px 6px; border-radius: 5px; border: 1px dashed var(--border);
  background: transparent; color: var(--text-dim); font-size: 11px;
  cursor: pointer; font-family: var(--font); transition: background .12s, color .12s;
}
.fl-add-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border-focus); }
.fl-empty { font-size: 11px; color: var(--text-dim); padding: 4px 2px; }
.gt-week-cal {
  flex: 1; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  overflow: hidden;
}
.gt-wc-col {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.gt-wc-weekend { opacity: 0.6; }
.gt-wc-day-hdr {
  flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.gt-wc-accent-bar { height: 3px; background: var(--border); }
.gt-wc-hdr-row {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 8px 7px 12px;
}
.gt-wc-day-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); flex: 1;
}
.gt-wc-day-num {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  padding: 2px 7px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.gt-wc-add-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; border: none; flex-shrink: 0;
  background: transparent; color: var(--text-dim); cursor: pointer;
  opacity: 0; transition: opacity .15s, background .12s;
}
.gt-wc-col:hover .gt-wc-add-btn { opacity: 1; }
.gt-wc-add-btn:hover { background: var(--bg4); color: var(--text-bright); }
.gt-wc-day-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 0 8px; display: flex; flex-direction: column;
}

/* Layout de tarjetas de proyecto en columnas estrechas (vista semanal) */
.gt-wc-day-body .gt-proj-head {
  flex-wrap: wrap; row-gap: 3px; align-items: center;
}
.gt-wc-day-body .gt-proj-name {
  flex-basis: calc(100% - 16px); /* ocupa toda la línea tras el dot */
  white-space: normal; line-height: 1.3;
}
.gt-wc-day-body .gt-proj-col  { margin-left: 15px; } /* sangría = dot+gap */
.gt-wc-day-body .gt-proj-open { margin-left: auto; }

/* Tarjetas compactas vista semanal */
.gt-wc-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px;
}
.gt-wc-proj { cursor: pointer; }
.gt-wc-proj:hover { border-color: rgba(255,255,255,0.18); background: var(--bg4); }
.gt-wc-card-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  align-self: flex-start; margin-top: 2px;
}
.gt-wc-card-name {
  font-size: 11px; font-weight: 500; color: var(--text);
  line-height: 1.3; word-break: break-word;
}
.gt-wc-card-sub { font-size: 10px; color: var(--text-dim); }
.gt-wc-task {
  flex-direction: column; gap: 0; padding: 0;
  background: var(--bg3); border-color: var(--border);
}
.gt-wc-task:hover { border-color: rgba(255,255,255,0.12); }
.gt-wc-task-body {
  display: flex; align-items: flex-start; padding: 4px 8px 5px;
}
.gt-wc-task-body .gt-wc-card-name { color: var(--text); }
.gt-wc-task-done .gt-wc-task-body .gt-wc-card-name {
  text-decoration: line-through; color: var(--text-dim);
}

.gt-proj {
  --col-color: #888;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--col-color);
  border-radius: 6px; overflow: hidden;
}
.gt-proj-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px;
}
.gt-proj-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gt-proj-name { font-size: 12px; font-weight: 600; color: var(--text-bright); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-proj-col  { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.gt-proj-date { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.gt-proj-open {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; display: flex; align-items: center;
  justify-content: center; border-radius: 4px; flex-shrink: 0;
  transition: background .1s, color .1s;
}
.gt-proj-open:hover { background: var(--bg4); color: var(--text-bright); }
.gt-proj-open svg { width: 11px; height: 11px; }

.gt-proj-actions { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.gt-action-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 5px 2px; border-radius: 4px; transition: background .1s;
}
.gt-action-row:hover { background: var(--bg4); }
.gt-action-row-top { display: flex; align-items: center; gap: 4px; }
.gt-action-row-btns { display: flex; gap: 5px; }
.gt-action-row-btns .gt-hoy-btn { padding: 5px 8px; font-size: 11px; }
.gt-action-label { font-size: 11px; color: var(--text); line-height: 1.4; flex: 1; }
.gt-action-row.gt-action-done .gt-action-label { color: var(--text-dim); text-decoration: line-through; }
.gt-action-row.gt-action-advance { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 4px; }
.gt-advance-hint {
  font-size: 9px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  color: #4ec94e; opacity: 0.7; padding: 1px 4px; border-radius: 3px;
  background: rgba(78,201,78,0.1);
}
.gt-action-date { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.gt-action-date-auto { opacity: 0.7; }
.gt-action-date-btn { opacity: 0; flex-shrink: 0; transition: opacity .1s; }
.gt-action-date-btn.has-date { opacity: 0.6; }
.gt-action-date-btn.has-date:hover { opacity: 1; }
.fl-date-field-sel {
  font-size: 10px; font-family: var(--font); color: var(--text-dim);
  background: var(--bg4); border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 4px; cursor: pointer; width: 100%; max-width: 180px;
}
.gt-wc-action { background: var(--bg3); border-left: 3px solid var(--col-color, #888); padding: 0; }
.gt-wc-action-tag {
  font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: var(--text-dim);
}
.gt-wc-action-tag-auto { background: rgba(78,201,78,0.12); color: #4ec94e; }

/* ── Semanal: filas compactas ─────────────────────────────── */
.gt-wr-row {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; height: 72px; flex-shrink: 0;
  border-left: 3px solid var(--row-color, var(--border));
  border-bottom: 1px solid var(--border);
  background: var(--bg2); overflow: hidden;
}
.gt-wr-row:last-child { border-bottom: none; }
.gt-wr-proj { cursor: pointer; transition: background 0.1s; }
.gt-wr-proj:hover { background: var(--bg3); }
.gt-wr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gt-wr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gt-wr-name {
  font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gt-wr-sub {
  font-size: 10px; color: var(--text-dim); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-wr-acts { flex-shrink: 0; display: flex; gap: 3px; align-items: center; }
.gt-wr-assign { display: flex; gap: 2px; flex-shrink: 0; align-items: center; }
.gt-wr-btn {
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text-dim); cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.gt-wr-ok:hover { background: rgba(46,160,67,0.18); color: #4ec94e; border-color: #3a8a3a; }
.gt-wr-ps:hover { background: var(--bg4); color: var(--text); border-color: var(--border-focus); }
.gt-wr-done { opacity: 0.38; pointer-events: none; }
.gt-wr-done .gt-wr-name { text-decoration: line-through; }
.gt-wr-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; margin-left: 5px;
  vertical-align: middle; white-space: nowrap; line-height: 1.6;
}
.gt-wr-late { background: rgba(230,140,30,0.18); color: #e08020; }
.gt-wr-new  { background: rgba(46,160,67,0.15);  color: #4ec94e; }
.gt-wr-past { opacity: 0.45; pointer-events: none; }
.gt-wr-past .gt-wr-dot { filter: saturate(0.3); }
.gt-wr-past .gt-wr-name { text-decoration: line-through; color: var(--text-dim); }
.gt-wr-past .gt-wr-sub  { color: var(--text-dim); }
.gt-wr-sep {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); padding: 6px 10px 3px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: var(--bg2);
}
.gt-wr-acts .gt-undo-inline { font-size: 10px; padding: 2px 5px; white-space: nowrap; height: auto; }
.gt-wr-who {
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--bg3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.gt-wr-who:hover:not(.on) { border-color: var(--border-focus); color: var(--text); }
.gt-wr-who.on { color: #fff; }
/* ── Filtro Fase/Categoría (dropdown custom) ─────────────────────── */
.gt-pdd { position: relative; }
.gt-pdd-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0 9px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text-dim); font-size: 11px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.1s, color 0.1s;
}
.gt-pdd-btn:hover { border-color: var(--border-focus); color: var(--text); }
.gt-pdd-btn.on { border-color: var(--border-focus); color: var(--text); background: var(--bg3); }
.gt-pdd-chev { opacity: 0.5; }
.gt-pdd-panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 5px); right: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  padding: 4px; min-width: 178px; z-index: 300;
}
.gt-pdd-panel.open { display: flex; }
.gt-pdd-sep {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); padding: 8px 8px 3px; margin-top: 2px;
}
.gt-pdd-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 5px; font-size: 11px;
  color: var(--text); background: none; border: none; cursor: pointer;
  text-align: left; white-space: nowrap; width: 100%;
  transition: background 0.1s;
}
.gt-pdd-item:hover { background: var(--bg3); }
.gt-pdd-item.on { background: var(--bg3); font-weight: 600; }
.gt-pdd-all { color: var(--text-dim); font-size: 10.5px; }
.gt-pdd-all.on { color: var(--text); }
.gt-pdd-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--ic, #888);
}
.gt-pdd-cdot {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  background: #8888aa;
}

/* Date badges */
.gt-date-over  { background: rgba(241,76,76,0.15); color: #f14c4c; }
.gt-date-today { background: rgba(78,201,78,0.15);  color: #4ec94e; }
.gt-date-soon  { background: rgba(204,167,0,0.15);  color: #cca700; }
.gt-date-future { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* ── Vista Hoy ───────────────────────────────────────────────────── */
.gt-body-hoy { flex-direction: column; overflow-y: auto; align-items: center; padding: 24px 20px; }
.gt-hoy-wrap { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 20px; }

.gt-hoy-hero { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 4px; }
.gt-hoy-hero-date { font-size: 20px; font-weight: 700; color: var(--text-bright); }
.gt-hoy-hero-count { font-size: 12px; color: var(--text-dim); }

.gt-hoy-section { display: flex; flex-direction: column; gap: 6px; }
.gt-hoy-sec-hdr { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.gt-hoy-sec-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); flex: 1; }
.gt-hoy-sec-count { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg4); color: var(--text-dim); }

.gt-hoy-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--hoy-color, #555);
  border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: row;
  transition: border-color .12s, box-shadow .12s;
}
.gt-hoy-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.gt-hoy-card-left {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 7px;
  padding: 12px 10px 12px 12px;
}
.gt-hoy-card-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.gt-hoy-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-hoy-card-proj { font-size: 12px; font-weight: 600; color: var(--text-bright); line-height: 1.35; }
.gt-hoy-card-status { font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gt-hoy-card-right {
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 12px;
  border-left: 1px solid var(--border);
}
.gt-hoy-card-assign {
  flex-shrink: 0; width: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-left: 1px solid var(--border);
  padding: 8px 0;
}
.gt-hoy-card-btns { display: flex; gap: 6px; }

.gt-hoy-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; font-family: var(--font);
  transition: background .12s, border-color .12s, color .12s;
}
.gt-hoy-complete {
  border: 1px solid var(--border);
  background: var(--bg3); color: var(--text-dim);
}
.gt-hoy-complete:hover { background: var(--bg4); color: var(--text); border-color: var(--border-focus); }
.gt-hoy-postpone {
  border: 1px solid var(--border);
  background: var(--bg3); color: var(--text-dim);
}
.gt-hoy-postpone:hover { background: var(--bg4); color: var(--text); border-color: var(--border-focus); }

.gt-hoy-done { opacity: 0.35; pointer-events: none; }
.gt-hoy-card-done .gt-hoy-card-left { opacity: 0.35; }
.gt-hoy-card-done .gt-hoy-card-proj { text-decoration: line-through; }
.gt-hoy-done-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--success, #4ec94e);
  white-space: nowrap;
}
.gt-hoy-done-tag svg { width: 12px; height: 12px; fill: currentColor; }
.gt-hoy-empty-all { font-size: 13px; color: var(--text-dim); text-align: center; padding: 32px 0; letter-spacing: 0.02em; }

/* ── Keyboard focus en vista Hoy ────────────────────────────────── */
.gt-hoy-card.gt-hoy-focused {
  outline: 2px solid var(--info);
  outline-offset: -2px;
  position: relative; z-index: 1;
}
.gt-kb-hints {
  display: flex; gap: 14px; align-items: center;
  padding: 0 2px; flex-wrap: wrap;
}
.gt-kb-hint {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--text-dim);
}
kbd {
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border2); background: var(--bg3);
  color: var(--text-mid); line-height: 1.6;
}

/* ── Filtro asignado (Hoy) ──────────────────────────────────────── */
.gt-hoy-assignee-bar { display: flex; gap: 6px; }
.gt-hoy-af-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text-dim);
  transition: background .12s, color .12s, border-color .12s;
}
.gt-hoy-af-btn:hover { background: var(--bg4); color: var(--text); }
.gt-hoy-af-btn.active { background: var(--border-focus); border-color: var(--border-focus); color: #fff; }

/* ── Badges de asignado ─────────────────────────────────────────── */
.gt-assignee-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
/* ── Botones de asignación rápida en Hoy ───────────────────────── */
.gt-hoy-assign-btn {
  width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg4);
  color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gt-hoy-assign-btn:hover { border-color: var(--border-focus); color: var(--text); }
.gt-hoy-assign-btn.on { color: #fff; }

.gt-hoy-card-tags { display: flex; align-items: center; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.gt-hoy-orig-date { font-size: 9px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
.gt-hoy-overdue {
  font-size: 9px; font-weight: 700; color: #e05252;
  background: rgba(224,82,82,0.12); padding: 1px 5px; border-radius: 3px;
}

/* ── Toggle asignado en Flujos ──────────────────────────────────── */
.fl-assignee-grp { display: flex; gap: 2px; flex-shrink: 0; }
.fl-assignee-btn {
  width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg4);
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.fl-assignee-btn.pau   { background: #5b9cf6; border-color: #5b9cf6; color: #fff; }
.fl-assignee-btn.aleix { background: #f59342; border-color: #f59342; color: #fff; }

/* ── Asignado en modal de tarea ─────────────────────────────────── */
.tf-assignee-grp { display: flex; gap: 6px; }
.tf-assignee-btn {
  flex: 1; padding: 6px 0; border-radius: 6px; font-size: 12px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text-dim);
  transition: background .12s, color .12s, border-color .12s;
}
.tf-assignee-btn:hover { background: var(--bg4); }
.tf-assignee-btn[data-who="pau"].active   { background: #5b9cf6; border-color: #5b9cf6; color: #fff; }
.tf-assignee-btn[data-who="aleix"].active { background: #f59342; border-color: #f59342; color: #fff; }

/* Task items — white card with dark text */
.gt-task {
  display: flex; flex-direction: column; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; transition: border-color .1s;
}
.gt-task:hover { border-color: rgba(255,255,255,0.12); }
.gt-task-inner {
  padding: 2px 10px 6px;
}
.gt-task.gt-task-done .gt-task-title { text-decoration: line-through; color: var(--text-dim); }
.gt-task-title { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.gt-task-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gt-task-date  { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.gt-task-rec   { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; background: var(--bg4); color: var(--text-dim); text-transform: uppercase; }
.icon-btn {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; display: flex; align-items: center;
  justify-content: center; border-radius: 4px; flex-shrink: 0;
  transition: background .1s, color .1s; padding: 0;
}
.icon-btn:hover { background: var(--bg4); color: var(--text); }

/* ── Calendario desplegable ──────────────────────────────────────── */
.dp-wrap {
  background: var(--bg2); border: 1px solid var(--border-focus);
  border-radius: 10px; padding: 10px 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55); font-family: var(--font);
  user-select: none;
}
.dp-hdr {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 0 2px;
}
.dp-label {
  flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-bright);
}
.dp-nav {
  width: 26px; height: 26px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; border-radius: 5px;
  font-size: 18px; line-height: 1; display: flex; align-items: center;
  justify-content: center; transition: background .1s, color .1s; padding: 0;
}
.dp-nav:hover { background: var(--bg4); color: var(--text-bright); }
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dp-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border-radius: 5px; border: none; background: transparent;
  font-family: var(--font); padding: 0;
}
.dp-dh { font-weight: 600; font-size: 10px; color: var(--text-dim); cursor: default; }
.dp-day { color: var(--text); cursor: pointer; transition: background .1s; }
.dp-day:hover { background: var(--bg4); color: var(--text-bright); }
.dp-today { color: #4ec94e; font-weight: 700; background: rgba(78,201,78,0.08); }
.dp-today:hover { background: rgba(78,201,78,0.18); }
.dp-sel { background: var(--border-focus) !important; color: #fff !important; font-weight: 700; }
.dp-disabled { color: var(--text-dim) !important; opacity: 0.3; cursor: not-allowed !important; pointer-events: none; }
.icon-btn svg { width: 11px; height: 11px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MÒBIL
   Tot el que hi ha a partir d'aquí és additiu: no es toca cap regla
   de les anteriors, per garantir que l'aspecte d'escriptori no canvia
   gens per sobre de 720px.
═══════════════════════════════════════════════════════════════ */

/* Elements nous — amagats per defecte, es mostren només en pantalla estreta */
#mobile-topbar    { display: none; }
#sidebar-backdrop { display: none; }

@media (max-width: 720px) {

  /* ── Barra lateral → calaix lateral ─────────────────────────── */
  #mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    height: var(--toolbar-h); flex-shrink: 0;
    padding: 0 14px; border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }
  #mobile-menu-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--text);
    cursor: pointer; border-radius: var(--radius);
  }
  #mobile-menu-btn:hover, #mobile-menu-btn:active { background: var(--bg4); }
  #mobile-menu-btn svg { width: 18px; height: 18px; }
  #mobile-topbar-title {
    font-size: 14px; font-weight: 700; color: var(--text-bright);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  #sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 590; opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  #sidebar-backdrop.visible { display: block; opacity: 1; pointer-events: auto; }

  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 250px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
    z-index: 600; box-shadow: 2px 0 24px rgba(0,0,0,0.35);
  }
  #sidebar.sb-mobile-open { transform: translateX(0); }

  /* ── Capçaleres de mòdul: que no desbordin, que es puguin apilar ── */
  .mod-header {
    height: auto; min-height: var(--toolbar-h);
    flex-wrap: wrap; row-gap: 8px; padding: 10px 14px;
  }
  .mod-header-actions { flex-wrap: wrap; row-gap: 8px; }
  .search-wrap { flex: 1; min-width: 120px; }
  #search-input, #search-input:focus { width: 100%; }

  /* ── Panell de detall de projecte → pantalla completa ───────── */
  .pdp-panel { width: 100%; }

  /* ── Modals: apilar columnes ─────────────────────────────────── */
  .modal-row, .modal-row-3, .modal-row-4, .modal-row.modal-row-name {
    grid-template-columns: 1fr;
  }
  .modal-body-2col { flex-direction: column !important; }
  .modal-col-left  { border-right: none; border-bottom: 1px solid var(--border); }

  /* ── Inici: graelles apilades ────────────────────────────────── */
  .home-stats   { grid-template-columns: repeat(2, 1fr); }
  .home-quick   { grid-template-columns: repeat(3, 1fr); }
  .home-widgets { grid-template-columns: 1fr; }

  /* ── Equipo: llindar de la graella més baix ─────────────────── */
  .equipo-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* ── Proyectos / Contactos / Ajustes: taules amb desplaçament
       horitzontal en lloc de retallar-se ────────────────────────── */
  .list-wrap, .contactos-scroll, .module-ajustes {
    overflow-x: auto;
  }

  /* ── Gestión: la vista setmanal ja no retalla, es desplaça ──── */
  .gt-week-cal {
    overflow-x: auto; overflow-y: hidden;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(150px, 1fr);
  }

  /* ── Amagar el mini-calendari flotant (segueix accessible des
       de la vista Calendari) ───────────────────────────────────── */
  #proj-cal-wrapper { display: none !important; }

  /* ── Proyectos: només Kanban per ara (Lista/Mensual/Gantt
       amagats, pendents d'adaptar a mòbil) ──────────────────────── */
  .view-toggle-btn[data-pv="lista"],
  .view-toggle-btn[data-pv="mes"],
  .view-toggle-btn[data-pv="gantt"] { display: none; }

  /* ── Kanban mòbil: columnes reduïdes per defecte (com Trello) ── */
  #kanban-board:not(.kanban-zoomed) .kanban-col { width: 168px; min-width: 168px; }

  /* ── Kanban mòbil: mode "una columna a pantalla completa",
       amb swipe per canviar de columna (scroll-snap natiu) ──────── */
  .kanban-zoom-toggle {
    display: flex; position: fixed; right: 16px; bottom: 74px; z-index: 250;
    width: 46px; height: 46px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--accent); color: #fff; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45); cursor: pointer;
  }
  .kanban-zoom-toggle svg { width: 18px; height: 18px; }
  #kanban-board.kanban-zoomed {
    padding: 0; gap: 0;
    scroll-snap-type: x mandatory;
  }
  #kanban-board.kanban-zoomed .kanban-col {
    width: 100vw; min-width: 100vw; max-width: 100vw;
    max-height: none; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    border-radius: 0; border-top: none; border-bottom: none;
  }

  /* ── Login: que no desbordi la pantalla ─────────────────────── */
  .login-card { width: 100%; max-width: 380px; margin: 0 16px; }

  /* ── Diana tàctil més gran per a controls petits ────────────── */
  .icon-btn, .modal-close {
    min-width: 40px; min-height: 40px;
  }
  .sb-item, .col-add-btn {
    min-height: 40px;
  }
}

/* ── Telèfons petits (≤400px): modals a pantalla completa ──────── */
@media (max-width: 400px) {
  .modal-box, .modal-box-wide {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-quick { grid-template-columns: repeat(2, 1fr); }
}