/* ============================================================================
   Synaptix CRM — Componentes UI reutilizables
   ============================================================================ */

/* --- Card --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--color-accent);
}

.badge-success { background: rgba(22,163,74,.12); color: var(--color-success); }
.badge-warning { background: rgba(234,88,12,.12); color: var(--color-warning); }
.badge-danger  { background: rgba(220,38,38,.12);  color: var(--color-danger); }
.badge-purple  { background: rgba(124,58,237,.12); color: var(--color-purple); }
.badge-teal    { background: rgba(13,148,136,.12); color: var(--color-teal); }
.badge-muted   { background: var(--border-color);  color: var(--text-secondary); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

/* --- Kanban --- */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.kanban-col {
  flex: 0 0 250px;
  width: 250px;
  max-width: 250px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 4px 8px;
  border-bottom: 2px solid var(--border-color);
  overflow-wrap: break-word;
}

.kanban-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  cursor: grab;
  border: 1px solid var(--border-color);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: .5;
}

/* Vista Deadline de Tareas (tablero tipo Trello, ver TASK_DEADLINE_BUCKETS en tasks.js) —
   encabezado de columna con el color de fondo propio de cada bucket (Overdue/Due today/etc.),
   texto blanco para que se lea sobre cualquiera de los colores. */
.task-deadline-col-header {
  color: #fff;
  border-radius: var(--radius-sm);
  border-bottom: none;
  padding: 6px 8px;
}
.task-deadline-col-count {
  background: rgba(255, 255, 255, .3);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
}
.task-deadline-col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Kanban por estado de Tareas, y de Leads/Negocios/Facturas (paginado por columna con "Cargar
   más" — mismo criterio que el tablero Deadline de arriba). */
.task-kanban-col-count,
.lead-kanban-col-count,
.deal-kanban-col-count,
.invoice-kanban-col-count,
.ticket-kanban-col-count {
  color: var(--text-secondary);
  font-size: 12px;
  margin-left: 4px;
}
.task-kanban-col-body,
.lead-kanban-col-body,
.deal-kanban-col-body,
.invoice-kanban-col-body,
.ticket-kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

/* --- Card de Lead (estilo Bitrix): nombre, valor, fecha, estado de tarea (Fase 7, aún sin
   datos) y pie con "+ Actividad" / responsable --- */
.lead-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lead-card-value {
  font-size: 12px;
  color: var(--text-primary);
  margin-top: 2px;
}

.lead-card-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Contacto/Compañía vinculado — mismo lugar en las 3 tarjetas (Leads/Deals/Facturas
   comparten esta clase, ver el docblock de arriba), justo debajo del título. */
.lead-card-customer {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lead-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

.lead-card-activity-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
}

.lead-card-activity-btn .icon-svg {
  width: 12px;
  height: 12px;
}

.lead-card-responsable {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-activity-popover {
  min-width: 280px;
  padding: 10px;
}

/* --- Data table --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.data-table th, .data-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table th {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  cursor: default;
  user-select: none;
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr.row-selected {
  background: rgba(22,163,74,.10);
}

.data-table tbody tr.row-selected:hover {
  background: rgba(22,163,74,.16);
}

.data-table th.sortable-column {
  cursor: pointer;
}

.data-table th.sortable-column:hover {
  color: var(--color-accent);
}

/* Columnas movibles (a partir de "Nombre") en el estándar de listados — ver setupColumnDragAndDrop() en customers.js. */
.data-table th.draggable-column {
  cursor: grab;
}

.data-table th.dragging-column {
  opacity: .4;
}

.data-table th.drag-over-column {
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.data-table-wrapper {
  overflow-x: auto;
}

/* "Fusionar duplicados" (Contactos, estilo Bitrix24) — grilla Campo/Resultado/N columnas de
   contacto, ver renderMergeGrid() en contacts.js. */
.merge-contacts-table th,
.merge-contacts-table td {
  vertical-align: top;
  white-space: normal;
}

.merge-contacts-table .merge-result-col {
  background: var(--bg-hover);
  font-weight: 600;
  min-width: 160px;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 35, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px;
  transform: translateY(-10px);
  transition: transform .15s ease;
}

.modal-wide {
  max-width: 720px;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* --- Slide panel (estilo Bitrix: clic en un registro abre un panel lateral
   deslizante en vez de navegar a otra página) --- */
.slide-panel-overlay {
  justify-content: flex-end;
  align-items: stretch;
  background: rgba(15, 25, 35, .35);
}

.slide-panel-overlay .modal.slide-panel {
  border-radius: 0;
  max-width: 640px;
  width: 640px;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  transform: translateX(100%);
  transition: transform .2s ease;
  position: relative;
}

.slide-panel-overlay.active .modal.slide-panel {
  transform: translateX(0);
}

/* Panel anidado (ej. ficha de Responsable abierta desde dentro de la ficha de
   Compañía) — más angosto, z-index mayor, se superpone al panel de atrás sin
   cerrarlo. */
.slide-panel-overlay.slide-panel-nested {
  z-index: 1100;
  background: transparent;
}

.slide-panel-overlay.slide-panel-nested .modal.slide-panel {
  max-width: 420px;
  width: 420px;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
}

/* position: fixed (no absolute relativo a .modal) a propósito: .modal tiene
   overflow-y: auto, y por el mismo comportamiento del spec CSS que ya nos
   mordió con los menús ⋮ de fila (overflow-y: auto fuerza overflow-x a auto
   también), cualquier hijo posicionado fuera de la caja del .modal quedaba
   recortado/invisible. Como "fixed", queda anclado al viewport y JS calcula
   su posición (right) según el ancho real del panel — ver setupSlidePanel(). */
.slide-panel-tabs {
  position: fixed;
  top: 16px;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.slide-panel-tabs button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.9);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}

.slide-panel-tabs button:hover {
  background: #fff;
  color: var(--color-accent);
}

/* Ficha de Compañía, Contacto o Usuario: panel ancho de dos columnas
   (formulario + espacio para Actividades/Comentarios/Tareas a futuro), sin
   pestañas de campos — todo el formulario se muestra de corrido, como en
   Bitrix. Cualquier modal nuevo que adopte este mismo estándar (ver "Panel
   de detalle" en CLAUDE.md) solo necesita sumar su #id a esta lista; otros
   paneles anidados nuevos que no necesiten este ancho (ej. una ficha rápida
   futura) mantienen el ancho angosto por defecto al no estar en esta lista. */
#userModal.slide-panel-overlay .modal.slide-panel,
#nestedUserModal.slide-panel-overlay .modal.slide-panel,
#leadModal.slide-panel-overlay .modal.slide-panel,
#dealModal.slide-panel-overlay .modal.slide-panel,
#invoiceModal.slide-panel-overlay .modal.slide-panel,
#contactModal.slide-panel-overlay .modal.slide-panel,
#companyModal.slide-panel-overlay .modal.slide-panel,
#taskModal.slide-panel-overlay .modal.slide-panel,
#ticketModal.slide-panel-overlay .modal.slide-panel,
#nestedContactViewModal.slide-panel-overlay .modal.slide-panel,
#nestedAccountViewModal.slide-panel-overlay .modal.slide-panel,
#courseDetailModal.slide-panel-overlay .modal.slide-panel,
#courseFormModal.slide-panel-overlay .modal.slide-panel {
  width: 1100px;
  max-width: 95vw;
}


/* Pestañas superiores del registro (Vista 360°, ver customers.js) — separadas de .tabs a
   propósito, para no heredar el display:none de arriba (esas ocultan las pestañas de campos
   dentro del formulario; estas cambian entre el formulario y un módulo distinto). */
.slide-panel-toptabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.slide-panel-toptabs .top-tab {
  padding: 7px 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.slide-panel-toptabs .top-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.slide-panel-module-placeholder {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Pestañas de tipo de nota en el composer de la Vista 360° (Recuadro 2, estilo Bitrix:
   Activity|Comment|...|More) — igual que .slide-panel-toptabs, con su propia clase para no
   heredar reglas de .tabs/.tab pensadas para otro contexto. */
.note-type-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.note-type-tabs .note-type-tab {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.note-type-tabs .note-type-tab.active {
  color: #fff;
  background: var(--color-accent);
}

.slide-panel-columns {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.slide-panel-form-col {
  flex: 1 1 0;
  min-width: 0;
}

.slide-panel-activity-col {
  display: none;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  min-height: 100%;
  padding: 16px;
}

#userModal.slide-panel-overlay .slide-panel-activity-col,
#nestedUserModal.slide-panel-overlay .slide-panel-activity-col,
#leadModal.slide-panel-overlay .slide-panel-activity-col,
#dealModal.slide-panel-overlay .slide-panel-activity-col,
#invoiceModal.slide-panel-overlay .slide-panel-activity-col,
#contactModal.slide-panel-overlay .slide-panel-activity-col,
#companyModal.slide-panel-overlay .slide-panel-activity-col,
#taskModal.slide-panel-overlay .slide-panel-activity-col,
#ticketModal.slide-panel-overlay .slide-panel-activity-col,
#nestedContactViewModal.slide-panel-overlay .slide-panel-activity-col,
#nestedAccountViewModal.slide-panel-overlay .slide-panel-activity-col {
  display: block;
}

/* Barra de herramientas del editor de "Plantillas" de Cursos (ver templates.php/
   course-templates.js) — negrilla/itálica/subrayado/tachado/tamaño/listas/alineación/link
   sobre un <div contenteditable class="note-editable">. */
.course-template-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.course-template-toolbar select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.course-template-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 2px;
}

/* Panel anidado completo de Contacto/Compañía (ver nested-contact-panel.js/
   nested-account-panel.js) — pestañas de registros relacionados (Leads/Deals/Facturas/
   Tickets/Tareas/Contactos), listas simples de solo lectura, y timeline de Actividad. */
.nested-related-list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.nested-related-list-item:last-child {
  border-bottom: none;
}

.nested-related-list-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
}

.nested-related-list-item-title:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.nested-related-list-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.nested-activity-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.nested-activity-item:last-child {
  border-bottom: none;
}

.nested-activity-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* --- Contactos de la empresa (panel de detalle de Compañía) --- */
.company-contact-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.company-contact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.company-contact-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}

.company-contact-card-name:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.company-contact-card-action {
  flex-shrink: 0;
  padding: 4px 8px;
}

.company-contact-card-line {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
}

/* --- Subtareas (panel de detalle de Tarea, Fase 7.3a) --- */
.task-subtask-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.task-subtask-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-subtask-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}

.task-subtask-card-name:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.task-subtask-card-line {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
}

/* --- Indicador "Subtarea de" en el Kanban (Fase 7.3a) --- */
.task-card-parent-badge {
  color: var(--text-secondary);
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La tira de pestañas ya trae su propio botón "✕" — se oculta el de la esquina
   del header para no duplicar la acción de cerrar. */
.slide-panel-overlay .modal-header > button {
  display: none;
}

/* --- Icon rail (navegación estilo Bitrix24) --- */
.icon-rail {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 110;
}

.icon-rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}

.icon-rail-logo img {
  height: 24px;
  max-width: 100%;
}

.icon-rail-nav {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.icon-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-align: center;
}

.icon-rail-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.icon-rail-item.active {
  background: var(--sidebar-active);
  color: #fff;
}

.icon-rail-icon {
  line-height: 1;
}

.icon-rail-svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* --- Ícono de línea inline (botones/etiquetas dentro del contenido, no el riel) --- */
.icon-svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.icon-rail-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

/* --- Submenú horizontal del grupo activo (CRM, Admin) --- */
.group-subnav {
  height: var(--group-subnav-height);
  min-height: var(--group-subnav-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  overflow-x: auto;
}

.group-subnav-item {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.group-subnav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.group-subnav-item.active {
  background: var(--bg-hover);
  color: var(--color-accent);
}

.group-subnav-item-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.group-subnav-item-disabled:hover {
  background: none;
  color: var(--text-muted);
}

.group-subnav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
}

.user-menu-btn {
  background: var(--bg-hover);
  border-color: transparent;
  border-radius: 20px;
  font-weight: 600;
}

.user-menu-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: #fff;
}

/* --- Topbar --- */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-breadcrumb {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Dashboard --- */
.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Stat card --- */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  color: var(--color-accent);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
}

.stat-card-delta {
  font-size: 12px;
  font-weight: 600;
}

.stat-card-delta.positive { color: var(--color-success); }
.stat-card-delta.negative { color: var(--color-danger); }

/* --- Timeline --- */
.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
  font-size: 12px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--bg-card);
}

