/* Base comun de EliteOne Analytics (asignaciones). 26-sep-2026.
   Se carga la ULTIMA en todas las vistas: corrige contraste, movil, foco y tipografia sin tocar
   la estructura de cada pagina. Marca: azul y blanco de la app (fondo #f1f5f9, tarjetas blancas,
   cabecera #1e3a5f -> #2563eb). Revision con la skill apple-design: texto >= 4.5:1 (aqui >= 7:1),
   controles >= 28 px en escritorio, nada solo por color, sin scroll horizontal de pagina. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/inter-var.woff2) format('woff2'); }

:root {
  --primary: #2563eb; --primary-dark: #1d4ed8;
  --success: #15803d; --warning: #b45309; --danger: #b91c1c;
  /* grises: los antiguos #6b7280 / #94a3b8 bajaban de 4,5:1 en etiquetas pequenas */
  --gray-400: #64748b; --gray-500: #475569; --gray-600: #334155; --gray-700: #1e293b; --gray-900: #0f172a;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
  --foco: #2563eb;
}

/* ---- JERARQUÍA DE TOKENS (30-oct-2026) ----
   Conviven dos sistemas: este (--primary, --gray-*, --success…; heredado) y el de app.css (--a-*; sistema v2).
   compradores.css ya NO define :root: base.css es la única fuente del sistema heredado.
   Al escribir CSS nuevo usar los alias --tk-* (apuntan al sistema v2 con el heredado de respaldo):
     superficie : --tk-bg (fondo de página) · --tk-surface (tarjeta) · --tk-line (bordes)
     texto      : --tk-t1 (principal) · --tk-t2 (secundario) · --tk-t3 / --text-muted (metadatos, ≥4,5:1 sobre blanco)
     acento     : --tk-acc · --tk-acc-2 (hover/activo) · --tk-acc-bg
     estado     : --tk-ok · --tk-warn · --tk-bad (texto/icono; fondos en --a-ok-bg / --a-warn-bg)
   No usar #94a3b8 como color de texto (2,56:1 sobre blanco). */
