/* ============================================================
   orbit.css — Estilos específicos de Orbit (Front Desktop)
   ------------------------------------------------------------
   REGLA: este archivo NUNCA redefine clases del mOS
   (.card, .btn-*, .badge-*, .tabla-*, .sidebar-*, etc.).
   Solo agrega lo exclusivo de Orbit que no existe en
   /mos/assets/css/style-base.css.
   ============================================================ */


/* ------------------------------------------------------------
   LOGO ORBIT (variante de tamaño sobre el logo mOS)
   ------------------------------------------------------------ */
.orbit-logo-nombre {
  font-family: var(--font-titulo);
  font-size: 21px; font-weight: 800;
  color: var(--mobilus-gris); letter-spacing: -.01em; line-height: 1;
}
.orbit-logo-nombre span { color: var(--mobilus-azul); }


/* ------------------------------------------------------------
   SIDEBAR — acento izquierdo del item activo (decisión MockUp 00)
   ------------------------------------------------------------ */
.sidebar-item.activo { position: relative; }
.sidebar-item.activo::before {
  content: ''; position: absolute;
  left: -.75rem; top: 2px; bottom: 2px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--mobilus-azul);
}

/* Bloque de usuario en el footer del sidebar */
.sidebar-usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 12px;
}
.sidebar-usuario .avatar { width: 30px; height: 30px; font-size: 12px; }
.sidebar-usuario .nombre {
  font-family: var(--font-titulo); font-size: 13px; font-weight: 700;
  color: var(--mobilus-gris);
}
/* Cerrar sesión: es un div, no un button (convención de plataforma) */
.sidebar-logout {
  display: flex; align-items: center; gap: 9px;
  padding: .4rem .25rem; font-size: 13px;
  color: var(--mobilus-gris); opacity: .6;
  cursor: pointer; transition: var(--transicion); user-select: none;
}
.sidebar-logout:hover { opacity: 1; color: var(--mobilus-error); }
.sidebar-logout i { font-size: 16px; }


/* ------------------------------------------------------------
   ENCABEZADO DE VISTA (título + subtítulo + acción)
   ------------------------------------------------------------ */
.vista-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 1.5rem;
}
.vista-head-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.vista-sub { font-size: 14px; color: var(--mobilus-gris); opacity: .55; margin-top: 4px; }


