/* ============================================================
   PORTAL GREKOR — Sistema de diseño v3
   Claro · institucional · moderno 2025 · 100% responsive
   Cubre TODO el portal. Paleta: rojo de marca, gris, blanco, negro.
   ============================================================ */

:root{
  /* Fondos */
  --bg:        #F2F3F5;
  --bg-2:      #E9EAEC;
  --surface:   #FFFFFF;
  --surface-2: #F6F6F8;
  --surface-3: #EFEFF1;

  /* Líneas */
  --line:   #ECECEF;
  --line-2: #E2E2E6;
  --line-3: #D4D4D8;
  --hairline: #ECECEF;       /* alias compat */
  --hairline-2: #E2E2E6;
  --hairline-3: #D4D4D8;

  /* Texto */
  --ink:   #16161A;
  --ink-2: #54545A;
  --ink-3: #86868C;
  --ink-4: #A8A8AE;
  --ink-5: #CECED2;

  /* Rojo de marca */
  --red:        #D11129;
  --red-2:      #AE0D22;
  --red-3:      #FF3B4D;
  --red-dark:   #8E0A1B;
  --red-soft:   #FDECEE;
  --red-soft-2: #FBD9DD;
  --red-glow:   rgba(209,17,41,.22);

  /* Semánticos */
  --ok:#1C8745;     --ok-soft:#E7F4EC;
  --warn:#C2410C;   --warn-soft:#FBEDE5;
  --info:#1E40AF;   --info-soft:#E8ECF8;
  --purple:#7C3AED; --purple-soft:#EFE9FB;
  --teal:#0E7C72;   --teal-soft:#E3F1EF;

  --dark:#16161A;

  /* Radios */
  --r-xs:8px; --r-sm:11px; --r:16px; --r-lg:20px; --r-xl:26px;
  --radius-sm:11px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(16,16,20,.05);
  --sh-2:0 2px 6px rgba(16,16,20,.06), 0 8px 20px rgba(16,16,20,.07);
  --sh-3:0 8px 20px rgba(16,16,20,.10), 0 22px 48px rgba(16,16,20,.10);
  --sh-red:0 10px 26px rgba(209,17,41,.32);

  /* Tipografía fluida */
  --fs-display:clamp(2rem,1.5rem+2.4vw,3.2rem);
  --fs-h1:clamp(1.6rem,1.3rem+1.4vw,2.4rem);
  --fs-h2:clamp(1.15rem,1.04rem+0.5vw,1.45rem);
  --fs-lead:clamp(1rem,0.95rem+0.2vw,1.12rem);
  --fs-body:clamp(0.93rem,0.89rem+0.16vw,1rem);
  --fs-sm:clamp(0.82rem,0.79rem+0.1vw,0.9rem);
  --fs-xs:clamp(0.71rem,0.69rem+0.07vw,0.78rem);
  --fs-num:clamp(1.5rem,1.2rem+1vw,2.1rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --sp:.2s;
  --sidebar-w:256px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; }
body{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:var(--fs-body); line-height:1.55; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--red-soft-2); color:var(--red-2); }
*{ scrollbar-width:thin; scrollbar-color:var(--ink-5) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--ink-5); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }

.mono{ font-family:'Geist Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
em{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--red); }

