:root {
  /* Azul noche */
  --primary-color: #0f172a;
  --secondary-color: #16213e;
  --dark-blue: #0a2540;
  --light-bg: #f5f7fb;


  --accent-color: #0f3460;
  --highlight-color: #e94560;
  --success-color: #00d4aa;
  --warning-color: #ff6b35;
  --light-accent: #533483;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--light-bg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

.hidden {
  display: none !important;
}

.navbar {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
  transition: all .3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.nav-pills .nav-link {
  border-radius: 20px;
  margin: 0 2px;
  transition: all .3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--primary-color);
}

.btn-primary {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
}

.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
  border-radius: 20px;
}

.form-control,
.form-select {
  border-radius: 10px;
  border: 2px solid #e9ecef;
  transition: all .3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(30, 58, 138, .25);
}

.qr-container {
  border: 3px dashed var(--primary-color);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  background: #fff;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-connected {
  color: var(--primary-color);
}

.status-disconnected {
  color: #dc3545;
}

.contact-item {
  border-left: 4px solid var(--primary-color);
  background: #fff;
  padding: 10px;
  margin: 5px 0;
  border-radius: 8px;
}

.message-preview {
  background: #e9f0ff;
  /* burbuja azul suave */
  border-radius: 18px;
  padding: 12px 16px;
  margin: 10px 0;
  position: relative;
  max-width: 85%;
  margin-left: auto;
  word-wrap: break-word;
}

.message-preview::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 8px solid #e9f0ff;
  border-bottom: 8px solid transparent;
}

.campaign-status {
  position: sticky;
  top: 20px;
  z-index: 100;
}

/* Login full-screen */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {

  max-width: 420px;
  /* más delgado */
  width: 100%;
  margin: 0 auto;

  border-radius: 20px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .95);
}

.text-ventas {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--secondary-color);
}



.progress-bar {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

@media (max-width: 768px) {
  .nav-pills {
    flex-direction: column;
  }

  .nav-pills .nav-link {
    margin: 2px 0;
  }

  .message-preview {
    max-width: 95%;
  }
}

.file-drop-zone {
  border: 2px dashed var(--primary-color);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: all .3s ease;
  cursor: pointer;
}

.file-drop-zone:hover {
  background-color: rgba(30, 58, 138, 0.08);
}

.instance-card {
  border-left: 5px solid var(--primary-color);
  transition: all .3s ease;
}

.instance-card.connected {
  border-left-color: var(--primary-color);
}

.instance-card.disconnected {
  border-left-color: #dc3545;
}

/* Fondo tipo “chat” */
.chat-preview-bg {
  min-height: 300px;
  background-color: #eef2ff;
  /* azul muy claro */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'>\
  <polygon fill='%23c7d2fe' fill-opacity='0.2' points='0,40 40,0 40,40'/>\
</svg>");
  background-repeat: repeat;
}


/* ===== Distribución responsiva y sin scroll de página ===== */
#audienceGrid {
  /* las tarjetas llenan el alto disponible */
  align-items: stretch;
}

/* hace que la tarjeta ocupe todo el alto del col y el contenido interno pueda scrollear */
.panel-card {
  height: 100%;
}

.panel-card .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* contenedores que sí scrollean dentro de la tarjeta */
.scroll-section {
  flex: 1 1 auto;
  min-height: 0;
  /* importante para permitir overflow en flex */
  overflow: auto;
  /* suaviza el scroll y limita crecimiento brusco */
  max-height: 100%;
}

/* mejora de UX en pantallas medianas: reduce un poco paddings para meter todo en viewport */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .panel-card .card-body {
    padding: 0.75rem 1rem;
  }

  #messagesContainer .message-item {
    margin-bottom: .5rem;
  }
}

/* móviles: que la lista de contactos no se haga infinita */
@media (max-width: 575.98px) {
  #contactsList {
    max-height: 45vh;
  }
}





