:root {
  --bg: #121212;
  --panel: #181818;
  --card: #1E1E1E;
  --muted: #A1A1AA;
  --text: #F4F4F5;
  --accent: #9BE15D;   /* lima */
  --accent-2: #FFC857; /* ámbar */
  --danger: #F87171;
  --secondary: #2A2A2A;
  --border: #2B2B2B;
  --chip-bg: #222222;
  --chip-border: #333333;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(155,225,93,0.06), transparent 40%),
              radial-gradient(1000px 700px at 120% 10%, rgba(255,200,87,0.06), transparent 40%),
              var(--bg);
  color: var(--text);
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #141414 0%, #121212 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: 0.3px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn {
  background: var(--secondary); color: var(--text);
  border: 1px solid var(--border); padding: 8px 12px; border-radius: 10px;
  cursor: pointer; transition: all .2s;
}
.tab-btn:hover { border-color: #3a3a3a; transform: translateY(-1px); }
.tab-btn.active {
  background: #1c2714; color: var(--accent);
  border-color: #2d3a25; font-weight: 700;
}

main { padding: 18px; max-width: 1400px; margin: 0 auto; }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center;
}
.toolbar input, .toolbar select, .toolbar button { height: 40px; }

/* Cards */
.card {
  background: linear-gradient(180deg, #1b1b1b 0%, var(--card) 100%);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow);
}

/* Inputs */
label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: #141414; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #334d28; box-shadow: 0 0 0 3px rgba(155,225,93,0.15);
}

/* Buttons */
.form-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
button {
  background: linear-gradient(180deg, #213a12 0%, #1b2e0f 100%);
  border: 1px solid #2e4b1d; color: #ddf5c9; padding: 10px 14px;
  border-radius: 10px; cursor: pointer; font-weight: 700; letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s;
}
button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
button.secondary { background: #232323; border: 1px solid var(--border); color: var(--text); }
button.secondary:hover { border-color: #3a3a3a; }
button.danger { background: linear-gradient(180deg, #7a1b1b 0%, #5e1313 100%); border: 1px solid #8a1e1e; color: #ffecec; }

/* Grid */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1.3fr 0.7fr; }
@media (max-width: 1050px) { .grid-2 { grid-template-columns: 1fr; } }

/* Contacts list */
.contact-item {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: #171717; margin-bottom: 10px;
}
.contact-item:hover { border-color: #353535; }
.contact-main { display: flex; flex-direction: column; gap: 6px; }
.contact-title { font-weight: 700; letter-spacing: .2px; }
.contact-meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--chip-bg); border: 1px solid var(--chip-border); color: #d8d8d8;
}
.badge i { opacity: .8; }

/* WhatsApp button */
.wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1F3A1F; border: 1px solid #2E5B2E; color: #BBF7D0;
  padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 700;
}
.wa-btn:hover { filter: brightness(1.08); }

/* Pipeline */
.pipeline { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); align-items: start; }
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .pipeline { grid-template-columns: 1fr; } }
.column { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px; min-height: 320px; }
.column h3 { margin: 6px 6px 10px; color: var(--accent-2); letter-spacing: .3px; }
.opps { display: flex; flex-direction: column; gap: 10px; }
.opp-card {
  background: #171717; border: 1px solid var(--border); border-radius: 12px; padding: 10px; cursor: grab; position: relative;
  transition: border-color .2s, transform .08s ease;
}
.opp-card:hover { border-color: #3a3a3a; }
.opp-band { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.opp-color-green { background: #7fd67f; }
.opp-color-amber { background: #f7c96b; }
.opp-color-purple { background: #c2a8ff; }
.opp-color-pink { background: #ff84b7; }
.opp-color-cyan { background: #76e3ec; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal .modal-content { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; width: 100%; max-width: 560px; box-shadow: var(--shadow); }
.modal.show { display: flex; }

/* Search grows */
.toolbar input[type="search"] { flex: 1; min-width: 240px; }

.user-item { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #171717; margin-bottom: 8px; }
.user-meta { color: var(--muted); font-size: 12px; }

hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.hidden { display: none !important; }