/* ---------- UTILIDADES ---------- */
.bg-app{ background:radial-gradient(1100px 520px at 92% -10%, var(--red-soft), transparent 60%), var(--bg); }
.bg-mesh{ background:radial-gradient(900px 600px at 50% 0%, #fff, var(--bg) 70%); min-height:100vh; }
.mb{ margin-bottom:14px; }
.sep{ height:1px; background:var(--line-2); margin:18px 0; border:0; }
.w-full{ width:100%; }
.ta-r{ text-align:right; }
.pad{ padding:clamp(18px,1rem+1vw,28px); }
.prose{ color:var(--ink-2); font-size:var(--fs-body); line-height:1.7; }
strong,.prose strong{ font-weight:700; color:var(--ink); }
.display-lg{ font-size:var(--fs-h1); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.num-xl{ font-family:'Geist Mono',monospace; font-size:var(--fs-num); font-weight:700; letter-spacing:-.03em; line-height:1; }
.num-md{ font-family:'Geist Mono',monospace; font-size:clamp(1.2rem,1rem+.6vw,1.6rem); font-weight:600; letter-spacing:-.02em; }
.ico{ display:inline-block; vertical-align:-.16em; flex:none; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{ display:flex; min-height:100vh; }

/* Sidebar — respaldo claro (el layout app.php lo refina inline) */
.sidebar{
  width:var(--sidebar-w); flex:none; background:#fff;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px;
  position:sticky; top:0; height:100vh;
}
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:13px clamp(16px,1rem+1.4vw,34px);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.topbar-search{
  display:flex; align-items:center; gap:10px; flex:1; max-width:440px;
  padding:10px 15px; background:var(--surface-2);
  border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color var(--sp) var(--ease), box-shadow var(--sp) var(--ease);
}
.topbar-search:focus-within{ border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
.topbar-search-ico{ color:var(--ink-3); font-size:1rem; }
.topbar-search input{ flex:1; border:0; background:transparent; outline:0; font-size:var(--fs-sm); }
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.topbar-bell{
  font-size:1.15rem; cursor:pointer; width:42px; height:42px;
  display:grid; place-items:center; border-radius:11px;
  transition:background var(--sp) var(--ease);
}
.topbar-bell:hover{ background:var(--surface-3); }

.content{
  /* OJO: dentro de clamp()/calc() el '+' EXIGE espacios a ambos lados.
     Sin ellos el clamp es inválido y el navegador descarta TODO el padding
     (quedaba en 0 y el contenido se pegaba/recortaba en los bordes).
     Mínimo 20px por lado, creciendo de forma responsiva en pantallas grandes. */
  padding:clamp(20px,1rem + 1.6vw,40px) clamp(20px,1rem + 1.4vw,44px);
  width:100%; max-width:none; margin:0; flex:1;
}

/* ---------- BOTTOM TABS (respaldo) ---------- */
.bottom-tabs{ display:none; }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar{
  display:inline-grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink-3); color:#fff; font-weight:700; font-size:.84rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}
.avatar-sm{ width:36px; height:36px; font-size:.78rem; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --bg:var(--surface); --fg:var(--ink); --bd:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 20px; min-height:48px;
  font-size:var(--fs-sm); font-weight:700; letter-spacing:-.005em;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd); border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap;
  transition:transform var(--sp) var(--ease), box-shadow var(--sp) var(--ease),
             background var(--sp) var(--ease), border-color var(--sp) var(--ease), filter var(--sp) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--red-soft-2); outline-offset:2px; }
.btn-red{ --bd:transparent; background:linear-gradient(135deg,var(--red-3),var(--red) 52%,var(--red-2)); color:#fff; box-shadow:var(--sh-red); }
.btn-red:hover{ filter:brightness(1.06); box-shadow:0 14px 34px rgba(209,17,41,.44); }
.btn-ok{ --bd:transparent; background:linear-gradient(135deg,#2BA85A,var(--ok)); color:#fff; box-shadow:0 8px 22px rgba(28,135,69,.26); }
.btn-ok:hover{ filter:brightness(1.05); }
.btn-ghost{ --bg:transparent; --bd:var(--line-3); }
.btn-ghost:hover{ --bd:var(--red); color:var(--red); background:var(--red-soft); }
.btn-light{ --bg:var(--surface-2); }
.btn-light:hover{ --bg:var(--surface); }
.btn-quiet{ --bg:transparent; --bd:transparent; color:var(--ink-2); }
.btn-quiet:hover{ background:var(--surface-3); box-shadow:none; }
.btn-sm{ padding:9px 14px; min-height:38px; font-size:var(--fs-xs); border-radius:var(--r-xs); gap:7px; }
.btn-block{ width:100%; }
.btn-badge{ margin-left:4px; padding:2px 8px; border-radius:999px; background:var(--red); color:#fff; font-size:.72rem; font-weight:700; }
.btn-x{
  width:34px; height:34px; min-height:0; padding:0; border-radius:9px;
  background:transparent; border:0; color:var(--ink-3); cursor:pointer; font-size:1rem;
}
.btn-x:hover{ background:var(--red-soft); color:var(--red); }
button.btn:disabled,.btn.disabled{ opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

/* ============================================================
   SUPERFICIES / PILLS
   ============================================================ */
.surface,.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1);
}
.surface-2{ background:var(--surface-2); }
.card{ padding:clamp(20px,1rem+1.2vw,30px); }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:700;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line-2);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill-quiet{ background:var(--surface-3); color:var(--ink-3); }
.pill-info{ background:var(--info-soft); color:var(--info); border-color:transparent; }
.pill-ok{ background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.pill-warn{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.pill-purple{ background:var(--purple-soft); color:var(--purple); border-color:transparent; }
.pill-teal{ background:var(--teal-soft); color:var(--teal); border-color:transparent; }
.pill-red{ background:var(--red-soft); color:var(--red-2); border-color:transparent; }

/* ===== Etapas: color único por estado (Estilo 2 · degradado sólido) ===== */
.pill.pst-aprob{ --c:#475569; }
.pill.pst-arq{ --c:#4F46E5; }
.pill.pst-desp{ --c:#7C3AED; }
.pill.pst-coord{ --c:#C026D3; }
.pill.pst-costeo{ --c:#0E7490; }
.pill.pst-precio{ --c:#D97706; }
.pill.pst-cotiz{ --c:#0284C7; }
.pill.pst-listo{ --c:#65A30D; }
.pill.pst-acept{ --c:#16A34A; }
.pill.pst-dias{ --c:#DB2777; }
.pill.pst-logis{ --c:#0D9488; }
.pill.pst-verif{ --c:#EA580C; }
.pill.pst-cprecios{ --c:#2563EB; }
.pill.pst-autoriz{ --c:#9333EA; }
.pill.pst-cotauto{ --c:#059669; }
.pill.pst-asignar{ --c:#E11D48; }
.pill.pst-obra{ --c:#D11129; }
.pill.pst-entreg{ --c:#6B7280; }
/* estilo degradado sólido aplicado a cualquier pill con color de etapa */
.pill[class*="pst-"]{
  background:var(--c); /* fallback sólido si el navegador no soporta color-mix */
  background:linear-gradient(135deg, color-mix(in srgb, var(--c), #fff 6%), color-mix(in srgb, var(--c), #000 22%));
  color:#fff; border:none;
  box-shadow:0 5px 14px -6px var(--c);
}
.pill[class*="pst-"] .dot{ background:rgba(255,255,255,.9); box-shadow:none; }

.pulse{ animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 currentColor; opacity:1; } 50%{ box-shadow:0 0 0 5px transparent; opacity:.5; } }
.beacon{ width:8px; height:8px; border-radius:50%; background:var(--red); }

.folio{
  font-family:'Geist Mono',monospace; font-size:var(--fs-xs); font-weight:600;
  padding:4px 10px; border-radius:7px; background:var(--ink); color:#fff; letter-spacing:.02em;
}

/* ---------- FLASH / ALERT ---------- */
.flash,.alert{
  padding:14px 18px; border-radius:var(--r-sm); margin-bottom:18px;
  font-size:var(--fs-sm); font-weight:600;
  display:flex; align-items:center; gap:10px; border:1px solid transparent;
  animation:drop .35s var(--ease);
}
@keyframes drop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.flash-ok{ background:var(--ok-soft); color:var(--ok); border-color:#BFE3CC; }
.flash-error,.alert-error{ background:var(--red-soft); color:var(--red-2); border-color:var(--red-soft-2); }

/* ============================================================
   PÁGINA
   ============================================================ */
.page-head{ margin-bottom:clamp(18px,1rem+1vw,28px); }
.page-eyebrow{
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-3); margin-bottom:9px;
}
.page-title{ font-size:var(--fs-display); font-weight:800; letter-spacing:-.03em; line-height:1.05; }

/* ---------- KPIs ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.kpi{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,1rem+.5vw,24px); box-shadow:var(--sh-1);
  transition:transform var(--sp) var(--ease), box-shadow var(--sp) var(--ease);
}
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.kpi::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ink-5); }
.kpi-label{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.kpi-value{ font-family:'Geist Mono',monospace; font-size:var(--fs-num); font-weight:700; letter-spacing:-.03em; margin-top:7px; }
.kpi-accent::before{ background:linear-gradient(180deg,var(--red-3),var(--red)); }

/* ---------- SECCIÓN ---------- */
.section{ margin-bottom:clamp(20px,1rem+1.2vw,32px); }
.section-head{ display:flex; align-items:center; gap:11px; margin-bottom:15px; flex-wrap:wrap; }
.section-title{ font-size:var(--fs-h2); font-weight:800; letter-spacing:-.02em; }
.section-count{
  font-family:'Geist Mono',monospace; font-size:.78rem; font-weight:700;
  padding:3px 10px; border-radius:999px; background:var(--surface-3); color:var(--ink-3);
}

/* ---------- LISTA / TARJETAS DE PROYECTO ---------- */
.project-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px;
}
.project-card{
  position:relative; overflow:hidden; display:block;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,1rem+.4vw,22px) clamp(18px,1rem+.5vw,24px);
  box-shadow:var(--sh-1);
  transition:transform var(--sp) var(--ease), box-shadow var(--sp) var(--ease), border-color var(--sp) var(--ease);
}
.project-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--red-3),var(--red));
  transform:scaleY(0); transform-origin:top; transition:transform var(--sp) var(--ease);
}
.link-card{ cursor:pointer; }
.link-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2); }
.link-card:hover::before{ transform:scaleY(1); }
.project-card-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:11px; }
.project-card-client{ font-size:var(--fs-lead); font-weight:800; letter-spacing:-.02em; }
.project-card-meta{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:4px; display:flex; flex-wrap:wrap; gap:5px; }
.project-card-amount{ margin-top:13px; padding-top:12px; border-top:1px solid var(--line); font-family:'Geist Mono',monospace; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); }

/* ---------- VACÍO ---------- */
.empty{
  text-align:center; padding:clamp(38px,3rem+2vw,64px) 24px;
  background:var(--surface); border:1.5px dashed var(--line-3); border-radius:var(--r);
}
.empty-ico{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:1.5rem;
  background:var(--ok-soft); color:var(--ok);
}
.empty-title{ font-size:var(--fs-lead); font-weight:800; }
.empty-text{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:5px; }

.phase-note{
  margin-top:26px; padding:17px 20px; font-size:var(--fs-sm); color:var(--ink-2);
  background:var(--red-soft); border:1px solid var(--red-soft-2);
  border-left:4px solid var(--red); border-radius:var(--r-sm);
}
.metric-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:15px; }
.metric-k{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.metric-line{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }

/* ---------- BANDA IA ---------- */
.ai-insight{
  display:flex; gap:13px; align-items:flex-start; margin-bottom:16px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:linear-gradient(115deg,var(--purple-soft),var(--red-soft));
  border:1px solid #E2D6F5;
}
.ai-insight-ico{
  width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--red)); color:#fff;
}
.ai-insight-title{ font-size:var(--fs-sm); font-weight:800; color:var(--ink); }
.ai-insight-body{ font-size:var(--fs-xs); color:var(--ink-2); margin-top:2px; }

/* ============================================================
   DETALLE DE PROYECTO
   ============================================================ */
.detail-top{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
.detail-head{ position:relative; overflow:hidden; padding:clamp(22px,1rem+1.6vw,36px); margin-bottom:22px; }
.detail-head-glow{
  position:absolute; right:-90px; top:-130px; width:320px; height:320px;
  background:radial-gradient(circle,var(--red-glow),transparent 68%); pointer-events:none;
}
.detail-head-inner{ position:relative; }
.detail-head-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.detail-client{ margin-bottom:12px; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:var(--fs-sm); color:var(--ink-3); font-weight:600; }
.detail-meta span{ display:inline-flex; align-items:center; gap:6px; }
.detail-price{
  margin-top:20px; display:inline-flex; flex-direction:column;
  padding:15px 22px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line-2);
}
.detail-price-k{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.detail-price-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; }
.detail-cotiza{ margin-top:16px; }
.detail-stage{ margin-top:24px; }

.detail-grid{ display:grid; grid-template-columns:1fr 336px; gap:20px; align-items:start; }
.detail-main{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.detail-side{ display:flex; flex-direction:column; gap:15px; position:sticky; top:86px; }

.col-eyebrow{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:9px; }
.col-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px; }
.col-total{ font-size:var(--fs-sm); color:var(--ink-2); }

/* ---------- BARRA DE ETAPAS ---------- */
.stage-track{ display:flex; gap:4px; }
.stage-pill{ flex:1; height:8px; border-radius:999px; background:var(--surface-3); transition:background var(--sp) var(--ease); }
.stage-pill.done{ background:var(--ok); }
.stage-pill.current{ background:linear-gradient(90deg,var(--red-3),var(--red)); box-shadow:0 0 0 3px var(--red-soft-2); }
.stage-labels{ display:grid; grid-template-columns:repeat(11,1fr); gap:4px; margin-top:9px; }
.stage-label{ font-size:.6rem; font-weight:700; text-align:center; color:var(--ink-4); text-transform:uppercase; line-height:1.25; }
.stage-label.on{ color:var(--ink-2); }
.stage-label.cur{ color:var(--red); }

/* ---------- TABLA ---------- */
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.data-table thead th{
  text-align:left; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3);
  padding:13px 16px; border-bottom:1.5px solid var(--line-2); background:var(--surface-2);
  white-space:nowrap;
}
.data-table tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); }
.data-table tbody tr{ transition:background var(--sp) var(--ease); }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table tbody tr:last-child td{ border-bottom:0; }
.td-name{ font-weight:700; }
.td-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }
.td-unit{ color:var(--ink-3); font-size:.8em; }

/* ---------- TIMELINE ---------- */
.timeline{ display:flex; flex-direction:column; }
.timeline-empty{ font-size:var(--fs-sm); color:var(--ink-3); padding:8px 0; }
.tl-row{ display:flex; gap:13px; }
.tl-rail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.tl-line{ width:2px; flex:1; min-height:20px; background:var(--line-2); margin:4px 0; }
.tl-body{ padding-bottom:20px; flex:1; }
.tl-text{ font-size:var(--fs-sm); color:var(--ink-2); }
.tl-name{ font-weight:800; color:var(--ink); }
.tl-date{ font-size:var(--fs-xs); color:var(--ink-4); margin-top:3px; }

/* ---------- EQUIPO ---------- */
.team{ display:flex; flex-direction:column; gap:12px; }
.team-row{ display:flex; align-items:center; gap:11px; }
.team-name{ font-size:var(--fs-sm); font-weight:800; }
.team-rol{ font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.client-line{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:5px; }

/* ============================================================
   PANEL DE ACCIÓN
   ============================================================ */
.accion-mobile{ display:none; }
.accion-desktop{ display:block; }
.accion-form{ display:flex; flex-direction:column; gap:13px; }
.accion-btn-row{ display:flex; flex-wrap:wrap; gap:9px; }
.accion-info,.accion-wait{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:16px 18px; font-size:var(--fs-sm); color:var(--ink-2);
}
.accion-wait{ background:var(--surface-2); }
.accion-info-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; }
.accion-info-title{ font-weight:800; color:var(--ink); }
.accion-done{ text-align:center; padding:26px 20px; background:var(--ok-soft); border:1px solid #BFE3CC; }
.accion-done-ico{ width:50px; height:50px; margin:0 auto 12px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; }
.accion-done-title{ font-size:var(--fs-lead); font-weight:800; color:var(--ok); }
.accion-done-text{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:4px; }

/* ---------- SELECTOR (pick) ---------- */
.pick-list{ display:flex; flex-direction:column; gap:8px; }
.pick{ display:block; cursor:pointer; }
.pick input{ position:absolute; opacity:0; }
.pick-box{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color var(--sp) var(--ease), background var(--sp) var(--ease), box-shadow var(--sp) var(--ease);
}
.pick:hover .pick-box{ border-color:var(--line-3); }
.pick input:checked + .pick-box{ border-color:var(--red); background:var(--red-soft); box-shadow:0 0 0 3px var(--red-soft-2); }
.pick-main{ flex:1; min-width:0; }
.pick-name{ font-size:var(--fs-sm); font-weight:800; }
.pick-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:1px; }
.pick-num{ font-family:'Geist Mono',monospace; font-weight:600; font-size:var(--fs-sm); }
.pick-ia{
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--red)); color:#fff;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.label{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.input{
  width:100%; padding:13px 15px; font-size:var(--fs-body);
  background:var(--surface-2); color:var(--ink);
  border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color var(--sp) var(--ease), box-shadow var(--sp) var(--ease), background var(--sp) var(--ease);
}
.input::placeholder{ color:var(--ink-4); }
.input:focus{ outline:0; border-color:var(--red); background:#fff; box-shadow:0 0 0 4px var(--red-soft); }
textarea.input{ resize:vertical; min-height:96px; line-height:1.6; }
select.input{ cursor:pointer; }
.input-money{ font-family:'Geist Mono',monospace; font-weight:600; }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-narrow{ max-width:600px; }

/* ============================================================
   BUILDERS (despiece / coordinación / costeo)
   ============================================================ */
.add-grid{
  display:grid; grid-template-columns:1fr 140px auto; gap:10px; align-items:end;
  padding:16px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); margin-bottom:16px;
}
.add-prod,.add-qty{ display:flex; flex-direction:column; gap:7px; }
.add-btn{ white-space:nowrap; }
.builder-add{ margin-bottom:16px; }
.builder-sub{ font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:14px; }
.builder-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  margin-top:18px; padding:18px 20px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,#1C1C22,#101013); color:#fff;
}
.builder-foot-info{ font-size:var(--fs-sm); color:rgba(255,255,255,.65); }
.builder-foot-k{ font-family:'Geist Mono',monospace; font-size:var(--fs-num); font-weight:600; }
.calc-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,1rem+1vw,28px); display:flex; flex-direction:column; gap:15px; }
.calc-margen{ display:flex; flex-direction:column; gap:8px; }
.calc-venta{ padding:20px; border-radius:var(--r-sm); text-align:center; background:linear-gradient(135deg,var(--red-soft),var(--red-soft-2)); border:1px solid var(--red-soft-2); }
.calc-venta-k{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--red-2); }
.calc-venta .num-xl{ color:var(--red-2); margin-top:4px; }
.calc-venta-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; }
.seg{ display:inline-flex; padding:4px; gap:4px; background:var(--surface-3); border-radius:var(--r-sm); }
.seg-btn{
  padding:9px 15px; border-radius:8px; border:0; cursor:pointer;
  font-size:var(--fs-xs); font-weight:700; background:transparent; color:var(--ink-3);
  transition:background var(--sp) var(--ease), color var(--sp) var(--ease);
}
.seg-btn.on,.seg-btn:hover{ background:#fff; color:var(--ink); box-shadow:var(--sh-1); }
.seg-btn.on{ color:var(--red); }

/* ============================================================
   CHAT
   ============================================================ */
.chat-head{ display:flex; align-items:center; gap:13px; padding-bottom:15px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.chat-title{ font-size:var(--fs-h2); font-weight:800; }
.chat-sub{ font-size:var(--fs-sm); color:var(--ink-3); }
.chat-count{ font-family:'Geist Mono',monospace; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-3); color:var(--ink-3); }
.chat-thread{ display:flex; flex-direction:column; gap:13px; padding:20px 0; }
.chat-day{ align-self:center; font-size:var(--fs-xs); font-weight:700; color:var(--ink-3); background:var(--surface-3); padding:4px 12px; border-radius:999px; }
.chat-msg{ display:flex; gap:10px; max-width:92%; }
.chat-msg.mine{ align-self:flex-end; flex-direction:row-reverse; }
.chat-bubble-wrap{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.chat-meta{ display:flex; align-items:baseline; gap:8px; }
.chat-author{ font-size:var(--fs-xs); font-weight:800; }
.chat-role{ font-size:.65rem; font-weight:700; text-transform:uppercase; color:var(--ink-4); }
.chat-time{ font-size:.65rem; color:var(--ink-4); font-family:'Geist Mono',monospace; }
.chat-bubble{
  padding:11px 15px; border-radius:15px 15px 15px 5px;
  background:var(--surface); border:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2);
  box-shadow:var(--sh-1); word-break:break-word;
}
.chat-msg.mine .chat-bubble{ border-radius:15px 15px 5px 15px; border-color:transparent; background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; }
.chat-msg.mine .chat-meta{ flex-direction:row-reverse; }
.chat-empty{ text-align:center; padding:46px 20px; color:var(--ink-3); }
.chat-empty-ico{ font-size:2.1rem; margin-bottom:10px; }
.chat-empty-title{ font-size:var(--fs-lead); font-weight:800; color:var(--ink-2); }
.chat-empty-text{ font-size:var(--fs-sm); margin-top:4px; }
.chat-compose{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:flex-end;
  padding:13px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-2);
}
.chat-input{
  flex:1; padding:12px 15px; font-size:var(--fs-body); resize:none;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2);
  min-height:48px; max-height:140px;
}
.chat-input:focus{ outline:0; border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
.chat-send{ flex:none; }

/* ============================================================
   COTIZACIÓN (documento)
   ============================================================ */
.cotiza-wrap{ background:var(--bg-2); min-height:100vh; padding:28px 16px; }
.cotiza-bar{ max-width:820px; margin:0 auto 20px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.cotiza-bar-right{ display:flex; gap:9px; }
.cotiza-hint{ font-size:var(--fs-xs); color:var(--ink-3); }
.cotiza-sheet{ max-width:820px; margin:0 auto; background:#fff; border-radius:var(--r); box-shadow:var(--sh-3); padding:clamp(26px,4vw,54px); }
.cotiza-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.cotiza-brand{ display:flex; align-items:center; gap:13px; }
.cotiza-logo{ width:58px; height:58px; border-radius:12px; }
.cotiza-brand-sub{ font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; }
.cotiza-doc{ text-align:right; }
.cotiza-doc-title{ font-size:var(--fs-h2); font-weight:800; }
.cotiza-doc-meta{ font-size:var(--fs-xs); color:var(--ink-3); }
.cotiza-folio{ font-family:'Geist Mono',monospace; font-weight:700; color:var(--red); }
.cotiza-rule{ height:3px; background:var(--red); border:0; margin:22px 0; border-radius:2px; }
.cotiza-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cotiza-eyebrow{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:6px; }
.cotiza-client-name{ font-size:var(--fs-lead); font-weight:800; }
.cotiza-line{ font-size:var(--fs-sm); color:var(--ink-2); }
.cotiza-section{ margin-top:24px; }
.cotiza-proj-type{ font-size:var(--fs-sm); color:var(--red-2); font-weight:700; }
.cotiza-proj-desc{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:6px; line-height:1.7; }
.cotiza-scope{ font-size:var(--fs-sm); color:var(--ink-2); }
.cotiza-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.cotiza-table th{ text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding:10px 12px; border-bottom:2px solid var(--ink); }
.cotiza-table td{ padding:11px 12px; border-bottom:1px solid var(--line-2); font-size:var(--fs-sm); }
.cotiza-concept{ font-weight:700; }
.cotiza-concept-sub{ font-size:var(--fs-xs); color:var(--ink-3); }
.cotiza-amount{ font-family:'Geist Mono',monospace; font-weight:600; }
.cotiza-total{ display:flex; justify-content:flex-end; margin-top:20px; }
.cotiza-total-k{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.cotiza-total-amount{ font-family:'Geist Mono',monospace; font-size:var(--fs-num); font-weight:700; color:var(--red-2); }
.cotiza-total-note{ font-size:var(--fs-xs); color:var(--ink-3); }
.cotiza-terms{ margin-top:24px; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.8; }
.cotiza-signs{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:46px; }
.cotiza-sign{ text-align:center; }
.cotiza-sign-line{ border-top:1.5px solid var(--ink); padding-top:8px; }
.cotiza-sign-k{ font-size:var(--fs-xs); font-weight:700; }
.cotiza-sign-v{ font-size:var(--fs-xs); color:var(--ink-3); }
.cotiza-foot{ margin-top:34px; text-align:center; font-size:var(--fs-xs); color:var(--ink-4); }
.cotiza-check{ color:var(--ok); }

/* ============================================================
   ERRORES
   ============================================================ */
.error-page{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; gap:8px;
}
.error-code{
  font-family:'Geist Mono',monospace; font-size:clamp(4rem,12vw,8rem); font-weight:700; letter-spacing:-.05em;
  background:linear-gradient(135deg,var(--red-3),var(--red-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;
}
.error-title{ font-size:var(--fs-h1); font-weight:800; }
.error-text{ font-size:var(--fs-body); color:var(--ink-3); max-width:380px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-side{ position:static; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .sidebar{ display:none; }
  .main{ padding-bottom:78px; }
  .form-2col,.cotiza-cols,.cotiza-signs{ grid-template-columns:1fr; }
  .add-grid{ grid-template-columns:1fr; }
  .accion-mobile{ display:block; margin-bottom:22px; }
  .accion-desktop{ display:none; }
  .stage-label{ font-size:.5rem; }
  .chat-msg{ max-width:96%; }
  .project-list{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  html{ font-size:15px; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .topbar-search{ display:none; }
  .topbar{ justify-content:flex-end; }
  .detail-top .btn-sm{ flex:1; }
  .stage-labels{ display:none; }
  .builder-foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .content{ padding-left:14px; padding-right:14px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- IMPRESIÓN ---------- */
@media print{
  .no-print,.cotiza-bar,.sidebar,.topbar,.bottom-tabs{ display:none!important; }
  .cotiza-wrap{ background:#fff; padding:0; }
  .cotiza-sheet{ box-shadow:none; max-width:100%; border-radius:0; padding:0; }
  body{ background:#fff; }
}