/* ===== iPhone mock: tamaño y proporción correctos ===== */
.iphone-device {
  position: relative;
  max-width: 300px;
  /* controla el ANCHO máximo, cámbialo si quieres */
  width: 100%;
  margin: 0 auto;

  /* estilo del marco */
  background: #0d0f14;
  border-radius: 36px;
  padding: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  overflow: hidden;

  /* >>> variable para ALTURA del teléfono (pantalla) <<< */
  --phone-height: 600px;
  /* <-- AJÚSTALA AQUÍ (ej. 700px, 760px, etc.) */
}

.iphone-notch {
  position: absolute;
  top: 0;
  height: 24px;
  width: 40%;
  background: #0d0f14;
  border-radius: 0 0 18px 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* IMPORTANTE: usar height con la variable y quitar aspect-ratio */
.iphone-screen {
  background: #e9edef;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .08);

  width: 100%;
  height: var(--phone-height);
  /* ← altura controlada por la variable */
}


/* (opcional) en móviles puedes reducirla sin tocar el desktop */
@media (max-width: 575.98px) {
  .iphone-device {
    max-width: 320px;
    --phone-height: 560px;
  }
}


/* Header WhatsApp */
.wa-header {
  background: #075e54;
  color: #fff;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex: 0 0 auto;
}

.wa-header .wa-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #cfd8dc;
}

.wa-title .wa-name {
  font-weight: 600;
  line-height: 1;
}

.wa-title .wa-status {
  font-size: 12px;
  opacity: .9;
  margin-top: 2px;
}

.wa-header-right i {
  font-size: 18px;
  opacity: .9;
}

/* Chat */
.wa-chat {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 10px 16px;
  min-height: 0;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<g fill='%23d5ccc3' fill-opacity='.35'>\
<circle cx='20' cy='20' r='2'/>\
<circle cx='80' cy='60' r='2'/>\
<rect x='120' y='120' width='10' height='10' rx='2'/>\
<circle cx='160' cy='40' r='3'/>\
<rect x='40' y='140' width='12' height='8' rx='2'/>\
</g></svg>");
  background-size: 220px;
  background-repeat: repeat;
}

/* Input decorativo */
.wa-inputbar {
  background: #f0f2f5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  flex: 0 0 auto;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.wa-inputfake {
  background: #fff;
  border-radius: 22px;
  padding: 8px 12px;
  color: #667781;
  font-size: 14px;
  flex: 1 1 auto;
  border: 1px solid rgba(0, 0, 0, .06);
}

.wa-mic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00a884;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Burbujas WhatsApp */
.wa-bubble {
  position: relative;
  max-width: 78%;
  padding: 8px 10px 14px;
  margin: 6px 0;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;
  white-space: pre-wrap;
}

.wa-bubble .wa-meta {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 11px;
  color: #667781;
  white-space: nowrap;
}

.wa-bubble.incoming {
  margin-right: auto;
  background: #ffffff;
  border-top-left-radius: 4px;
}

.wa-bubble.incoming::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 0;
  border: 6px solid transparent;
  border-right-color: #ffffff;
}

.wa-bubble.outgoing {
  margin-left: auto;
  background: #d9fdd3;
  border-top-right-radius: 4px;
}

.wa-bubble.outgoing::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: 0;
  border: 6px solid transparent;
  border-left-color: #d9fdd3;
}

.wa-attach {
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, .12);
  padding: 8px;
  margin-bottom: 6px;
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: hsl(204, 17%, 28%);
}

.wa-attach i {
  opacity: .75;
}

/* Responsivo */
@media (max-width: 575.98px) {
  .iphone-device {
    max-width: 320px;
  }
}



/* Medios reales dentro de burbujas */
.wa-media {
  display: block;
  border-radius: 10px;
  margin-bottom: 6px;
}

.wa-media-img {
  max-width: 100%;
  height: auto;
}

.wa-media-video {
  width: 100%;
}

.wa-media-audio {
  width: 100%;
}