.timeline-icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--text-secondary);
}

/* Nota (nota/llamada/reunión/email/visita) destacada como su propia tarjeta dentro del
   timeline — el resto de las entradas (creado/editado/etapa_cambiada, etc.) quedan como
   texto plano, sin este fondo. */
.timeline-item-nota {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

/* Mensajes de Tickets con HTML real (importados, ver FluentSupportImporter) truncados a ~6
   líneas de alto — no se puede cortar por cantidad de líneas de texto como en las notas
   planas sin arriesgarse a romper una etiqueta a mitad de camino, así que se usa max-height +
   overflow en su lugar (ver renderTicketNoteContent() en tickets.js). */
.ticket-note-html {
  max-height: 130px;
  overflow: hidden;
  font-size: 13px;
}
.ticket-note-html.expanded {
  max-height: none;
}
.ticket-note-html img {
  max-width: 100%;
  border-radius: 4px;
}

/* Misma idea que .ticket-note-html de arriba, genérica para el resto de los módulos con
   notas (Leads/Deals/Facturas/Tareas/Contactos/Compañías) — ver renderNoteHtmlBlock() en
   app.js. Se deja .ticket-note-html separado en vez de reusar esta (Tickets ya andaba bien
   con la suya, no convenía tocarlo de nuevo). */
.note-html {
  max-height: 130px;
  overflow: hidden;
  font-size: 13px;
}
.note-html.expanded {
  max-height: none;
}
.note-html img {
  max-width: 100%;
  border-radius: 4px;
}

/* Composer de nota con soporte de imagen embebida (piloto: Leads, ver
   buildLeadNoteComposer() en leads.js / enableInlineImagePaste() en app.js) — reemplaza al
   <textarea> plano porque un textarea no puede mostrar un <img>. Mismo look que el textarea
   que reemplaza (borde, tipografía, alto mínimo ~6 filas). */
.note-editable {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  max-height: 320px;
  overflow-y: auto;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 12px;
  border: 1px solid var(--border-color, #d5dbe3);
  border-radius: 4px;
  padding: 8px;
  background: #fff;
}
.note-editable:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted, #8a94a3);
}
.note-editable img {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 6px 0;
}

/* Conversación de WhatsApp pegada como texto plano en una nota (piloto: Leads, ver
   buildWhatsappBubblesFragment()/looksLikeWhatsappExport() en app.js) — burbujas verdes a la
   derecha para el usuario logueado, blancas a la izquierda para el resto, imitando el look de
   WhatsApp. Vive tanto en el composer (.note-editable) como en la nota ya guardada
   (.note-html), así que no se scopea a ninguna de las dos. */
.wa-import {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #e5ddd5;
  border-radius: 6px;
  padding: 10px;
  margin: 6px 0;
}
.wa-bubble {
  max-width: 80%;
  padding: 6px 9px 4px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.wa-them {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 0;
}
.wa-me {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 0;
}
.wa-sender {
  font-weight: 600;
  font-size: 11px;
  color: #1f7a5c;
  margin-bottom: 2px;
}
.wa-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: #111;
}
.wa-time {
  font-size: 10px;
  color: #8a94a3;
  text-align: right;
  margin-top: 2px;
}
.wa-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #fff3cd;
  border: 1px solid #f0d68a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #6b5a1e;
}
.wa-toolbar-btn {
  border: 1px solid #f0d68a;
  background: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #1f2937;
}
.wa-toolbar-btn:hover {
  background: #fef7e0;
}

