/* ============================================================
   Source Code · Hub de Proyectos — Design tokens + componentes
   Tema oscuro. Color y tipografía desde el Design System de marca.
   ============================================================ */
:root {
  color-scheme: dark;
  /* Marca */
  --brand:        #5058F2;
  --accent:       #0597F2;
  --violet:       #954FB5;
  --grad:         linear-gradient(135deg, #0597F2 0%, #5058F2 55%, #954FB5 100%);

  /* Superficies y neutros */
  --bg:           #111111;
  --surface:      #161725;
  --surface-2:    #1e1f2e;
  --surface-3:    #262840;
  --ink:          #0D1B2A;
  --text:         #CCCCCC;
  --text-strong:  #FFFFFF;
  --text-muted:   #8A8A9A;
  --gray:         #707070;

  /* Estados (derivados, on-dark) */
  --ok:           #3DBE7A;
  --ok-soft:      rgba(61,190,122,0.14);
  --warn:         #E5A94E;
  --warn-soft:    rgba(229,169,78,0.14);
  --danger:       #E5657A;
  --danger-soft:  rgba(229,101,122,0.14);
  --info:         #0597F2;
  --info-soft:    rgba(5,151,242,0.14);
  --brand-soft:   rgba(80,88,242,0.16);
  --violet-soft:  rgba(149,79,181,0.16);

  --hairline:        rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.14);

  --font-display: "Poppins", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Espaciado base 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radios */
  --rxs:4px; --rsm:8px; --rmd:12px; --rlg:16px; --rxl:24px; --rfull:9999px;

  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.55);

  --sidebar-w: 248px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }
svg.ico { width: 16px; height: 16px; flex: 0 0 auto; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(80,88,242,0.4); color:#fff; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; border:2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }

/* ============================================================
   Layout shell
   ============================================================ */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.shell.client { --sidebar-w: 232px; }

/* ---- Sidebar ---- */
.sidebar {
  background: linear-gradient(180deg, #131322 0%, #101019 100%);
  border-right: 1px solid var(--hairline);
  padding: var(--s5) var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--s2); }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px; background: var(--grad);
  display: grid; place-items: center; font-family: var(--font-mono);
  font-weight: 700; color: #fff; font-size: 17px; box-shadow: 0 4px 14px rgba(80,88,242,0.4);
}
.brand .wordmark { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); font-size: 15px; line-height: 1.1; letter-spacing:-0.01em;}
.brand .wordmark small { display:block; font-weight:400; font-size:11px; color: var(--text-muted); letter-spacing: 0.04em;}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .nav-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: var(--s4) var(--s3) var(--s2); }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px var(--s3);
  border-radius: var(--rsm); color: var(--text); font-size: 13.5px; position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav a:hover { background: rgba(255,255,255,0.04); color: var(--text-strong); }
