/* ═══════════════════════════════════════════════════════════════
   SMOOTH SCROLL — DESKTOP ONLY
   Aplica scroll suave a todos los contenedores de scroll en
   escritorio. Se desactiva si el usuario prefiere movimiento reducido.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .tab-content,
  #tab-agenda.tab-content,
  #tab-agenda.calendar-grid-view .calendar-main,
  #tab-agenda.upcoming-card-expanded .calendar-sidebar,
  #tab-agenda .calendar-sidebar {
    scroll-behavior: smooth;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. APP SHELL, SIDEBAR Y HEADER
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
  width: 100%;
  max-width: 1640px;
  /* ← ANTES: 1440px. Aumenta el ancho máximo útil */
  height: calc(100vh - 16px);
  /* ← Ajustado para compensar el nuevo padding */
  background: var(--bg);
  border-radius: var(--radius-shell);
  display: flex;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  position: relative;
  z-index: 10;
  transition: transform var(--transition);
}

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-header {
  height: var(--header-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.logo-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
  background: var(--text-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  transition: transform 0.3s ease;
}

.logo-icon svg {
  width: 22px;
  height: 22px;
}

.logo-text {
  font-size: 17px;
  font-weight: 740;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}


.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  overflow: visible;
  white-space: nowrap;
}

.nav-item:hover {
  background: var(--tertiary);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--tertiary);
  color: var(--text-primary);
}

.nav-item.active::before {
  display: none;
}

.nav-item i,
.nav-item svg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

.sidebar-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.version-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.sidebar-bottom-icons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.sidebar-bottom-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.sidebar-bottom-icon:hover {
  background: var(--tertiary);
  color: var(--text-primary);
}

.sidebar-bottom-icon svg {
  width: 20px;
  height: 20px;
}

/* ---------- MOBILE NAV ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 200;
  justify-content: space-around;
  align-items: center;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.mobile-nav-item.active {
  color: var(--text-primary);
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
}

/* ---------- MAIN CONTENT ---------- */
.main-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  margin-left: 0;
}

/* ---------- HEADER ---------- */
.main-header {
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

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

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.breadcrumb-item {
  color: var(--text-secondary);
  transition: color var(--transition), opacity var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item.linkable {
  cursor: pointer;
}

.breadcrumb-item.linkable:hover {
  color: var(--text-primary);
  opacity: 0.95;
}

.breadcrumb-item.active {
  color: var(--white);
  font-weight: 600;
}

[data-theme="light"] .breadcrumb-item.active {
  color: var(--text-primary);
}

[data-theme="light"] .breadcrumb-item:not(.active) {
  color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--white);
}

[data-theme="dark"] .breadcrumb-item:not(.active) {
  color: var(--text-secondary);
}

/* Símbolo ">" */
.breadcrumb-sep {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0.5px);
  opacity: 0.7;
}

[data-theme="dark"] .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .breadcrumb-sep {
  color: rgba(0, 0, 0, 0.25);
}

.btn-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: all var(--transition);
}

.btn-header-icon:hover {
  background: var(--tertiary);
  color: var(--text-primary);
}

.btn-header-icon svg {
  width: 18px;
  height: 18px;
}

.admin-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium),
              border-color var(--motion-duration-fast) var(--motion-ease-premium),
              background var(--motion-duration-fast) var(--motion-ease-premium),
              box-shadow var(--motion-duration-fast) var(--motion-ease-premium);
  will-change: transform;
}

@media (hover: hover) {
  .admin-avatar:hover {
    border-color: var(--border-strong);
    background: var(--tertiary);
  }
}

.admin-avatar:active {
  transform: scale(0.98);
  border-color: var(--border-strong);
  background: var(--tertiary);
}

.admin-avatar .avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.admin-avatar:hover .avatar-circle {
  background: transparent;
  color: var(--text-primary);
}

.admin-avatar .avatar-circle svg {
  width: 18px;
  height: 18px;
}

.admin-avatar .avatar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.admin-avatar .avatar-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium);
}