/* --- Form group --- */
.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(45,125,210,.15);
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--color-danger);
}

.form-error {
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 4px;
}

/* --- Tabs --- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.tab {
  padding: 7px 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* --- FullCalendar: el cursor por defecto de un evento a veces se ve como texto (I-beam) en
   vez de la mano/flecha de un link — se fuerza acá para las vistas Mes/Semana/Día en todos los
   módulos que usan FullCalendar (Tickets, Tareas, Leads, Deals, Facturas, Contactos,
   Compañías). --- */
.fc-event, .fc-event * {
  cursor: pointer !important;
}

/* --- Toast --- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  background: var(--bg-card);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  font-size: 13px;
  animation: toast-in .2s ease;
}

.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-danger); }
.toast-info    { border-left-color: var(--color-accent); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Dropdown --- */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  z-index: 200;
}

.dropdown-menu.open {
  display: block;
}

/* Variante para menús pegados al borde izquierdo de un contenedor (ej. primera
   columna de una tabla) — se abre hacia la derecha en vez de hacia la izquierda,
   para no quedar recortado por el overflow del contenedor. */
/* Menú "porteado" a document.body (ver buildRowMenu/positionPortalMenu en
   customers.js) — posición fija calculada por JS en vez de relativa a un
   ancestro, para no quedar recortado por el overflow de .data-table-wrapper. */