:root {
  --tk-bg: var(--a-bg, var(--gray-100)); --tk-surface: var(--a-card, #fff); --tk-line: var(--a-line, var(--gray-200));
  --tk-t1: var(--a-t1, var(--gray-900)); --tk-t2: var(--a-t2, var(--gray-600)); --tk-t3: var(--a-t3, #5b6779); --text-muted: var(--tk-t3);
  --tk-acc: var(--a-acc, var(--primary)); --tk-acc-2: var(--a-acc-2, var(--primary-dark)); --tk-acc-bg: var(--a-acc-bg, #eff6ff);
  --tk-ok: var(--a-ok, var(--success)); --tk-warn: var(--a-warn, var(--warning)); --tk-bad: var(--a-bad, var(--danger));
}

html { -webkit-text-size-adjust: 100%; }
body, .ds-body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: #f1f5f9; color: #0f172a; }
body { overflow-x: hidden; }

/* ---- contraste: etiquetas, encabezados de tabla, metadatos ---- */
.ds-kpi-label, .stat-label, .ds-card-badge, .ds-feed-note, .ds-feed-time, .ds-empty,
.table th, .ds-table thead th, .rpt-table th, .rpt-act-time, .rpt-act-nota, .diag-sin, .diag-perfil, .ds-filter-label { color: #475569; }
.ds-kpi-label, .stat-label, .table th, .ds-table thead th, .rpt-table th { font-size: 12px; letter-spacing: .02em; }
.ds-card-badge { font-size: 12px; background: #f8fafc; border-color: #e2e8f0; }
.badge-sin { color: #334155; }
.ds-report-subtitle { color: #dbeafe; }
/* dentro de la cabecera azul el texto secundario va claro, no gris */
.ds-report-header .ds-filter-label { color: #dbeafe; }
.ds-report-header .ds-sub-tab { white-space: nowrap; }

/* ---- numeros alineados en tablas y tarjetas ---- */
table, .stat-number, .ds-kpi-value { font-variant-numeric: tabular-nums; }

/* ---- foco de teclado visible en todo lo interactivo ---- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px;
}

/* ---- tamano minimo de los controles (escritorio: 28 px; aqui 32 para uso diario) ---- */
.btn, .btn-sm, .btn-xs, .ds-topbar-btn, .nav-tab, .ds-nav-link, .sub-tab, .ds-sub-tab, select, .search-input, .select-filter {
  min-height: 32px;
}
.btn-xs, .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; }
.btn-icon { min-width: 28px; min-height: 28px; }

/* ---- barra de navegacion: se desplaza dentro de si misma en pantallas estrechas ---- */
.navbar, .ds-topbar { flex-wrap: nowrap; max-width: 100vw; }
.nav-left, .ds-topbar-left { min-width: 0; }
.nav-tabs, .ds-nav { overflow-x: auto; scrollbar-width: none; min-width: 0; flex-wrap: nowrap; }
.nav-tabs::-webkit-scrollbar, .ds-nav::-webkit-scrollbar { display: none; }
.nav-tab, .ds-nav-link { white-space: nowrap; flex: none; }

/* ---- tablas anchas: se desplazan dentro de su caja, nunca la pagina ---- */
.table-responsive, .ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 900px) {
  .container, .ds-canvas { padding-left: 16px; padding-right: 16px; }
  table.table, table.ds-table, table.rpt-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-user .badge, .ds-user-name { display: none; }
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ds-grid-2-1, .ds-grid-2, .rpt-charts-row { grid-template-columns: 1fr !important; display: grid; }
  .ds-report-header-inner, .ds-header-actions { flex-wrap: wrap; }
}

/* ---- movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- barra común (views/_nav.ejs) ---- */
.app-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px;
  background: #fff; border-bottom: 1px solid #e2e8f0; font-family: 'Inter', system-ui, sans-serif; }
.app-nav-marca { display: flex; align-items: center; gap: 8px; color: #1d4ed8; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; flex: none; }
.app-nav-secc { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.app-nav-secc::-webkit-scrollbar { display: none; }
.app-nav-secc a { flex: none; white-space: nowrap; text-decoration: none; color: #334155; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 8px; min-height: 32px; display: inline-flex; align-items: center; }
.app-nav-secc a:hover { background: #f1f5f9; color: #0f172a; }
.app-nav-secc a[aria-current="page"] { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.app-nav-user { display: flex; align-items: center; gap: 8px; flex: none; }
.app-nav-nombre { font-size: 14px; color: #0f172a; font-weight: 600; white-space: nowrap; }
.app-nav-nombre small { font-size: 12px; font-weight: 600; color: #1d4ed8; background: #eff6ff; border-radius: 100px; padding: 2px 8px; margin-left: 4px; }
.app-nav-btn { font: inherit; font-size: 13px; font-weight: 500; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 0 12px; min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-nav-btn:hover { background: #f1f5f9; }
.app-nav-btn[aria-current="page"] { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
@media (max-width: 900px) {
  .app-nav { padding: 0 12px; gap: 8px; }
  .app-nav-marca span, .app-nav-nombre { display: none; }
}

/* ==== Pasada de diseño 17-oct-2026 (skills eliteone + apple-design). Solo presentación. ==== */

/* ---- mismo ancho en todas las páginas de listas ---- */
.container { max-width: 1280px; }

/* ---- barra: el nombre cede antes que las secciones (a 1440 px «Cambiar clave» tapaba Acuerdos) ---- */
@media (max-width: 1440px) { .app-nav-nombre-txt { display: none; } }

/* ---- barra en móvil: dos filas, todas las secciones a la vista y un degradado que avisa que hay más ---- */
@media (max-width: 900px) {
  .app-nav { flex-wrap: wrap; height: auto; padding: 8px 12px 0; row-gap: 4px; }
  .app-nav-user { margin-left: auto; }
  .app-nav-secc { order: 3; flex: 1 0 100%; padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .app-nav-marca span { display: inline; }
}

/* ---- tarjetas de cifras: un solo estilo (etiqueta en minúscula, alineada a la izquierda) ---- */
.stat-card { text-align: left; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column-reverse; gap: 2px; }
.stat-label { text-transform: none; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #475569; }
.stat-number { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }

/* ---- tablas: encabezados legibles, nada por debajo de 12 px, botones y fechas sin partirse ---- */
thead th { color: #475569; font-size: 12px; text-align: left; }
.table td .btn, .table td .btn-sm, .table td .btn-xs, td .btn-sm, td.td-actions { white-space: nowrap; }
.badge, .badge-estado, .badge-tier, .badge-llamadas, .badge-confirmado, .badge-sin-confirmar, .mp-tag { font-size: 12px; }
.diag-perfil, .diag-sin { font-size: 12px; }

/* ---- botones de contorno (destructivo / positivo): no compiten con la acción principal ---- */
.btn-outline-danger { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-outline-danger:hover { background: #fef2f2; }
.btn-outline-success { background: #fff; color: #15803d; border: 1px solid #86efac; }
.btn-outline-success:hover { background: #f0fdf4; }

/* ---- rol de usuario: color distinto al del estado (antes «closer» y «activo» eran el mismo verde) ---- */
.badge-rol { text-transform: none; }
.badge-rol-admin { background: #dbeafe; color: #1d4ed8; }
.badge-rol-closer { background: #f1f5f9; color: #334155; }
.badge-rol-trafico { background: #f3e8ff; color: #6b21a8; }
.badge-rol-soporte { background: #dcfce7; color: #166534; }
.badge-rol-instructor { background: #fef3c7; color: #92400e; }
.roles-extra { margin-top: 6px; font-size: 12px; }
.roles-extra summary { cursor: pointer; color: var(--a-t3); }
.roles-extra form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.roles-extra label { display: inline-flex; gap: 4px; align-items: center; }

/* ---- móvil: filtros a ancho completo y primera columna fija al desplazar la tabla ---- */
@media (max-width: 768px) {
  .toolbar-actions { align-items: stretch; width: 100%; }
  .toolbar-actions > * { width: 100%; }
}
@media (max-width: 900px) {
  :where(table.table, table.ds-table) tbody tr { background-color: #fff; }
  table.table th:first-child, table.table td:first-child,
  table.ds-table th:first-child, table.ds-table td:first-child {
    position: sticky; left: 0; z-index: 1; background-color: inherit; box-shadow: 1px 0 0 #e2e8f0;
  }
  table.table thead th:first-child, table.ds-table thead th:first-child { background-color: #f1f5f9; z-index: 2; }
}
.badge-status, .tab-count, .ds-kpi-tag, .ds-bar-label, .ds-feed-badge, .ds-feed-time { font-size: 12px; }
.ds-feed-contact { display: inline-flex; align-items: center; min-height: 24px; }
/* móvil estrecho: la marca queda en icono para que usuario y botones quepan en una fila */
@media (max-width: 480px) { .app-nav-marca span { display: none; } .app-nav-user { gap: 6px; } }

/* Franja del modo «Ver como» (29-oct-2026) */
.ver-como { position: fixed; right: 16px; bottom: 16px; left: auto; max-width: calc(100vw - 32px); z-index: 1000; display: flex; flex-wrap: wrap;
  gap: 8px 14px; align-items: center; padding: 10px 14px; border-radius: 10px; background: #92400e; color: #fff; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ver-como form { margin: 0; }
.ver-como button { background: #fff; color: #92400e; border: 0; border-radius: 6px; padding: 4px 12px; font-weight: 600; cursor: pointer; font-size: 13px; }

/* ==== UI 30-oct-2026: skeleton, botón primario, filtros plegables ==== */
/* Skeleton: bloque gris con brillo. El contenedor lleva aria-busy="true" y un <span class="sr-only">Cargando…</span>. */
.sk { display: block; background: #e2e8f0; background-image: linear-gradient(90deg, #e2e8f0 0, #f1f5f9 40%, #e2e8f0 80%);
  background-size: 200% 100%; animation: sk-brillo 1.3s ease-in-out infinite; border-radius: 6px; min-height: 12px; }
@keyframes sk-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-line { height: 12px; margin: 6px 0; width: 100%; }
.sk-line.corta { width: 45%; } .sk-line.media { width: 70%; }
.sk-row td { padding-top: 12px !important; padding-bottom: 12px !important; }
.sk-row td .sk { height: 12px; }
.sk-card { min-height: 84px; border-radius: 12px; }
.sk-pila { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none !important; background-image: none; } }
.bj-atenuado { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* Botón primario global: una sola acción principal por bloque */
.btn-pri { background: var(--tk-acc); color: #fff; border: 1px solid var(--tk-acc); font-weight: 600; cursor: pointer; }
.btn-pri:hover { background: var(--tk-acc-2); border-color: var(--tk-acc-2); }
.btn-pri:disabled { opacity: .6; cursor: not-allowed; }

/* Filtros secundarios plegados (Ley de Hick) */
.mas-filtros { display: inline-block; position: relative; }
.mas-filtros > summary { list-style: none; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #334155; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.mas-filtros > summary::-webkit-details-marker { display: none; }
.mas-filtros > summary::after { content: '▾'; font-size: .75em; }
.mas-filtros[open] > summary::after { content: '▴'; }
.mas-filtros-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; }
.mas-filtros-n[hidden] { display: none; }
.mas-filtros-cuerpo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.herr .mas-filtros > summary { min-height: 40px; border-radius: 9px; font-size: .9375rem; }
.herr .mas-filtros[open] { flex-basis: 100%; order: 1; }
@media (max-width: 760px) { .mas-filtros, .mas-filtros > summary { width: 100%; } .mas-filtros-cuerpo > select { flex: 1 1 45%; } }