/* Integración visual al activarse el dropdown: rotar chevron y mantener píldora activa */
.avatar-container:has(.avatar-dropdown.active) .admin-avatar {
  background: var(--bg) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08) !important;
}

.avatar-container:has(.avatar-dropdown.active) .avatar-chevron {
  transform: rotate(180deg);
}

.mobile-only {
  display: none !important;
}

.desktop-only {
  display: inline-flex !important;
}

/* Reglas de especificidad reforzadas para ganarle al display !important de .btn-all-hours de base.css */
.btn-all-hours.mobile-only {
  display: none !important;
}

.btn-all-hours.desktop-only {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════

   20. RESPONSIVE (Media Queries)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #tab-agenda .calendar-body {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }

  #tab-agenda .calendar-main {
    overflow: visible !important;
    flex: none !important;
  }

  #tab-agenda .calendar-sidebar {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    height: auto !important;
  }

  #tab-agenda .calendar-sidebar .card:first-child {
    flex: 1 !important;
    min-width: 260px !important;
  }

  #tab-agenda .calendar-sidebar .card:last-child {
    flex: 0 0 auto !important;
    min-width: 260px !important;
    align-self: flex-start !important; /* Evita que se estire a la par de la primera tarjeta */
  }
}

@media (max-width: 768px) {
  body {
    padding: 0;
    min-height: 0;
    height: 100dvh;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .app-shell {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-nav {
    display: flex;
  }

  .mobile-only {
    display: inline-flex !important;
  }
  .desktop-only {
    display: none !important;
  }

  /* Refuerzo responsivo en móvil para ganarle al display !important de base.css */
  .btn-all-hours.mobile-only {
    display: inline-flex !important;
  }
  .btn-all-hours.desktop-only {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
  }

  /* El overlay en móvil: padding ergonómico para centrado */
  .modal-overlay {
    align-items: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 16px;
  }

  .main-header {
    padding: 0 16px !important; /* Alineación ergonómica perfecta con los laterales de los tabs */
  }



  /* Padding responsivo para que la UI respire ergonómicamente.
     Se añaden 88px abajo para dejar un espacio libre de 16px (idéntico al lateral) por encima de la barra de navegación móvil (72px) */
  .tab-content {
    padding: 24px 16px 88px 16px !important;
    overflow-x: hidden !important; /* Previene desbordamiento horizontal a nivel de página */
  }

  /* Desactivamos el pseudo-elemento bloqueador físico para unificar el espaciado con el padding-bottom */
  .tab-content::after {
    display: none !important;
  }

  .breadcrumbs {
    font-size: 17px;
    font-weight: 700;
    gap: 6px;
  }

  .breadcrumb-item.active {
    font-size: 17px;
    font-weight: 700;
  }

  /* Breadcrumbs responsivos: solo mostrar el ítem activo como título de sección en móvil */
  .breadcrumbs .breadcrumb-item:not(.active),
  .breadcrumbs .breadcrumb-sep {
    display: none !important;
  }

  /* Botón de avatar compacto y circular en móvil */
  .admin-avatar {
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .admin-avatar .avatar-name,
  .admin-avatar .avatar-chevron {
    display: none !important;
  }

  .admin-avatar .avatar-circle {
    margin: 0 !important;
  }

  .calendar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .calendar-nav-group {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .calendar-title {
    font-size: 18px !important; /* Ligeramente más destacado para un peso de título ideal */
    font-weight: 600 !important;
    margin-left: 0 !important; /* Sin margen porque ahora lidera a la izquierda */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-primary) !important;
    order: -1 !important; /* Coloca la fecha magnéticamente a la izquierda */
    flex: 1 !important; /* Empuja de manera fluida los controles de navegación a la derecha */
    text-align: left !important;
  }

  #cal-today {
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .calendar-nav-arrows {
    height: 42px !important;
    border-radius: var(--radius-md) !important;
  }

  .calendar-nav-arrows .btn-icon-sm {
    width: 36px !important;
    height: 36px !important;
    border-radius: calc(var(--radius-md) - 2px) !important;
  }

  @media (max-width: 480px) {
    #cal-today svg {
      display: none !important; /* Oculta el icono para ahorrar espacio en móviles ultra compactos */
    }
    #cal-today {
      padding: 0 12px !important; /* Padding ergonómico ultra compacto */
      width: auto !important; /* Ancho dinámico ajustado a la palabra "Hoy" */
      font-size: 13px !important;
    }
  }

  .calendar-actions {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Selector de vista con altura ergonómica a juego y ancho completo */
  .view-selector {
    width: 100% !important;
    flex: 1 !important;
    height: 42px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    border-radius: var(--radius-md) !important;
    padding: 2px !important;
    gap: 2px !important;
  }

  /* Comprimir los botones de Día, 3 Días, Semana, Mes, Año en móvil */
  .view-btn {
    height: 34px !important; /* 42px - 4px padding - 4px border = 34px */
    padding: 0 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: calc(var(--radius-md) - 2px) !important;
  }

  /* Evitar que el botón de expandir/desactivar horas se desborde y asegurar que sea cuadrado */
  .btn-all-hours {
    margin-left: 0 !important; /* Anula el margin-left: auto de desktop */
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important; /* Forzar ancho mínimo de 42px para ser un cuadrado perfecto */
    max-width: 42px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box !important;
  }

  /* Comprimir el botón de Bloquear */
  .calendar-actions .btn-outlined {
    padding: 6px 12px !important;
    font-size: 14px !important;
    flex-shrink: 0;
    /* Evita que el botón se aplaste y pierda forma */
  }

  /* Truco: Cambiar el texto a solo "Bloquear" en celulares */
  .calendar-actions .btn-outlined span {
    display: none;
    /* Oculta "Bloquear días" */
  }

  .calendar-actions .btn-outlined::after {
    content: "Bloquear días";
    /* Reemplaza con una palabra más corta */
    margin-left: 4px;
  }

  #tab-agenda .calendar-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Evita scrolls laterales y barras temporales por animación en móvil */
  }

  #tab-agenda .calendar-sidebar {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important; /* Eliminamos el margen para que el espaciado lo maneje el padding-bottom de .tab-content */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
  }

  /* Próximas citas en móvil: por defecto colapsada con scroll o expandida totalmente */
  #tab-agenda .calendar-sidebar .card:first-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  /* Por defecto (colapsado): mostramos hasta 3.5 citas con scroll interno en móvil si supera ese límite */
  #tab-agenda:not(.upcoming-card-expanded) .calendar-sidebar .upcoming-list {
    flex: none !important;
    height: auto !important;
    max-height: 255px;
    overflow-y: auto !important;
    transition: max-height var(--motion-duration-slow) var(--motion-ease-premium);
  }

  /* Expandido: crece responsivamente hasta ajustarse a las citas actuales */
  #tab-agenda.upcoming-card-expanded .calendar-sidebar .upcoming-list {
    flex: none !important;
    height: auto !important;
    max-height: 2000px;
    overflow-y: auto !important;
    transition: max-height var(--motion-duration-slow) var(--motion-ease-premium);
  }

  /* Resumen: tamaño fijo, nunca crece */
  #tab-agenda .calendar-sidebar .card:last-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important; /* Restablece para ocupar todo el ancho en columna */
  }

  .card,
  .card-lg {
    padding: 16px 16px 20px 16px !important; /* Restablecido a padding ergonómico original para que el contenido respire */
  }

  /* Reducir padding interno del calendario en móvil de forma ergonómica */
  .calendar-container {
    padding: 12px 12px 16px 12px !important; /* Balance perfecto de spacing */
  }

  #tab-agenda .calendar-sidebar .card {
    min-width: 0 !important;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .connections-grid {
    grid-template-columns: 1fr;
  }

  /* Modales centrados en móvil (heredan layout de desktop) */
  .modal {
    max-height: min(90vh, 90dvh);
    align-self: center;
  }


  .blacklist-input-row {
    flex-direction: column;
  }

  .summary-metrics {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
  }



  /* ==========================================
     FIX: TABLAS RESPONSIVAS TIPO "TARJETA"
     ========================================== */
  .table-wrapper {
    overflow-x: hidden;
    /* Elimina la barra de scroll horizontal */
    background: transparent;
    border: none;
    padding: 0;
  }

  /* Cambiamos el comportamiento de tabla a bloques */
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  /* Ocultamos las cabeceras tradicionales de la tabla */
  .data-table thead {
    display: none;
  }

  /* Cada fila (tr) ahora parecerá una tarjeta independiente */
  .data-table tr {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    margin-bottom: 16px;
    padding: 8px 0;
    /* FIX 1: Evitar que el outline/borde se corte a los lados en pantallas estrechas */
    width: auto;
    margin-left: 4px;
    margin-right: 4px;
  }

  .data-table tr:hover td {
    background: transparent;
    /* Quitamos el hover gris general en móvil */
  }

  /* Cada celda (td) se vuelve una fila flexible */
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    border-bottom: none;
    padding: 12px 20px;
  }

  .data-table td:last-child {
    border-bottom: none;
  }

  /* FIX 2: Restablecer bordes inferiores divisores en la última tarjeta (anulando el border-bottom: none heredado de desktop) */
  .data-table tr:last-child td {
    border-bottom: none;
  }

  .data-table tr:last-child td:last-child {
    border-bottom: none;
  }

  /* ==========================================================================
     UNIFICACIÓN Y CONSISTENCIA: TABLAS Y TARJETAS (CLIENTES/SERVICIOS) EN MÓVIL
     ========================================================================== */
  .cs-table-wrapper {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important; /* Eliminamos el padding para unificar el espaciado con el padding-bottom de .tab-content */
  }

  .cs-data-table thead {
    display: none !important;
  }

  .cs-col-fixed {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  .cs-col-label {
    display: block !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
  }

  .cs-col-value {
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .cs-col-badge-wrapper {
    display: inline-flex !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  /* Asegurar que todas las tarjetas mantengan el outline de 1px idéntico en móvil, anulando los de desktop */
  .cs-data-table tbody tr,
  .cs-data-table tbody tr:last-child {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--card-bg) !important;
  }





}



/* ═══════════════════════════════════════════════════════════════
   21. SIDEBAR COLLAPSE
   ═══════════════════════════════════════════════════════════════ */

/* --- Sidebar necesita width explícito para animar --- */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Estado colapsado --- */
.sidebar.collapsed {
  width: 72px;
  min-width: 72px;
}

/* --- Logo: ocultar texto, mantener icono --- */
.sidebar-logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  overflow: hidden;
  /* necesario para colapso */
  white-space: nowrap;
  /* necesario para colapso */
}