.dropdown-menu-portal {
  position: fixed;
  right: auto;
  /* Por encima de .modal-overlay (1000) y .slide-panel-overlay.slide-panel-nested (1100) —
     este menú se porta a document.body (ver buildCourseStudentEmailButton en courses.js), así
     que si el botón que lo abre vive dentro de un modal, sin este z-index quedaría invisible
     detrás del propio modal aunque display:block ya esté aplicado. */
  z-index: 1200;
}

.dropdown-item {
  display: block;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

/* Encabezado no clickeable dentro de un dropdown-menu (ej. "Contactos" agrupando los imports
   dentro del "Más ▾" de CRM, ver sidebar.php $navGroups['crm']['more']) — separa
   visualmente de los items anteriores con un hairline, salvo que sea el primer elemento. */
.dropdown-category {
  padding: 8px 9px 4px;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.dropdown-category:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--border-color);
}

/* --- Skeleton loading --- */
.skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-hover) 37%, var(--border-color) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --- Export spinner --- */
.export-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: export-spin .8s linear infinite;
}

.export-spinner.done {
  animation: none;
  border-color: var(--color-success);
  border-top-color: var(--color-success);
}

.export-spinner.failed {
  animation: none;
  border-color: var(--color-danger);
  border-top-color: var(--color-danger);
}

