/* ============================================================
   admin.css — Panel CRM de TST Solutions
   Marca: Montserrat + Inter · verde #1F6F63 / #3FAE9A / accent #00D4AA
   ============================================================ */

:root {
  --tst-green: #1F6F63;
  --tst-green-light: #3FAE9A;
  --tst-dark: #0f2f2c;
  --tst-darker: #0f2f2c;
  --tst-white: #FFFFFF;
  --tst-accent: #00D4AA;
  --tst-gray: #E6ECEB;
  --gradient-primary: linear-gradient(135deg, #1F6F63, #3FAE9A);
  --gradient-accent: linear-gradient(135deg, #3FAE9A, #00D4AA);
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --ink: #0f2f2c;
  --ink-dim: #5a6b68;
  --ink-mute: #9aa8a4;
  --text-dim: rgba(255, 255, 255, 0.62);
  --text-mute: rgba(255, 255, 255, 0.42);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #1f6f63;
  color: var(--tst-white);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { background: #1f6f63; }
/* Footer siempre al fondo (sin espacio blanco) en páginas con scroll normal */
body:not(.chat-body) { display: flex; flex-direction: column; }
body:not(.chat-body) .container { flex: 1 0 auto; width: 100%; }
body:not(.chat-body) footer { flex-shrink: 0; }

h1, h2, h3, .brand-name { font-family: 'Montserrat', sans-serif; }
a { color: inherit; text-decoration: none; }

/* ============================== LOGIN ============================== */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.2rem;
}

.login-card {
  width: 100%;
  max-width: 410px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 2.6rem 2.2rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.login-logo { display: block; height: 52px; margin: 0 auto 1.4rem; }

.login-card h1 {
  font-size: 1.45rem;
  text-align: center;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.login-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 1.9rem;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.field input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--tst-white);
  font-size: 0.98rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--tst-accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.15);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: 12px;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, opacity 0.18s;
}
.btn-primary {
  width: 100%;
  padding: 0.95rem;
  font-size: 1rem;
  color: #06231f;
  background: var(--gradient-accent);
  box-shadow: 0 10px 26px rgba(0, 212, 170, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 212, 170, 0.38); }

.alert {
  background: rgba(255, 78, 78, 0.12);
  border: 1px solid rgba(255, 78, 78, 0.4);
  color: #ffb4b4;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
  text-align: center;
}
.login-foot {
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.78rem;
  color: var(--text-mute);
}

/* ============================== LAYOUT ============================== */

/* ===== Header IDÉNTICO al del home (glass blanco, logo + brand-text + nav) ===== */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.admin-header nav {
  max-width: 100%;
  margin: 0 auto;
  padding: 0.8rem 3rem;   /* mismo padding lateral que el header del home */
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 1440px) { .admin-header nav { padding: 0.8rem 2rem; } }
@media (max-width: 1280px) { .admin-header nav { padding: 0.8rem 1.5rem; } }
.admin-header .logo-link { text-decoration: none; color: inherit; }
.admin-header .logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.35s ease;
}
.admin-header .logo-container:hover { transform: scale(1.05); }
.admin-header .logo-container img { height: 50px; width: auto; }
.admin-header .brand-text { font-family: 'Montserrat', sans-serif; }
.admin-header .brand-text h1 { font-size: 1.8rem; font-weight: 700; color: var(--tst-green); margin: 0; line-height: 1; }
.admin-header .brand-text p { font-size: 0.75rem; color: var(--tst-green-light); font-weight: 600; letter-spacing: 0.5px; margin: 0; }

.admin-header .nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0 0 0 1.5rem;
  padding: 0;
}
.admin-header .nav-links a {
  color: rgba(14, 46, 42, 0.8);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-header .nav-links a:hover { color: var(--tst-green); background: rgba(63, 174, 154, 0.08); }
.admin-header .nav-links a.active {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 4px 15px rgba(63, 174, 154, 0.3);
}

.admin-header .nav-actions { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.admin-header .who { font-size: 0.8rem; color: #5a6b68; font-weight: 500; white-space: nowrap; }
.admin-header .who i { color: var(--tst-green); }
.admin-header .nav-cta {
  padding: 0.6rem 1.4rem;
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(63, 174, 154, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.admin-header .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(63, 174, 154, 0.35); }
.admin-header .nav-chat {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem; border-radius: 30px;
  font-weight: 600; font-size: 0.82rem; text-decoration: none; white-space: nowrap;
  color: #1c7a4a; background: rgba(37, 211, 102, 0.12); border: 1.5px solid rgba(37, 211, 102, 0.4);
  transition: all 0.25s ease;
}
.admin-header .nav-chat i { color: #25D366; }
.admin-header .nav-chat:hover { background: #25D366; color: #fff; border-color: #25D366; transform: translateY(-1px); }
.admin-header .nav-chat:hover i { color: #fff; }
.admin-header .nav-chat.active { background: #25D366; color: #fff; border-color: #25D366; }
.admin-header .nav-chat.active i { color: #fff; }
/* Botón de canal Telegram (azul) */
.admin-header .nav-chat-tg {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem; border-radius: 30px;
  font-weight: 600; font-size: 0.82rem; text-decoration: none; white-space: nowrap;
  color: #1b7aa8; background: rgba(34, 158, 217, 0.12); border: 1.5px solid rgba(34, 158, 217, 0.4);
  transition: all 0.25s ease;
}
.admin-header .nav-chat-tg i { color: #229ED9; }
.admin-header .nav-chat-tg:hover, .admin-header .nav-chat-tg.active { background: #229ED9; color: #fff; border-color: #229ED9; transform: translateY(-1px); }
.admin-header .nav-chat-tg:hover i, .admin-header .nav-chat-tg.active i { color: #fff; }
/* Título de canal en la lista del chat */
.ch-title { font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.ch-title.wa i { color: #25D366; }
.ch-title.tg i { color: #229ED9; }
/* Badge de canal en los leads */
.lead-ch { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.58rem; color: #fff; margin-left: 0.35rem; vertical-align: middle; }
.lead-ch.wa { background: #25D366; }
.lead-ch.tg { background: #229ED9; }
.lead-ch.web { background: #1F6F63; }
.admin-header .btn-logout {
  padding: 0.55rem 1rem;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f2f2c;
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.25s ease;
  font-family: inherit;
  white-space: nowrap;
}
.admin-header .btn-logout:hover { background: #d63a3a; color: #fff; border-color: #d63a3a; }
@media (max-width: 1100px) { .admin-header .nav-links { display: none; } }
@media (max-width: 560px) {
  .admin-header nav { padding: 0.7rem 1rem; }
  .admin-header .brand-text p { display: none; }
  .admin-header .brand-text h1 { font-size: 1.5rem; }
  .admin-header .logo-container img { height: 42px; }
  .admin-header .who { display: none; }
  .admin-header .nav-cta { display: none; }
}

/* Divisor entre el contenido y el footer (línea sutil para separarlos) */
.content-divider {
  height: 1px;
  max-width: 1240px;
  margin: 3.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

/* ===== Toggle de idioma (idéntico al del home) ===== */
.admin-header .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.35);
  color: var(--tst-green);
  border-radius: 50px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.admin-header .lang-toggle:hover { background: rgba(0, 212, 170, 0.22); transform: translateY(-1px); }
.admin-header .lang-toggle i { font-size: 0.85rem; opacity: 0.8; }
.admin-header .lang-toggle [data-lang] { opacity: 0.45; transition: opacity 0.2s, color 0.2s; }
.admin-header .lang-toggle [data-lang].active { opacity: 1; color: var(--tst-accent); }
.admin-header .lang-toggle .lang-sep { opacity: 0.35; font-weight: 400; }

/* ===== Chip de perfil en el header ===== */
.admin-header .profile-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.8rem 0.28rem 0.3rem;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
}
.admin-header .profile-chip:hover { border-color: rgba(31, 111, 99, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); }
.admin-header .profile-chip .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.82rem;
  overflow: hidden; flex-shrink: 0;
}
.admin-header .profile-chip .avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-header .profile-chip .pname {
  font-size: 0.85rem; font-weight: 600; color: #0f2f2c;
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) { .admin-header .profile-chip .pname { display: none; } }

/* ===== Página de perfil (estilo panel de usuario) ===== */
.toast-ok {
  background: rgba(0, 212, 170, 0.14);
  border: 1px solid rgba(0, 212, 170, 0.4);
  color: var(--tst-accent);
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  margin-bottom: 1.3rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.profile-wrap { display: block; }
.profile-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.profile-cover {
  height: 96px;
  background: #f3f7f6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.profile-head {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  padding: 0 2rem 1.6rem;
  margin-top: -55px;
  flex-wrap: wrap;
}
.avatar-xl {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50%;
  flex-shrink: 0;
  /* sin overflow:hidden aquí para que la cámara NO se recorte */
}
.avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.avatar-inner .avatar-initials { font-family: 'Montserrat'; font-size: 2.8rem; font-weight: 800; color: #fff; }
.avatar-cam {
  position: absolute;
  right: 4px; bottom: 4px;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--tst-accent);
  color: #06231f;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  transition: transform .2s;
}
.avatar-cam:hover { transform: scale(1.1); }
.profile-id { flex: 1; min-width: 0; padding-bottom: 0.3rem; }
.profile-id h2 { font-size: 1.7rem; letter-spacing: -0.01em; }
.profile-role { color: var(--tst-accent); font-weight: 600; font-size: 0.92rem; margin-top: 0.1rem; }
.profile-mail { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.35rem; }
.btn-remove-photo {
  align-self: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  padding: 0.5rem 0.9rem; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; transition: all .2s;
}
.btn-remove-photo:hover { color: #ff8888; border-color: rgba(255,120,120,.5); }

.profile-fields {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.8rem;
}
.fields-title { font-size: 1.1rem; margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.6rem; }
.fields-title i { color: var(--tst-accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.pf { display: flex; flex-direction: column; }
.pf-full { grid-column: 1 / -1; }
.pf label {
  font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.45rem;
}
.pf input, .pf textarea {
  padding: 0.8rem 1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: #fff;
  font-family: inherit; font-size: 0.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.pf textarea { resize: vertical; }
.pf input:focus, .pf textarea:focus { outline: none; border-color: var(--tst-accent); box-shadow: 0 0 0 3px rgba(0,212,170,.13); }
.pf input:disabled { opacity: 0.55; cursor: not-allowed; }
.pf input::placeholder, .pf textarea::placeholder { color: var(--text-mute); }
.pf-actions { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.pf-actions .btn { padding: 0.8rem 1.5rem; }
.btn-ghost-light {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 620px) {
  .grid2 { grid-template-columns: 1fr; }
  .profile-head { padding: 0 1.2rem 1.4rem; gap: 1rem; }
  .profile-fields { padding: 1.3rem; }
  .pf-actions { flex-direction: column-reverse; }
  .pf-actions .btn { width: 100%; justify-content: center; }
}

/* btn-ghost genérico (toolbar sobre fondo oscuro) */
.btn-ghost {
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  color: var(--tst-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ===== Footer del sitio (clonado del home) ===== */
.tst-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; align-items:start; text-align:left; }
.tst-fh { font-weight:800; color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.6px; margin-bottom:.875rem; font-family:'Montserrat',sans-serif; text-align:left; }
.tst-fl { list-style:none; padding:0; margin:0; }
.tst-fl li { margin-bottom:.42rem; color:rgba(255,255,255,.5); font-size:.84rem; display:flex; align-items:center; }
.tst-fl a { color:rgba(255,255,255,.5); text-decoration:none; font-size:.84rem; transition:color .2s; display:flex; align-items:center; }
.tst-fl a:hover { color:var(--tst-accent); }
.tst-soc { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:rgba(0,212,170,.15); color:rgba(255,255,255,.65); font-size:.82rem; text-decoration:none; transition:all .2s; }
.tst-soc:hover { background:var(--tst-accent); color:var(--tst-dark); transform:translateY(-2px); }
.tst-cta-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; background:var(--tst-accent); color:var(--tst-dark); border-radius:50px; padding:.5rem 1.25rem; font-size:.82rem; font-weight:800; text-decoration:none; transition:transform .2s; }
.tst-cta-btn:hover { transform:translateY(-2px); color:var(--tst-dark); }
@media (max-width:900px) { .tst-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:540px) { .tst-footer-grid { grid-template-columns:1fr; gap:1.75rem; } }

.container { max-width: 1240px; margin: 0 auto; padding: 1.8rem; }
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
.page-head p { color: var(--text-dim); font-size: 0.92rem; margin-top: 0.25rem; }

/* ============================== STATS ============================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gradient-accent);
}
.stat .num { font-family: 'Montserrat'; font-size: 2rem; font-weight: 800; line-height: 1; }
.stat .lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.stat.is-nuevo .num { color: var(--tst-accent); }

/* ============================== TOOLBAR ============================== */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.toolbar form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.toolbar select, .toolbar input[type="text"] {
  padding: 0.6rem 0.85rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--tst-white);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
}
.toolbar input[type="text"] { min-width: 230px; }
.toolbar input[type="text"]::placeholder { color: var(--text-mute); }
/* Select con flecha propia y texto pegado a la izquierda (evita el desfase del nativo) */
.toolbar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 175px;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bcd2cd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
.toolbar select:focus, .toolbar input:focus { outline: none; border-color: var(--tst-accent); }
.toolbar .btn-primary { width: auto; padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.toolbar .spacer { flex: 1; }
.toolbar .count { font-size: 0.82rem; color: var(--text-dim); }

/* ============================== TABLE ============================== */

.table-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  padding: 0.95rem 1.1rem;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--card-border);
}
tbody td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(63, 174, 154, 0.06); }

.lead-name { font-weight: 600; }
.lead-phone { color: var(--text-dim); font-size: 0.82rem; }
.lead-msg { max-width: 360px; color: rgba(255,255,255,0.85); }
.lead-date { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; }
.muted { color: var(--text-mute); font-style: italic; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: capitalize;
}
.tag-cotizacion { background: rgba(0, 212, 170, 0.16); color: var(--tst-accent); }
.tag-consulta { background: rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.8); }

.estado-select {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid var(--card-border);
  background: #0f2f2c;
  color: #fff;
  cursor: pointer;
}
.estado-select.e-nuevo { border-color: var(--tst-accent); background: rgba(0,212,170,0.16); }
.estado-select.e-contactado { border-color: #f5b942; background: rgba(245,185,66,0.18); }
.estado-select.e-cerrado { border-color: var(--text-mute); background: rgba(255,255,255,0.07); color: var(--text-dim); }

/* Lista desplegada de TODOS los selects del panel: fondo blanco + texto oscuro
   (legible; evita el fondo plomo con letras blancas del render nativo) */
.toolbar select option,
.estado-select option {
  background: #ffffff;
  color: #0f2f2c;
  font-weight: 600;
}

.row-actions { display: flex; gap: 0.4rem; }
.icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.icon-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.icon-btn.danger:hover { color: #ff8888; border-color: rgba(255,120,120,0.5); }

.empty { text-align: center; padding: 3.5rem 1rem; color: var(--text-dim); }
.empty i { font-size: 2.4rem; color: var(--text-mute); margin-bottom: 0.8rem; display: block; }

/* ============================== RESPONSIVE ============================== */

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 1.1rem; }
  .topbar { padding: 0.8rem 1.1rem; }
  .topbar .who { display: none; }
}

/* ---- Móvil: la tabla se convierte en tarjetas apiladas (100% responsive) ---- */
@media (max-width: 720px) {
  .toolbar form { width: 100%; }
  .toolbar select, .toolbar input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .toolbar .btn-primary { flex: 1 1 auto; justify-content: center; }
  .toolbar .spacer { display: none; }
  .toolbar .count { width: 100%; }

  .table-scroll { overflow-x: visible; }
  table { min-width: 0; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }

  tbody tr {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 0.4rem 0.2rem;
    margin: 0 0.7rem 0.9rem;
  }
  tbody tr:hover { background: rgba(0, 0, 0, 0.18); }

  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.7rem 1rem;
  }
  tbody tr td:last-child { border-bottom: none; }

  /* Etiqueta de columna a la izquierda de cada celda */
  tbody td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    flex: 0 0 90px;
  }
  .lead-msg { max-width: none; text-align: right; }
  .estado-select { width: auto; }
  .row-actions { justify-content: flex-end; width: 100%; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat { padding: 1rem; }
  .stat .num { font-size: 1.7rem; }
  .login-card { padding: 2rem 1.4rem; }
  .page-head h1 { font-size: 1.35rem; }
  tbody td::before { flex-basis: 76px; }
}

/* =====================================================================
   SUPERFICIES BLANCAS — fondo de página queda verde oscuro, pero las
   tarjetas, tabla, filtros y formularios van en blanco con texto oscuro.
   ===================================================================== */

/* El login conserva su tarjeta oscura (no se vuelve blanca) */
.login-card { background: rgba(14, 46, 42, 0.6); border-color: rgba(63, 174, 154, 0.22); }

/* Stats */
.stat .num { color: var(--ink); }
.stat .lbl { color: var(--ink-dim); }
.stat.is-nuevo .num { color: var(--tst-green); }

/* Filtros (cuadros blancos). Usar background-COLOR (no shorthand) para no
   resetear background-repeat/position y que la flecha NO se repita en mosaico. */
.toolbar select, .toolbar input[type="text"] { background-color: #fff; color: var(--ink); border-color: rgba(0, 0, 0, 0.12); }
.toolbar select { background-repeat: no-repeat; background-position: right 0.7rem center; }
.toolbar input[type="text"]::placeholder { color: var(--ink-mute); }
.toolbar select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.toolbar .count { color: rgba(255, 255, 255, 0.72); } /* va sobre el fondo oscuro */

/* Tabla */
thead th { background: #f3f7f6; color: var(--ink-dim); border-bottom-color: rgba(0, 0, 0, 0.07); }
tbody td { color: #2a423e; border-bottom-color: rgba(0, 0, 0, 0.06); }
tbody tr:hover { background: #f5faf9; }
.lead-name { color: var(--ink); }
.lead-phone { color: #6a7c78; }
.lead-msg { color: #33484a; }
.lead-date { color: #6a7c78; }
.muted { color: var(--ink-mute); }
.tag-consulta { background: rgba(15, 47, 44, 0.08); color: #3a4f4b; }
.empty { color: var(--ink-dim); }
.empty i { color: #c2cfcb; }

/* Botones de acción de fila */
.icon-btn { background: #f1f5f4; border-color: rgba(0, 0, 0, 0.08); color: #5a6b68; }
.icon-btn:hover { background: #e6efed; color: var(--ink); }
.icon-btn.danger:hover { color: #d63a3a; border-color: rgba(214, 58, 58, 0.4); }

/* Selector de estado sobre tarjeta blanca */
.estado-select { background: #fff; color: var(--ink); border-color: rgba(0, 0, 0, 0.16); }
.estado-select.e-nuevo { color: var(--tst-green); border-color: var(--tst-green); background: #fff; }
.estado-select.e-contactado { color: #b9831f; border-color: #e2a93f; background: #fff; }
.estado-select.e-cerrado { color: #6a7c78; border-color: rgba(0, 0, 0, 0.18); background: #fff; }

/* Perfil en blanco */
.avatar-xl { border-color: #fff; }
.profile-id h2 { color: var(--ink); }
.profile-role { color: var(--tst-green); }
.profile-mail { color: #6a7c78; }
.fields-title { color: var(--ink); }
.fields-title i { color: var(--tst-green); }
.pf label { color: var(--ink-dim); }
.pf input, .pf textarea { background: #f6f9f8; color: var(--ink); border-color: rgba(0, 0, 0, 0.12); }
.pf input::placeholder, .pf textarea::placeholder { color: var(--ink-mute); }
.pf input:disabled { background: #eef2f1; }
.btn-ghost-light { color: var(--ink); background: #f1f5f4; border-color: rgba(0, 0, 0, 0.1); }
.btn-ghost-light:hover { background: #e6efed; }
.btn-remove-photo { background: #f1f5f4; border-color: rgba(0, 0, 0, 0.1); color: #6a7c78; }
.btn-remove-photo:hover { color: #d63a3a; border-color: rgba(214, 58, 58, 0.4); }

/* =====================================================================
   CHAT (inbox estilo Kommo)
   ===================================================================== */
body.chat-body { min-height: 100vh; }

.chat-shell {
  height: calc(100vh - 78px);   /* llena bajo el header; el footer va debajo (scroll) */
  min-height: 0;
  display: flex; gap: 1rem;
  width: 100%; max-width: 1280px;
  margin: 0 auto; padding: 1rem;
}
.chat-list {
  width: 340px; flex-shrink: 0;
  background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.chat-list-head { padding: 1rem 1.1rem 0.8rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.chat-list-head h2 { font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.chat-list-head h2 i { color: #25D366; }
.chat-list-head input {
  margin-top: 0.7rem; width: 100%;
  padding: 0.55rem 0.85rem; border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px; font-family: inherit; font-size: 0.88rem; color: var(--ink);
}
.chat-list-head input:focus { outline: none; border-color: var(--tst-green); }
.conv-items { flex: 1; overflow-y: auto; }
.conv-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-mute); font-size: 0.9rem; }
.conv-item {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.75rem 1rem; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .15s;
}
.conv-item:hover { background: #f5faf9; }
.conv-item.active { background: #e9f6f3; }
.conv-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.conv-name { font-weight: 700; color: var(--ink); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 0.72rem; color: var(--ink-mute); flex-shrink: 0; }
.conv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.conv-pre { font-size: 0.82rem; color: #6a7c78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-badge { background: var(--tst-accent); color: #06231f; font-size: 0.7rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.dot-open, .dot-closed { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot-open { background: #25D366; }
.dot-closed { background: #c2cfcb; }

.chat-thread {
  flex: 1; min-width: 0;
  background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-mute); }
.thread-empty i { font-size: 3rem; margin-bottom: 0.8rem; color: #cdd9d6; }
.thread-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,.07);
}
.th-id { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.th-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; flex-shrink: 0; }
.th-name { font-weight: 700; color: var(--ink); }
.th-phone { font-size: 0.8rem; color: var(--ink-dim); }
.th-meta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.lead-pill { font-size: 0.72rem; font-weight: 700; color: var(--tst-green); background: rgba(31,111,99,.08); border: 1px solid rgba(31,111,99,.22); padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: capitalize; }
.win-badge { font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; }
.win-badge i { font-size: 0.55rem; }
.win-badge.open { color: #1c7a4a; background: rgba(37,211,102,.14); border: 1px solid rgba(37,211,102,.4); }
.win-badge.closed { color: #9a4a2f; background: rgba(214,90,58,.12); border: 1px solid rgba(214,90,58,.35); }

.thread-msgs {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 1.2rem 1.1rem;
  background:
    linear-gradient(rgba(31,111,99,.03), rgba(31,111,99,.03)),
    #f6f9f8;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.thread-loading { text-align: center; color: var(--ink-mute); padding: 2rem; font-size: 0.9rem; }
.msg { display: flex; }
.msg.in { justify-content: flex-start; }
.msg.out { justify-content: flex-end; }
.msg-b {
  max-width: 72%;
  padding: 0.55rem 0.8rem 0.7rem; border-radius: 14px;
  font-size: 0.92rem; line-height: 1.4; position: relative;
  white-space: pre-wrap; word-break: break-word;
}
.msg.in .msg-b { background: #fff; color: var(--ink); border: 1px solid rgba(0,0,0,.06); border-top-left-radius: 4px; }
.msg.out .msg-b { background: var(--gradient-primary); color: #fff; border-top-right-radius: 4px; }
.msg-t { display: block; font-size: 0.64rem; opacity: 0.65; text-align: right; margin-top: 0.2rem; }

.composer { border-top: 1px solid rgba(0,0,0,.07); padding: 0.7rem 0.9rem; }
.composer-closed { display: flex; align-items: center; gap: 0.6rem; background: rgba(214,90,58,.08); color: #9a4a2f; border: 1px solid rgba(214,90,58,.25); border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.85rem; }
.composer-form { display: flex; gap: 0.6rem; align-items: flex-end; }
.composer-form textarea {
  flex: 1; resize: none;
  padding: 0.7rem 0.9rem; border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px; font-family: inherit; font-size: 0.92rem; color: var(--ink);
  max-height: 120px; line-height: 1.4;
}
.composer-form textarea:focus { outline: none; border-color: var(--tst-green); }
.composer-form button {
  width: 44px; height: 44px; flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--gradient-accent); color: #06231f; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, opacity .15s;
}
.composer-form button:hover { transform: scale(1.06); }
.composer-form button:disabled { opacity: 0.5; cursor: default; transform: none; }

.th-back { display: none; background: none; border: none; color: var(--ink); font-size: 1.1rem; cursor: pointer; margin-right: 0.2rem; }

/* Botón "Nueva conversación" */
.btn-newconv {
  width: 100%; margin-top: 0.7rem;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.6rem; border: none; border-radius: 10px; cursor: pointer;
  background: var(--gradient-accent); color: #06231f; font-weight: 700; font-size: 0.85rem; font-family: inherit;
  transition: transform .15s;
}
.btn-newconv:hover { transform: translateY(-1px); }

/* Modal (iniciar conversación) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8, 20, 18, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.show { display: flex; }
.modal-card { width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 18px; box-shadow: 0 25px 70px rgba(0,0,0,.4); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid rgba(0,0,0,.07); }
.modal-head h3 { font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.modal-head h3 i { color: var(--tst-green); }
.modal-x { background: none; border: none; font-size: 1.15rem; color: var(--ink-dim); cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-body { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; }
.modal-body .pf label { color: var(--ink-dim); }
.modal-body .pf input, .modal-body select {
  padding: 0.7rem 0.9rem; background: #f6f9f8; border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 0.92rem; width: 100%;
}
.modal-body .pf input:focus, .modal-body select:focus { outline: none; border-color: var(--tst-green); }
.modal-body select option { background: #fff; color: var(--ink); }
.nc-tabs { display: flex; gap: 0.4rem; background: #f1f5f4; padding: 0.3rem; border-radius: 12px; }
.nc-tab { flex: 1; padding: 0.5rem; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.85rem; color: var(--ink-dim); transition: all .15s; }
.nc-tab.active { background: #fff; color: var(--tst-green); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
#ncTplSection, #ncFreeSection { display: flex; flex-direction: column; gap: 0.9rem; }
.modal-body textarea { width: 100%; padding: 0.7rem 0.9rem; background: #f6f9f8; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 0.92rem; resize: vertical; }
.modal-body textarea:focus { outline: none; border-color: var(--tst-green); }
.nc-note { background: rgba(31,111,99,.08); border: 1px solid rgba(31,111,99,.25); color: #1c5a50; padding: 0.7rem 0.85rem; border-radius: 10px; font-size: 0.82rem; display: flex; gap: 0.5rem; line-height: 1.45; }
.nc-note i { color: var(--tst-green); margin-top: 2px; flex-shrink: 0; }
.nc-note b { color: #0f2f2c; }
.nc-warn { background: rgba(245,185,66,.12); border: 1px solid rgba(245,185,66,.4); color: #8a6313; padding: 0.7rem 0.85rem; border-radius: 10px; font-size: 0.82rem; display: flex; gap: 0.5rem; line-height: 1.45; }
.nc-warn i { color: #e2a93f; margin-top: 2px; flex-shrink: 0; }
.nc-warn b { color: #6b4d0f; }
.nc-preview { background: #f1f5f4; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.86rem; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.nc-err { background: rgba(214,58,58,.1); border: 1px solid rgba(214,58,58,.35); color: #b3261e; padding: 0.6rem 0.85rem; border-radius: 10px; font-size: 0.84rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: 0.7rem; padding: 1rem 1.3rem; border-top: 1px solid rgba(0,0,0,.07); }
.modal-foot .btn { width: auto; padding: 0.72rem 1.4rem; font-size: 0.9rem; justify-content: center; white-space: nowrap; }
@media (max-width: 520px) { .modal-foot { flex-direction: column-reverse; } .modal-foot .btn { width: 100%; justify-content: center; } }

/* Móvil: lista a pantalla completa; el hilo entra como overlay al abrir */
@media (max-width: 820px) {
  .chat-shell { padding: 0.6rem; gap: 0.6rem; }
  .chat-list { width: 100%; }
  .chat-thread { display: none; }
  body.thread-open .chat-list { display: none; }
  body.thread-open .chat-thread { display: flex; }
  .th-back { display: inline-block; }
  .msg-b { max-width: 84%; }
}

/* ===== Adjuntos en el chat ===== */
.attach-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tst-green); background: #eef3f2; border: 1px solid rgba(0,0,0,.08); transition: all .15s; font-size: 1rem; }
.attach-btn:hover { background: #e0ebe9; }
.attach-btn.loading { opacity: .5; pointer-events: none; }
.msg-img { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; cursor: pointer; }
.msg-cap { margin-top: 0.35rem; }
.msg-doc { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-weight: 600; }
.msg-doc i { font-size: 1.15rem; }
.msg.out .msg-doc { color: #fff; }

/* Aviso de sesión expirada (login) */
.alert-info { background: rgba(0, 212, 170, 0.12); border: 1px solid rgba(0, 212, 170, 0.4); color: #8fe9d4; }

/* ===== Canal (WhatsApp / Telegram) en el chat ===== */
.conv-av-wrap { position: relative; flex-shrink: 0; }
.ch { position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; border: 2px solid #fff; color: #fff; }
.ch-wa { background: #25D366; }
.ch-tg { background: #229ED9; }
.win-badge.open i.fa-telegram { color: #229ED9; }

/* ===== Botón Exportar CSV ===== */
.btn-export { padding: 0.6rem 1.1rem; font-size: 0.85rem; color: var(--ink); background: #fff; border: 1.5px solid rgba(0,0,0,.12); font-weight: 600; }
.btn-export:hover { background: #f1f5f4; border-color: var(--tst-green); color: var(--tst-green); }
.btn-import { padding: 0.6rem 1.1rem; font-size: 0.85rem; color: var(--ink); background: #fff; border: 1.5px solid rgba(0,0,0,.12); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-import:hover { background: #f1f5f4; border-color: var(--tst-green); color: var(--tst-green); }
.toolbar select[name="canal"] { min-width: 150px; }

/* ===== Header: menú hamburguesa idéntico al home (panel deslizante) ===== */
.nav-fixed { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.profile-chip .pname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mobile-menu-btn {
  position: relative; display: flex; border: none; color: var(--tst-green);
  font-size: 1.5rem; cursor: pointer; width: 42px; height: 42px; border-radius: 10px;
  background: var(--tst-gray); align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s;
}
.mobile-menu-btn:hover { background: #d0dedd; }
.burger-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; background: #e23b3b; color: #fff; font-size: 0.66rem; font-weight: 800; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; line-height: 1; }

.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; transition: opacity 0.3s ease; }
.mobile-nav-overlay.active { display: block; opacity: 1; }

.mobile-nav { position: fixed; top: 0; right: -100%; width: min(85vw, 320px); height: 100dvh; height: 100vh; background: #fff; z-index: 999; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; }
.mobile-nav.active { right: 0; box-shadow: -8px 0 40px rgba(0,0,0,0.18); }

.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; background: var(--tst-dark); flex-shrink: 0; }
.mobile-nav-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.mobile-nav-logo img { height: 36px; width: auto; }
.mobile-nav-logo-text { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; }
.mobile-nav-logo-text small { display: block; font-size: 0.52rem; font-weight: 500; color: var(--tst-accent); letter-spacing: 0.8px; margin-top: 2px; }
.mobile-nav-close { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: background 0.2s; flex-shrink: 0; }
.mobile-nav-close:hover { background: rgba(255,255,255,0.2); }

.mobile-nav-body { flex: 1; overflow-y: auto; padding: 1rem 0; -webkit-overflow-scrolling: touch; }
.mobile-nav-links { list-style: none; padding: 0 1rem; margin: 0; }
.mobile-nav-links li { margin-bottom: 2px; }
.mobile-nav-links a { color: var(--tst-dark); text-decoration: none; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: 10px; transition: all 0.25s ease; font-family: 'Montserrat', sans-serif; }
.mobile-nav-links a i { width: 20px; text-align: center; color: var(--tst-green); font-size: 0.9rem; flex-shrink: 0; }
/* Hover y activo IDÉNTICOS al menú hamburguesa del home (gris + deslizamiento). */
.mobile-nav-links a:hover, .mobile-nav-links a.active { background: var(--tst-gray); color: var(--tst-green); padding-left: 1.3rem; }
.mobile-nav-links a.active { background: linear-gradient(135deg, rgba(31,111,99,0.12), rgba(63,174,154,0.08)); color: var(--tst-green); border-left: 3px solid var(--tst-green); }
.mobile-nav-links a .nav-badge { margin-left: auto; background: var(--tst-green); color: #fff; box-shadow: none; }
.mobile-nav-divider { height: 1px; background: var(--tst-gray); margin: 0.8rem 1rem; }

.mobile-nav-footer { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--tst-gray); flex-shrink: 0; }
.mobile-nav-footer form { margin: 0; }
.mobile-nav-footer .nav-logout-full { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.9rem; font-size: 0.9rem; border-radius: 12px; gap: 0.5rem; font-weight: 700; color: #fff; background: #e23b3b; border: none; cursor: pointer; font-family: inherit; transition: filter .2s; }
.mobile-nav-footer .nav-logout-full:hover { filter: brightness(1.07); }
@media (max-width: 600px) { .profile-chip .pname { display: none; } }

/* Botón "Nueva conversación" en Telegram (azul) */
.btn-newconv.tg { background: linear-gradient(135deg, #229ED9, #1b87bd); color: #fff; }

/* ===== Notas internas + Respuestas rápidas ===== */
.th-notes-btn { position: relative; background: #f1f5f4; border: 1px solid rgba(0,0,0,.08); color: #5a6b68; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all .15s; }
.th-notes-btn:hover { background: #e6efed; color: var(--tst-green); }
.notes-count { position: absolute; top: -6px; right: -6px; background: #f5b942; color: #4a3500; font-size: 0.6rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }

.qr-bar { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0 0.5rem; }
.qr-bar::-webkit-scrollbar { height: 0; }
.qr-chip { flex-shrink: 0; background: #eef3f2; border: 1px solid rgba(0,0,0,.08); color: #2a423e; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-family: inherit; cursor: pointer; white-space: nowrap; transition: all .15s; }
.qr-chip:hover { background: var(--tst-green); color: #fff; border-color: var(--tst-green); }
.qr-chip.qr-manage { color: var(--ink-dim); }

.notes-hint { font-size: 0.8rem; color: var(--ink-dim); margin-bottom: 0.6rem; }
.notes-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.note-item { background: #fff8e6; border: 1px solid rgba(245,185,66,.4); border-radius: 10px; padding: 0.6rem 0.75rem; }
.note-text { color: var(--ink); font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.note-meta { display: flex; justify-content: space-between; align-items: center; color: var(--ink-mute); font-size: 0.7rem; margin-top: 0.3rem; }
.note-del { background: none; border: none; color: var(--ink-mute); cursor: pointer; }
.note-del:hover { color: #d63a3a; }

.qr-manage-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; max-height: 280px; overflow-y: auto; }
.qr-item { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; background: #f6f9f8; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 0.55rem 0.75rem; }
.qr-item span { font-size: 0.86rem; color: var(--ink); }
.qr-del { background: none; border: none; color: var(--ink-mute); cursor: pointer; flex-shrink: 0; }
.qr-del:hover { color: #d63a3a; }

/* ===== Tabs de leads (Lista/Kanban/Métricas) ===== */
.leads-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ltab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; font-size: 0.88rem; border: 1px solid rgba(255,255,255,.18); transition: all .2s; }
.ltab:hover { background: rgba(255,255,255,.2); }
.ltab.active { background: #fff; color: var(--tst-green); border-color: #fff; }

/* ===== Etiquetas (tags) en leads ===== */
.lead-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; align-items: center; }
.ltag { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(31,111,99,.1); color: var(--tst-green); border: 1px solid rgba(31,111,99,.25); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600; }
.ltag.sm { font-size: 0.66rem; padding: 0.05rem 0.45rem; }
.ltag-x { background: none; border: none; color: var(--tst-green); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; }
.ltag-x:hover { color: #d63a3a; }
.ltag-add { background: #f1f5f4; border: 1px dashed rgba(0,0,0,.18); color: var(--ink-dim); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.7rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; }
.ltag-add:hover { color: var(--tst-green); border-color: var(--tst-green); }

/* ===== Métricas ===== */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.metric-card { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.2rem; }
.metric-card h3 { font-size: 1rem; color: var(--ink); margin-bottom: 1.1rem; }
.mbar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.mbar-l { width: 120px; flex-shrink: 0; font-size: 0.85rem; color: var(--ink-dim); display: flex; align-items: center; gap: 0.4rem; }
.mbar-track { flex: 1; height: 12px; background: #eef3f2; border-radius: 999px; overflow: hidden; }
.mbar-fill { height: 100%; border-radius: 999px; transition: width .4s; min-width: 2px; }
.mbar-v { width: 36px; text-align: right; font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.bar-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 180px; padding-top: 1rem; }
.bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bc-bar { width: 70%; max-width: 38px; background: var(--gradient-primary); border-radius: 6px 6px 0 0; position: relative; min-height: 3px; transition: height .4s; }
.bc-n { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 0.66rem; font-weight: 700; color: var(--ink); }
.bc-x { font-size: 0.6rem; color: var(--ink-mute); margin-top: 0.35rem; white-space: nowrap; }
@media (max-width: 720px) { .metrics-grid { grid-template-columns: 1fr; } .mbar-l { width: 90px; } }

/* ===== Kanban ===== */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.kcol { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 0.7rem; min-height: 200px; }
.kcol-head { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.3rem 0.4rem 0.7rem; }
.kcol-head .kdot { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.kcol-head.e-nuevo .kdot { background: #00D4AA; }
.kcol-head.e-contactado .kdot { background: #f5b942; }
.kcol-head.e-cerrado .kdot { background: #c2cfcb; }
.kcount { margin-left: auto; background: rgba(255,255,255,.2); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.75rem; }
.kcol-body { display: flex; flex-direction: column; gap: 0.6rem; min-height: 120px; border-radius: 10px; padding: 0.2rem; transition: background .15s; }
.kcol-body.over { background: rgba(255,255,255,.12); outline: 2px dashed rgba(255,255,255,.4); }
.kcard { background: #fff; border-radius: 12px; padding: 0.8rem; cursor: grab; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.kcard.dragging { opacity: .5; }
.kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kcard-name { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.kcard-ch.wa { color: #25D366; } .kcard-ch.tg { color: #229ED9; }
.kcard-phone { font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.15rem; }
.kcard-msg { font-size: 0.82rem; color: #33484a; margin-top: 0.4rem; line-height: 1.35; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
.kcard-date { font-size: 0.7rem; color: var(--ink-mute); }
.kcard-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
@media (max-width: 820px) { .kanban { grid-template-columns: 1fr; } }

/* ===== Recordatorios + programar mensajes ===== */
.th-icn-btn { position: relative; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.th-icn-btn:hover { background: rgba(255,255,255,.25); }
.rem-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #f5b942; border: 2px solid #0f2f2c; }
.rem-banner { background: #fff4e0; border-bottom: 1px solid #f0d9a8; color: #8a5a00; padding: 0.7rem 1.2rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 0.88rem; font-weight: 600; }
.rem-banner i { color: #e8a200; }
.rem-link { background: #fff; border: 1px solid #f0d9a8; color: #8a5a00; border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem; cursor: pointer; font-weight: 600; }
.rem-link:hover { background: #fdebc8; }
.rem-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.rem-q { background: #f1f5f4; border: 1px solid rgba(0,0,0,.1); color: var(--ink-dim); border-radius: 8px; padding: 0.3rem 0.7rem; font-size: 0.78rem; cursor: pointer; font-weight: 600; }
.rem-q:hover { background: var(--tst-green); color: #fff; border-color: var(--tst-green); }
.sched-btn { background: none; border: none; color: var(--ink-mute); cursor: pointer; font-size: 1.1rem; padding: 0 0.3rem; transition: color .2s; }
.sched-btn:hover { color: var(--tst-green); }
.sched-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.3rem 0.3rem; }
.sched-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(245,185,66,.15); border: 1px solid rgba(245,185,66,.4); color: #8a5a00; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.74rem; font-weight: 600; }
.sched-x { background: none; border: none; color: #8a5a00; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.sched-x:hover { color: #d63a3a; }
input[type="datetime-local"] { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--card-border); border-radius: 10px; font-family: inherit; font-size: 0.92rem; color: var(--ink); }

/* ===== Media entrante en el chat (audio/video) ===== */
.msg-audio { width: 240px; max-width: 100%; height: 40px; display: block; }
.msg-video { width: 260px; max-width: 100%; border-radius: 10px; display: block; }
.msg.in .msg-audio { filter: none; }

/* ===== Badges de no leídos en botones de chat del header ===== */
.nav-chat, .nav-chat-tg { position: relative; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 6px;
  background: #e23b3b; color: #fff; font-size: 0.72rem; font-weight: 800;
  border-radius: 999px; line-height: 1; vertical-align: middle;
  box-shadow: 0 0 0 2px #fff; animation: navBadgePop .25s ease;
}
.nav-badge.tg { background: #229ED9; }
@keyframes navBadgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* ===== Canal Instagram ===== */
.nav-chat-ig { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: #fff; background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); transition: filter .2s; position: relative; }
.nav-chat-ig:hover { filter: brightness(1.08); }
.nav-chat-ig.active { box-shadow: 0 0 0 2px rgba(225,48,108,.4); }
.nav-badge.ig { background: #E1306C; }
.ch-title.ig i { color: #E1306C; }
.ch.ch-ig { background: #E1306C; color: #fff; }
.lead-ch.ig { background: #E1306C; }
.kcard-ch.ig { color: #E1306C; }
.btn-newconv.ig { background: #E1306C; color: #fff; }
.btn-newconv.ig:hover { background: #c72a5e; }
.kcol-head.e-instagram .kdot { background: #E1306C; }

/* ===== Canal Messenger ===== */
.nav-chat-mg { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: #fff; background: linear-gradient(45deg,#0084FF,#A033FF,#FF5E3A); transition: filter .2s; position: relative; }
.nav-chat-mg:hover { filter: brightness(1.08); }
.nav-chat-mg.active { box-shadow: 0 0 0 2px rgba(0,132,255,.4); }
.nav-badge.mg { background: #0084FF; }
.ch-title.mg i { color: #0084FF; }
.ch.ch-mg { background: #0084FF; color: #fff; }
.lead-ch.mg { background: #0084FF; }
.kcard-ch.mg { color: #0084FF; }
.btn-newconv.mg { background: #0084FF; color: #fff; }
.btn-newconv.mg:hover { background: #0073e0; }

/* Badge alineado a la derecha dentro del menú desplegable */
.admin-header .nav-actions .nav-badge { margin-left: auto; }

/* ===== Métricas: selector de rango + embudo ===== */
.range-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.3rem; }
.range-lbl { color: #fff; font-weight: 600; font-size: 0.85rem; margin-right: 0.3rem; opacity: .9; }
.rtab { padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; font-size: 0.82rem; border: 1px solid rgba(255,255,255,.18); transition: all .2s; }
.rtab:hover { background: rgba(255,255,255,.2); }
.rtab.active { background: #fff; color: var(--tst-green); border-color: #fff; }

.funnel { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.5rem 0 0.4rem; }
.funnel-row { display: flex; }
.funnel-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-width: 160px; height: 46px; padding: 0 1.1rem; border-radius: 10px; color: #fff; font-weight: 700; transition: width .5s cubic-bezier(.4,0,.2,1); white-space: nowrap; }
.funnel-bar.f1 { background: linear-gradient(135deg,#1F6F63,#3FAE9A); }
.funnel-bar.f2 { background: linear-gradient(135deg,#f5b942,#e89c1a); }
.funnel-bar.f3 { background: linear-gradient(135deg,#00C853,#00A846); }
.funnel-name { font-size: 0.9rem; }
.funnel-n { font-size: 0.95rem; font-weight: 800; }
.funnel-note { color: var(--ink-dim); font-size: 0.86rem; margin-top: 0.8rem; }

/* ===== Ficha de lead 360 ===== */
.lm-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.lm-row .pf { flex: 1 1 140px; }
.lm-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.lm-badge { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff; border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.74rem; font-weight: 700; }
.lm-badge.ghost { background: #eef3f2; color: var(--ink-dim); }
.lead-ficha { color: var(--tst-green); }