.logo-text {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width: 160px;
  opacity: 1;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}

.sidebar.collapsed .logo-text {
  max-width: 0;
  opacity: 0;
}

/* --- Nav items: ocultar texto, mantener icono --- */
.nav-item span:not(.tab-badge) {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

/* --- Estado colapsado: SIN CAMBIOS DE PADDING O JUSTIFY --- */
/* Los iconos no se moverán porque el padding-left 16px + 40px slot = 36px (centro de 72px) */
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-item span:not(.tab-badge) {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 72px;
  /* Mantenlo fuera del área colapsada */
}

.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .nav-item {
  padding-left: 16px;
  /* Se mantiene igual */
}

/* Eliminar las reglas redundantes que causaban brincos */


/* NUEVO: evitar que el texto se filtre con overflow visible */
.sidebar.collapsed .nav-item span:not(.tab-badge) {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* --- Footer: ocultar suavemente --- */
.version-label {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width: 100px;
  opacity: 1;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}

.sidebar.collapsed .version-label {
  max-width: 0;
  opacity: 0;
}

.sidebar.collapsed .sidebar-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* --- Icono del botón menú: rotar --- */
.sidebar-collapse-toggle svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed .sidebar-collapse-toggle svg {
  transform: rotate(180deg);
}

/* --- Tooltips en modo colapsado (Desactivados en favor de TooltipModule JS Premium) ---
.sidebar.collapsed .nav-item[data-tooltip] {
  position: relative;
}

.sidebar.collapsed .nav-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 999;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
*/

/* --- CRÍTICO: Main content se ajusta al sidebar --- */
.main-content {
  flex: 1;
  min-width: 0;
  /* El suavizado se hereda de la transición de ancho del sidebar */
}

/* ============================================
   COLLAPSED SIDEBAR: ROUNDED ACTIVE INDICATOR
   (Cuadro redondeado detrás del icono, estilo logo)
   ============================================ */

/* 1. Quitar el fondo rectangular completo en modo colapsado */
.sidebar.collapsed .nav-item.active,
.sidebar.collapsed .nav-item:hover {
  background: transparent;
}

/* 2. Crear el cuadro redondeado detrás del icono */
.sidebar.collapsed .nav-item.active::before,
.sidebar.collapsed .nav-item:hover::before {
  display: block;
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  left: 16px;
  /* Coincide con el padding-left del nav-item */
  top: 50%;
  transform: translateY(-50%);
  background: var(--tertiary);
  border-radius: var(--radius-md);
  /* 12px — igual que .logo-icon */
  z-index: 0;
}

/* 3. Asegurar que el icono quede POR ENCIMA del cuadro */
.sidebar.collapsed .nav-item i,
.sidebar.collapsed .nav-item svg {
  position: relative;
  z-index: 1;
}

/* ============================================
   FIX: CALENDARIO AJUSTADO A PANTALLA (ESCRITORIO)
   ============================================ */
@media (min-width: 1025px) {

  /* 1. Mantenemos el scroll en auto + gutter siempre. 
        Esto evita el "salto horizontal" al cambiar de modo */
  #tab-agenda.tab-content {
    overflow-y: auto !important;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    padding-top: 0 !important;
    /* Le quitamos el espacio muerto arriba... */
  }

  /* 2. ...Y se lo devolvemos al header para no dañar la estética.
        Convertimos el margin en padding para que el fondo sólido no deje huecos */
  #tab-agenda .calendar-header {
    padding-top: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
  }

  /* 3. Convertimos el espacio principal del calendario en un Flexbox rígido */
  .calendar-main {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* 4. Quitamos el min-height y hacemos que tome el 100% del alto sobrante */
  .calendar-container {
    min-height: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  /* 5. Forzamos a FullCalendar a que llene el 100% de ese contenedor flexible */
  .fc {
    height: 100%;
    flex: 1;
    min-height: 0;
  }
}


/* ============================================
   FIX: ANIMACIÓN DE TEXTO "CLEAN LOOK" AL COLAPSAR
   ============================================ */
.sidebar.collapsed .logo-text {
  position: static !important;
  /* Evita que el texto salte de su contenedor */
  max-width: 0 !important;
  /* Se comprime usando la transición que ya tenías */
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════

   24. VISTAS DE CUADRÍCULA (GRID)
   ═══════════════════════════════════════════════════════════════ */

/* ── Reglas compartidas (todas las pantallas) ── */

/* El body mantiene su layout flex rígido — NO se libera */
#tab-agenda.calendar-grid-view .calendar-body {
  min-height: 0;
}

/* CLAVE: Solo el calendar-main hace scroll, el sidebar queda inmóvil */
#tab-agenda.calendar-grid-view .calendar-main {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  min-height: 0;
}

/* Mes: se estira para igualar al sidebar (hereda flex:1 de las reglas base desktop) */
#tab-agenda.calendar-month-view .calendar-container,
#tab-agenda.calendar-month-view .fc {
  min-height: 0;
}

