:root {
  --tng-emerald-950: #062d25;
  --tng-emerald-900: #083f33;
  --tng-emerald-800: #0b5544;
  --tng-emerald-700: #116b55;
  --tng-emerald-500: #1d9a73;
  --tng-gold-500: #c99a3b;
  --tng-gold-400: #e3bd67;
  --tng-ink: #17352f;
  --tng-muted: #6b827c;
  --tng-line: rgba(20, 72, 59, .12);
  --tng-surface: #ffffff;
  --tng-surface-soft: #f5f8f6;
  --tng-shadow: 0 18px 45px rgba(9, 55, 43, .10);
  --tng-radius: 18px;
}

html { background: #eef4f1; }
body {
  color: var(--tng-ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(201,154,59,.12), transparent 28rem),
    linear-gradient(180deg, #f5f8f6 0%, #edf4f0 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared premium shell */
.container, .page-container, .content-container { max-width: 1440px; }
main, .main-content, .content, .dashboard-content { padding-bottom: 2.5rem; }
.navbar, header.site-header, .topbar, .app-header {
  background: linear-gradient(115deg, var(--tng-emerald-950), var(--tng-emerald-800));
  border-bottom: 1px solid rgba(227,189,103,.28);
  box-shadow: 0 8px 26px rgba(4, 42, 34, .20);
}
.navbar a, header.site-header a, .topbar a, .app-header a { color: rgba(255,255,255,.88); }
.navbar a:hover, header.site-header a:hover, .topbar a:hover, .app-header a:hover { color: var(--tng-gold-400); }

h1, h2, h3, h4 { color: var(--tng-emerald-900); letter-spacing: -.02em; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 750; }
small, .muted, .text-muted, .subtitle, .help-text { color: var(--tng-muted); }

.card, .panel, .dashboard-card, .stat-card, .metric-card, .module-card, .content-card,
[class*="card"] {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--tng-line);
  border-radius: var(--tng-radius);
  box-shadow: var(--tng-shadow);
}
.card:hover, .panel:hover, .dashboard-card:hover, .stat-card:hover, .metric-card:hover, .module-card:hover {
  border-color: rgba(201,154,59,.38);
  box-shadow: 0 22px 52px rgba(9,55,43,.14);
}

.card-header, .panel-header, .section-header, .module-header {
  color: var(--tng-emerald-900);
  border-bottom: 1px solid var(--tng-line);
  background: linear-gradient(180deg, rgba(247,250,248,.95), rgba(255,255,255,.72));
}
.card-header h2, .card-header h3, .panel-header h2, .panel-header h3 { margin-bottom: 0; }

button, .btn, a.btn, input[type="submit"], input[type="button"] {
  border-radius: 11px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
button:hover, .btn:hover, a.btn:hover, input[type="submit"]:hover, input[type="button"]:hover { transform: translateY(-1px); }
.btn-primary, .btn-success, .button-primary, button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--tng-emerald-800), var(--tng-emerald-500));
  box-shadow: 0 8px 18px rgba(11,85,68,.22);
}
.btn-primary:hover, .btn-success:hover, .button-primary:hover, button.primary:hover { background: linear-gradient(135deg, var(--tng-emerald-900), var(--tng-emerald-700)); }
.btn-warning, .btn-gold, .button-gold { color: #3d2b0b; background: linear-gradient(135deg, var(--tng-gold-400), var(--tng-gold-500)); }
.btn-outline, .btn-secondary, .button-secondary { color: var(--tng-emerald-800); background: #fff; border-color: rgba(11,85,68,.28); }

input, select, textarea {
  color: var(--tng-ink);
  background: #fff;
  border: 1px solid rgba(20,72,59,.18);
  border-radius: 11px;
  min-height: 42px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tng-gold-500);
  box-shadow: 0 0 0 4px rgba(201,154,59,.16);
}
label { color: var(--tng-emerald-900); font-weight: 700; }

.table, table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--tng-line);
  border-radius: 14px;
  background: #fff;
}
.table thead th, table thead th {
  color: #fff;
  background: var(--tng-emerald-900);
  border-bottom: 2px solid var(--tng-gold-500);
  font-size: .78rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.table td, .table th, table td, table th { padding: .85rem 1rem; border-bottom: 1px solid var(--tng-line); }
.table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover, table tbody tr:hover { background: rgba(29,154,115,.055); }

.badge, .pill, .tag, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .76rem;
  font-weight: 800;
  background: rgba(29,154,115,.11);
  color: var(--tng-emerald-800);
}
.badge.gold, .pill.gold, .tag.gold, .status-badge.gold { background: rgba(201,154,59,.18); color: #765417; }
.alert, .flash, .notice { border-radius: 14px; border: 1px solid var(--tng-line); box-shadow: 0 8px 20px rgba(9,55,43,.06); }

/* Priority modules */
.master-dashboard, .dashboard, .seguimiento, .piramide, .metodos, .estadisticas,
#master-panel, #dashboard, #seguimiento, #piramide, #metodos, #estadisticas { color: var(--tng-ink); }
.dashboard-grid, .stats-grid, .metrics-grid, .module-grid, .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.stat-value, .metric-value, .kpi-value { color: var(--tng-emerald-800); font-weight: 850; letter-spacing: -.04em; }
.stat-label, .metric-label, .kpi-label { color: var(--tng-muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 900px) {
  .container, .page-container, .content-container { width: min(100% - 2rem, 1440px); }
  .card, .panel, .dashboard-card, .stat-card, .metric-card, .module-card { border-radius: 15px; }
  .table, table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  main, .main-content, .content, .dashboard-content { padding-left: .75rem; padding-right: .75rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.2rem; }
  .dashboard-grid, .stats-grid, .metrics-grid, .module-grid, .cards-grid { grid-template-columns: 1fr; }
  button, .btn, a.btn, input[type="submit"], input[type="button"] { width: 100%; }
}