/* "Cancelando…": sigue girando (todavía hay actividad real corriendo en el servidor,
   ver blockBackDuringImport/handleStopImport) — solo cambia de color para diferenciarla
   visualmente de la importación normal. "Cancelada": ya se resolvió, deja de girar. */
.export-spinner.cancelling {
  border-top-color: var(--color-warning);
}

.export-spinner.cancelled {
  animation: none;
  border-color: var(--color-warning);
  border-top-color: var(--color-warning);
}

@keyframes export-spin {
  to { transform: rotate(360deg); }
}

/* Spinner inline chico (ej. "Subiendo archivo…" en el timeline de Vista 360°) — mismo giro
   que .export-spinner, tamaño reducido para convivir con texto en una sola línea. */
.spinner-sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: export-spin .8s linear infinite;
}

/* --- Barra de progreso de importación CSV (ver "Detener importación" en CLAUDE.md) ---
   A diferencia del spinner de exportación, acá sí conocemos el total de filas desde el
   paso 1 (row_count), así que se puede mostrar progreso real (determinado) en vez de un
   spinner indefinido — actualizado por polling contra CustomerImportController::progress()
   mientras execute() sigue corriendo en su propia petición. */
.progress-bar-track {
  width: 100%;
  height: 10px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width .3s ease;
}

.progress-bar-fill.success {
  background: var(--color-success);
}

.progress-bar-fill.failed {
  background: var(--color-danger);
}

.progress-bar-fill.cancelling,
.progress-bar-fill.cancelled {
  background: var(--color-warning);
}

/* Mientras se cancela, la barra queda congelada en el último valor conocido — este pulso
   es la única señal de que todavía hay algo corriendo en el servidor (el ROLLBACK). */
.progress-bar-fill.cancelling {
  animation: progress-bar-pulse 1s ease-in-out infinite;
}

@keyframes progress-bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Enlace deshabilitado visualmente durante "Ejecutar importación" (ver
   beginImportExecution() en customer-import.js/user-import.js) — un <a> no tiene
   atributo `disabled` nativo, así que el bloqueo real lo hace el listener que llama
   preventDefault(); esta clase solo comunica el estado al usuario. */
.btn-disabled-link {
  opacity: .5;
  pointer-events: none;
}