/* Año: altura natural, calendar-main hace scroll */
#tab-agenda.calendar-year-view .calendar-container,
#tab-agenda.calendar-year-view .fc {
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

/* Romper el scroll interno de FullCalendar para que el scroll
   lo maneje .calendar-main y NO un scroller interno de FC */
#tab-agenda.calendar-year-view .fc-scroller,
#tab-agenda.calendar-year-view .fc-scroller-liquid,
#tab-agenda.calendar-year-view .fc-scroller-liquid-absolute {
  overflow: visible !important;
  position: relative !important;
}

/* ── DESKTOP: Sticky header y cabeceras de día ── */
@media (min-width: 1025px) {

  /* El tab-agenda NO debe hacer scroll propio en grid views */
  #tab-agenda.calendar-grid-view {
    overflow-y: hidden !important;
  }

  /* 1. Header del calendario: sticky respecto a tab-agenda */
  #tab-agenda.calendar-grid-view .calendar-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: var(--bg-main) !important;
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-shadow: none;
  }

  /* 3. Cabeceras de día (Lun, Mar, Mié...): sticky dentro de .calendar-main */
  #tab-agenda.calendar-grid-view .fc .fc-scrollgrid-section-header th {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background-color: var(--card-bg) !important;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  }
}

/* ── MOBILE / TABLET ── */
@media (max-width: 1024px) {

  /* En móvil el layout es vertical, todo fluye normalmente */
  #tab-agenda.calendar-grid-view .calendar-main {
    overflow: visible !important;
  }

  /* Cabeceras de día: sticky al tope de la pantalla */
  #tab-agenda.calendar-grid-view .fc .fc-scrollgrid-section-header th {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background-color: var(--card-bg) !important;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
}