/* ------------------------------------------------------------
   AVATAR con iniciales
   ------------------------------------------------------------ */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-weight: 700; font-size: 13px;
  color: #fff; flex-shrink: 0; background: var(--mobilus-azul);
}
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
/* Colores estables por hash de inicial */
.avatar.c-azul    { background: var(--mobilus-azul); }
.avatar.c-naranja { background: var(--mobilus-naranja); }
.avatar.c-verde   { background: #4a9e2f; }
.avatar.c-morado  { background: #7c4dff; }
.avatar.c-gris    { background: var(--mobilus-gris); }


/* ------------------------------------------------------------
   PÍLDORA DE RACHA (Central)
   ------------------------------------------------------------ */
.racha-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dim-naranja); color: var(--mobilus-naranja);
  border-radius: var(--radio-pill); padding: 8px 16px;
  font-family: var(--font-titulo); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.racha-pill i { font-size: 15px; }


/* ------------------------------------------------------------
   TARJETAS DE MÉTRICA (Central)
   ------------------------------------------------------------ */
.metrica {
  background: var(--mobilus-blanco);
  border: 1px solid var(--mobilus-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-suave);
  padding: 20px 22px; position: relative; overflow: hidden;
}
.metrica-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mobilus-gris); opacity: .5;
  line-height: 1.3; max-width: 70%;
}
.metrica-num {
  font-family: var(--font-titulo); font-size: 34px; font-weight: 800;
  line-height: 1; margin-top: 14px;
}
.metrica-num.n-azul    { color: var(--mobilus-azul); }
.metrica-num.n-verde   { color: #4a9e2f; }
.metrica-num.n-naranja { color: var(--mobilus-naranja); }
.metrica-num.n-morado  { color: #7c4dff; }
/* Círculo decorativo de fondo */
.metrica-orbe {
  position: absolute; top: -18px; right: -18px;
  width: 72px; height: 72px; border-radius: 50%; opacity: .10;
}
.metrica-orbe.o-azul    { background: var(--mobilus-azul); }
.metrica-orbe.o-verde   { background: var(--mobilus-verde); }
.metrica-orbe.o-naranja { background: var(--mobilus-naranja); }
.metrica-orbe.o-morado  { background: #7c4dff; }


/* ------------------------------------------------------------
   BARRA DE SALUD (con color por umbral — Orbit)
   base .progreso-track/.progreso-fill del mOS son azul fijo;
   aquí necesitamos verde/naranja/rojo según salud
   ------------------------------------------------------------ */
.salud-track { height: 6px; background: var(--mobilus-borde); border-radius: 3px; overflow: hidden; }
.salud-fill  { height: 100%; border-radius: 3px; transition: width .4s ease; }
.salud-fill.alta  { background: var(--mobilus-verde); }
.salud-fill.media { background: var(--mobilus-naranja); }
.salud-fill.baja  { background: var(--mobilus-error); }

.salud-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radio-pill); padding: 5px 12px;
  font-family: var(--font-titulo); font-size: 12px; font-weight: 700;
  line-height: 1.15; text-align: center; white-space: nowrap;
}
.salud-pill.alta  { background: var(--dim-verde);   color: #4a9e2f; }
.salud-pill.media { background: var(--dim-naranja); color: var(--mobilus-naranja); }
.salud-pill.baja  { background: var(--dim-rojo);    color: #c0392b; }


/* ------------------------------------------------------------
   TARJETA DE ACTIVACIÓN (lista Activaciones — full width)
   ------------------------------------------------------------ */
.activacion-card {
  background: var(--mobilus-blanco);
  border: 1px solid var(--mobilus-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-suave);
  padding: 20px 22px; margin-bottom: 14px;
  cursor: pointer; transition: var(--transicion-media);
}
.activacion-card:hover { box-shadow: var(--sombra-media); border-color: #cfe4fb; }
.activacion-meta { font-size: 13px; color: var(--mobilus-gris); opacity: .55; margin-top: 3px; }

.secuencia-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.secuencia-row .etq { font-size: 12px; color: var(--mobilus-gris); opacity: .5; margin-right: 2px; }
.canal-flecha { color: var(--mobilus-gris); opacity: .3; font-size: 13px; }
.canal-espera { font-size: 11px; color: var(--mobilus-gris); opacity: .45; }

/* Colores de canal para chips de secuencia */
.canal-whatsapp { background: var(--dim-verde);   color: #4a9e2f; }
.canal-llamada  { background: #eef7ff;            color: var(--mobilus-azul); }
.canal-correo   { background: #fff3ed;            color: var(--mobilus-naranja); }
.canal-linkedin { background: #eef7ff;            color: #0a66c2; }


/* ------------------------------------------------------------
   GRILLAS DE TABLA (Orbit — se aplican a cabeza y filas)
   ------------------------------------------------------------ */
.grid-salud     { grid-template-columns: 2fr 1fr .8fr 1.7fr; }
.grid-salud-ext { grid-template-columns: 1.8fr 1.1fr 1.2fr .9fr .7fr 1.5fr; }
.grid-personas  { grid-template-columns: 2fr 1.4fr 1fr .8fr 1.2fr; }
.grid-secuencia { grid-template-columns: 44px 1fr 1.4fr 1fr; }

/* fila clicable */
.fila-click { cursor: pointer; }

/* celda de nombre con avatar */
.celda-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-persona .np { min-width: 0; }
.celda-persona .np b { font-size: 14px; font-weight: 600; color: var(--mobilus-gris); display: block; line-height: 1.2; }
.celda-persona .np small { font-size: 12px; color: var(--mobilus-gris); opacity: .5; }


/* ------------------------------------------------------------
   DETALLE DE ACTIVACIÓN — barra superior
   ------------------------------------------------------------ */
.detalle-top {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.detalle-titulo { font-family: var(--font-titulo); font-size: 24px; font-weight: 800; line-height: 1.15; }
.detalle-top .salud-pill { margin-left: auto; }

.bloque-titulo {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mobilus-gris); opacity: .5;
  margin-bottom: 10px;
}


/* ------------------------------------------------------------
   PANEL LATERAL DESLIZANTE (perfil de contacto)
   ------------------------------------------------------------ */
.panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.28);
  z-index: 180; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.panel-overlay.abierto { opacity: 1; pointer-events: all; }

.panel-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--mobilus-blanco); z-index: 181;
  box-shadow: -8px 0 40px rgba(28,150,252,.12);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.panel-lateral.abierto { transform: translateX(0); }
.panel-pad { padding: 22px 24px; }

.panel-head { display: flex; align-items: flex-start; gap: 12px; }
.panel-head .info { flex: 1; min-width: 0; }
.panel-head .info h3 { font-family: var(--font-titulo); font-size: 17px; font-weight: 700; color: var(--mobilus-gris); line-height: 1.2; }
.panel-head .info .cargo { font-size: 13px; color: var(--mobilus-gris); opacity: .6; margin-top: 2px; }
.panel-head .info .empresa { font-size: 13px; color: var(--mobilus-gris); opacity: .45; }
.panel-cerrar { background: none; border: none; color: var(--mobilus-gris); opacity: .4; font-size: 20px; cursor: pointer; line-height: 1; padding: 2px; }
.panel-cerrar:hover { opacity: .9; }

.canal-linea { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mobilus-gris); padding: 5px 0; }
.canal-linea i { font-size: 16px; opacity: .5; width: 18px; text-align: center; }
.canal-linea a { word-break: break-all; }

/* eventos de memoria comercial */
.memoria-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.memoria-item i { font-size: 16px; opacity: .55; margin-top: 1px; }
.memoria-item .txt b { font-size: 13px; font-weight: 600; color: var(--mobilus-gris); }
.memoria-item .txt .fecha { font-size: 12px; color: var(--mobilus-gris); opacity: .45; margin-left: 4px; }
.memoria-item .txt .estado { font-size: 12px; display: block; margin-top: 1px; }
.mem-positiva { color: #4a9e2f; }
.mem-adelante { color: var(--mobilus-naranja); }
.mem-silencio { color: var(--mobilus-gris); opacity: .5; }
.mem-negativa { color: #c0392b; }

/* intención agendada */
.intencion-card {
  background: var(--dim-azul); border-radius: var(--radio-md);
  padding: 12px 14px; margin-top: 4px;
}
.intencion-card .fecha { display: flex; align-items: center; gap: 6px; font-family: var(--font-titulo); font-size: 13px; font-weight: 700; color: var(--mobilus-azul); }
.intencion-card .fecha i { font-size: 15px; }
.intencion-card .accion { font-size: 13px; color: var(--mobilus-gris); opacity: .75; margin-top: 4px; }


/* ------------------------------------------------------------
   INTEGRACIONES (Configuración)
   ------------------------------------------------------------ */
.integracion-fila {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--mobilus-borde); border-radius: var(--radio-md);
  padding: 14px 16px; margin-bottom: 10px;
}
.integracion-icono {
  width: 34px; height: 34px; border-radius: var(--radio-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-weight: 800; font-size: 15px; color: #fff;
}
.integracion-icono.dex      { background: var(--mobilus-azul); }
.integracion-icono.pipedrive{ background: var(--mobilus-gris); }
.integracion-nombre { font-family: var(--font-titulo); font-weight: 700; font-size: 14px; flex: 1; }
.estado-conectado { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #4a9e2f; }
.estado-desconectado { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--mobilus-gris); opacity: .5; }


/* ------------------------------------------------------------
   DIRECTORIO ALFABÉTICO (Contactos)
   ------------------------------------------------------------ */
.letra-header {
  font-family: var(--font-titulo); font-size: 13px; font-weight: 800;
  color: var(--mobilus-azul); padding: 14px 2px 6px; letter-spacing: .02em;
}
.contacto-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--mobilus-blanco); border: 1px solid var(--mobilus-borde);
  border-radius: var(--radio-md); box-shadow: var(--sombra-suave);
  padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
  transition: var(--transicion-media);
}
.contacto-card:hover { box-shadow: var(--sombra-media); border-color: #cfe4fb; }
.contacto-card .cc-info { flex: 1; min-width: 0; }
.contacto-card .cc-info b { font-size: 14px; font-weight: 600; color: var(--mobilus-gris); display: block; line-height: 1.25; }
.contacto-card .cc-info small { font-size: 12px; color: var(--mobilus-gris); opacity: .5; }
.contacto-card .cc-activacion { font-size: 12.5px; color: var(--mobilus-azul); opacity: .85; }
.contacto-card .cc-meta { text-align: right; flex-shrink: 0; }
.contacto-card .cc-meta .fecha { font-size: 12px; color: var(--mobilus-gris); opacity: .45; margin-top: 3px; }

.estado-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
.estado-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.estado-dot.activo    { color: #4a9e2f; }
.estado-dot.activo::before    { background: var(--mobilus-verde); }
.estado-dot.dormido   { color: #8a6000; }
.estado-dot.dormido::before   { background: var(--mobilus-alerta); }
.estado-dot.inactivo  { color: #c0392b; }
.estado-dot.inactivo::before  { background: var(--mobilus-error); }
.estado-dot.logrado   { color: var(--mobilus-azul); }
.estado-dot.logrado::before   { background: var(--mobilus-azul); }

/* pills de filtro con punto de color */
.filtro-btn .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.punto.verde    { background: var(--mobilus-verde); }
.punto.amarillo { background: var(--mobilus-alerta); }
.punto.rojo     { background: var(--mobilus-error); }


/* ------------------------------------------------------------
   MINI TARJETAS DE SALUD (Central, fila inferior)
   ------------------------------------------------------------ */
.mini-salud {
  display: flex; align-items: center; gap: 12px;
  background: var(--mobilus-blanco); border: 1px solid var(--mobilus-borde);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-suave);
  padding: 16px 18px;
}
.mini-salud .halo { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-salud .halo .pt { width: 9px; height: 9px; border-radius: 50%; }
.mini-salud .num { font-family: var(--font-titulo); font-size: 20px; font-weight: 800; color: var(--mobilus-gris); line-height: 1; }
.mini-salud .lbl { font-size: 12px; color: var(--mobilus-gris); opacity: .55; }
.halo.verde    { background: var(--dim-verde); }    .halo.verde .pt    { background: var(--mobilus-verde); }
.halo.amarillo { background: var(--dim-amarillo); } .halo.amarillo .pt { background: var(--mobilus-alerta); }
.halo.rojo     { background: var(--dim-rojo); }     .halo.rojo .pt     { background: var(--mobilus-error); }


/* ------------------------------------------------------------
   SKELETON DE CARGA
   ------------------------------------------------------------ */
.sk {
  background: linear-gradient(90deg, #eef2f6 25%, #e2e9f0 37%, #eef2f6 63%);
  background-size: 400% 100%; border-radius: var(--radio-sm);
  animation: skGlow 1.2s ease infinite;
}
@keyframes skGlow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-linea { height: 14px; margin-bottom: 10px; }
.sk-card  { height: 96px; border-radius: var(--radio-lg); margin-bottom: 14px; }


/* ------------------------------------------------------------
   TÍTULO DE VISTA — usa .titulo-xl del mOS (Syne 32/800)
   Ajuste fino de tamaño para densidad de panel Planea
   ------------------------------------------------------------ */
.titulo-vista { font-family: var(--font-titulo); font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--mobilus-gris); }


/* utilidad de texto verde (el mOS solo trae azul/naranja) */
.texto-verde { color: #4a9e2f; }

/* separación estándar entre cards de un formulario Engine/Config */
.form-bloque { margin-bottom: 14px; padding: 18px 20px; }
.form-bloque .bloque-titulo { margin-bottom: 14px; }
.sufijo-input { font-size: 13px; color: var(--mobilus-gris); opacity: .5; margin-left: 10px; }
.radio-linea { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; cursor: pointer; }
.radio-linea input { width: 16px; height: 16px; accent-color: var(--mobilus-azul); cursor: pointer; }


/* ------------------------------------------------------------
   AÑADIDOS: tinte de toast por tipo + estado encolado
   ------------------------------------------------------------ */
.toast.tipo-error { background: var(--mobilus-error); }
.toast.tipo-exito { background: #4a9e2f; }
.toast.tipo-alerta { background: var(--mobilus-alerta); }

.estado-dot.encolado { color: var(--mobilus-gris); opacity: .7; }
.estado-dot.encolado::before { background: var(--mobilus-gris); }

/* checklist del modal de agregar personas / importar */
.check-fila { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--mobilus-borde); cursor: pointer; }
.check-fila:last-child { border-bottom: none; }
.check-fila input { width: 16px; height: 16px; accent-color: var(--mobilus-azul); }
.check-fila-disabled { cursor: default; opacity: .55; }
.check-fila-disabled input { cursor: not-allowed; }
.check-lista { max-height: 300px; overflow-y: auto; margin: 4px 0 8px; }

/* preview de importación CSV */
.csv-preview { max-height: 160px; overflow: auto; border: 1px solid var(--mobilus-borde); border-radius: var(--radio-sm); font-size: 12px; }
.csv-preview table { border-collapse: collapse; width: 100%; }
.csv-preview th, .csv-preview td { padding: 5px 8px; border-bottom: 1px solid var(--mobilus-borde); text-align: left; white-space: nowrap; }
.csv-preview th { background: var(--mobilus-fondo); font-weight: 600; position: sticky; top: 0; }

.mapeo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 8px 0 4px; }
.mapeo-grid label { font-size: 12px; font-weight: 500; align-self: center; }

/* ------------------------------------------------------------
   LOGIN — página pública (login.php), fuera del shell de la app
   ------------------------------------------------------------ */

/* El fondo decorativo (<div class="bg-decorativo"> en login.php) debe
   ser puramente visual — sin esta línea, cubre toda la pantalla y
   bloquea todos los clics sobre el formulario. Esta regla NO existía
   antes con este nombre; es la corrección real del bug de clic. */
.bg-decorativo {
  position: fixed; inset: 0;
  pointer-events: none;
}

.login-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  padding: 24px; position: relative; z-index: 1;
}
.login-logo { text-align: center; }
.login-logo .orbit-logo-nombre { font-size: 28px; }
.login-logo .mos-logo-sub { margin-top: 6px; }

/* Refuerzo explícito del centrado de ícono dentro del input (pedido del
   CTO). La regla base ya vive en style-base.css y es la misma que usan
   los buscadores de "Nuevo contacto"/"Agregar personas" — se repite
   aquí sin conflicto, por si algo la sobreescribe más adelante. */
.input-icono-wrap { position: relative; }
.input-icono-wrap i {
  position: absolute; top: 50%; left: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
/* padding-left del input ya lo resuelve style-base.css línea 336 — no duplicar aquí */

/* NOTA: aquí vivía `.mobilus-bg { pointer-events: none; }` — eliminada.
   orbit.css nunca debe redefinir clases del mOS; esa regla ya existe en
   style-base.css. Ver advertencia en el mensaje de entrega: borrarla de
   aquí NO desactiva la herencia, porque la regla base sigue vigente. */
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: var(--mobilus-blanco); border-radius: var(--radio-xl);
  border: 1px solid var(--mobilus-borde); box-shadow: var(--sombra-media);
  padding: 36px 32px;
}
.login-card,
.login-card * {
  pointer-events: auto;
}
.login-card h1 {
  font-family: var(--font-titulo); font-size: 20px; font-weight: 700;
  color: var(--mobilus-gris); margin-bottom: 4px;
}
.login-sub { font-size: 14px; color: var(--mobilus-gris); opacity: .6; margin-bottom: 28px; }

.login-footer { font-size: 12px; color: var(--mobilus-gris); opacity: .4; text-align: center; }

/* Responsive — pantallas angostas (móvil) */
@media (max-width: 480px) {
  .login-page { padding: 16px; gap: 16px; }
  .login-card { padding: 28px 22px; }
  .login-logo .orbit-logo-nombre { font-size: 24px; }
  /* font-size:16px en inputs evita el zoom automático de iOS Safari al enfocar */
  .input-icono-wrap .input-base { font-size: 16px; }
}

/* .switch* movido a style-base.css (promovido al mOS) — ya no vive aquí */

/* Subsección dentro de una tarjeta — divide "Conexiones externas" en
   DEX / Pipedrive sin crear una tarjeta nueva por cada plataforma.
   Genérico, no acoplado a ningún nombre de integración específico. */
.subbloque { border-top: 1px solid var(--mobilus-borde); margin-top: 16px; padding-top: 16px; }
.subbloque-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mobilus-azul); opacity: .7;
  margin-bottom: 10px;
}

/* .fila-totales — quitada del JS (Central ya no muestra fila de totales, está en las fichas de arriba) */