/* Vista Calendario (Leads/Deals/Facturas, Fase 3.2c) — evento ya completado
   (crm_{lead,deal,invoice}_notes.completado), sigue visible en el calendario como histórico
   pero se distingue visualmente del resto. Clase genérica compartida por los tres módulos. */
.calendar-event-done {
  opacity: .55;
  text-decoration: line-through;
}

/* Vista Calendario de Tareas: mismos colores que las cabeceras del tablero Deadline
   (TASK_DEADLINE_BUCKETS en tasks.js) — "Completed" (#64748b) para lo ya hecho/completado,
   "Due over two weeks" (#3b82f6) para lo pendiente. Evento por fecha propia de la tarea
   (inicio/vencimiento, ver Task::forCalendarByOwnDates()) = relleno sólido, texto blanco.
   Evento por actividad programada (nota) = solo el texto en ese color, sin relleno. */
.fc-event.calendar-event-task-done {
  background-color: #64748b;
  border-color: #64748b;
  color: #fff;
}
.fc-event.calendar-event-task-pending {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.fc-event.calendar-event-note-done {
  background-color: transparent;
  border-color: transparent;
  color: #64748b;
}
.fc-event.calendar-event-note-pending {
  background-color: transparent;
  border-color: transparent;
  color: #3b82f6;
}
/* Vista Mes de FullCalendar dibuja además un punto de color aparte del texto (no hereda el
   color por CSS solo) — se fuerza a juego con el texto. */
.fc-event.calendar-event-note-done .fc-daygrid-event-dot {
  border-color: #64748b;
}
.fc-event.calendar-event-note-pending .fc-daygrid-event-dot {
  border-color: #3b82f6;
}

/* Vista Calendario de Cursos (ver course-calendar.js) — contenido custom del evento (no el
   `title` plano de FullCalendar) en 3 líneas fijas: código en negrita, luego hora y trainer +
   cantidad de alumnos en gris. */
.course-calendar-event {
  padding: 1px 2px;
  line-height: 1.25;
  overflow: hidden;
}
.course-calendar-event-codigo {
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
}
.course-calendar-event-meta {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Lightbox: ver en grande el comprobante de pago de una factura (Facturación,
   "Acerca del pago") — reutiliza .modal-overlay/.active para el fondo y la
   transición, sin la caja blanca de .modal (acá el contenido es la imagen sola). */
.image-lightbox-overlay {
  z-index: 1200;
  background: rgba(15, 25, 35, .85);
  cursor: zoom-out;
}

.image-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.image-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,.9);
}

/* Tarjeta de PDF embebido en una nota (piloto: Leads, ver buildPdfCard() en app.js) — vive
   tanto en el composer (.note-editable) como en la nota ya guardada (.note-html), así que no
   se scopea a ninguna de las dos. Clic abre .pdf-lightbox-overlay de abajo. */