/* ==========================================
   MOBILE: Tarjeta de Resumen (tamaño fijo)
   ========================================== */
@media (max-width: 768px) {

  /* Header del resumen con mejor spacing */
  .calendar-sidebar .card:last-child .card-header.summary-header {
    gap: 12px;
    margin-bottom: 10px;
  }

  /* Selector de período: botones compactos */
  .calendar-sidebar .summary-period-selector {
    padding: 2px !important;
    gap: 2px !important;
  }

  .calendar-sidebar .summary-period-selector .btn {
    padding: 10px 4px !important;
    font-size: 11px !important;
  }

  /* Grid de métricas */
  .calendar-sidebar .summary-metrics-grid {
    gap: 8px !important;
    padding: 4px 0;
  }

  /* Metric cards */
  .calendar-sidebar .metric-card {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: var(--radius-md);
  }

  .calendar-sidebar .metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
  }

  .calendar-sidebar .metric-icon svg {
    width: 16px;
    height: 16px;
  }

  .calendar-sidebar .metric-value {
    font-size: 1.15rem !important;
    line-height: 1.1;
  }

  .calendar-sidebar .metric-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.2px !important;
    margin-top: 2px;
  }
}

/* ── Pantallas muy pequeñas ── */
@media (max-width: 480px) {

  .calendar-sidebar .summary-period-selector .btn {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   FIX: PRÓXIMAS CITAS EXPANDIDO (SIDEBAR ESCRITORIO)
   ========================================================================== */
@media (min-width: 1025px) {
  #tab-agenda.upcoming-card-expanded .calendar-sidebar {
    overflow-y: auto !important;
    padding-bottom: 2px !important; /* Ajuste microscópico de 2px para alineación perfecta al píxel con el borde del calendario */
  }

  #tab-agenda.upcoming-card-expanded .calendar-sidebar .card:first-child {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
  }

  #tab-agenda.upcoming-card-expanded .calendar-sidebar .upcoming-list {
    flex: none !important;
    height: auto !important;
    max-height: 2000px;
    overflow-y: auto !important;
    transition: max-height var(--motion-duration-slow) var(--motion-ease-premium);
  }

  #tab-agenda:not(.upcoming-card-expanded) .calendar-sidebar .upcoming-list {
    max-height: 450px;
    transition: max-height var(--motion-duration-slow) var(--motion-ease-premium);
  }
}