.nav a.active { background: var(--brand-soft); color: var(--text-strong); font-weight: 500; }
.nav a.active::before { content:""; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background: var(--grad); }
.nav a .ico { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.nav a .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.07); color: var(--text); padding: 1px 7px; border-radius: 999px; }
.nav a.alert .count { background: var(--brand); color:#fff; }

.sidebar-foot { margin-top: auto; }
.mini-user { display:flex; align-items:center; gap:10px; padding: var(--s3); border:1px solid var(--hairline); border-radius: var(--rmd); background: rgba(255,255,255,0.02); }
.mini-user .name { font-size:12.5px; color: var(--text-strong); font-weight:500; }
.mini-user .role { font-size:11px; color: var(--text-muted); font-family: var(--font-mono);}

/* ---- Client list in sidebar (internal) ---- */
.client-mini { display:flex; align-items:center; gap:9px; padding: 7px var(--s3); border-radius: var(--rsm); font-size:12.5px; color: var(--text);}
.client-mini:hover { background: rgba(255,255,255,0.04); }

/* ---- Main ---- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s6);
  position: sticky; top: 0; z-index: 20;
  background: rgba(17,17,17,0.82); backdrop-filter: blur(12px);
}
.crumbs { display:flex; align-items:center; gap:9px; font-size:13px; color: var(--text-muted); min-width:0; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity:.4; }
.crumbs .cur { color: var(--text-strong); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar .spacer { flex: 1; }

.search { display:flex; align-items:center; gap:9px; background: var(--surface); border:1px solid var(--hairline); border-radius: var(--rfull); padding: 7px 14px; width: 260px; color: var(--text-muted); }
.search input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width:100%; }
.search input::placeholder { color: var(--text-muted); }

/* View switcher — la pieza clave */
.viewswitch { display:flex; align-items:center; background: var(--surface); border:1px solid var(--hairline-strong); border-radius: var(--rfull); padding: 3px; }
.viewswitch button { border:none; background: none; color: var(--text-muted); font-family: var(--font-display); font-weight:500; font-size:12px; padding: 6px 13px; border-radius: var(--rfull); display:flex; align-items:center; gap:6px; transition: all .14s ease; }
.viewswitch button .ico { width:14px; height:14px; }
.viewswitch button.on.internal { background: var(--brand); color:#fff; }
.viewswitch button.on.client { background: var(--grad); color:#fff; }

.icon-btn { width:36px; height:36px; border-radius: var(--rsm); border:1px solid var(--hairline); background: var(--surface); color: var(--text); display:grid; place-items:center; position:relative;}
.icon-btn:hover { border-color: var(--hairline-strong); color: var(--text-strong);}
.icon-btn .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background: var(--danger); box-shadow:0 0 0 2px var(--bg);}

.avatar { border-radius: 50%; display:grid; place-items:center; font-family: var(--font-display); font-weight:600; color:#fff; flex:0 0 auto; overflow:hidden; }
.avatar.sq { border-radius: 8px; }
.avatar.xs { width:22px; height:22px; font-size:9.5px;}
.avatar.sm { width:28px; height:28px; font-size:11px;}
.avatar.md { width:36px; height:36px; font-size:13px;}
.avatar.lg { width:46px; height:46px; font-size:16px;}
.avatar-stack { display:flex; }
.avatar-stack .avatar { border:2px solid var(--surface); margin-left:-8px; }
.avatar-stack .avatar:first-child { margin-left:0; }

/* ---- Content ---- */
.content { padding: var(--s6) var(--s7) var(--s8); max-width: 1180px; width:100%; margin: 0 auto; }
.content.wide { max-width: 1320px; }

.page-head { margin-bottom: var(--s6); }
.page-head h1 { font-family: var(--font-display); font-weight:700; font-size: 30px; color: var(--text-strong); margin:0 0 6px; letter-spacing:-0.01em; }
.page-head .sub { color: var(--text-muted); font-size: 14px; }
.page-head .row { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s4); flex-wrap:wrap; }

.eyebrow { font-family: var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-muted); margin: 0 0 var(--s4); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hairline-strong); background: var(--surface); color: var(--text-strong); font-family: var(--font-display); font-weight:500; font-size:13px; padding: 9px 15px; border-radius: var(--rsm); transition: all .13s ease; }
.btn:hover { border-color: rgba(255,255,255,0.28); background: var(--surface-2); }
.btn .ico { width:15px; height:15px; }
.btn.primary { background: var(--brand); border-color: transparent; color:#fff; box-shadow: 0 4px 16px rgba(80,88,242,0.32); }
.btn.primary:hover { background:#5f66ff; }
.btn.grad { background: var(--grad); border-color: transparent; color:#fff; box-shadow: 0 4px 16px rgba(80,88,242,0.3);}
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 11px; font-size:12px; }
.btn.icon { padding: 8px; }

/* ---- Pills / badges ---- */
.pill { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:11px; padding: 3px 9px; border-radius: var(--rfull); border:1px solid transparent; white-space:nowrap; letter-spacing:0.02em;}
.pill .d { width:6px; height:6px; border-radius:50%; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }        .pill.ok .d{background:var(--ok);}
.pill.warn { background: var(--warn-soft); color: var(--warn); }  .pill.warn .d{background:var(--warn);}
.pill.danger { background: var(--danger-soft); color: var(--danger);} .pill.danger .d{background:var(--danger);}
.pill.info { background: var(--info-soft); color: var(--info); }  .pill.info .d{background:var(--info);}
.pill.brand { background: var(--brand-soft); color: #9aa0ff; }   .pill.brand .d{background:var(--brand);}
.pill.violet { background: var(--violet-soft); color:#c58fdd; }  .pill.violet .d{background:var(--violet);}
.pill.muted { background: rgba(255,255,255,0.05); color: var(--text-muted); } .pill.muted .d{background:var(--text-muted);}

.tag { font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-muted); }

/* type pills */
.type-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-family:var(--font-display); font-weight:500; color: var(--text);}
.type-pill .ico{width:14px;height:14px;}
.type-web .ico{color:#0597F2;} .type-seo .ico{color:#3DBE7A;} .type-ads .ico{color:#E5A94E;} .type-mant .ico{color:#954FB5;}

/* visibility chip */
.vis { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius: var(--rfull); }
.vis.client { background: var(--violet-soft); color:#c58fdd; }
.vis.internal { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.vis .ico { width:12px; height:12px; }

/* ---- Cards ---- */
.card { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--rlg); }
.card.pad { padding: var(--s5); }
.card.hover { transition: border-color .14s ease, transform .14s ease; }
.card.hover:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }

.grid { display:grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 720px){ .g-2,.g-3,.g-4{grid-template-columns:1fr;} }

/* stat cards */
.stat { padding: var(--s5); }
.stat .label { font-size:12.5px; color: var(--text-muted); display:flex; align-items:center; gap:8px; }
.stat .label .ico{width:15px;height:15px;}
.stat .num { font-family: var(--font-display); font-weight:700; font-size: 34px; color: var(--text-strong); line-height:1; margin: 12px 0 6px; }
.stat .foot { font-size:12px; color: var(--text-muted); }
.stat .foot b { color: var(--ok); font-weight:500; }
.stat .foot b.warn{ color: var(--warn);}

/* project card */
.proj-card { padding: var(--s5); display:flex; flex-direction:column; gap: var(--s4); cursor:pointer; }
.proj-card .top { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s3); }
.proj-card .client-row { display:flex; align-items:center; gap:9px; }
.proj-card .client-row .name { font-size:12px; color: var(--text-muted); }
.proj-card h3 { font-family: var(--font-display); font-weight:600; font-size: 17px; color: var(--text-strong); margin: 2px 0 0; letter-spacing:-0.01em;}
.proj-card .meta { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.progress { height:6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:999px; background: var(--grad); }
.proj-card .foot { display:flex; align-items:center; justify-content:space-between; }
.proj-card .foot .due { font-size:12px; color: var(--text-muted); display:flex; align-items:center; gap:6px;}
.proj-card .foot .due .ico{width:13px;height:13px;}

/* ---- Tabs ---- */
.tabs { display:flex; gap: 2px; border-bottom:1px solid var(--hairline); margin-bottom: var(--s6); }
.tabs a { padding: 11px var(--s4); font-family: var(--font-display); font-weight:500; font-size:13.5px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:8px;}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text-strong); border-bottom-color: var(--brand); }
.tabs a .count{ font-family:var(--font-mono); font-size:10.5px; background: rgba(255,255,255,0.07); padding:1px 7px; border-radius:999px;}

/* ---- Project header ---- */
.proj-header { display:flex; flex-direction:column; gap: var(--s4); margin-bottom: var(--s5); }
.proj-header .titlerow { display:flex; align-items:flex-start; gap: var(--s4); justify-content:space-between; flex-wrap:wrap;}
.proj-header h1 { font-family: var(--font-display); font-weight:700; font-size: 28px; color: var(--text-strong); margin:0; letter-spacing:-0.01em;}
.proj-header .attrs { display:flex; align-items:center; gap: var(--s4); flex-wrap:wrap; color: var(--text-muted); font-size:13px; }
.proj-header .attrs .a { display:flex; align-items:center; gap:7px; }
.proj-header .attrs .ico{width:14px;height:14px;}

/* ---- Task lists ---- */
.tasklist { margin-bottom: var(--s6); }
.tasklist > .lh { display:flex; align-items:center; gap:11px; margin-bottom: var(--s3); }
.tasklist > .lh h3 { font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--text-strong); margin:0; }
.tasklist > .lh .frac { font-family: var(--font-mono); font-size:11px; color: var(--text-muted); }
.tasklist > .lh .bar { flex:1; max-width:160px; }
.task { display:flex; align-items:center; gap: var(--s3); padding: 11px var(--s4); border:1px solid var(--hairline); border-bottom:none; background: var(--surface); transition: background .1s ease; }
.task:first-of-type { border-radius: var(--rmd) var(--rmd) 0 0; }
.task:last-of-type { border-radius: 0 0 var(--rmd) var(--rmd); border-bottom:1px solid var(--hairline); }
.task:only-of-type { border-radius: var(--rmd);}
.task:hover { background: var(--surface-2); }
.task .check { width:19px; height:19px; border-radius:50%; border:1.6px solid var(--hairline-strong); flex:0 0 auto; display:grid; place-items:center; color:transparent; transition: all .12s;}
.task .check.done { background: var(--ok); border-color: var(--ok); color:#0b1f16; }
.task .check.prog { border-color: var(--info); border-style:dashed; }
.task .check .ico{ width:12px; height:12px;}
.task .title { flex:1; font-size:13.5px; color: var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.task.done .title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25);}
.task .cbadges { display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.task .due { font-size:12px; color: var(--text-muted); display:flex; align-items:center; gap:5px;}
.task .due.late { color: var(--danger); }
.task .due .ico{width:12px;height:12px;}
.task .cmt { display:flex; align-items:center; gap:4px; font-size:11.5px; color: var(--text-muted); font-family:var(--font-mono);}
.task .cmt .ico{width:13px;height:13px;}

/* ---- Message board ---- */
.thread-item { display:flex; gap: var(--s4); padding: var(--s5); border:1px solid var(--hairline); border-radius: var(--rlg); background: var(--surface); margin-bottom: var(--s3); cursor:pointer; transition: border-color .14s ease;}
.thread-item:hover { border-color: var(--hairline-strong); }
.thread-item .body { flex:1; min-width:0; }
.thread-item h3 { font-family: var(--font-display); font-weight:600; font-size:15.5px; color: var(--text-strong); margin:0 0 5px;}
.thread-item .excerpt { font-size:13px; color: var(--text-muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.thread-item .meta { display:flex; align-items:center; gap: var(--s3); margin-top: 11px; font-size:12px; color: var(--text-muted);}
.thread-item .meta .who { color: var(--text); }
.thread-item .rcount { display:flex; align-items:center; gap:6px; }

/* comment / reply thread */
.thread { display:flex; flex-direction:column; gap: var(--s4); }
.comment { display:flex; gap: var(--s3); }
.comment .bubble { flex:1; background: var(--surface); border:1px solid var(--hairline); border-radius: 4px var(--rmd) var(--rmd) var(--rmd); padding: var(--s4); }
.comment.is-client .bubble { background: linear-gradient(180deg, rgba(149,79,181,0.08), rgba(80,88,242,0.05)); border-color: rgba(149,79,181,0.28); }
.comment .chead { display:flex; align-items:center; gap:9px; margin-bottom: 7px; }
.comment .chead .who { font-family: var(--font-display); font-weight:600; font-size:13px; color: var(--text-strong);}
.comment .chead .when { font-size:11.5px; color: var(--text-muted); font-family: var(--font-mono);}
.comment .ctext { font-size:13.5px; color: var(--text); line-height:1.55; }
.comment .ctext p{ margin:0 0 8px;} .comment .ctext p:last-child{margin:0;}

/* imágenes embebidas en comentarios (estilo Basecamp) */
.cimgs { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.cimg { width:148px; height:98px; border-radius: var(--rsm); border:1px solid var(--hairline); position:relative; overflow:hidden; cursor:zoom-in; display:flex; align-items:flex-end; padding:8px; transition: border-color .12s ease, transform .12s ease; }
.cimg:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.cimg .cimg-name { display:flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:9.5px; color:#fff; background:rgba(0,0,0,0.42); padding:3px 7px; border-radius:6px; backdrop-filter:blur(3px); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cimg .cimg-name .ico { width:11px; height:11px; }
.is-client .cimg { border-color: rgba(149,79,181,0.28); }

/* tira de previsualización de imágenes en el composer */
.composer-imgs { align-items:center; gap:10px; padding:10px 12px; border-top:1px dashed var(--hairline-strong); }
.composer-imgs .cimg { width:66px; height:46px; cursor:default; padding:0; }
.composer-imgs .cimg-x { position:absolute; top:3px; right:3px; width:18px; height:18px; border:none; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; display:grid; place-items:center; }
.composer-imgs .cimg-x .ico { width:11px; height:11px; }
.composer-imgs .imgnote { font-family: var(--font-mono); font-size:11px; color: var(--text-muted); }

/* ---- Lightbox ---- */
#lightbox { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding: var(--s6); }
#lightbox.open { display:flex; animation: lbfade .14s ease; }
@keyframes lbfade { from{opacity:0} to{opacity:1} }
.lb-scrim { position:absolute; inset:0; background:rgba(6,6,12,0.88); backdrop-filter: blur(6px); }
.lb-x { position:absolute; top:20px; right:24px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline-strong); background:rgba(0,0,0,0.45); color:#fff; display:grid; place-items:center; }
.lb-x:hover { background:rgba(0,0,0,0.75); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline-strong); background:rgba(0,0,0,0.45); color:#fff; display:grid; place-items:center; }
.lb-nav .ico { width:20px; height:20px; }
.lb-nav.prev { left:24px; } .lb-nav.next { right:24px; }
.lb-nav:hover { background:rgba(0,0,0,0.75); }
.lb-fig { position:relative; z-index:1; margin:0; width:100%; max-width:min(920px, 88vw); display:flex; flex-direction:column; gap:14px; align-items:center; }
.lb-img { width:100%; aspect-ratio:16/10; border-radius: var(--rlg); border:1px solid var(--hairline-strong); box-shadow: var(--shadow-lg); }
.lb-fig figcaption { display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size:12.5px; color: var(--text); background: var(--surface); border:1px solid var(--hairline); padding:8px 15px; border-radius: var(--rfull); }
.lb-fig figcaption .ico { width:14px; height:14px; color: var(--text-muted); }
.lb-count { color: var(--text-muted); border-left:1px solid var(--hairline); padding-left:11px; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
  background:
    radial-gradient(1000px 600px at 82% -10%, rgba(80,88,242,0.20), transparent 60%),
    radial-gradient(800px 500px at -5% 10%, rgba(5,151,242,0.16), transparent 55%),
    var(--bg); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--rxl); padding: var(--s7) var(--s6); box-shadow: var(--shadow-lg); }
.login-card .logo { background: var(--grad); display: grid; place-items: center; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 22px; box-shadow: 0 8px 24px rgba(80,88,242,0.4); }
.login-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-strong);
  text-align: center; margin: 0; letter-spacing: -0.01em; }
.login-sub { text-align: center; color: var(--text-muted); font-size: 13px; margin: 6px 0 22px; }
.login-err { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(229,101,122,0.3);
  border-radius: var(--rsm); padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; }

/* ---- Logout ---- */
.logout-btn { margin-left: auto; width: 30px; height: 30px; border-radius: var(--rsm); border: none;
  background: transparent; color: var(--text-muted); display: grid; place-items: center; flex: 0 0 auto; }
.logout-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-strong); }
.logout-btn .ico { width: 16px; height: 16px; }

