/* ===============================
   ConectaWA - Estilos globales
   =============================== */

/* ---------- Variables ---------- */
:root {
  --brand: #1DA1F2;        /* color principal (azul moderno) */
  --sb-hover: #f2f4f7;     /* hover en sidebar */
}

/* ---------- Base ---------- */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 🔹 evita scroll global */
}

body {
  background-color: #f5f6f7;
}

.brand-text {
  color: var(--brand);
  font-weight: 700;
}

/* Caja centrada de login */
.login-card { max-width: 420px; width: 100%; }

/* Flash auto-ocultar */
.flash { position: fixed; top: 12px; right: 12px; z-index: 1080; }
.flash.fade-out { animation: fadeout .8s ease-in forwards; }
@keyframes fadeout { to { opacity: 0; transform: translateY(-6px); } }

/* ===== Layout con sidebar ===== */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;   /* sidebar + contenido */
  min-height: calc(100vh - 56px);     /* ocupa toda la pantalla menos la navbar */
  height: calc(100vh - 56px);         /* 🔹 asegura ocupar siempre el alto disponible */
  overflow: hidden;                   /* 🔹 evita scroll global */
}

/* Sidebar */
.sidebar-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);         /* mismo alto que el main */
  width: 260px;
  background: #fff;
  border-right: 1px solid #dee2e6;
}

/* Menú del sidebar */
.sidebar-menu {
  flex: 1 1 auto;                     /* ocupa todo el espacio intermedio */
  overflow-y: auto;                   /* scroll interno solo si hay muchos items */
}

/* Bloque inferior (usuario/salir) siempre visible */
.sidebar-wrap .mt-auto {
  margin-top: auto;
  border-top: 1px solid #dee2e6;
  padding: .75rem;
  font-size: .85rem;
  background: #fff;
}

/* Main (contenido de la derecha) */
.layout main {
  min-height: calc(100vh - 56px);     /* igual al sidebar */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                     /* 🔹 ocupa todo el espacio disponible */
  overflow: hidden;                   /* 🔹 evita scroll global */
}

/* Contenido con listas/tablas debe scrollear internamente */
.chat-grid,
.table-responsive,
.card-body.scrollable {
  overflow-y: auto;
  flex: 1 1 auto;                     /* se adapta al alto disponible */
  min-height: 0;                      /* fix para que flexbox permita scroll interno */
}

/* ===== Sidebar colapsable en móvil (drawer) ===== */
@media (max-width: 991.98px) {
  .layout { grid-template-columns: 1fr; }

  .sidebar-wrap {
    position: fixed;
    left: 0; top: 56px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1045;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  .sidebar-open .sidebar-wrap { transform: translateX(0); }

  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
  }
  .sidebar-open .sidebar-overlay { display: block; }

  /* chat en móvil pasa a 1 columna */
  .chat-grid { grid-template-columns: 1fr; }
}

/* ===============================
   Respuestas rápidas (picker + typeahead)
   =============================== */
#qrPickerList .qr-item {
  display: flex; align-items: start; gap: .5rem;
  padding: .5rem .75rem;
}
#qrPickerList .qr-item:hover { background: #f6f7f9; cursor: pointer; }
#qrPickerList .qr-item .qr-short { font-weight: 600; min-width: 200px; }
#qrPickerList .qr-item .qr-msg { color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Typeahead bajo textarea */
.qr-typeahead {
  position: absolute; z-index: 1080;
  background: #fff; border: 1px solid rgba(0,0,0,.125);
  border-radius: .5rem; box-shadow: 0 10px 24px rgba(0,0,0,.12);
  max-height: 260px; overflow: auto; min-width: 260px;
}
.qr-sugg { padding: .4rem .6rem; display: flex; gap: .5rem; }
.qr-sugg.active, .qr-sugg:hover { background: #eef3ff; cursor: pointer; }
.qr-sugg .s-short { font-weight: 600; min-width: 160px; }
.qr-sugg .s-msg { color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Composer relativo */
.card-footer { position: relative; }

/* ===============================
   Reemplazo del verde Bootstrap por brand
   =============================== */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:disabled {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.text-success { color: var(--brand) !important; }
.bg-success   { background-color: var(--brand) !important; }

/* Toolbar de contactos fija arriba */
.contacts-toolbar-sticky {
  position: sticky;
  top: 56px;   /* altura navbar */
  z-index: 1020;
  background: #fff;
}


/* ===== Fix scroll en Contactos ===== */
.contacts-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* evita que main genere scroll global */
}

.contacts-page .contacts-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* scroll solo en la tabla */
}


.pulse {
  animation: pulseBadge 0.4s;
}
@keyframes pulseBadge {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}