/* Grupo Nórdico — Colaboradores (BLOQUE B): los estilos de public/colaboradores.js y de la página del externo
   (public/colaborar.js), con el prefijo col-. Lo genérico (btn, card, inp, tag, modal, ficha, conv) es de app.css, que la
   página del externo también carga. */

/* ---------- la página del externo (/colaborar/<token>) ---------- */
.col-cuerpo { background: var(--fondo); min-height: 100%; }
.col-pagina { max-width: 920px; margin: 0 auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.col-arranque { display: grid; place-items: center; gap: 10px; padding: 18vh 0; color: var(--suave); }
.col-tri { width: 46px; height: 42px; background: var(--azul); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: col-late 1.2s ease-in-out infinite; }
.col-tri.chico { width: 22px; height: 20px; animation: none; }
@keyframes col-late { 50% { opacity: .35; transform: scale(.9); } }
.col-caja { max-width: 420px; margin: 7vh auto 0; }
.col-caja h1 { font-size: 22px; margin-bottom: 6px; }
.col-marca { display: flex; align-items: center; gap: 8px; font: 700 13px var(--fm); color: var(--azul); margin-bottom: 14px; }
.col-pin { font: 800 26px var(--fm); letter-spacing: .5em; text-align: center; padding: 10px; }

/* ---------- la pantalla del colaborador (externo e interno) ---------- */
.col-pant { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.col-av { width: 38px; height: 38px; border-radius: 50%; background: var(--hielo); color: var(--azul); display: grid; place-items: center; font: 800 13px var(--fm); flex: none; }
.col-av-g { width: 44px; height: 44px; background: var(--azul); color: #fff; font-size: 15px; }
.col-vend { font: 800 18px/1.2 var(--fm); color: var(--azul-9); overflow-wrap: anywhere; }
.col-regla { padding: 0 4px; }
.col-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.col-tabs::-webkit-scrollbar { display: none; }
.col-tabs button { border: 1px solid var(--linea); background: #fff; color: var(--tinta-2); border-radius: 20px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; flex: none; }
.col-tabs button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.col-cuerpo-p { min-width: 0; }
.col-cargando, .col-ayuda { padding: 2px 4px 10px; }
.col-filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; min-width: 0; }
.col-buscar { max-width: 360px; }
.col-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.col-chips::-webkit-scrollbar { display: none; }
.col-chips .chip { flex: none; }
.col-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.col-op { display: flex; gap: 10px; align-items: stretch; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.col-op:hover { border-color: var(--azul-2); }
.col-op-b { width: 4px; border-radius: 4px; flex: none; }
.col-op .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.col-op-t { gap: 6px; min-width: 0; }
.col-op-d { overflow-wrap: anywhere; }
.col-op.apagado, .col-fila.apagado { opacity: .55; }
.col-op[disabled] { cursor: default; }
.col-pool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col-pool .btn { align-self: flex-start; }
.col-grupo .sec-h { margin-bottom: 6px; }
.col-it { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--linea-2); background: none; padding: 10px 2px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.col-it:hover { background: var(--hielo-2); }
.col-vacio b { display: block; font: 700 15px var(--fm); margin-bottom: 4px; }
.col-barra { margin-bottom: 12px; gap: 8px; }
.col-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.col-rank-f { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--linea-2); min-width: 0; }
.col-rank-f:last-child { border-bottom: 0; }
.col-rank-f.on { background: var(--hielo); border-radius: 10px; }
.col-pos { width: 28px; height: 28px; border-radius: 50%; background: var(--hielo-2); display: grid; place-items: center; font: 800 12px var(--fm); color: var(--azul); flex: none; }
.col-rojo { color: var(--rojo); }

/* La ficha: a la derecha en la computadora, la pantalla entera en el celular. */
.col-ficha-w { position: fixed; inset: 0; z-index: 55; background: rgba(11, 37, 71, .32); display: flex; justify-content: flex-end; }
.col-ficha { width: min(640px, 100%); height: 100%; background: var(--fondo); display: flex; flex-direction: column; box-shadow: var(--sombra-2); }
.col-ficha-h { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: #fff; border-bottom: 1px solid var(--linea-2); }
.col-ficha-c { flex: 1; overflow-y: auto; padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-ficha-n { font: 800 20px/1.25 var(--fm); color: var(--azul-9); overflow-wrap: anywhere; }
.col-acc { gap: 6px; }
.col-contacto { gap: 6px; }
.col-ficha .ficha { min-width: 0; }
.col-vl { margin-bottom: 6px; }

/* ---------- la gestión (Mi perfil del vendedor y la lista del gerente) ---------- */
.col-lista-g { display: flex; flex-direction: column; }
.col-fila { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linea-2); min-width: 0; }
.col-fila:first-child { border-top: 0; padding-top: 4px; }
.col-fila .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.col-fila-t { gap: 6px; }
.col-perfil .sec-h > .grow { min-width: min(100%, 260px); }
.col-fila .col-acc { margin-top: 6px; }
.col-link { font-size: 13px; }
.col-sel { width: auto; max-width: 100%; }
.col-x { font-size: 15px; }
.col-est { margin-top: 18px; }
.col-tabla th, .col-tabla td { white-space: nowrap; padding: 8px 10px; text-align: left; }
.col-tabla td:first-child { white-space: normal; min-width: 140px; }
.col-modal .seg { flex-wrap: wrap; }

@media (max-width: 560px) {
  .col-grid2 { grid-template-columns: 1fr; }
  .col-lista { grid-template-columns: 1fr; }
  .col-pagina { padding-left: 12px; padding-right: 12px; }
  .col-cab { padding: 12px; }
  .col-ficha-c { padding-left: 12px; padding-right: 12px; }
  .col-ficha .ficha { grid-template-columns: 1fr; }
}