/* ==========================================================================
   AscForge — Panel UI compartido
   Tokens + componentes que se repiten en tareas.html, pipeline.html,
   ficha_cliente.html, ads.html, n8n.html, Portal/web/admin.html.
   Cada herramienta linkea este archivo y sigue abriendo standalone (doble clic).
   No tocar ids/clases que usa el <script> de cada herramienta — esto es
   solo apariencia, cero lógica.
   ========================================================================== */

:root{
  --paper:#0a0a0f;
  --ink:#e2e8f0;
  --ink-soft:#8891a8;
  --ink-dim:#4a5068;
  --line:#1e1e3a;
  --line-soft:#171730;
  --surface:#111120;
  --surface-2:#0d0d18;
  --teal:#34d399;
  --violet:#a78bfa;
  --amber:#fbbf24;
  --red:#f87171;
  --eo:cubic-bezier(.16,.84,.44,1);
}

/* Glow ambiente — mismo recurso que el hero de la landing, para que el fondo
   negro no se sienta plano. Fixed + z-index natural (sin trucos de -1) para
   que quede detrás del contenido normal sin taparlo. */
html, body { overflow-x: hidden; }
body::before{
  content: "";
  position: fixed;
  top: -12%; left: -14%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(52,211,153,.11), rgba(52,211,153,0) 68%);
  pointer-events: none;
}

/* ---------- Base ---------- */
.container{ margin: 0 auto; }

/* ---------- Wordmark ---------- */
.wordmark{ font-size: 1.34rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.wordmark .asc{ color: var(--teal); }
.wordmark .forge{ color: var(--ink); }
.wordmark .suffix{
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line);
}
.header-tag{ font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Header / toolbar ---------- */
.header{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 0 0 26px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 32px;
  overflow: hidden;
}
.header::before{
  content: "";
  position: absolute; top: -70%; left: -6%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(52,211,153,.12), rgba(52,211,153,0) 65%);
  pointer-events: none;
}
header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
header::before{
  content: "";
  position: absolute; top: -80%; left: -4%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(52,211,153,.12), rgba(52,211,153,0) 65%);
  pointer-events: none;
}

/* ---------- Stats: números desnudos, tira con hairlines ---------- */
.stats-grid{
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 32px;
  break-inside: avoid;
}
.stat-card{
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 20px;
  text-align: left;
}
.stat-card:last-child{ border-right: none; }
.stat-num{
  font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 7px;
}
.stat-label{ font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }

@media (max-width: 640px){
  .stat-card{ border-right: none; border-bottom: 1px solid var(--line); }
  .stat-card:nth-last-child(-n+1){ border-bottom: none; }
}