#qrStatusMessage {
  font-style: italic;
  color: #6c757d;
}


@media (max-width: 991px) {
  #sidebar {
    left: -230px;
    transition: left 0.3s;
    z-index: 1040;
  }

  #sidebar.active {
    left: 0;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}


/* Ajuste del contenedor principal al lado del sidebar */
#mainContent {
  margin-left: 230px;
  transition: margin-left 0.3s;
}

/* En móviles, el contenido ocupa todo el ancho */
@media (max-width: 991px) {
  #mainContent {
    margin-left: 0 !important;
  }
}



/* Asegurar espacio para el sidebar */
#mainContent {
  margin-left: 230px;
  /* mismo ancho que el sidebar */
}

#sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 76px;
  /* altura de la navbar (toolbar) */
  bottom: 0;
  height: calc(100vh - 56px);
  /* ajusta para no chocar con la navbar */
  min-width: 230px;
  z-index: 1030;
  /* asegura que quede visible por encima de contenido */
  background-color: var(--secondary-color);
  /* Azul noche */
  color: #fff;
}



#sidebarMenu {
  flex-grow: 1;
  overflow-y: auto;
  /* solo scroll si crece demasiado */
}

#sidebar .version-block {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}


/* Estilo de enlaces en el sidebar */
#sidebar .nav-link {
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover y activo: resaltado */
#sidebar .nav-link:hover,
#sidebar .nav-link.active {
  background-color: var(--primary-color);
  /* Azul más fuerte */
  color: #fff;
}




.link-highlight {
  color: var(--highlight-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-highlight:hover {
  color: var(--light-accent);
  text-decoration: underline;
}

/* Estilos para la sección de tutoriales */
.tutorial {
  max-width: 70%;
  /* controla el ancho (ajustá 80%, 85%, 90%) */
  margin: 0 auto 2rem;
  /* centra y da espacio abajo */
}

.tutorial h6,
.tutorial p {
  text-align: left;
  /* opcional: centra el texto */
}

.tutorial .ratio {
  max-width: 100%;
  /* mantiene proporción del video */
  border-radius: 12px;
  /* esquinas redondeadas (opcional) */
  overflow: hidden;
  /* recorta esquinas si usás border-radius */
}


/* ==========================================================================
   REPORTES – CONTROL VISUAL DE TABLA
   - Limita crecimiento de columnas
   - Trunca textos largos con "…"
   - Mantiene la tabla compacta y estable
   ========================================================================== */

/* --- 1) Reglas base de tabla: tabla compacta y sin saltos por defecto --- */
/* Estas reglas compactan TODAS las columnas por defecto (1 línea + elipsis).
   Luego, más abajo, hacemos un "override" SOLO para la columna Mensaje
   para permitir 3 líneas con -webkit-line-clamp. */
#reportsTable td,
#reportsTable th {
  white-space: nowrap;
  /* evita que se vayan a muchas líneas por defecto */
  overflow: hidden;
  /* oculta el texto sobrante */
  text-overflow: ellipsis;
  /* muestra "…" cuando el texto se corta */
  vertical-align: top;
  /* alinea el contenido arriba para filas con varias líneas */
}

/* --- 2) Anchos de columnas (ajusta sin tocar HTML ni JS) --- */
/* Contacto (col 1): nombres suelen ser cortos */
#reportsTable td:nth-child(1),
#reportsTable th:nth-child(1) {
  width: 140px;
  max-width: 140px;
}

/* Teléfono (col 2): centrado y compacto */
#reportsTable td:nth-child(2),
#reportsTable th:nth-child(2) {
  width: 120px;
  max-width: 120px;
  text-align: center;
}

/* Estado (col 3): ancho fijo para badge */
#reportsTable td:nth-child(3),
#reportsTable th:nth-child(3) {
  width: 150px;
  max-width: 150px;
}