/* ── RESPONSIVE HORIZONTAL DE CELULARES (Low height) ── */
@media (max-height: 540px) {
  .tab-content {
    padding-bottom: 96px !important; /* Espacio extra abajo para que todo el contenido sea scrollable y visible */
  }
  .sidebar-nav {
    overflow-y: auto !important; /* Permite scroll vertical en el sidebar si la pantalla es muy baja */
  }

  /* Restablecer comportamiento de tabla para Clientes, Servicios e Historial en horizontal */
  .cs-table-wrapper {
    border: 1px solid var(--border) !important;
    background: var(--card-bg) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }

  .cs-data-table {
    display: table !important;
    width: max-content !important; /* Hace que la tabla sea más ancha y habilite scroll lateral */
    min-width: 100% !important;
    table-layout: auto !important; /* Permite que las columnas se expandan libremente */
  }

  .cs-data-table thead {
    display: table-header-group !important;
  }

  .cs-data-table tbody {
    display: table-row-group !important;
  }

  .cs-data-table tr {
    display: table-row !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
  }

  .cs-data-table td,
  .cs-data-table th {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap !important; /* Evita que el texto de las celdas se corte o se divida en líneas */
    text-align: left !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .cs-col-fixed {
    position: sticky !important;
    left: 0 !important;
    z-index: var(--z-base) !important;
    background: var(--card-bg) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06) !important;
  }

  .cs-col-label {
    display: none !important;
  }

  .cs-col-badge-wrapper {
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .cs-data-table tbody tr,
  .cs-data-table tbody tr:last-child {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .cs-data-table tbody tr:last-child {
    border-bottom: none !important;
  }

  /* Desactivar hover gris en celdas de clients/services si procede, pero mantener en citas */
  #clients-table tbody tr:hover td,
  #services-table tbody tr:hover td {
    background: transparent !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   20. INDICADORES DE ACCIONES PENDIENTES EN TABS (BADGES)
   ═══════════════════════════════════════════════════════════════ */

/* Estilos Generales de los Badges */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: all var(--transition);
  z-index: 10;
  user-select: none;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Sidebar Nav Item Badge (Expandido) */
/* Contenedor relativo para iconos en Sidebar */
.sidebar-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
}

/* Posicionamiento del Badge en Sidebar (tanto expandido como colapsado) */
.sidebar-icon-wrapper .tab-badge {
  position: absolute;
  top: 4px;
  left: 24px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--sidebar-bg); /* Borde del mismo color que el sidebar para separar */
}

/* Badges tipo Punto (Dot) - Usados en Agente */
.tab-badge.badge-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  max-width: 14px;
  min-height: 14px;
  max-height: 14px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.tab-badge.badge-dot-danger {
  background-color: var(--danger);
  color: #FFFFFF;
}

.tab-badge.badge-dot-warning {
  background-color: var(--warning);
  color: #FFFFFF; /* Cambiado a blanco para homogeneidad visual y consistencia de contraste con el fondo ámbar */
}

/* Icono SVG dentro del badge */
.tab-badge .badge-icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  display: block;
}

/* Badges tipo Número - Usados en Datos */
.tab-badge.badge-number {
  width: 14px;
  height: 14px;
  min-width: 14px;
  max-width: 14px;
  min-height: 14px;
  max-height: 14px;
  padding: 0;
  font-size: 9px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  color: #FFFFFF;
  background-color: var(--accent);
}

/* Contenedor relativo para iconos en Móvil */
.mobile-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* Posicionamiento flotante del Badge en Móvil */
.mobile-icon-wrapper .tab-badge {
  position: absolute;
  top: -3px;
  right: -5px;
  box-shadow: 0 0 0 2px var(--bg); /* Borde del mismo color que el fondo del nav en móvil */
}

.mobile-icon-wrapper .tab-badge.badge-number {
  width: 12px;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  padding: 0;
  font-size: 8px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

.mobile-icon-wrapper .tab-badge.badge-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.mobile-icon-wrapper .tab-badge .badge-icon {
  width: 8px;
  height: 8px;
}


/* ═══════════════════════════════════════════════════════════════