/* ---------- Tabs / filtros ---------- */
.tab{
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font-family: inherit;
  transition: all .15s var(--eo);
  white-space: nowrap;
}
.tab:hover{ color: var(--ink-soft); border-color: #252545; }
.tab.active{ background: var(--surface); border-color: #252545; color: var(--ink); }
.filter-row-label{ font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; align-self: center; }

.filtros{ display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filtro{
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
  font-family: inherit; font-size: .74rem; font-weight: 600; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; transition: all .15s var(--eo);
}
.filtro.on{ background: rgba(52,211,153,.12); color: var(--teal); border-color: rgba(52,211,153,.3); }

/* ---------- Botones ---------- */
.btn-save, .btn-add-main, .btn-refresh{
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--teal);
  font-size: .82rem; font-weight: 700; padding: 10px 22px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all .15s var(--eo); letter-spacing: -.01em;
  white-space: nowrap;
}
.btn-save:hover, .btn-add-main:hover, .btn-refresh:hover{ background: rgba(52,211,153,.18); }
.btn-refresh:disabled{ opacity: .5; cursor: default; }

.btn-cancel{
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  font-size: .82rem; font-weight: 600; padding: 10px 18px; border-radius: 8px;
  cursor: pointer; font-family: inherit; transition: all .15s var(--eo);
}
.btn-cancel:hover{ color: var(--ink-soft); border-color: #252545; }

.btn-sm{
  background: transparent; border: 1px solid var(--line); color: var(--ink-dim);
  font-size: .72rem; font-weight: 600; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: all .15s var(--eo);
}
.btn-sm:hover{ border-color: #252545; color: var(--ink-soft); }
.btn-sm.del:hover{ border-color: rgba(248,113,113,.35); color: var(--red); }

.btn{
  padding: 11px 20px; border-radius: 9px; border: none; font-family: inherit; font-size: .86rem;
  font-weight: 700; background: var(--teal); color: #04120c; cursor: pointer; transition: all .15s var(--eo);
}
.btn:hover{ filter: brightness(1.08); }
.btn.ghost{ background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.btn.ghost:hover{ color: var(--ink); border-color: var(--teal); filter: none; }
.btn.ghost:disabled, .btn:disabled{ opacity: .4; cursor: default; filter: none; }
.btn.btn-teal{ background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--teal); }
.btn.btn-teal:hover{ background: rgba(52,211,153,.18); filter: none; }
.btn.btn-red{ background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
.btn.btn-red:hover{ background: rgba(248,113,113,.18); filter: none; }
.link-btn{ background: none; border: none; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.link-btn:hover{ color: var(--ink); }

/* ---------- Formularios ---------- */
.add-form-wrap{
  background: var(--surface); border: 1px solid rgba(52,211,153,.25); border-radius: 12px;
  padding: 20px; margin-bottom: 20px; display: none;
}
.add-form-wrap.open{ display: block; }

.form-grid, .edit-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 600px){ .form-grid, .edit-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px){ .form-grid, .edit-grid{ grid-template-columns: 1fr; } }

.form-actions{ display: flex; gap: 10px; }

.field-wrap{ display: flex; flex-direction: column; gap: 6px; }
.field-wrap label{ font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.field-wrap.checkbox-row{ flex-direction: row; align-items: center; gap: 8px; }
.field-wrap.checkbox-row label{ text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink-soft); }
.field-wrap.full{ grid-column: 1 / -1; }

.inp, .input-field{
  background: var(--paper); border: 1px solid #252545; border-radius: 8px; padding: 9px 12px;
  color: var(--ink); font-family: inherit; font-size: .85rem; outline: none;
  transition: border-color .15s var(--eo); width: 100%;
}
.inp:focus, .input-field:focus{ border-color: var(--teal); }
select.inp, select.input-field{ cursor: pointer; }
select.inp option, select.input-field option{ background: var(--surface); }
textarea.inp, textarea.input-field, textarea.notes-field{ resize: vertical; font-family: inherit; }

/* ---------- Login ---------- */
.login-wrap{ min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card{
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 30px; width: 100%; max-width: 340px;
  break-inside: avoid;
}
.login-card::before{
  content: ""; position: absolute; top: -50%; left: -20%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(52,211,153,.14), rgba(52,211,153,0) 65%);
  pointer-events: none;
}
.login-card .wordmark{ margin-bottom: 22px; position: relative; }
.login-card form{ display: flex; flex-direction: column; gap: 14px; position: relative; }

/* ---------- Badges de estado ---------- */
.badge, .status-badge{
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.badge[data-cycle]{ cursor: pointer; }
.limite-date, .followup-date{ font-size: .72rem; color: var(--ink-dim); white-space: nowrap; }
.limite-date.overdue, .followup-date.overdue{ color: var(--red); font-weight: 700; }
.limite-date.today, .followup-date.today{ color: var(--amber); font-weight: 700; }

/* ---------- Cards de lista (tareas / prospectos / workflows) ---------- */
.t-card, .p-card, .wf-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  break-inside: avoid;
}
.t-card.editing, .p-card.editing{ border-color: rgba(167,139,250,.35); }
.t-card.vencida{ border-color: rgba(248,113,113,.3); }
.wf-card.con-error{ border-color: rgba(248,113,113,.3); }
.wf-card{ padding: 16px 20px; }

.t-row, .p-row{ display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
.wf-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.t-main, .p-main, .wf-main{ flex: 1; min-width: 0; }
.wf-main{ min-width: 180px; }
.t-titulo, .p-negocio, .wf-nombre{ font-size: .94rem; font-weight: 600; color: var(--ink); }
.t-titulo.listo{ text-decoration: line-through; color: var(--ink-dim); }
.t-sub, .p-sub, .wf-sub{ font-size: .76rem; color: var(--ink-dim); margin-top: 2px; }
.t-nota, .p-nota{ font-size: .76rem; color: var(--ink-soft); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }

.t-meta, .p-meta{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.wf-meta{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.t-actions, .p-actions{ display: flex; gap: 6px; }

.t-edit-form, .p-edit-form{ padding: 18px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.edit-notes{ margin-bottom: 12px; }

.p-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Empty state ---------- */
.empty-state, .vacio{
  text-align: center; padding: 56px 20px; color: var(--ink-dim); font-size: .88rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  display: none;
}
.empty-state.visible{ display: block; }
.vacio{ display: block; background: transparent; border: none; padding: 40px 0; }

/* ---------- Footer ---------- */
.footer{
  text-align: center; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .66rem; letter-spacing: .02em; color: var(--ink-dim); margin-top: 24px;
}

/* ---------- Scrollbar discreta ---------- */
::selection{ background: rgba(52,211,153,.22); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001s !important; transition-duration: .001s !important; }
}