.pdf-inline-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0;
  cursor: pointer;
  max-width: 100%;
}
.pdf-inline-card:hover {
  background: var(--bg-card);
}
.pdf-inline-card-icon {
  font-size: 16px;
}
.pdf-inline-card-label {
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visor de PDF global (ver openPdfLightbox() en app.js) — mismo overlay/backdrop que
   .image-lightbox-overlay, pero con una caja centrada en vez de la imagen sola, porque acá el
   contenido es un <iframe> a pantalla casi completa. */
.pdf-lightbox-overlay {
  z-index: 1200;
  background: rgba(15, 25, 35, .85);
}
.pdf-lightbox-box {
  width: 90vw;
  height: 90vh;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-lightbox-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.pdf-lightbox-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-lightbox-frame {
  flex: 1;
  border: none;
}

/* Reproductor global de audio/video adjunto (ver openMediaLightbox() en app.js) — mismo
   overlay/backdrop que .pdf-lightbox-overlay. La caja se achica para audio (solo necesita
   lugar para los controles nativos) y crece a modo "casi pantalla completa" para video. */
.media-lightbox-overlay {
  z-index: 1200;
  background: rgba(15, 25, 35, .85);
}
.media-lightbox-box {
  width: 90vw;
  max-width: 640px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.media-lightbox-box.media-lightbox-video {
  max-width: min(90vw, 1100px);
}
.media-lightbox-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.media-lightbox-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #000;
}
.media-lightbox-audio {
  width: 100%;
}
.media-lightbox-video-el {
  width: 100%;
  max-height: 80vh;
  display: block;
}

/* Galería de "Imagen del documento" en Facturas (ver renderInvoicePaymentDocsGallery() en
   invoices.js) — 0+ archivos por factura, arrastrables a la zona de arriba. */
.invoice-payment-doc-dropzone {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  transition: background .1s ease, border-color .1s ease;
}
.invoice-payment-doc-dropzone-over {
  background: var(--bg-hover);
  border-color: var(--color-accent);
}
.invoice-payment-docs-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.invoice-payment-doc-item {
  position: relative;
  width: 96px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  background: var(--bg-card);
}
.invoice-payment-doc-item:hover {
  background: var(--bg-hover);
}
.invoice-payment-doc-item-thumb {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.invoice-payment-doc-item-icon {
  display: block;
  font-size: 28px;
  height: 64px;
  line-height: 64px;
}
.invoice-payment-doc-item-label {
  font-size: 10px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-payment-doc-item-size {
  font-size: 9px;
  color: var(--text-muted);
}
.invoice-payment-doc-item-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 10px;
  cursor: pointer;
}

/* Filas más compactas en la tabla de la pestaña "Cursos" de Contactos — un alumno puede
   tener muchos cursos tomados (repetidos incluidos) y el line-height/padding por defecto de
   .data-table (~17px de line-height + 7px de padding vertical) hace la lista demasiado larga
   para escanear. Solo esta tabla, no .data-table global (usada en todo el resto del CRM). */
.contact-course-table th, .contact-course-table td {
  padding: 0 8px;
  line-height: 1;
  font-size: 12px;
}

/* Inputs de edición inline dentro de la tabla de Cursos (ver buildContactCourseRecordRow()
   en contacts.js) — sin borde visible hasta hover/focus para no verse como un formulario. */
.contact-course-cell-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid transparent;
  background: transparent;
  padding: 1px 3px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  border-radius: 4px;
}
.contact-course-cell-input:hover {
  border-color: var(--border-color);
}
.contact-course-cell-input:focus {
  border-color: var(--color-accent);
  background: var(--bg-card);
  outline: none;
}

/* Galería chica de imágenes/PDF por fila en la pestaña "Cursos" de Contactos (historial
   importado de Bitrix, ver loadContactCourseRecords() en contacts.js) — miniaturas inline
   dentro de la celda "Imagen" de la tabla, no una fila de adjunto aparte. */
.contact-course-record-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.contact-course-record-thumb {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  background: var(--bg-card);
}
.contact-course-record-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-course-record-thumb-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  line-height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 8px;
  cursor: pointer;
}
.contact-course-record-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
}
.contact-course-record-add:hover {
  background: var(--bg-hover);
}

/* Selector múltiple de Usuarios con búsqueda (Tareas: Participantes/Observadores, ver
   initUserMultiPicker() en tasks.js) — chips de seleccionados + desplegable con checkmarks,
   en vez de un <select multiple> nativo (que no distingue visualmente lo seleccionado). */
.user-multi-picker {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px;
}

.user-multi-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.user-multi-picker-chips:empty {
  margin-bottom: 0;
}

.user-multi-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-hover);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
}

.user-multi-picker-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
  padding: 2px;
}

.user-multi-picker-search {
  width: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  padding: 4px 2px;
}

.user-multi-picker-results {
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
}

/* "Exportar PDF" de Reportes (Fase 11.3, ver report-periodo-filter.php) — usa el diálogo de
   impresión del navegador ("Guardar como PDF") en vez de un PDF generado en PHP (el proyecto
   no tiene ninguna librería de PDF instalada). Oculta el chrome de navegación de la app
   (rail lateral/topbar/submenu horizontal) y cualquier elemento marcado `.no-print` (la barra
   de filtros/botones misma — los inputs de fecha y botones no tienen sentido en papel), y
   deja solo el contenido del reporte (KPIs + gráficos). Genérico a toda la app, no solo
   Reportes — imprimir la navegación nunca es útil en ninguna pantalla. */
@media print {
  .icon-rail,
  .group-subnav,
  .topbar,
  .no-print,
  button,
  .btn {
    display: none !important;
  }
  .app-main {
    margin: 0 !important;
    padding: 16px !important;
  }
  body,
  .app-shell {
    background: #fff !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
}