/* Fecha/Hora (col 4): ancho controlado */
#reportsTable td:nth-child(4),
#reportsTable th:nth-child(4) {
  width: 100px;
  /* si querés más compacto, podés bajar a 120px */
  max-width: 100px;
  text-align: center;
}

/* Mensaje (col 5): la más ancha, pero con límites */
#reportsTable td:nth-child(5),
#reportsTable th:nth-child(5) {
  width: 350px;
  /* ancho visible principal de la columna */
  max-width: 350px;
}

/* Instancia (col 6): nombre corto */
#reportsTable td:nth-child(6),
#reportsTable th:nth-child(6) {
  width: 140px;
  max-width: 140px;
  text-align: center;
}

/* --- 3) Columna MENSAJE con 3 líneas máximo + elipsis --- */
/* Importante: como arriba pusimos nowrap global, lo sobreescribimos
   SOLO para la columna 5 (Mensaje), así permite múltiples líneas. */
#reportsTable td:nth-child(5),
#reportsTable th:nth-child(5) {
  white-space: normal;
  /* ← habilita saltos de línea para Mensaje */
}

/* El contenido del mensaje debe estar envuelto en <div class="cell-msg"> (ya lo hicimos en JS).
   Acá aplicamos el "line-clamp" para mostrar hasta 3 líneas con elipsis. */
#reportsTable td:nth-child(5) .cell-msg {
  white-space: normal;
  /* evita heredar nowrap */
  display: -webkit-box;
  /* necesario para -webkit-line-clamp */
  -webkit-box-orient: vertical;
  /* orientación vertical del box */
  -webkit-line-clamp: 3;
  /* máximo 3 líneas visibles */
  overflow: hidden;
  /* oculta el exceso de texto */
  text-overflow: ellipsis;
  /* muestra "…" cuando recorta */
  word-break: break-word;
  /* rompe palabras/URLs largas */
}

/* --- 4) Columna ESTADO: truncar badge de errores largos en 1 línea --- */
#reportsTable td:nth-child(3) .badge {
  display: inline-block;
  max-width: 260px;
  /* controla el ancho visible del badge */
  white-space: nowrap;
  /* 1 sola línea */
  overflow: hidden;
  text-overflow: ellipsis;
  /* "…" si el error es muy largo */
}

/* --- 5) Ajustes finos para estabilidad visual general --- */
/* Evita que celdas con mucho contenido empujen alturas desparejas */
#reportsTable td {
  vertical-align: top;
}

/* Opcional: si querés que la tabla permita scroll horizontal en pantallas chicas,
   descomentá el siguiente bloque y envolvé la tabla con un contenedor .table-responsive

.table-responsive {
  overflow-x: auto;
}
*/

/* --- 6) (Opcional) Responsivo: en pantallas pequeñas, acotar más el Mensaje --- */
@media (max-width: 992px) {

  #reportsTable td:nth-child(5),
  #reportsTable th:nth-child(5) {
    width: 280px;
    max-width: 280px;
  }
}

@media (max-width: 768px) {

  #reportsTable td:nth-child(5),
  #reportsTable th:nth-child(5) {
    width: 220px;
    max-width: 220px;
  }
}





/* ==========================================================================
   REPORTES – MODO EXPANDIDO (al hacer clic en una fila)
   Quita límites de ancho y de líneas SOLO para la fila con .expanded
   ========================================================================== */

/* La fila expandida permite múltiples líneas en TODAS sus celdas */
#reportsTable tr.expanded td,
#reportsTable tr.expanded th {
  white-space: normal;      /* ya no forzamos 1 línea */
  overflow: visible;        /* permitimos que el contenido fluya */
  text-overflow: clip;      /* sin elipsis en expandido */
}

/* Mensaje (col 5): sin límite de líneas ni de ancho */
#reportsTable tr.expanded td:nth-child(5),
#reportsTable tr.expanded th:nth-child(5) {
  width: auto;
  max-width: none;
}
#reportsTable tr.expanded td:nth-child(5) .cell-msg {
  display: block;           /* no necesitamos -webkit-box en expandido */
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* Estado (col 3): permitir que el badge muestre el texto completo */
#reportsTable tr.expanded td:nth-child(3) .badge {
  max-width: none;
  white-space: normal;      /* permite que el error largo haga wrap */
}

