/* ============================================================
   TPL Design System — capa de compatibilidad sobre tpl-foundation
   ------------------------------------------------------------
   Los tokens --tpl-* y las reglas de header/footer/botones/campos
   que vivian aqui se movieron a css/tpl-foundation.css, que es la
   unica fuente de verdad. Este archivo conserva:
     - los alias --tpl-ink-950 / --tpl-blue / --tpl-radius-* que
       aun usan parcela.css, el CRM y las plataformas internas,
     - las reglas genericas por atributo ([class*="card"], etc.)
       que no tienen equivalente en foundation,
     - el banner de "parcela de interes" que genera js/tpl-seo.js.
   Cargar siempre despues de tpl-foundation.css.
   ============================================================ */

:root {
  --tpl-ink-950: var(--tpl-ink-900);
  --tpl-ink-800: var(--tpl-ink-2);
  --tpl-ink-700: var(--tpl-ink-2);
  --tpl-ink-600: var(--tpl-ink-3);
  --tpl-ink-500: var(--tpl-muted);
  --tpl-line-strong: var(--tpl-line-2);
  --tpl-surface-soft: var(--tpl-surface-2);
  --tpl-blue: var(--tpl-navy-800);
  --tpl-blue-deep: var(--tpl-navy-900);
  --tpl-blue-soft: var(--tpl-navy-050);
  --tpl-teal: var(--tpl-teal-500);
  --tpl-green: #78a94e;
  --tpl-yellow: var(--tpl-gold-500);
  --tpl-yellow-soft: var(--tpl-gold-100);
  --tpl-danger: #a5322b;
  --tpl-warning: #96610f;
  --tpl-success: #1d7a4c;
  --tpl-radius-xs: 6px;
  --tpl-shadow-xs: 0 1px 2px rgba(0, 30, 60, 0.05);
  --tpl-shadow-sm: 0 1px 2px rgba(0, 30, 60, 0.04), 0 6px 16px rgba(0, 30, 60, 0.06);
  --tpl-shadow-md: 0 2px 4px rgba(0, 30, 60, 0.05), 0 14px 32px rgba(0, 30, 60, 0.09);
  --tpl-shadow-lg: 0 6px 12px rgba(0, 30, 60, 0.07), 0 28px 56px rgba(0, 30, 60, 0.13);
}

/* --- Titulos y textos por clase generica -------------------------------- */
.display-title, .page-title, .section-title {
  font-family: var(--tpl-font-display);
  color: var(--tpl-navy-900);
  letter-spacing: var(--tpl-tracking-tight);
  text-wrap: balance;
}
.muted, .helper-text, .supporting-copy { color: var(--tpl-ink-3); line-height: var(--tpl-leading-normal); }
.eyebrow, .kicker { font-weight: 800; letter-spacing: var(--tpl-tracking-caps); text-transform: uppercase; }

/* --- Tarjetas y paneles por clase generica ------------------------------ */
.card, .panel, .surface-card, .dashboard-card, .metric-card, .stat-card,
article[class*="card"], section[class*="card"] {
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius-md);
  background: var(--tpl-surface);
  box-shadow: var(--tpl-shadow-xs);
}
.card:hover, .surface-card:hover, article[class*="card"]:hover {
  border-color: var(--tpl-line-2);
  box-shadow: var(--tpl-shadow-sm);
}
.modal-content, .dialog-card, dialog {
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius-lg);
  box-shadow: var(--tpl-shadow-xl);
}

/* --- Espacios de trabajo internos (CRM, plataformas) -------------------- */
.crm-app, .tpl-business-app, .app-shell, .workspace { background: var(--tpl-surface-2); }
.sidebar, .app-sidebar, [class*="sidebar"] { border-right: 1px solid var(--tpl-line); background: #fff; }
.sidebar a, .app-sidebar a { border-radius: var(--tpl-radius-sm); }
.sidebar a.active, .app-sidebar a.active, [class*="sidebar"] a[aria-current="page"] {
  background: var(--tpl-navy-050);
  color: var(--tpl-navy-900);
  font-weight: 700;
}
.metric-value, .stat-value, [class*="metric"] strong { letter-spacing: -0.04em; color: var(--tpl-navy-900); }

/* --- Estados vacios / carga / error ------------------------------------- */
.empty-state, .loading-state, .error-state {
  border: 1px dashed var(--tpl-line-2);
  border-radius: var(--tpl-radius-md);
  background: linear-gradient(180deg, #fff, var(--tpl-surface-2));
  padding: var(--tpl-space-8);
  text-align: center;
  color: var(--tpl-ink-3);
}
.spinner, .loader { color: var(--tpl-navy-800); }

/* --- Banner de parcela de interes (lo genera js/tpl-seo.js) ------------- */
.tpl-seo-banner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tpl-space-4);
  padding: var(--tpl-space-3) var(--tpl-space-5);
  background: var(--tpl-surface);
  border-bottom: 1px solid var(--tpl-line);
  font-size: var(--tpl-text-base);
}
.tpl-seo-banner__copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tpl-seo-banner__copy strong { color: var(--tpl-navy-900); }
.tpl-seo-banner__copy span { color: var(--tpl-muted); }
.tpl-seo-banner__actions { display: flex; gap: var(--tpl-space-2); flex-shrink: 0; }
.tpl-seo-banner__btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--tpl-line-2);
  border-radius: var(--tpl-radius-xs);
  background: #fff;
  color: var(--tpl-ink-2);
  font-size: var(--tpl-text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tpl-duration-fast) ease, border-color var(--tpl-duration-fast) ease, color var(--tpl-duration-fast) ease;
}
.tpl-seo-banner__btn:hover { border-color: var(--tpl-navy-700); color: var(--tpl-navy-900); }
.tpl-seo-banner__btn--primary { background: var(--tpl-navy-800); border-color: transparent; color: #fff; }
.tpl-seo-banner__btn--primary:hover { background: var(--tpl-navy-900); color: #fff; }
.tpl-seo-banner__btn--outline { border-color: var(--tpl-navy-800); color: var(--tpl-navy-800); }

@media (max-width: 860px) {
  .tpl-seo-banner__inner { flex-direction: column; align-items: stretch; gap: var(--tpl-space-3); padding: var(--tpl-space-3) var(--tpl-space-4); }
  .tpl-seo-banner__actions { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tpl-seo-banner__actions::-webkit-scrollbar { display: none; }
  .tpl-seo-banner__btn { flex: 1 0 auto; }
}

/* --- Movimiento contenido ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .card, .panel, .surface-card, article[class*="card"] {
    transition: transform var(--tpl-duration) var(--tpl-ease), box-shadow var(--tpl-duration) var(--tpl-ease), border-color var(--tpl-duration-fast) ease;
  }
  .card:hover, .surface-card:hover, article[class*="card"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--tpl-shadow-sm);
  }
}

@media (max-width: 720px) {
  .card, .panel, .surface-card, article[class*="card"] { border-radius: var(--tpl-radius-sm); }
  table { font-size: var(--tpl-text-base); }
}