/* ══════════════════════════════════════════════
   Networking Machine Ultra v2 — style.css
   Glassmorphism · Elegance · Dark Mode
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --brand:        #0ea5e9;
}

* { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(14,165,233,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(56,189,248,0.05) 0%,transparent 60%);
}

/* ── Glass ── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow);
  position: relative; z-index:1;
}
.glass-header {
  background: rgba(10,20,40,0.8);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(24px);
}
.glass-nav {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
}

/* ── Tabs ── */
.tab-btn { color:#64748b; background:transparent; transition:all .25s ease; }
.tab-btn.active {
  background: linear-gradient(135deg,rgba(14,165,233,0.22),rgba(56,189,248,0.12));
  color:#38bdf8;
  border:1px solid rgba(56,189,248,0.22);
  box-shadow:0 2px 10px rgba(14,165,233,0.12);
}
.tab-btn:not(.active):hover { color:#94a3b8; background:rgba(255,255,255,0.04); }

/* ── Forms ── */
.form-label {
  display:block; font-size:0.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:#64748b; margin-bottom:.35rem;
}
.form-input, .form-select {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:.6rem .85rem;
  color:#f1f5f9; font-size:.85rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:border-color .2s,box-shadow .2s;
  outline:none; -webkit-appearance:none; appearance:none;
}
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  background-size:1rem; padding-right:2.5rem; cursor:pointer;
}
.form-select option { background:#0f172a; color:#f1f5f9; }
.form-input::placeholder { color:#475569; }
.form-input:focus, .form-select:focus {
  border-color:rgba(56,189,248,.5);
  box-shadow:0 0 0 3px rgba(14,165,233,.1);
  background:rgba(14,165,233,.05);
}
textarea.form-input { resize:none; }

/* ── Buttons ── */
.btn-primary {
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  border:none; color:white; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600; cursor:pointer; transition:all .25s ease;
  display:flex; align-items:center; justify-content:center;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(14,165,233,.35); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#94a3b8; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.btn-secondary:hover { background:rgba(255,255,255,.1); color:#f1f5f9; }

.btn-ghost {
  background:transparent; border:1px solid rgba(255,255,255,.06);
  color:#64748b; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.btn-ghost:hover { background:rgba(255,255,255,.04); color:#94a3b8; }

.btn-whatsapp {
  background:linear-gradient(135deg,#25d366,#128c7e); border:none;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  cursor:pointer; transition:all .25s;
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.3); }

/* ── Temperatura indicators ── */
.temp-indicator {
  display:flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:100px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:#475569; font-size:.75rem; transition:all .2s;
}
.temp-indicator.active { background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.3); color:#38bdf8; }
#temp-caliente.active { background:rgba(251,146,60,.12); border-color:rgba(251,146,60,.3); color:#fb923c; }
#temp-tibio.active    { background:rgba(250,204,21,.10); border-color:rgba(250,204,21,.3); color:#facc15; }
#temp-frio.active     { background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.3); color:#38bdf8; }

/* ── Premium badges ── */
.premium-lock-badge {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:100px;
  background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.15));
  border:1px solid rgba(251,191,36,.25); color:#fbbf24; font-size:.65rem; font-weight:700;
}
.premium-lock-badge-sm { display:inline-flex; align-items:center; color:#fbbf24; font-size:.65rem; margin-left:2px; }

/* ── Contact card ── */
.contact-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:16px; padding:1rem; cursor:pointer; transition:all .2s;
}
.contact-card:hover {
  background:rgba(255,255,255,.07); border-color:rgba(14,165,233,.2);
  transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.temp-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.temp-dot.caliente { background:#fb923c; box-shadow:0 0 6px rgba(251,146,60,.5); }
.temp-dot.tibio    { background:#facc15; box-shadow:0 0 6px rgba(250,204,21,.5); }
.temp-dot.frio     { background:#38bdf8; box-shadow:0 0 6px rgba(56,189,248,.5); }

/* ── Filter chips ── */
.filter-chip {
  padding:4px 12px; border-radius:100px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:#64748b; font-size:.75rem; font-weight:600;
  font-family:'Plus Jakarta Sans',sans-serif;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.filter-chip.active { background:rgba(14,165,233,.15); border-color:rgba(14,165,233,.35); color:#38bdf8; }
.filter-chip:hover:not(.active) { background:rgba(255,255,255,.07); color:#94a3b8; }

/* ── Tag items (settings) ── */
.tag-item {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:.5rem .75rem; font-size:.85rem; color:#94a3b8;
}
.tag-item button {
  color:#ef4444; background:none; border:none; cursor:pointer;
  padding:2px 4px; border-radius:4px; font-size:.75rem; opacity:.5; transition:opacity .2s;
}
.tag-item button:hover { opacity:1; }

/* ── Variable chips (template editor) ── */
.var-chip {
  padding:4px 10px; border-radius:8px;
  background:rgba(14,165,233,.12); border:1px solid rgba(56,189,248,.25);
  color:#38bdf8; font-size:.7rem; font-weight:600; font-family:'JetBrains Mono',monospace;
  cursor:pointer; transition:all .2s;
}
.var-chip:hover { background:rgba(14,165,233,.22); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ── Code ── */
code { font-family:'JetBrains Mono',monospace; font-size:.75rem; }

/* ── Animations ── */
@keyframes fade-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.animate-fade-in { animation:fade-in .3s ease forwards; }
.tab-content:not(.hidden) { animation:fade-in .3s ease forwards; }

/* ── Overlays/modals ── */
#activation-overlay, #whatsapp-modal, #template-modal,
#contact-detail-modal, #edit-contact-modal {
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
}

/* ── Camera ── */
#camera-preview { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }

/* ── line-clamp ── */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ── Selection ── */
::selection { background:rgba(14,165,233,.3); color:white; }

/* ── Responsive ── */
@media (max-width:640px) {
  .glass-card { border-radius:16px; }
  main { padding-bottom:2rem; }
}