/* Opcional: resaltar la fila expandida */
#reportsTable tr.expanded {
  background: rgba(0,0,0,0.03);
}

/* Licencia: contador de vencimiento */
/* Licencia: contador de vencimiento (estilo sólido, profesional) */
.license-countdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.88rem;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  color: #fff;
}
.license-countdown .lc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.license-countdown .lc-row .lc-ico {
  font-size: 1.05rem;
}
.license-countdown .lc-row .lc-text {
  flex: 1;
}
.license-countdown .lc-row .lc-cta {
  font-weight: 600;
}
.license-countdown .lc-progress {
  position: relative;
  height: 6px;
  width: 100%;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
}
.license-countdown .lc-progress .lc-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #ffffff;
  opacity: 0.9;
  transition: width 0.7s ease;
}

/* Colores sólidos por estado */
.license-countdown.countdown-ok { background: #198754; }
.license-countdown.countdown-warn { background: #ffb100; color: #1e1e1e; }
.license-countdown.countdown-warn .lc-progress { background: rgba(0,0,0,0.2); }
.license-countdown.countdown-warn .lc-progress .lc-fill { background: #1e1e1e; opacity: 0.9; }
.license-countdown.countdown-danger { background: #dc3545; }

/* Licencia: tarjetas por instancia (plano con borde sutil) */
#licenseList .card {
  border: 1px solid #c5cbd6; /* borde más visible */
  border-radius: 12px;       /* esquinas más notorias */
  box-shadow: none;
  background: #fff;
  overflow: hidden;          /* respeta el radio en contenido interno */
}
#licenseList .card .card-body { background: #fff; }
#licenseList .card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Licencia: compacidad de texto dentro de tarjetas */
#licenseList .card-body { line-height: 1.25; }
#licenseList .card-body .mb-2 { margin-bottom: .35rem !important; }
#licenseList .card-body .small { line-height: 1.15; }
#licenseList .fs-6 { line-height: 1.2; }

/* Botones sólidos con paleta del proyecto */
.btn-brand-primary {
  --btn-bg: var(--secondary-color);
  --btn-hover: #121c36; /* tono más oscuro del secundario */
  --btn-active: #0d1529;
  color: #fff !important;
  background-color: var(--btn-bg) !important;
  border-color: transparent !important;
}
.btn-brand-primary:hover { background-color: var(--btn-hover) !important; }
.btn-brand-primary:active { background-color: var(--btn-active) !important; }

.btn-brand-secondary {
  --btn-bg: var(--secondary-color);
  --btn-hover: #121c36;
  --btn-active: #0d1529;
  color: #fff !important;
  background-color: var(--btn-bg) !important;
  border-color: transparent !important;
}
.btn-brand-secondary:hover { background-color: var(--btn-hover) !important; }
.btn-brand-secondary:active { background-color: var(--btn-active) !important; }

.btn-brand-accent {
  --btn-bg: var(--secondary-color);
  --btn-hover: #121c36;
  --btn-active: #0d1529;
  color: #fff !important;
  background-color: var(--btn-bg) !important;
  border-color: transparent !important;
}
.btn-brand-accent:hover { background-color: var(--btn-hover) !important; }
.btn-brand-accent:active { background-color: var(--btn-active) !important; }

.btn-whatsapp {
  --btn-bg: #25D366;
  --btn-hover: #1ebe5c;
  --btn-active: #17a44f;
  color: #fff !important;
  background-color: var(--btn-bg) !important;
  border-color: transparent !important;
}
.btn-whatsapp:hover { background-color: var(--btn-hover) !important; }
.btn-whatsapp:active { background-color: var(--btn-active) !important; }