/* ============================================================
   Responsive — móvil (sidebar → rail de iconos)
   ============================================================ */
@media (max-width: 860px) {
  :root { --sidebar-w: 62px; --topbar-h: 56px; }
  .sidebar { padding: 18px 9px; gap: 16px; }
  .brand { justify-content:center; }
  .brand .wordmark { display:none; }
  .nav .nav-label { display:none; }
  .nav a { justify-content:center; padding:10px 0; position:relative; }
  .nav a > span:not(.count) { display:none; }
  .nav a .count { display:none; }
  .nav a.alert::after { content:""; position:absolute; top:6px; right:12px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
  .nav a.active::before { left:-9px; }
  .client-mini span { display:none; }
  .mini-user { flex-direction:column; gap:6px; padding:7px; }
  .mini-user > div { display:none; }
  .mini-user .logout-btn { margin-left:0; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .search { display:none; }
  .crumbs { font-size:12px; }
  .content { padding: 22px 15px 60px; }
  .page-head h1 { font-size:24px; }
  .page-head .row { gap: var(--s3); }
  .proj-header h1 { font-size:22px; }
  .split { gap: var(--s5); }
  .viewswitch button { padding:6px 11px; font-size:11.5px; }
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabs a { white-space:nowrap; }
}
@media (max-width: 560px) {
  .content { padding: 18px 12px 56px; }
  .mrow { flex-wrap:wrap; row-gap:6px; padding: var(--s4); }
  .mrow .mspace { flex-basis:100%; height:0; }
  .cimg { width:calc(50% - 4px); }
  .lb-nav { width:40px; height:40px; }
  .lb-nav.prev { left:10px; } .lb-nav.next { right:10px; }
  .lb-x { top:14px; right:16px; }
  #lightbox { padding: var(--s4); }
  .modal .mb { max-height: 72vh; }
}

.who-tag { font-family:var(--font-mono); font-size:10px; padding:1px 6px; border-radius:999px; }
.who-tag.team { background: var(--brand-soft); color:#9aa0ff;}
.who-tag.client { background: var(--violet-soft); color:#c58fdd;}

/* composer */
.composer { display:flex; gap: var(--s3); align-items:flex-start; margin-top: var(--s4); }
.composer .field { flex:1; background: var(--surface); border:1px solid var(--hairline-strong); border-radius: var(--rmd); padding: var(--s3) var(--s4); }
.composer .field textarea { width:100%; background:none; border:none; outline:none; color: var(--text); font-family: var(--font-body); font-size:13.5px; resize:none; min-height: 44px; }
.composer .field .cbar { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--hairline);}
.composer .field .cbar .tools{ display:flex; gap:6px; color: var(--text-muted);}
.composer .field .cbar .tools .ico{width:16px;height:16px;}

/* ---- Files ---- */
.file-card { padding: var(--s4); display:flex; flex-direction:column; gap: var(--s3); }
.file-card .thumb { height:120px; border-radius: var(--rmd); background: var(--surface-2); display:grid; place-items:center; border:1px solid var(--hairline); position:relative; overflow:hidden;}
.file-card .thumb .ico { width:38px; height:38px; opacity:.6;}
.file-card .thumb.img { background-size:cover; background-position:center; cursor:zoom-in; }
.file-card .thumb.img:hover { border-color: var(--hairline-strong); }
.file-card .fname { font-size:13px; color: var(--text-strong); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-card .fmeta { font-size:11.5px; color: var(--text-muted); font-family:var(--font-mono); display:flex; align-items:center; gap:8px;}

/* ---- Right rail / detail panels ---- */
.split { display:grid; grid-template-columns: 1fr 300px; gap: var(--s6); align-items:start; }
@media (max-width: 980px){ .split{ grid-template-columns:1fr; } }
.rail .card { margin-bottom: var(--s4); }
.rail .rh { font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color: var(--text-muted); padding: var(--s4) var(--s4) 0;}
.kv { display:flex; align-items:center; justify-content:space-between; padding: 11px var(--s4); border-top:1px solid var(--hairline); }
.kv:first-of-type{ border-top:none; }
.kv .k { font-size:12.5px; color: var(--text-muted);}
.kv .v { font-size:13px; color: var(--text-strong); display:flex; align-items:center; gap:8px;}

/* toggle */
.toggle { width:38px; height:22px; border-radius:999px; background: rgba(255,255,255,0.12); position:relative; transition: background .15s ease; border:none; flex:0 0 auto;}
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition: transform .15s ease;}
.toggle.on { background: var(--violet); }
.toggle.on::after { transform: translateX(16px); }

/* ---- Notifications / email ---- */
.notif { display:flex; gap: var(--s3); padding: var(--s4); border-bottom:1px solid var(--hairline); }
.notif:last-child{ border-bottom:none;}
.notif.unread { background: rgba(80,88,242,0.05); }
.notif .ni { width:34px; height:34px; border-radius: var(--rsm); display:grid; place-items:center; flex:0 0 auto; }
.notif .ni .ico{width:16px;height:16px;}
.notif .nbody { flex:1; min-width:0;}
.notif .nbody .nt { font-size:13px; color: var(--text-strong); }
.notif .nbody .nt b{ font-weight:600;}
.notif .nbody .nx { font-size:12px; color: var(--text-muted); margin-top:2px;}
.notif .nbody .nw { font-size:11px; color: var(--text-muted); font-family:var(--font-mono); margin-top:6px;}
.notif .unreaddot { width:8px; height:8px; border-radius:50%; background: var(--brand); flex:0 0 auto; margin-top:6px;}

.email { border:1px solid var(--hairline); border-radius: var(--rlg); overflow:hidden; background:#fff; color:#1a1a2e; max-width:560px;}
.email .ehead { background: var(--grad); padding: var(--s5) var(--s5) var(--s4); color:#fff;}
.email .ehead .brandline{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:14px;}
.email .ehead .brandline .logo{ width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,0.18); display:grid; place-items:center; font-family:var(--font-mono); font-size:13px;}
.email .ebody { padding: var(--s6) var(--s5); }
.email .ebody h2 { font-family: var(--font-display); font-weight:700; font-size:19px; margin:0 0 var(--s3); color:#12122a;}
.email .ebody p { font-size:14px; line-height:1.6; color:#3a3a52; margin:0 0 var(--s4); }
.email .ebtn { display:inline-block; background: var(--brand); color:#fff; font-family:var(--font-display); font-weight:600; font-size:13.5px; padding: 11px 22px; border-radius: var(--rsm); }
.email .equote { border-left:3px solid var(--brand); padding: 4px 0 4px 16px; margin: 0 0 var(--s4); color:#4a4a63; font-size:13.5px; }
.email .efoot { padding: var(--s4) var(--s5); border-top:1px solid #eee; font-size:11.5px; color:#8a8a9a; }
.email-frame .caption { font-family: var(--font-mono); font-size:11px; color: var(--text-muted); margin-bottom: var(--s3); display:flex; align-items:center; gap:8px;}

/* ---- Activity feed ---- */
.feed { position:relative; }
.feed .ev { display:flex; gap: var(--s3); padding-bottom: var(--s4); position:relative; }
.feed .ev::before { content:""; position:absolute; left:14px; top:30px; bottom:-4px; width:1px; background: var(--hairline);}
.feed .ev:last-child::before{ display:none;}
.feed .ev .dot { width:29px; height:29px; border-radius:50%; background: var(--surface-2); border:1px solid var(--hairline); display:grid; place-items:center; flex:0 0 auto; z-index:1;}
.feed .ev .dot .ico{width:14px;height:14px; color: var(--text-muted);}
.feed .ev .txt { font-size:13px; color: var(--text); padding-top:5px;}
.feed .ev .txt b{ color: var(--text-strong); font-weight:600;}
.feed .ev .txt .w{ display:block; font-size:11px; color: var(--text-muted); font-family:var(--font-mono); margin-top:3px;}

/* ---- Client banner (context) ---- */
.ctx-banner { display:flex; align-items:center; gap: var(--s3); padding: 11px var(--s5); border-radius: var(--rmd); margin-bottom: var(--s5); font-size:12.5px;}
.ctx-banner.client { background: var(--violet-soft); border:1px solid rgba(149,79,181,0.3); color:#d9b6e8;}
.ctx-banner.internal { background: var(--brand-soft); border:1px solid rgba(80,88,242,0.3); color:#b3b7ff;}
.ctx-banner .ico{width:16px;height:16px; flex:0 0 auto;}
.ctx-banner b{ font-weight:600; }

/* empty / helper */
.section-title { display:flex; align-items:center; justify-content:space-between; margin: 0 0 var(--s4); }
.section-title h2 { font-family: var(--font-display); font-weight:600; font-size:17px; color: var(--text-strong); margin:0;}
.divider { height:1px; background: var(--hairline); margin: var(--s6) 0;}

.hidden-note { font-family:var(--font-mono); font-size:11px; color: var(--text-muted); display:flex; align-items:center; gap:7px; padding: 9px var(--s4); border:1px dashed var(--hairline-strong); border-radius: var(--rsm); background: rgba(255,255,255,0.02);}
.hidden-note .ico{width:14px;height:14px;}

/* modal */
.modal-scrim { position:fixed; inset:0; background: rgba(6,6,12,0.66); backdrop-filter: blur(3px); z-index:60; display:grid; place-items:center; padding: var(--s5); }
.modal { width:100%; max-width: 560px; background: var(--surface); border:1px solid var(--hairline-strong); border-radius: var(--rlg); box-shadow: var(--shadow-lg); overflow:hidden;}
.modal .mh { display:flex; align-items:center; justify-content:space-between; padding: var(--s5); border-bottom:1px solid var(--hairline);}
.modal .mh h3 { font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--text-strong); margin:0;}
.modal .mb { padding: var(--s5); display:flex; flex-direction:column; gap: var(--s4); max-height: min(68vh, 620px); overflow-y: auto; }
.modal .mf { padding: var(--s4) var(--s5); border-top:1px solid var(--hairline); display:flex; justify-content:flex-end; gap: var(--s3); }
.input { background: var(--surface-2); border:1px solid var(--hairline-strong); border-radius: var(--rsm); padding: 10px var(--s4); color: var(--text-strong); font-family: var(--font-body); font-size:13.5px; outline:none; width:100%;}
.input:focus{ border-color: var(--brand);}
label.fl { font-size:12px; color: var(--text-muted); display:block; margin-bottom:7px; font-family: var(--font-display); font-weight:500;}
textarea.input{ resize:vertical; min-height:96px; font-family: var(--font-body);}

/* misc */
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.flex { display:flex; align-items:center; gap: var(--s3);}
.between { justify-content:space-between; }
.wrap-gap { display:flex; flex-wrap:wrap; gap: var(--s2);}
.mt3{margin-top:var(--s3);} .mt4{margin-top:var(--s4);} .mt5{margin-top:var(--s5);} .mt6{margin-top:var(--s6);}
.stack-sm{ display:flex; flex-direction:column; gap: var(--s3);}

/* ---- WYSIWYG ---- */
.wysiwyg { border:1px solid var(--hairline-strong); border-radius: var(--rsm); overflow:hidden; background: var(--surface-2); }
.wysiwyg:focus-within { border-color: var(--brand); }
.wtool { display:flex; align-items:center; gap:2px; padding:6px; border-bottom:1px solid var(--hairline); }
.wtool button { width:29px; height:29px; border-radius:6px; border:none; background:none; color: var(--text-muted); display:grid; place-items:center; font-family: var(--font-display); font-weight:700; font-size:13px; }
.wtool button:hover { background: rgba(255,255,255,0.07); color: var(--text-strong); }
.wtool .divider-v { width:1px; height:18px; background: var(--hairline); margin:0 4px; }
.wtool i.it { font-style:italic; } .wtool u.un { text-decoration:underline; }
.wedit { min-height:104px; padding:11px var(--s4); color: var(--text-strong); font-size:13.5px; line-height:1.55; outline:none; }
.wedit:empty:before { content: attr(data-ph); color: var(--text-muted); }
.wedit p { margin:0 0 8px; } .wedit ul { margin:0 0 8px; padding-left:20px; }
.wysiwyg.bare { border:none; background:none; }
.wtool .wtool-text { width:auto; padding:0 10px; gap:6px; display:flex; align-items:center; font-weight:400; font-size:12px; color: var(--text-muted); }
.wtool .wtool-text span { font-family: var(--font-display); font-weight:500; }
.wtool .wtool-text.on { background: var(--brand-soft); color:#9aa0ff; }

/* composer enriquecido (comentarios y respuestas) */
.composer .field.composer-rich { padding:0; overflow:hidden; }
.field.composer-rich .wtool { border-bottom:1px solid var(--hairline); }
.field.composer-rich .wedit { min-height:66px; }
.field.composer-rich .composer-attach { padding: var(--s3) var(--s4); border-top:1px solid var(--hairline); background: var(--surface-2); }
.composer .field.composer-rich .cbar { padding:8px 12px 10px; border-top:1px solid var(--hairline); margin-top:0; }
.field.composer-rich .cbar .tools { display:flex; align-items:center; gap:6px; color: var(--text-muted); }
.field.composer-rich .cbar .tools .ico { width:14px; height:14px; }

/* ---- Multi responsable ---- */
.assignee-picker { display:flex; flex-wrap:wrap; gap:8px; }
.asg { display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:1px solid var(--hairline-strong); border-radius: var(--rfull); background: var(--surface-2); color: var(--text); font-size:12.5px; font-family: var(--font-display); font-weight:500; }
.asg:hover { border-color: rgba(255,255,255,0.28); }
.asg.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--text-strong); }
.asg .ck { width:14px; height:14px; color: var(--brand); opacity:0; }
.asg.sel .ck { opacity:1; }

/* ---- Adjuntar archivo (proveedores) ---- */
.attach-block { display:flex; flex-direction:column; gap: var(--s3); }
.prov-row { display:flex; flex-wrap:wrap; gap:8px; }
.prov-btn { display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid var(--hairline-strong); border-radius: var(--rsm); background: var(--surface-2); color: var(--text); font-size:12.5px; font-family: var(--font-display); font-weight:500; }
.prov-btn:hover { border-color: rgba(255,255,255,0.28); color: var(--text-strong); }
.prov-btn.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--text-strong); }
.prov-ico { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-family: var(--font-mono); font-size:11px; color:#fff; font-weight:700; flex:0 0 auto; }
.prov-ico.link { background: var(--surface-3); color: var(--text); }
.attach-reveal { border-top:1px dashed var(--hairline-strong); padding-top: var(--s4); }

/* ---- Management (clientes / equipo) rows ---- */
.mrow { display:flex; align-items:center; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom:1px solid var(--hairline); }
.mrow:last-child { border-bottom:none; }
.mrow:hover { background: var(--surface-2); }
.mrow .mname { font-family: var(--font-display); font-weight:600; font-size:14px; color: var(--text-strong); }
.mrow .msub { font-size:12px; color: var(--text-muted); }
.mrow .mcol { display:flex; flex-direction:column; gap:2px; }
.mrow .mmeta { font-size:12.5px; color: var(--text); }
.mrow .mspace { flex:1; }

/* segmented control */
.segmented { display:inline-flex; background: var(--surface-2); border:1px solid var(--hairline-strong); border-radius: var(--rsm); padding:3px; }
.segmented button { border:none; background:none; color: var(--text-muted); font-family: var(--font-display); font-weight:500; font-size:12.5px; padding:6px 14px; border-radius:6px; }
.segmented button.on { background: var(--brand); color:#fff; }