/* ==========================================================================
   LEXA - Site Styles
   Feature: F006 - Mejora Visual y Tema UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

html {
  font-size: 13px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 14.5px;
  }
}

body {
  font-family: var(--lexa-font-family-base);
  color: var(--lexa-gray-900);
  background-color: var(--lexa-bg-body);
  margin-bottom: 60px;
}

/* --------------------------------------------------------------------------
   FOCUS STATES - Accesibilidad
   -------------------------------------------------------------------------- */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--lexa-primary, #6D28D9);
}

/* --------------------------------------------------------------------------
   LAYOUT - Sidebar + Topbar
   -------------------------------------------------------------------------- */

/* --- Sidebar --- */
.lexa-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: var(--lexa-gray-900, #0F172A);
  color: var(--lexa-gray-300, #CBD5E1);
  z-index: var(--lexa-z-fixed, 1030);
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--lexa-transition-slow, 300ms ease),
              width var(--lexa-transition-slow, 300ms ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Reset Bootstrap link color inside sidebar */
.lexa-sidebar a {
  color: inherit;
  text-decoration: none;
}

.lexa-sidebar::-webkit-scrollbar { width: 4px; }
.lexa-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.lexa-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
}

.lexa-sidebar-header--light {
  background: var(--lexa-bg-subtle, #F8FAFC);
  border-bottom: 1px solid var(--lexa-border-color-subtle, rgba(0, 0, 0, 0.06));
}

.lexa-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lexa-white, #fff);
  text-decoration: none;
  font-weight: var(--lexa-font-weight-bold, 700);
  font-size: 1.2rem;
}

.lexa-sidebar-brand:hover { color: var(--lexa-white, #fff); }

.lexa-sidebar-brand i {
  font-size: 1.4rem;
  color: var(--lexa-primary-200, #C4B5FD);
}

/* Marca Lexa "L" (SVG con gradiente) — reemplaza el ícono heart-pulse en el header */
.lexa-sidebar-brand-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.lexa-sidebar-brand-logo {
  max-width: 140px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}

.lexa-sidebar-brand-logo-square,
.lexa-sidebar-brand-fallback {
  display: none;
}


.lexa-sidebar-close {
  background: none;
  border: none;
  color: var(--lexa-gray-400, #94A3B8);
  font-size: 1.1rem;
  padding: 0.25rem;
  cursor: pointer;
}

.lexa-sidebar-close:hover { color: var(--lexa-white, #fff); }

.lexa-sidebar-nav {
  padding: 0.75rem 0 1rem;
}

.lexa-sidebar-section {
  font-size: 0.65rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lexa-gray-500, #64748B);
  padding: 1.25rem 1.25rem 0.5rem;
}

.lexa-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.75rem 1.25rem;
}

.lexa-sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  color: var(--lexa-gray-300, #CBD5E1);
  text-decoration: none;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  transition: all var(--lexa-transition-fast, 150ms ease);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.lexa-sidebar-link:hover {
  color: var(--lexa-white, #fff);
  background: var(--lexa-gray-800, #1E293B);
}

.lexa-sidebar-link.active {
  color: var(--lexa-white, #fff);
  background: rgba(196, 181, 253, 0.1);
  border-left-color: var(--lexa-primary-200, #C4B5FD);
}

.lexa-sidebar-link > i:first-child {
  width: 1.4rem;
  margin-right: 0.75rem;
  font-size: 1.05rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--lexa-gray-400, #94A3B8);
}

.lexa-sidebar-link:hover > i:first-child { color: var(--lexa-gray-200, #E2E8F0); }
.lexa-sidebar-link.active > i:first-child { color: var(--lexa-white, #fff); }

.lexa-sidebar-link > span { flex: 1; }

.lexa-sidebar-badge {
  flex: 0 0 auto !important;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lexa-danger, #DC2626);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-left: 0.5rem;
}

.lexa-sidebar-arrow {
  font-size: 0.65rem;
  transition: transform var(--lexa-transition-base, 200ms ease);
  margin-left: auto;
  color: var(--lexa-gray-500, #64748B);
}

.lexa-sidebar-link[aria-expanded="true"] .lexa-sidebar-arrow {
  transform: rotate(180deg);
}

/* Badge dentro de un item de submenú: lo empuja a la derecha (el submenú no tiene
   el <span flex:1> que sí tiene .lexa-sidebar-link). */
.lexa-sidebar-submenu a .lexa-sidebar-badge {
  margin-left: auto;
}

/* Item del nav bloqueado por el plan comercial: atenuado + candado a la derecha.
   Sigue siendo clickeable (lleva a la misma URL, que renderiza el upsell). */
.lexa-sidebar-submenu a.lexa-nav-locked {
  opacity: 0.55;
}
.lexa-sidebar-submenu a.lexa-nav-locked:hover {
  opacity: 0.8;
}
.lexa-nav-lock-icon {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--lexa-gray-400, #94A3B8);
}

/* Punto de aviso en el encabezado de un grupo del sidebar. Solo visible cuando el
   grupo está colapsado; si está abierto, el badge del item interno ya da el conteo. */
.lexa-sidebar-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--lexa-danger, #DC2626);
}

.lexa-sidebar-link[aria-expanded="true"] .lexa-sidebar-dot {
  display: none;
}

.lexa-sidebar-submenu {
  padding: 0.125rem 0 0.25rem;
}

.lexa-sidebar-submenu a {
  display: flex;
  align-items: center;
  padding: 0.45rem 1.25rem 0.45rem 2.75rem;
  color: var(--lexa-gray-300, #CBD5E1);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: all var(--lexa-transition-fast, 150ms ease);
}

.lexa-sidebar-submenu a:hover {
  color: var(--lexa-gray-200, #E2E8F0);
  background: rgba(255, 255, 255, 0.03);
}

.lexa-sidebar-submenu a.active {
  color: var(--lexa-white, #fff);
  font-weight: var(--lexa-font-weight-medium, 500);
}

.lexa-sidebar-submenu a i {
  width: 1.2rem;
  margin-right: 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--lexa-gray-500, #64748B);
}

.lexa-sidebar-submenu a:hover i { color: var(--lexa-gray-400, #94A3B8); }
.lexa-sidebar-submenu a.active i { color: var(--lexa-white, #fff); }

.lexa-submenu-header {
  font-size: 0.6rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lexa-gray-500, #64748B);
  padding: 0.6rem 1.25rem 0.25rem 2.75rem;
}

.lexa-submenu-header:first-child {
  padding-top: 0.25rem;
}

/* --- Sidebar overlay (mobile) --- */
.lexa-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--lexa-z-fixed, 1030) - 1);
}

.lexa-sidebar-overlay.active { display: block; }

/* --- Topbar --- */
.lexa-topbar {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--lexa-gray-300, #dee2e6);
  z-index: calc(var(--lexa-z-fixed, 1030) - 2);
  transition: left var(--lexa-transition-slow, 300ms ease);
}

.lexa-topbar-full { left: 0; }

.lexa-topbar .navbar-nav {
  flex-direction: row;
  align-items: center;
}

.lexa-topbar .nav-link {
  color: var(--lexa-gray-600, #475569) !important;
  opacity: 1;
  padding: 0.375rem 0.5rem;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  border-radius: var(--lexa-border-radius-sm, 0.25rem);
}

.lexa-topbar .nav-link:hover {
  color: var(--lexa-primary, #6D28D9) !important;
  background: var(--lexa-primary-light, #EDE9FE);
}

.lexa-topbar .dropdown-menu {
  border: none;
  box-shadow: var(--lexa-shadow-lg);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.lexa-topbar .dropdown-item {
  padding: 0.5rem 1rem;
  color: var(--lexa-gray-700);
  font-size: var(--lexa-font-size-sm, 0.875rem);
  transition: all var(--lexa-transition-fast, 150ms ease);
}

.lexa-topbar .dropdown-item:hover,
.lexa-topbar .dropdown-item:focus {
  background-color: var(--lexa-primary-light, #EDE9FE);
  color: var(--lexa-primary, #6D28D9);
}

.lexa-topbar .dropdown-item.active,
.lexa-topbar .dropdown-item:active {
  background-color: var(--lexa-primary, #6D28D9);
  color: var(--lexa-primary-contrast, #ffffff);
}

.lexa-topbar .dropdown-item.active i.bi,
.lexa-topbar .dropdown-item:active i.bi {
  color: var(--lexa-primary-contrast, #ffffff);
}

.lexa-topbar .dropdown-item i.bi {
  margin-right: 0.5rem;
  color: var(--lexa-gray-500);
  width: 1.25em;
  display: inline-block;
}

.lexa-topbar .dropdown-item:hover i.bi {
  color: var(--lexa-primary);
}

.lexa-topbar .dropdown-header {
  color: var(--lexa-gray-700, #334155);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lexa-topbar .dropdown-divider {
  margin: 0.375rem 0;
  border-color: var(--lexa-gray-200);
}

/* Topbar search */
.lexa-topbar-search {
  max-width: 320px;
}

.lexa-topbar-search .position-relative > i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lexa-gray-400);
  font-size: 0.8rem;
  pointer-events: none;
}

.lexa-topbar-search input {
  padding-left: 2.25rem;
  border-radius: 2rem;
  background: var(--lexa-gray-100, #f8f9fa);
  border-color: var(--lexa-gray-300, #dee2e6);
  min-width: 240px;
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.lexa-topbar-search input:focus {
  background: #fff;
}

/* ---------- Command Palette / Global Search ---------- */

.lexa-search-kbd {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  padding: 0.1rem 0.375rem;
  background: var(--lexa-gray-200, #e2e8f0);
  color: var(--lexa-gray-500, #64748b);
  border-radius: 0.25rem;
  border: 1px solid var(--lexa-gray-300, #dee2e6);
  pointer-events: none;
  line-height: 1.2;
  font-family: inherit;
}

.lexa-topbar-search input:focus ~ .lexa-search-kbd,
.lexa-topbar-search input.has-value ~ .lexa-search-kbd {
  display: none;
}

.lexa-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--lexa-gray-200, #e2e8f0);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  box-shadow: var(--lexa-shadow-lg);
  z-index: var(--lexa-z-dropdown, 1000);
  padding: 0.375rem;
}

.lexa-search-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lexa-gray-400, #94a3b8);
  padding: 0.5rem 0.75rem 0.25rem;
}

.lexa-search-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--lexa-border-radius-sm, 0.25rem);
  color: var(--lexa-gray-700, #334155);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  transition: background 150ms ease;
}

.lexa-search-item:hover,
.lexa-search-item.active {
  background: var(--lexa-primary-light, #EDE9FE);
  color: var(--lexa-primary, #6D28D9);
  text-decoration: none;
}

.lexa-search-item i.bi {
  width: 1.25rem;
  text-align: center;
  color: var(--lexa-gray-400, #94a3b8);
  flex-shrink: 0;
}

.lexa-search-item:hover i.bi,
.lexa-search-item.active i.bi {
  color: var(--lexa-primary, #6D28D9);
}

.lexa-search-item-name {
  flex: 1;
}

.lexa-search-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--lexa-gray-400, #94a3b8);
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

/* --- Main content area --- */
body.lexa-app {
  margin-bottom: 0;
  background: var(--lexa-bg-subtle, #F8FAFC);
}

.lexa-main {
  margin-left: 250px;
  padding-top: 56px;
  min-height: 100vh;
  transition: margin-left var(--lexa-transition-slow, 300ms ease);
}

.lexa-main > main {
  padding: 0.5rem 1.5rem 1rem;
}

/* --- Breadcrumb navigation --- */
.lexa-breadcrumb {
  padding: 0.25rem 1.5rem;
}
.lexa-breadcrumb .breadcrumb {
  font-size: 0.8rem;
  background: transparent;
  padding: 0;
}
.lexa-breadcrumb .breadcrumb-item a {
  color: var(--lexa-gray-500, #64748B);
  text-decoration: none;
}
.lexa-breadcrumb .breadcrumb-item a:hover {
  color: var(--lexa-primary, #6D28D9);
  text-decoration: underline;
}
.lexa-breadcrumb .breadcrumb-item.active {
  color: var(--lexa-gray-400, #94A3B8);
}
.lexa-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--lexa-gray-300, #CBD5E1);
}
.lexa-breadcrumb .bi-house-door {
  font-size: 0.85rem;
  vertical-align: -1px;
}

.lexa-main-nosidebar {
  padding-top: 56px;
  min-height: 100vh;
}

.lexa-main-nosidebar > main {
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.lexa-impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.5rem;
  background: #fef3c7;
  color: #78350f;
  border-bottom: 1px solid #f59e0b;
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.lexa-impersonation-banner__message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.lexa-impersonation-banner__message i {
  color: #d97706;
  flex-shrink: 0;
}

/* --- Mobile responsive --- */
@media (max-width: 991.98px) {
  .lexa-sidebar {
    transform: translateX(-100%);
  }

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

  .lexa-topbar {
    left: 0;
  }

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

@media (max-width: 576px) {
  .lexa-impersonation-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.75rem 1rem;
  }
}

@media (min-width: 992px) {
  .lexa-sidebar-close {
    display: none !important;
  }

  /* --- Collapsed sidebar (desktop only) --- */
  .lexa-sidebar.collapsed {
    width: 64px;
    overflow: visible;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-header {
    justify-content: center;
    padding: 1.1rem 0.5rem;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-brand span,
  .lexa-sidebar.collapsed .lexa-sidebar-brand-logo,
  .lexa-sidebar.collapsed .lexa-sidebar-section,
  .lexa-sidebar.collapsed .lexa-sidebar-divider,
  .lexa-sidebar.collapsed .lexa-sidebar-arrow,
  .lexa-sidebar.collapsed .lexa-sidebar-link > span,
  .lexa-sidebar.collapsed .lexa-sidebar-submenu,
  .lexa-sidebar.collapsed .lexa-submenu-header {
    display: none;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-brand-logo-square {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-brand-fallback {
    display: inline-block;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-brand {
    justify-content: center;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-link {
    justify-content: center;
    padding: 0.7rem 0;
    border-left-width: 0;
    position: relative;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-link > i:first-child {
    margin-right: 0;
    font-size: 1.15rem;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-badge {
    position: absolute;
    display: inline-flex;
    top: 0.35rem;
    right: 0.45rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    font-size: 0.58rem;
    margin-left: 0;
  }

  body.sidebar-collapsed .lexa-topbar {
    left: 64px;
  }

  body.sidebar-collapsed .lexa-main {
    margin-left: 64px;
  }

  /* Tooltip on hover for collapsed sidebar links */
  .lexa-sidebar.collapsed .lexa-sidebar-link {
    position: relative;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--lexa-gray-800, #1E293B);
    color: var(--lexa-white, #fff);
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    margin-left: 8px;
    z-index: 9999;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-link:hover::after {
    opacity: 1;
  }

  /* Hide tooltip for links without data-tooltip */
  .lexa-sidebar.collapsed .lexa-sidebar-link:not([data-tooltip])::after {
    display: none;
  }

  /* Flyout submenu on hover (collapsed sidebar) */
  .lexa-sidebar.collapsed .lexa-sidebar-group {
    position: relative;
  }

  /* Override Bootstrap .collapse (display:none) AND .collapsing AND inline height:0 */
  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] {
    display: block !important;
    position: absolute !important;
    left: 64px;
    top: 0;
    width: max-content;
    min-width: 180px;
    z-index: 9999;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] > .lexa-sidebar-submenu {
    display: block !important;
    background: var(--lexa-gray-800, #1E293B);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.5rem 0;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
    /* Safety net: cap to viewport height and scroll internally for menus taller
       than the whole window. JS (site.js) shifts the flyout up so it fits when
       possible; this only kicks in when even a full-height flyout cannot fit. */
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Firefox thin scrollbar (WebKit/Blink use ::-webkit-scrollbar below) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  /* Thin scrollbar for the dark flyout panel */
  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] > .lexa-sidebar-submenu::-webkit-scrollbar {
    width: 6px;
  }
  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] > .lexa-sidebar-submenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] > .lexa-sidebar-submenu a {
    display: block !important;
    padding: 0.4rem 1rem;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] .lexa-submenu-header {
    display: block !important;
    padding: 0.3rem 1rem 0.15rem;
    white-space: nowrap;
  }

  /* Hide tooltip when flyout is showing */
  .lexa-sidebar.collapsed .lexa-sidebar-group:hover > .lexa-sidebar-link::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA - PBI-029: Headings, labels, etc.
   -------------------------------------------------------------------------- */

/* Headings */
h1, .h1 {
  font-size: var(--lexa-font-size-3xl, 1.875rem);
  font-weight: var(--lexa-font-weight-bold, 700);
  line-height: var(--lexa-line-height-tight, 1.25);
  color: var(--lexa-gray-900);
  margin-bottom: var(--lexa-spacing-4, 1rem);
}

h2, .h2 {
  font-size: var(--lexa-font-size-2xl, 1.5rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: var(--lexa-line-height-tight, 1.25);
  color: var(--lexa-gray-900);
  margin-bottom: var(--lexa-spacing-3, 0.75rem);
}

h3, .h3 {
  font-size: var(--lexa-font-size-xl, 1.25rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: var(--lexa-line-height-tight, 1.25);
  color: var(--lexa-gray-800);
  margin-bottom: var(--lexa-spacing-3, 0.75rem);
}

h4, .h4 {
  font-size: var(--lexa-font-size-lg, 1.125rem);
  font-weight: var(--lexa-font-weight-medium, 500);
  line-height: var(--lexa-line-height-base, 1.5);
  color: var(--lexa-gray-800);
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
}

h5, .h5 {
  font-size: var(--lexa-font-size-base, 1rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: var(--lexa-line-height-base, 1.5);
  color: var(--lexa-gray-700);
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
}

h6, .h6 {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: var(--lexa-line-height-base, 1.5);
  color: var(--lexa-gray-600);
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Titulo de pagina con linea decorativa */
.page-title {
  font-size: var(--lexa-font-size-3xl, 1.875rem);
  font-weight: var(--lexa-font-weight-bold, 700);
  color: var(--lexa-gray-900);
  margin-bottom: var(--lexa-spacing-6, 1.5rem);
  padding-bottom: var(--lexa-spacing-3, 0.75rem);
  border-bottom: 2px solid var(--lexa-primary-light, #EDE9FE);
}

/* --------------------------------------------------------------------------
   FORMULARIOS - PBI-029: Labels, inputs, validacion
   -------------------------------------------------------------------------- */

.form-label {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  font-weight: var(--lexa-font-weight-medium, 500);
  color: var(--lexa-gray-700);
  margin-bottom: var(--lexa-spacing-1, 0.25rem);
}

.form-control {
  font-size: var(--lexa-font-size-base, 1rem);
  color: var(--lexa-gray-900);
  border-color: var(--lexa-gray-300, #dee2e6);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  padding: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  transition: border-color var(--lexa-transition-fast, 150ms ease),
              box-shadow var(--lexa-transition-fast, 150ms ease);
}

.form-control:focus {
  border-color: var(--lexa-primary, #6D28D9);
  box-shadow: 0 0 0 0.2rem var(--lexa-primary-light, #EDE9FE);
}

.form-control::placeholder {
  color: var(--lexa-gray-400);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--lexa-gray-100, #f8f9fa);
}

.form-select {
  font-size: var(--lexa-font-size-base, 1rem);
  color: var(--lexa-gray-900);
  border-color: var(--lexa-gray-300, #dee2e6);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  /* Reservar el espacio del chevron a la derecha (Bootstrap usa 2.25rem); si solo se
     deja --lexa-spacing-3 el texto largo de una opción se superpone con la flecha. */
  padding: var(--lexa-spacing-2, 0.5rem) 2.25rem var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
}

.form-select:focus {
  border-color: var(--lexa-primary, #6D28D9);
  box-shadow: 0 0 0 0.2rem var(--lexa-primary-light, #EDE9FE);
}

.form-text {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  color: var(--lexa-gray-500);
  margin-top: var(--lexa-spacing-1, 0.25rem);
}

.invalid-feedback {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  color: var(--lexa-danger, #dc3545);
}

.valid-feedback {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  color: var(--lexa-success, #198754);
}

/* Floating labels */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Checkbox y Radio */
.form-check-input {
  border-color: var(--lexa-gray-400);
}

.form-check-input:checked {
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

.form-check-input:focus {
  border-color: var(--lexa-primary, #6D28D9);
  box-shadow: 0 0 0 0.2rem var(--lexa-primary-light, #EDE9FE);
}

/* Input group */
.input-group-text {
  background-color: var(--lexa-gray-100, #f8f9fa);
  border-color: var(--lexa-gray-300, #dee2e6);
  color: var(--lexa-gray-600);
}

/* --------------------------------------------------------------------------
   BOTONES - PBI-030: Variantes y estados
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lexa-spacing-2, 0.5rem);
  font-size: var(--lexa-font-size-sm, 0.875rem);
  font-weight: var(--lexa-font-weight-medium, 500);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  padding: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-4, 1rem);
  transition: all var(--lexa-transition-fast, 150ms ease);
}

.btn:focus-visible {
  outline: none;
}

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

.btn-lg {
  font-size: var(--lexa-font-size-base, 1rem);
  padding: var(--lexa-spacing-3, 0.75rem) var(--lexa-spacing-6, 1.5rem);
}

.btn-sm {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  padding: var(--lexa-spacing-1, 0.25rem) var(--lexa-spacing-3, 0.75rem);
}

/* Primary */
.btn-primary {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--lexa-primary-hover, #5B21B6);
  border-color: var(--lexa-primary-hover, #5B21B6);
  color: var(--lexa-white, #ffffff);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--lexa-primary-light, #EDE9FE);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

/* Secondary */
.btn-secondary {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-secondary, #6c757d);
  border-color: var(--lexa-secondary, #6c757d);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--lexa-secondary-hover, #5c636a);
  border-color: var(--lexa-secondary-hover, #5c636a);
  color: var(--lexa-white, #ffffff);
}

/* Outline Primary */
.btn-outline-primary {
  color: var(--lexa-primary, #6D28D9);
  background-color: transparent;
  border-color: var(--lexa-primary, #6D28D9);
}

.btn-outline-primary:hover:not(:disabled) {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--lexa-primary-light, #EDE9FE);
}

.btn-outline-primary:active,
.btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

.btn-check:checked + .btn-outline-primary:focus-visible,
.btn-check:focus-visible + .btn-outline-primary {
  box-shadow: 0 0 0 0.25rem var(--lexa-primary-light, #EDE9FE);
}

/* --------------------------------------------------------------------------
   COMPACT SEGMENTED CONTROL (.lexa-segment)
   Track + pastilla activa elevada. Reemplaza al btn-group para toggles chicos.
   Soporta dos variantes de hijos:
     · radio  → <input.btn-check> + <label>  (estado por :checked; accesible)
     · botón  → <button>/<.btn>               (estado por clase .active vía JS)
   Usado en: alertas del dashboard Owner (radio) y selector de modo de la
   agenda Día/Semana (botón).
   -------------------------------------------------------------------------- */
.lexa-segment {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--lexa-gray-100, #f1f5f9);
  border: 1px solid var(--lexa-gray-200, #e2e8f0);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
}

.lexa-segment > label,
.lexa-segment > button {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: 1.4;
  padding: 0.2rem 0.5rem;
  color: var(--lexa-gray-600, #475569);
  background: transparent;
  border: none;
  border-radius: calc(var(--lexa-border-radius-lg, 0.5rem) - 3px);
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.lexa-segment > label:hover,
.lexa-segment > button:not(.active):hover {
  color: var(--lexa-gray-900, #0f172a);
}

.lexa-segment > .btn-check:checked + label,
.lexa-segment > button.active {
  background: var(--lexa-white, #fff);
  color: var(--lexa-primary, #6D28D9);
  box-shadow: var(--lexa-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12));
}

.lexa-segment > .btn-check:focus-visible + label,
.lexa-segment > button:focus-visible {
  outline: 2px solid var(--lexa-primary, #6D28D9);
  outline-offset: 1px;
  box-shadow: none;
}

/* Dark mode: track hundido + pastilla activa en superficie elevada (no usar
   var(--lexa-gray-*) que se remapean a tonos claros bajo dark). */
[data-theme="dark"] .lexa-segment {
  background: var(--lexa-surface-sunken);
  border-color: var(--lexa-border-default);
}

[data-theme="dark"] .lexa-segment > label,
[data-theme="dark"] .lexa-segment > button {
  color: var(--lexa-text-tertiary);
}

[data-theme="dark"] .lexa-segment > label:hover,
[data-theme="dark"] .lexa-segment > button:not(.active):hover {
  color: var(--lexa-text-secondary);
}

[data-theme="dark"] .lexa-segment > .btn-check:checked + label,
[data-theme="dark"] .lexa-segment > button.active {
  background: var(--lexa-surface-overlay);
  color: var(--lexa-text-primary);
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────
   OWNER · Alertas operativas — estado de carga al cambiar de periodo
   (Mes actual ↔ Histórico). Atenúa la lista y muestra un spinner
   centrado mientras llega el conteo, evitando el cambio abrupto.
   ───────────────────────────────────────────────────────────── */
.owner-alerts-list {
  transition: opacity .15s ease;
}
.owner-alerts-body.is-loading .owner-alerts-list {
  opacity: .4;
  pointer-events: none;
}
.owner-alerts-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.owner-alerts-body.is-loading .owner-alerts-spinner {
  display: flex;
}
@media (prefers-reduced-motion: reduce) {
  .owner-alerts-list { transition: none; }
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
}

/* Outline Secondary */
.btn-outline-secondary {
  color: var(--lexa-secondary, #6c757d);
  background-color: transparent;
  border-color: var(--lexa-gray-400, #adb5bd);
}

.btn-outline-secondary:hover:not(:disabled) {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-secondary, #6c757d);
  border-color: var(--lexa-secondary, #6c757d);
}

/* Danger */
.btn-danger {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-danger, #dc3545);
  border-color: var(--lexa-danger, #dc3545);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--lexa-danger-hover, #bb2d3b);
  border-color: var(--lexa-danger-hover, #bb2d3b);
  color: var(--lexa-white, #ffffff);
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--lexa-danger-light, #f8d7da);
}

/* Outline Danger */
.btn-outline-danger {
  color: var(--lexa-danger, #dc3545);
  background-color: transparent;
  border-color: var(--lexa-danger, #dc3545);
}

.btn-outline-danger:hover:not(:disabled) {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-danger, #dc3545);
  border-color: var(--lexa-danger, #dc3545);
}

/* Success */
.btn-success {
  color: var(--lexa-white, #ffffff);
  background-color: var(--lexa-success, #198754);
  border-color: var(--lexa-success, #198754);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--lexa-success-hover, #157347);
  border-color: var(--lexa-success-hover, #157347);
  color: var(--lexa-white, #ffffff);
}

/* --------------------------------------------------------------------------
   TABS - PBI-030: Estilo moderno
   -------------------------------------------------------------------------- */

.nav-tabs {
  border-bottom: 2px solid var(--lexa-gray-200, #e9ecef);
  gap: var(--lexa-spacing-1, 0.25rem);
}

.nav-tabs .nav-link {
  color: var(--lexa-gray-600);
  font-weight: var(--lexa-font-weight-medium, 500);
  font-size: var(--lexa-font-size-sm, 0.875rem);
  padding: var(--lexa-spacing-3, 0.75rem) var(--lexa-spacing-4, 1rem);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  transition: all var(--lexa-transition-fast, 150ms ease);
}

.nav-tabs .nav-link:hover {
  color: var(--lexa-primary, #6D28D9);
  border-bottom-color: var(--lexa-gray-300, #dee2e6);
  background-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--lexa-primary, #6D28D9);
  font-weight: var(--lexa-font-weight-semibold, 600);
  border-bottom-color: var(--lexa-primary, #6D28D9);
  background-color: transparent;
}

.nav-tabs .nav-link .badge {
  margin-left: var(--lexa-spacing-2, 0.5rem);
  font-size: var(--lexa-font-size-xs, 0.75rem);
  padding: 0.2em 0.5em;
}

.tab-content {
  padding-top: var(--lexa-spacing-4, 1rem);
}

/* --------------------------------------------------------------------------
   SETTINGS NAV - nav vertical de /Admin/Settings con la línea gráfica Lexa.
   Bootstrap .nav-pills pinta el activo en azul; aquí se sobrescribe con el
   morado de marca (--lexa-primary) y las formas/tokens del UI Kit.
   -------------------------------------------------------------------------- */
.lexa-settings-nav .nav-link {
  color: var(--lexa-gray-700, #334155);
  font-weight: var(--lexa-font-weight-medium, 500);
  font-size: var(--lexa-font-size-sm, 0.875rem);
  padding: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  border-radius: var(--lexa-border-radius-md, 0.375rem);
  margin-bottom: var(--lexa-spacing-1, 0.25rem);
  transition: background-color var(--lexa-transition-fast, 150ms ease),
              color var(--lexa-transition-fast, 150ms ease);
}

.lexa-settings-nav .nav-link i {
  color: var(--lexa-gray-500, #64748b);
  transition: color var(--lexa-transition-fast, 150ms ease);
}

.lexa-settings-nav .nav-link:hover {
  background-color: var(--lexa-gray-100, #f1f5f9);
  color: var(--lexa-gray-900, #0f172a);
}

/* Activo: pastilla morada suave + texto/icono de marca (gana a .nav-pills por orden). */
.lexa-settings-nav .nav-link.active {
  background-color: var(--lexa-primary-50, #f5f3ff);
  color: var(--lexa-primary, #6D28D9);
  font-weight: var(--lexa-font-weight-semibold, 600);
}

.lexa-settings-nav .nav-link.active i {
  color: var(--lexa-primary, #6D28D9);
}

.lexa-settings-nav .nav-link:focus-visible {
  outline: 2px solid var(--lexa-primary, #6D28D9);
  outline-offset: 1px;
}

/* Dark mode: el activo no puede usar --lexa-primary-50 (se remapea a casi transparente
   sobre fondo oscuro) ni el morado oscuro como texto → quedaría ilegible. Pastilla en
   morado translúcido + texto/icono claros (mismo criterio que sidebar/flyout en dark). */
[data-theme="dark"] .lexa-settings-nav .nav-link.active,
[data-theme="dark"] .lexa-settings-nav .nav-link.active i {
  color: #EDE9FE;
}
[data-theme="dark"] .lexa-settings-nav .nav-link.active {
  background-color: rgba(139, 92, 246, 0.22);
}
[data-theme="dark"] .lexa-settings-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Badge compacto "Solo planes" — evita el style inline repetido en Commissions. */
.badge-plan-only { font-size: 0.7em; }

/* --------------------------------------------------------------------------
   TABLAS - PBI-030: Headers mejorados, row hover
   -------------------------------------------------------------------------- */

.table {
  --bs-table-bg: var(--lexa-white, #ffffff);
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.table > thead > tr > th {
  background-color: var(--lexa-gray-100, #f8f9fa);
  color: var(--lexa-gray-600);
  font-size: var(--lexa-font-size-xs, 0.75rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--lexa-spacing-3, 0.75rem);
  border-bottom: 2px solid var(--lexa-gray-300, #dee2e6);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: var(--lexa-spacing-3, 0.75rem);
  vertical-align: middle;
  border-bottom: 1px solid var(--lexa-gray-200, #e9ecef);
  color: var(--lexa-gray-700);
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--lexa-primary-light, #EDE9FE);
}

/* Columna de acciones */
.table .col-actions,
.table td:last-child:has(.btn) {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

.table .col-actions .btn,
.table td:last-child .btn {
  margin-left: var(--lexa-spacing-1, 0.25rem);
}

.table .col-actions .btn:first-child,
.table td:last-child .btn:first-child {
  margin-left: 0;
}

/* Tabla responsive */
.table-responsive {
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  border: 1px solid var(--lexa-gray-200, #e9ecef);
}

/* Wrapper de tablas que contienen dropdowns: evita que overflow-x: auto del .table-responsive
   fuerce overflow-y a auto (CSS spec) y termine generando un scroll vertical cuando se abre
   el menú. `clip` permite mantener overflow-y: visible, cosa que `auto` y `hidden` no.
   En mobile recuperamos overflow-x: auto para no perder el scroll horizontal. */
.table-responsive.commission-payment-table-wrap {
  overflow-x: clip;
  overflow-y: visible;
}

@media (max-width: 767.98px) {
  .table-responsive.commission-payment-table-wrap {
    overflow-x: auto;
  }
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table-responsive > .table > thead > tr > th:first-child {
  border-top-left-radius: var(--lexa-border-radius-base, 0.375rem);
}

.table-responsive > .table > thead > tr > th:last-child {
  border-top-right-radius: var(--lexa-border-radius-base, 0.375rem);
}

/* --------------------------------------------------------------------------
   BADGES - PBI-030: Colores accesibles
   -------------------------------------------------------------------------- */

.badge {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  font-weight: var(--lexa-font-weight-medium, 500);
  padding: 0.35em 0.65em;
  border-radius: var(--lexa-border-radius-full, 9999px);
}

/* Badges semanticos con estilo "soft" */
.badge-activa,
.badge-activo,
.badge-confirmada {
  background-color: var(--lexa-success-light, #d1e7dd) !important;
  color: var(--lexa-success, #198754) !important;
}

.badge-inactiva,
.badge-inactivo {
  background-color: var(--lexa-gray-200, #e9ecef) !important;
  color: var(--lexa-gray-600, #5a5a6e) !important;
}

.badge-pendiente {
  background-color: var(--lexa-warning-light, #fff3cd) !important;
  color: #856404 !important;
}

.badge-cancelada,
.badge-cancelado {
  background-color: var(--lexa-danger-light, #f8d7da) !important;
  color: var(--lexa-danger, #dc3545) !important;
}

.badge-completada,
.badge-completado {
  background-color: var(--lexa-info-light, #cff4fc) !important;
  color: var(--lexa-info-hover, #0aa2c0) !important;
}

/* Mantener compatibilidad con Bootstrap bg-* pero mejorar contraste */
.bg-success {
  background-color: var(--lexa-success, #198754) !important;
}

.bg-danger {
  background-color: var(--lexa-danger, #dc3545) !important;
}

.bg-warning {
  background-color: var(--lexa-warning, #ffc107) !important;
  color: var(--lexa-warning-contrast, #1a1a2e) !important;
}

.bg-info {
  background-color: var(--lexa-info, #0dcaf0) !important;
  color: var(--lexa-info-contrast, #1a1a2e) !important;
}

.bg-secondary {
  background-color: var(--lexa-gray-500, #6c757d) !important;
}

.bg-primary {
  background-color: var(--lexa-primary, #6D28D9) !important;
}

/* --------------------------------------------------------------------------
   CARDS - PBI-030: Sombras y bordes
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--lexa-gray-200, #e9ecef);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  box-shadow: var(--lexa-shadow-sm);
  transition: box-shadow var(--lexa-transition-base, 200ms ease);
}

.card:hover {
  box-shadow: var(--lexa-shadow-base);
}

.card-header {
  background-color: var(--lexa-gray-100, #f8f9fa);
  border-bottom: 1px solid var(--lexa-gray-200, #e9ecef);
  padding: var(--lexa-spacing-3, 0.75rem) var(--lexa-spacing-4, 1rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
}

.card-body {
  padding: var(--lexa-spacing-4, 1rem);
}

.card-footer {
  background-color: var(--lexa-gray-100, #f8f9fa);
  border-top: 1px solid var(--lexa-gray-200, #e9ecef);
  padding: var(--lexa-spacing-3, 0.75rem) var(--lexa-spacing-4, 1rem);
}

/* Cards con borde de color (dashboard) */
.card-primary {
  border-top: 3px solid var(--lexa-primary, #6D28D9);
}

.card-success {
  border-top: 3px solid var(--lexa-success, #198754);
}

.card-warning {
  border-top: 3px solid var(--lexa-warning, #ffc107);
}

.card-danger {
  border-top: 3px solid var(--lexa-danger, #dc3545);
}

.card-info {
  border-top: 3px solid var(--lexa-info, #0dcaf0);
}

/* --------------------------------------------------------------------------
   PAGINACION
   -------------------------------------------------------------------------- */

.page-link {
  color: var(--lexa-primary, #6D28D9);
}

.page-link:hover {
  color: var(--lexa-primary-hover, #5B21B6);
  background-color: var(--lexa-primary-50, #F5F3FF);
}

.page-item.active > .page-link {
  background-color: var(--lexa-primary, #6D28D9);
  border-color: var(--lexa-primary, #6D28D9);
  color: var(--lexa-primary-contrast, #ffffff);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.25);
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

.lexa-link { color: var(--lexa-primary); }
.lexa-link:hover { color: var(--lexa-primary-dark, #5B21B6); }

/* --------------------------------------------------------------------------
   ALERTAS
   -------------------------------------------------------------------------- */

.alert {
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  border: none;
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.alert-success {
  background-color: var(--lexa-success-light, #d1e7dd);
  color: #0f5132;
}

.alert-danger {
  background-color: var(--lexa-danger-light, #f8d7da);
  color: #842029;
}

.alert-warning {
  background-color: var(--lexa-warning-light, #fff3cd);
  color: #664d03;
}

.alert-info {
  background-color: var(--lexa-info-light, #cff4fc);
  color: #055160;
}

/* --------------------------------------------------------------------------
   MODALES
   -------------------------------------------------------------------------- */

.modal-content {
  border: none;
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  box-shadow: var(--lexa-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--lexa-gray-200, #e9ecef);
  padding: var(--lexa-spacing-4, 1rem);
}

.modal-title {
  font-weight: var(--lexa-font-weight-semibold, 600);
}

/* En headers de color (bg-danger/bg-primary text-white) el título es un <h5>,
   y la regla global `h5 { color: var(--lexa-gray-700) }` le gana al text-white
   heredado del header. Forzamos blanco para recuperar el contraste. */
.modal-header.text-white .modal-title {
  color: #fff;
}

.modal-body {
  padding: var(--lexa-spacing-4, 1rem);
}

.modal-footer {
  border-top: 1px solid var(--lexa-gray-200, #e9ecef);
  padding: var(--lexa-spacing-3, 0.75rem) var(--lexa-spacing-4, 1rem);
}

/* --------------------------------------------------------------------------
   UTILIDADES
   -------------------------------------------------------------------------- */

.text-muted {
  color: var(--lexa-gray-500) !important;
}

.text-primary {
  color: var(--lexa-primary) !important;
}

.text-success {
  color: var(--lexa-success) !important;
}

.text-danger {
  color: var(--lexa-danger) !important;
}

.text-warning {
  color: var(--lexa-warning) !important;
}

/* Texto truncado multilinea */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATIONS - Sistema de alertas laterales
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   LOADER DE MARCA — "Anillo mínimo"
   Anillo cónico con el gradiente morado de Lexa + isotipo "L" al centro.
   Componente reutilizable: lo usa lexaPageBusy() (overlay) y cualquier bloque
   que necesite un indicador de carga con la línea gráfica de Lexa. El markup lo
   genera lexaLoaderHtml() en site.js. Tamaño configurable con --lexa-loader-size.
   -------------------------------------------------------------------------- */
.lexa-loader {
  --lexa-loader-size: 72px;
  --lexa-loader-thickness: 6px;
  --lexa-loader-speed: 0.9s;
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: var(--lexa-loader-size);
  height: var(--lexa-loader-size);
}

/* Pista neutra: círculo completo de fondo bajo el arco. */
.lexa-loader__track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--lexa-loader-thickness) solid var(--lexa-surface-sunken, #F1F5F9);
}

/* Arco que gira: gradiente cónico enmascarado a un anillo del mismo grosor. */
.lexa-loader__arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--lexa-primary, #6D28D9),
    #8B5CF6 120deg,
    transparent 250deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lexa-loader-thickness)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--lexa-loader-thickness)), #000 0);
  animation: lexa-loader-spin var(--lexa-loader-speed) linear infinite;
}

/* Isotipo de marca al centro. */
.lexa-loader__iso {
  position: relative;
  width: 40%;
  height: 40%;
}

/* Variante compacta para bloques / modales. */
.lexa-loader--sm { --lexa-loader-size: 40px; --lexa-loader-thickness: 4px; }

/* Utilidad inline (currentColor): spinner chico que hereda el color del texto,
   así funciona sobre cualquier fondo (p.ej. botones .btn-primary). Sin isotipo.
   Lo inyecta setBtnLoading() en botones planos. */
.lexa-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  border-radius: 50%;
  background: conic-gradient(from 0deg, currentColor, transparent 280deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: lexa-loader-spin 0.7s linear infinite;
}

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

/* Full-page busy overlay — bloquea la interacción durante POST de página
   completa que tardan (conciliación por lote, importación de cartola). Ver
   lexaPageBusy() en site.js. z-index sobre modales y backdrops de Bootstrap. */
.lexa-page-busy {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  cursor: progress;
  animation: lexa-busy-fade-in 0.15s ease-out;
}

.lexa-page-busy__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 22rem;
  padding: 1.75rem 2.25rem;
  text-align: center;
  background: var(--lexa-surface-overlay, #fff);
  color: var(--lexa-text-primary, #0F172A);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  box-shadow: var(--lexa-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));
}

.lexa-page-busy__msg { font-weight: 600; }

.lexa-page-busy__sub {
  font-size: 0.8125rem;
  color: var(--lexa-text-secondary, #64748B);
}

@keyframes lexa-busy-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lexa-page-busy { animation: none; }
  /* No congelamos el giro (un anillo detenido parece colgado): lo ralentizamos. */
  .lexa-loader__arc,
  .lexa-spinner { animation-duration: 2.4s; }
  .lexa-page-busy .spinner-border { animation-duration: 1.5s; }
}

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
  pointer-events: none;
}

.toast-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  box-shadow: var(--lexa-shadow-lg, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06));
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

.toast-notification.toast-hiding {
  animation: toast-slide-out 0.2s ease-in forwards;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-notification .toast-message {
  flex: 1;
  line-height: 1.4;
}

.toast-notification .toast-close {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  font-size: 1.25rem;
  line-height: 1;
}

.toast-notification .toast-close:hover {
  opacity: 1;
}

/* Toast Success (default) */
.toast-notification.toast-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border-left: 4px solid #198754;
}

.toast-notification.toast-success .toast-close {
  color: #0f5132;
}

/* Toast Error */
.toast-notification.toast-error {
  background-color: #f8d7da;
  color: #842029;
  border-left: 4px solid #dc3545;
}

.toast-notification.toast-error .toast-close {
  color: #842029;
}

/* Toast Warning */
.toast-notification.toast-warning {
  background-color: #fff3cd;
  color: #664d03;
  border-left: 4px solid #ffc107;
}

.toast-notification.toast-warning .toast-close {
  color: #664d03;
}

/* Toast Info */
.toast-notification.toast-info {
  background-color: #cff4fc;
  color: #055160;
  border-left: 4px solid #0dcaf0;
}

.toast-notification.toast-info .toast-close {
  color: #055160;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--lexa-bg-subtle, #f8f9fa);
  color: var(--lexa-gray-500);
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

/* --------------------------------------------------------------------------
   AGENDA - Toolbar, Grid, Cards, Status Colors
   -------------------------------------------------------------------------- */

.agenda-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--lexa-white, #fff);
  border: 1px solid var(--lexa-border-color, #E2E8F0);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  margin-bottom: 0.5rem;
}

.agenda-toolbar .form-select,
.agenda-toolbar .form-control,
.agenda-toolbar .btn {
  height: 32px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8rem;
}

.agenda-toolbar .form-select {
  padding-right: 2rem;
  max-width: 180px;
}

.toolbar-date {
  display: flex;
  gap: 2px;
  align-items: center;
}

.toolbar-date input[type="date"] {
  width: 130px;
}

.toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.toolbar-therapists {
  min-width: 160px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}

.toolbar-therapists .badge {
  margin-left: 0.5rem;
}

/* Navbar dropdowns (sucursal, usuario) must float above page-level popups */
#navBranchSelector .dropdown-menu,
.navbar .dropdown-menu {
  z-index: 1055;
}

/* Week therapist combobox */
.week-therapist-combo {
  /* No z-index on wrapper — it competes with navbar dropdown.
     Position context only so the child popup can use position:absolute. */
}

.week-therapist-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: 300px;
  background: var(--lexa-white);
  border: 1px solid var(--lexa-gray-200);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  margin-top: 4px;
  z-index: 1030;
}

.week-therapist-list {
  max-height: 260px;
  overflow-y: auto;
}

.week-therapist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.82rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--lexa-gray-700);
  transition: background 0.1s;
}

.week-therapist-item:hover,
.week-therapist-item:focus {
  background: var(--lexa-gray-100);
  outline: none;
}

.week-therapist-item.active {
  background: var(--lexa-primary-light, #e8e0f3);
  font-weight: 600;
  color: var(--lexa-primary);
}

.week-therapist-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.week-therapist-item .therapist-avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lexa-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--lexa-gray-500);
  flex-shrink: 0;
}

@media (max-width: 1199px) {
  .agenda-toolbar {
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
  }
  .toolbar-therapists { min-width: 140px; }
  .toolbar-date input[type="date"] { width: 120px; }
}

/* Tablet (768px) — toolbar wraps, touch targets, info row wraps */
@media (max-width: 768px) {
  .agenda-toolbar {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .agenda-toolbar .form-select { max-width: none; flex: 1 1 120px; }
  .agenda-toolbar .btn { min-height: 38px; }
  .toolbar-date { flex: 1 1 100%; }
  .toolbar-date input[type="date"] { flex: 1; width: auto; }
  .toolbar-actions { margin-left: auto; }

  /* Zoom slider not usable with touch on mobile */
  .agenda-zoom-control, #weekZoomControl { display: none !important; }

  /* Info row wraps */
  .agenda-info-row { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .agenda-info-bar { flex-wrap: wrap; gap: 0.5rem; }

  /* Detail modal footer full-width buttons */
  .detail-footer > div { flex-direction: column; }
  .detail-footer > div .btn { width: 100%; }
}

/* Mobile (576px) — compact grid toolbar (applies to all non-therapist roles) */
@media (max-width: 576px) {
  .agenda-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    align-items: center;
    padding: 0.3rem 0.5rem;
  }
  /* Row 1: date nav full width */
  .toolbar-date {
    grid-column: 1 / -1; grid-row: 1; order: 0;
    display: flex; gap: 2px; align-items: center; flex: unset;
  }
  .toolbar-date input[type="date"] { flex: 1; min-height: 40px; width: auto; }
  .toolbar-date .btn { min-height: 40px; min-width: 40px; padding: 0 0.4rem; }
  /* Row 2-5: stack controls to avoid overlap on small screens */
  .agenda-toolbar #branchSelect {
    grid-row: 2; grid-column: 1 / -1; max-width: none; min-height: 36px; font-size: 0.75rem; flex: unset;
  }
  .agenda-toolbar .toolbar-therapists,
  .agenda-toolbar [data-mode-section="week"] {
    grid-row: 3; grid-column: 1 / -1; max-width: none; min-width: 0; min-height: 36px; font-size: 0.75rem; width: 100%;
  }
  .agenda-toolbar [data-mode-section="day"],
  .agenda-toolbar [data-mode-section="week"],
  .agenda-toolbar [data-mode-section="week"] > .d-flex,
  .agenda-toolbar .week-therapist-combo,
  .agenda-toolbar #btnWeekTherapistCombo,
  .agenda-toolbar .toolbar-therapists {
    min-width: 0;
    width: 100%;
  }
  .agenda-toolbar [data-mode-section="week"] > .d-flex {
    gap: 0.3rem !important;
  }
  .agenda-toolbar #btnPrevTherapist,
  .agenda-toolbar #btnNextTherapist {
    flex: 0 0 36px;
    min-width: 36px;
    padding: 0;
  }
  /* Row 4: status */
  .agenda-toolbar #statusSelect {
    grid-row: 4; grid-column: 1 / -1; max-width: none; min-height: 36px; font-size: 0.75rem; flex: unset; width: 100%;
  }
  /* Row 5: actions */
  .toolbar-actions {
    grid-row: 5; grid-column: 1 / -1; margin-left: 0; display: flex; flex: 0 0 auto; justify-content: flex-end;
  }
  .toolbar-actions .btn { min-height: 36px; min-width: 36px; padding: 0; }

  /* Hide branch if single branch */
  body.single-branch .agenda-toolbar #branchSelect { display: none; }
  body.single-branch .agenda-toolbar .toolbar-therapists,
  body.single-branch .agenda-toolbar [data-mode-section="week"] { grid-row: 2; grid-column: 1 / -1; }
  body.single-branch .agenda-toolbar #statusSelect { grid-row: 3; }
  body.single-branch .agenda-toolbar .toolbar-actions { grid-row: 4; }

  /* Info row compact */
  .agenda-info-row { font-size: 0.7rem; padding: 0.2rem 0.5rem; }

  /* Week view day headers: use abbreviations (handled by JS) but ensure fit */
  .agenda-day-header { font-size: 0.7rem; padding: 0.3rem 0.2rem; }
}

/* ── Therapist view mobile: compact 2-row toolbar ── */
@media (max-width: 768px) {
  body.therapist-view .agenda-toolbar {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
  }
  body.therapist-view .agenda-toolbar #branchSelect { max-width: 120px; flex: 0 1 auto; }
  body.therapist-view .agenda-toolbar [data-mode-section="week"] { flex: 0 1 auto; }
  body.therapist-view #currentTherapistName { max-width: 100px; }
  body.therapist-view .agenda-toolbar #statusSelect { max-width: 110px; flex: 0 1 auto; }
}

@media (max-width: 576px) {
  body.therapist-view .agenda-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    align-items: center;
    padding: 0.3rem 0.5rem;
  }
  /* Row 1: date nav full width */
  body.therapist-view .toolbar-date {
    grid-column: 1 / -1; grid-row: 1; order: 0;
    display: flex; gap: 2px; align-items: center; flex: unset;
  }
  body.therapist-view .toolbar-date input[type="date"] { flex: 1; min-height: 40px; }
  body.therapist-view .toolbar-date .btn { min-height: 40px; min-width: 40px; padding: 0 0.4rem; }
  /* Row 2-5: stacked controls */
  body.therapist-view .agenda-toolbar #branchSelect {
    grid-row: 2; grid-column: 1 / -1; max-width: none; min-height: 36px; font-size: 0.75rem; width: 100%;
  }
  body.therapist-view .agenda-toolbar [data-mode-section="week"] { grid-row: 3; grid-column: 1 / -1; width: 100%; min-width: 0; }
  body.therapist-view .agenda-toolbar [data-mode-section="week"] > .d-flex,
  body.therapist-view .agenda-toolbar .week-therapist-combo,
  body.therapist-view #btnWeekTherapistCombo {
    width: 100%;
    min-width: 0;
  }
  body.therapist-view #btnWeekTherapistCombo { min-height: 36px; font-size: 0.75rem; padding: 0.15rem 0.4rem; }
  body.therapist-view #currentTherapistName { max-width: none; font-size: 0.7rem; }
  body.therapist-view .agenda-toolbar #statusSelect {
    grid-row: 4; grid-column: 1 / -1; max-width: none; min-height: 36px; font-size: 0.75rem; width: 100%;
  }
  body.therapist-view .toolbar-actions { grid-row: 5; grid-column: 1 / -1; margin-left: 0; display: flex; justify-content: flex-end; }
  body.therapist-view .toolbar-actions .btn { min-height: 36px; min-width: 36px; padding: 0; }
  /* Hide branch if single branch */
  body.therapist-view.single-branch #branchSelect { display: none; }
  body.therapist-view.single-branch .agenda-toolbar [data-mode-section="week"] { grid-row: 2; }
  body.therapist-view.single-branch .agenda-toolbar #statusSelect { grid-row: 3; }
  body.therapist-view.single-branch .toolbar-actions { grid-row: 4; }
}

@media (max-width: 360px) {
  body.therapist-view #currentTherapistName { max-width: 50px; }
  body.therapist-view .toolbar-date #btnToday { font-size: 0.7rem; padding: 0 0.3rem; min-width: auto; }
}

/* Secretary-view uses default mobile grid layout (see ≤576px block above) */

/* Agenda grid siempre llena el ancho del contenedor — evita espacio sobrante
   al hacer zoom out o en monitores ultra-wide. Si con pocos terapeutas las
   columnas quedan muy anchas, es preferible a cortar el contenedor. */

.agenda-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 1rem;
  font-size: 0.75rem;
  color: #6c757d;
  gap: 1rem;
}
.agenda-info-bar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.agenda-info-bar:empty { display: none; }
.agenda-info-bar i { font-size: 0.7rem; }
#branchLegendBar:empty { display: none; }
#branchLegendBar .branch-legend { margin: 0; }
.branch-legend-swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #ccc; display: inline-block; }
.branch-tone-1 { --branch-accent: #7c3aed; --branch-slot-bg: #f3e8ff; --branch-slot-bg-dark: #25133d; }
.branch-tone-2 { --branch-accent: #2563eb; --branch-slot-bg: #dbeafe; --branch-slot-bg-dark: #10284f; }
.branch-tone-3 { --branch-accent: #0891b2; --branch-slot-bg: #cffafe; --branch-slot-bg-dark: #0c3441; }
.branch-tone-4 { --branch-accent: #059669; --branch-slot-bg: #d1fae5; --branch-slot-bg-dark: #0f3528; }
.branch-tone-5 { --branch-accent: #65a30d; --branch-slot-bg: #ecfccb; --branch-slot-bg-dark: #28350f; }
.branch-tone-6 { --branch-accent: #d97706; --branch-slot-bg: #fef3c7; --branch-slot-bg-dark: #3f2a0a; }
.branch-tone-7 { --branch-accent: #dc2626; --branch-slot-bg: #fee2e2; --branch-slot-bg-dark: #431919; }
.branch-tone-8 { --branch-accent: #db2777; --branch-slot-bg: #fce7f3; --branch-slot-bg-dark: #42162b; }
.branch-tone-9 { --branch-accent: #4f46e5; --branch-slot-bg: #e0e7ff; --branch-slot-bg-dark: #1f2253; }
.branch-tone-10 { --branch-accent: #0d9488; --branch-slot-bg: #ccfbf1; --branch-slot-bg-dark: #123a36; }
.branch-tone-11 { --branch-accent: #9333ea; --branch-slot-bg: #f3e8ff; --branch-slot-bg-dark: #30174d; }
.branch-tone-12 { --branch-accent: #475569; --branch-slot-bg: #e2e8f0; --branch-slot-bg-dark: #222a36; }
.branch-legend-swatch[class*="branch-tone-"] { background: var(--branch-accent); border-color: rgba(15, 23, 42, 0.2); }

.agenda-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.agenda-grid-wrapper {
  flex: 1 1 0;
  overflow: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  min-height: 0;
}

/* Mobile weekly grid: hidden globally; only shown via media query when active */
#agendaMobileWeeklyGrid {
  display: none;
}

.agenda-grid {
  display: grid;
}

.agenda-header { display: contents; }

.agenda-time-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 12;
  background: #f8f9fa;
  border-right: 2px solid #dee2e6;
  border-bottom: 2px solid #dee2e6;
  padding: 0.5rem;
  min-width: 70px;
  text-align: center;
  font-weight: 600;
}

.agenda-therapist-header {
  position: sticky;
  top: 0;
  z-index: 11;
  background: #fff;
  border-bottom: 2px solid #dee2e6;
  padding: 0.35rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
}

.agenda-therapist-header img,
.agenda-therapist-header .therapist-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agenda-therapist-header img {
  object-fit: cover;
}

.agenda-therapist-header .therapist-avatar {
  background: #6c757d;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.7rem;
}

.agenda-therapist-header .therapist-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lexa-gray-800, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.agenda-time-cell {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #f8f9fa;
  border-right: 2px solid #dee2e6;
  border-bottom: 1px solid #e9ecef;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  color: #6c757d;
  min-width: 70px;
  min-height: 28px;
}

.agenda-time-cell.agenda-time-hour { border-top: 2px solid #dee2e6; }
.agenda-time-cell.agenda-time-sub { border-top: 1px dashed #e9ecef; font-size: 0; padding: 0 0.5rem; }

.agenda-slot {
  position: relative;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  min-height: 28px;
  cursor: pointer;
  transition: background-color 0.15s;
  overflow: visible;
}

.agenda-slot.slot-hour-boundary { border-top: 2px solid #dee2e6; }
.agenda-slot:hover { background-color: #f0f7ff; }
.agenda-slot-week[class*="branch-tone-"] { background-color: var(--branch-slot-bg); }
.agenda-slot-week.branch-mixed {
  background: repeating-linear-gradient(135deg, #eef2ff, #eef2ff 8px, #f8fafc 8px, #f8fafc 16px);
}
.agenda-slot-week[class*="branch-tone-"]:hover,
.agenda-slot-week.branch-mixed:hover { box-shadow: inset 0 0 0 100px rgba(0,0,0,0.06); }

.appointment-card {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 0.7rem;
  overflow: hidden;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
  line-height: 1.3;
}

/* Ghost row para citas Cancelled / NoShow:
   franja superior compacta (~13px) para no consumir el espacio clickeable del slot,
   permitiendo agendar otra cita encima sin confusión visual. */
.appointment-ghost-row {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 13px;
  padding: 0 6px;
  font-size: 0.62rem;
  line-height: 13px;
  border-radius: 3px;
  cursor: pointer;
  z-index: 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
  transition: opacity 0.12s;
}

.appointment-ghost-row:hover {
  opacity: 1;
}

.appointment-ghost-row .ghost-name {
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appointment-ghost-row .ghost-status {
  margin-left: auto;
  font-size: 0.58rem;
  opacity: 0.85;
}

.appointment-ghost-cancelled {
  background: #f8d7da;
  color: #842029;
  border-left: 2px solid #dc3545;
}

.appointment-ghost-noshow {
  background: #fff3cd;
  color: #664d03;
  border-left: 2px solid #ffc107;
}

[data-bs-theme="dark"] .appointment-ghost-cancelled {
  background: rgba(220, 53, 69, 0.18);
  color: #f5c2c7;
}

[data-bs-theme="dark"] .appointment-ghost-noshow {
  background: rgba(255, 193, 7, 0.18);
  color: #ffe69c;
}

/* Status dropdown compacto en /Appointments para ganar espacio vertical */
.status-select-compact {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  line-height: 1.2;
  min-width: 120px;
  font-size: 0.78rem;
}

.appointment-card:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 6;
}

.appointment-card .patient-name {
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  /* Reserva espacio para los iconos (.appt-indicators absolute top-right) */
  padding-right: 22px;
}

.first-visit-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-left: 0.25rem;
  padding: 0.05rem 0.28rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #7dd3fc;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: baseline;
}

.first-visit-chip-inline {
  margin-top: 0.1rem;
  font-size: 0.65rem;
}

.online-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-left: 0.25rem;
  padding: 0.05rem 0.28rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: baseline;
}

.appointment-card .service-name {
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.appointment-card .appt-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  opacity: 0.65;
  margin-top: 1px;
}

.appointment-card .time-range { white-space: nowrap; }
.appointment-card .room-name,
.appointment-card .branch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-card .branch-name { font-style: italic; }
.appointment-card[class*="branch-tone-"] {
  box-shadow: inset 0 3px 0 var(--branch-accent), 0 1px 3px rgba(0,0,0,0.1);
}

/* Indicator icons (top-right corner) */
.appointment-card .appt-indicators {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex;
  gap: 2px;
  font-size: 0.6rem;
  z-index: 1;
}

.appointment-card .appt-indicators:empty { display: none; }

.ind-paid          { color: #16a34a; }
.ind-unpaid        { color: #ea580c; }
.ind-note          { color: #9333ea; }
.ind-beca          { color: #2563eb; }
.ind-plan          { color: #0d9488; }
.ind-recovery      { color: #6b7280; }
.ind-online-unpaid { color: #db2777; } /* magenta — reserva online sin pago, requiere contacto */
.ind-contacted     { color: #0891b2; } /* cian — paciente contactado para confirmar asistencia */
.ind-missing-dob   { color: #d97706; } /* primera cita sin fecha de nacimiento */
.ind-exceptional   { color: #ca8a04; } /* dorado — cita en horario excepcional (mantenida en día sin atención) */

/* Reporte Reservas online sin pago: fila ya gestionada (contactada).
   La opacidad funciona igual en dark mode, no requiere remap de colores.
   Se excluye la última celda (acciones) para no atenuar el botón de deshacer,
   que debe seguir descubrible en la fila contactada. */
.unpaid-contacted > td:not(:last-child) { opacity: 0.55; }

/* Status colors — using theme variables */
.status-scheduled   { background-color: #F1F5F9; border-left: 3px solid var(--lexa-status-scheduled, #64748B); color: #334155; }
.status-confirmed   { background-color: #DCFCE7; border-left: 3px solid var(--lexa-status-confirmed, #10B981); color: #14532d; }
.status-rescheduled { background-color: #FFF7ED; border-left: 3px solid var(--lexa-status-rescheduled, #F97316); color: #7c2d12; }
.status-inprogress  { background-color: #ECFEFF; border-left: 3px solid var(--lexa-status-inprogress, #0891B2); color: #155e75; }
.status-completed   { background-color: #DBEAFE; border-left: 3px solid var(--lexa-status-attended, #3B82F6); color: #1e3a8a; }
.status-cancelled   { background-color: #FEE2E2; border-left: 3px solid var(--lexa-status-cancelled, #EF4444); color: #7f1d1d; }
.status-noshow      { background-color: #F3F4F6; border-left: 3px solid var(--lexa-status-noshow, #6B7280); color: #374151; }

.bg-purple { background-color: var(--lexa-primary, #6D28D9) !important; color: #fff !important; }
.bg-orange { background-color: var(--lexa-status-rescheduled, #F97316) !important; color: #fff !important; }
.bg-teal { background-color: var(--lexa-status-inprogress, #0891B2) !important; color: #fff !important; }

.load-more-col {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

/* Daily Summary Modal (F016) */
#dailySummaryModal .modal-body { max-height: 70vh; overflow-y: auto; overflow-x: hidden; }
#summaryTable { table-layout: fixed; width: 100%; }
#dailySummaryModal .table thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 1; font-size: 0.75rem; padding: 0.4rem 0.3rem; }
#dailySummaryModal .table td { vertical-align: middle; font-size: 0.75rem; padding: 0.35rem 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#summaryTable .col-hora      { width: 5%; }
#summaryTable .col-id        { width: 9%; }
#summaryTable .col-paciente  { width: 14%; }
#summaryTable .col-telefono  { width: 9%; }
#summaryTable .col-correo    { width: 13%; }
#summaryTable .col-servicio  { width: 14%; }
#summaryTable .col-terapeuta { width: 12%; }
#summaryTable .col-sala      { width: 7%; }
#summaryTable .col-sucursal  { width: 9%; }
#summaryTable .col-estado    { width: 8%; }

/* --------------------------------------------------------------------------
   AGENDA - Week View (F022)
   -------------------------------------------------------------------------- */

.agenda-grid-week { min-width: auto; }

.agenda-grid-week .agenda-time-header {
  left: 0;
  z-index: 30;
  box-shadow: 2px 0 0 #dee2e6;
}

.agenda-grid-week .agenda-time-cell {
  left: 0;
  z-index: 20;
  box-shadow: 2px 0 0 #dee2e6;
}

.agenda-week-density-selector {
  display: none;
}

@media (min-width: 577px) {
  .agenda-week-density-selector {
    display: inline-flex;
  }

  body.agenda-week-compact .agenda-grid-week .agenda-day-header,
  body.agenda-week-compact .agenda-grid-week .agenda-time-header {
    min-height: 30px;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
  }

  body.agenda-week-compact .agenda-grid-week .agenda-day-header .small {
    line-height: 1.05;
  }

  body.agenda-week-compact .agenda-grid-week .agenda-time-cell {
    min-height: var(--slot-h, 14px);
    padding: 0 0.4rem;
    font-size: 0.68rem;
    line-height: var(--slot-h, 14px);
  }

  body.agenda-week-compact .agenda-grid-week .agenda-slot-week {
    min-height: var(--slot-h, 14px);
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: none;
    line-height: 1;
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card .patient-name,
  body.agenda-week-compact .agenda-grid-week .appointment-card .service-name,
  body.agenda-week-compact .agenda-grid-week .appointment-card .appt-meta {
    min-width: 0;
    margin: 0;
    padding-right: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card .patient-name {
    flex: 1 1 46%;
    font-size: 0.66rem;
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card .service-name {
    flex: 1 1 28%;
    font-size: 0.6rem;
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card .appt-meta {
    flex: 0 1 34%;
    display: flex;
    font-size: 0.56rem;
    opacity: 0.75;
  }

  body.agenda-week-compact .agenda-grid-week .appointment-card .appt-indicators {
    top: 1px;
    right: 3px;
    font-size: 0.55rem;
  }

  body.agenda-week-compact .agenda-grid-week .therapist-block-card {
    min-height: 12px;
    padding: 1px 4px;
    font-size: 0.6rem;
    line-height: 1;
  }
}

.agenda-day-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #fff;
  border-bottom: 2px solid #dee2e6;
  border-right: 1px solid #e9ecef;
  padding: 0.5rem;
  text-align: center;
  min-width: 120px;
}

.agenda-day-header.today { background: var(--lexa-primary-50, #F5F3FF); border-bottom-color: var(--lexa-primary, #6D28D9); }
.agenda-day-header .text-muted { color: var(--lexa-gray-500, #64748B) !important; }
.agenda-holiday-name { font-size: 0.65rem; line-height: 1; }

.agenda-slot-week { min-height: var(--slot-h, 45px); min-width: 120px; }

/* Week zoom slider */
.agenda-zoom-control { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.75rem; }
.agenda-zoom-control i { font-size: 0.8rem; color: var(--lexa-gray-400, #94A3B8); }
.agenda-zoom-control input[type="range"] {
  width: 80px; height: 4px; appearance: none; background: var(--lexa-gray-200, #E2E8F0);
  border-radius: 2px; outline: none; cursor: pointer;
}
.agenda-zoom-control input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--lexa-primary, #6D28D9); cursor: pointer;
}
.agenda-zoom-control input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--lexa-primary, #6D28D9); cursor: pointer;
}
.agenda-slot-week.slot-blocked { background-color: #f8f8f8; cursor: not-allowed; }

.agenda-slot.slot-outside-hours {
  background-color: #f9f9fb;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,0.015) 10px, rgba(0,0,0,0.015) 20px);
  cursor: not-allowed;
}
.agenda-slot.slot-outside-hours:hover { background-color: #f9f9fb; }
.agenda-slot-week.slot-outside-hours.drag-over { background-color: #f9f9fb !important; outline: none; }

.agenda-slot.slot-holiday-blocked,
.agenda-slot-week.slot-holiday-blocked {
  background-color: #fff3f3;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(220,53,69,0.06) 10px, rgba(220,53,69,0.06) 20px);
  cursor: not-allowed;
}
.agenda-slot.slot-holiday-blocked:hover,
.agenda-slot-week.slot-holiday-blocked:hover { background-color: #fff3f3; }

.appointment-card.appointment-conflict {
  border-color: #f59e0b !important;
  box-shadow: inset 3px 0 0 #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.16);
}

.appt-indicators .ind-conflict {
  color: #d97706;
}

/* Terapia grupal: tarjeta de sesión grupal en la agenda */
.appointment-card.appointment-group {
  border-color: var(--lexa-primary, #6366f1) !important;
  box-shadow: inset 3px 0 0 var(--lexa-primary, #6366f1), 0 2px 8px rgba(99, 102, 241, 0.16);
}
.appointment-card.appointment-group .group-count-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--lexa-primary, #6366f1);
  color: #fff;
}
.group-participants-list {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.group-participant {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.group-participant:hover .gp-name {
  text-decoration: underline;
}
.group-participant .gp-status {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lexa-gray-400, #9ca3af);
}
.group-participant .gp-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-group-add {
  border: none;
  background: transparent;
  color: var(--lexa-primary, #6366f1);
  padding: 0 2px;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.btn-group-add:hover {
  color: var(--lexa-primary-dark, #4f46e5);
}

.schedule-conflicts-filter {
  align-items: end;
  margin-bottom: 1rem;
}

.schedule-conflicts-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.schedule-conflicts-kpi {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #dce5f2);
  border-radius: 8px;
  padding: .75rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.schedule-conflicts-kpi .label {
  display: block;
  color: #64748b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.schedule-conflicts-kpi strong {
  display: block;
  color: #0f172a;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-top: .2rem;
}

.schedule-conflicts-card .table th {
  white-space: nowrap;
}

.schedule-conflict-reason {
  max-width: 220px;
}

@media (max-width: 992px) {
  .schedule-conflicts-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .schedule-conflicts-summary {
    grid-template-columns: 1fr;
  }
}

.agenda-day-header.holiday-header { background-color: #fff3f3; border-bottom: 2px solid #dc3545; }

.therapist-block-card {
  position: absolute;
  left: 2px;
  right: 2px;
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 5px, #e0e0e0 5px, #e0e0e0 10px);
  border-left: 3px solid #6c757d;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.5rem;
  color: #6c757d;
  z-index: 0;
  cursor: default;
  opacity: 0.8;
}
.therapist-block-card .block-reason { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agenda-slot-week.drag-over { background-color: #d4edda !important; outline: 2px dashed #198754; }
.appointment-card[draggable="true"] { cursor: grab; }
.appointment-card[draggable="true"]:active { cursor: grabbing; opacity: 0.7; }

/* Context menu */
.context-menu {
  position: fixed;
  z-index: 1060;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  min-width: 160px;
  padding: 0.25rem 0;
}
.context-menu-item { display: block; width: 100%; padding: 0.375rem 1rem; border: none; background: none; text-align: left; font-size: 0.875rem; cursor: pointer; }
.context-menu-item:hover { background-color: #f8f9fa; }
.context-menu-item.text-danger:hover { background-color: #f8d7da; }

/* Legend popover */
.legend-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.8rem; }
.legend-color { width: 28px; height: 16px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.legend-icon { width: 28px; text-align: center; font-size: 0.95rem; flex-shrink: 0; }
.legend-section-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; margin: 0.35rem 0 0.15rem; }
.legend-separator { margin: 0.5rem 0; border: 0; border-top: 1px solid #e2e8f0; }

/* --------------------------------------------------------------------------
   APPOINTMENT DETAIL MODAL
   -------------------------------------------------------------------------- */

.detail-header { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid #e9ecef; }
.detail-header .detail-title { font-weight: 600; font-size: 1rem; margin: 0; }
.detail-header .detail-subtitle { font-size: 0.8rem; color: #6c757d; margin: 0.125rem 0 0; }
.detail-header .btn-edit-top { font-size: 0.8rem; padding: 0.2rem 0.6rem; }

.detail-body { padding: 1.25rem; }

.detail-summary-card { background: #f8f9fa; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
.detail-summary-card .summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.2rem 0; }
.detail-summary-card .summary-label { color: #6c757d; font-size: 0.8rem; flex-shrink: 0; }
.detail-summary-card .summary-value { font-size: 0.875rem; text-align: right; }
.detail-summary-card .summary-value.fw-semibold { font-weight: 600; }
.detail-summary-card .summary-price { font-size: 1.1rem; font-weight: 700; color: #212529; }
.detail-summary-card .summary-divider { border-top: 1px solid #dee2e6; margin: 0.5rem 0; }

.detail-status-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; }
.detail-contacted-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.detail-status-row .status-badge-current { font-size: 0.75rem; font-weight: 500; padding: 0.3em 0.7em; border-radius: 9999px; display: none; }
.detail-status-row select { max-width: 180px; font-size: 0.85rem; }

.badge-plan               { background-color: #e8d5f5; color: #432874; }
.badge-plan-pending       { background-color: #f3eaf9; color: #6b5483; border: 1px dashed #b89cd4; }
.badge-plan-recovery      { background-color: #f8d7da; color: #842029; }
.badge-detail-scheduled   { background-color: #cfe2ff; color: #084298; }
.badge-detail-confirmed   { background-color: #cce5ff; color: #055160; }
.badge-detail-rescheduled { background-color: #e8d5f5; color: #432874; }
.badge-detail-inprogress  { background-color: #fff3cd; color: #664d03; }
.badge-detail-attended    { background-color: #d1e7dd; color: #0f5132; }
.badge-detail-cancelled   { background-color: #f8d7da; color: #842029; }
.badge-detail-noshow      { background-color: #fff3cd; color: #664d03; }

.detail-patient-section { border-top: 1px solid #e9ecef; padding-top: 0.75rem; margin-top: 0.25rem; }
.detail-patient-section .patient-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.detail-patient-section .patient-header h6 { margin: 0; font-size: 0.75rem; text-transform: uppercase; color: #6c757d; letter-spacing: 0.03em; }
.detail-patient-section .patient-info { font-size: 0.85rem; }
.detail-patient-section .patient-info .info-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.detail-patient-section .patient-info .info-label { color: #6c757d; min-width: 70px; font-size: 0.8rem; }

.detail-notes { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 0.5rem 0.75rem; border-radius: 0 0.25rem 0.25rem 0; font-size: 0.85rem; margin-top: 0.75rem; }

.detail-footer { padding: 0.75rem 1.25rem; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; gap: 0.5rem; }

.detail-meta { padding: 0 1.25rem 0.75rem; font-size: 0.7rem; color: #adb5bd; }

.detail-history { padding: 0 1.25rem 1rem; }
.detail-history .lexa-history-list { max-height: 240px; overflow-y: auto; padding-right: 0.25rem; }
.detail-history .lexa-history-item:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Care plan appointment month pills */
.plan-month-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.35em 0.65em;
  border-radius: 9999px;
  font-size: var(--lexa-font-size-xs, 0.75rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  line-height: 1;
  white-space: nowrap;
}

.plan-month-pill-total {
  background-color: #ede9fe;
  color: #4c1d95;
}

.plan-month-pill-attended {
  background-color: #dcfce7;
  color: #14532d;
}

.plan-month-pill-missing {
  background-color: #fef3c7;
  color: #78350f;
}

.plan-month-pill-over {
  background-color: #ffedd5;
  color: #7c2d12;
}

.plan-month-pill-recovery {
  background-color: #fee2e2;
  color: #7f1d1d;
}

.plan-month-pill-sm {
  font-size: 0.7rem;
}

.plan-month-pill-xs {
  font-size: 0.65rem;
}

/* --------------------------------------------------------------------------
   PATIENT CHART
   -------------------------------------------------------------------------- */

.chart-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.chart-header-content {
  min-width: 0;
  width: 100%;
}
.chart-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.35rem;
}
.chart-header .patient-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}
.chart-header .patient-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: #6c757d;
  font-size: 0.875rem;
}
.chart-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chart-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(100%, 28rem);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.08);
  color: #4c1d95;
  font-size: 0.8rem;
  font-weight: 600;
}
.chart-header-badge i {
  flex: 0 0 auto;
}
.chart-header-badge-label {
  color: #6c757d;
  font-weight: 500;
}
.chart-header-badge-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .chart-header {
    padding: 0.75rem 1rem;
  }
  .chart-header-row {
    align-items: flex-start;
    gap: 0.4rem 0.75rem;
  }
  .chart-header .patient-name {
    width: 100%;
    font-size: 1.25rem;
  }
}

.chart-tabs .nav-link { font-size: 0.9rem; padding: 0.5rem 1rem; }
.chart-tabs .nav-link.active { font-weight: 600; }

.stat-card {
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid #dee2e6;
}
.stat-card .stat-number { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }

.info-section {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.info-section h6 { color: #6c757d; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; }
.info-row { display: flex; margin-bottom: 0.35rem; font-size: 0.9rem; }
.info-row .info-label { width: 140px; flex-shrink: 0; color: #6c757d; }
.info-row .info-value { font-weight: 500; }

.patient-summary-strip-title {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.chart-tab-content { min-height: 400px; }

/* --------------------------------------------------------------------------
   PROFILE & AVATAR
   -------------------------------------------------------------------------- */

.profile-avatar-lg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e9ecef;
  border: 3px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-lg i { font-size: 3rem; color: #adb5bd; }
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e9ecef;
  border: 2px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-preview i { font-size: 2.5rem; color: #adb5bd; }
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.profile-image-preview {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #dee2e6;
  flex-shrink: 0;
}
.profile-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-image-preview i { font-size: 4rem; color: #6c757d; }

/* --------------------------------------------------------------------------
   SELECT COMPANY
   -------------------------------------------------------------------------- */

.select-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 40px;
  max-width: 600px;
  max-height: calc(100dvh - 48px);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.select-container > .text-center,
.select-container > .alert,
.select-container > hr {
  flex-shrink: 0;
}

.select-container #selectForm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.company-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.company-card {
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.company-card:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.2); }
.company-card.selected { border-color: #667eea; background: #f8f9ff; }
.company-card.submitting { cursor: wait; opacity: 0.75; pointer-events: none; }
.company-card .company-name { font-weight: 600; font-size: 1.1rem; color: #333; }
.company-card .company-identity { font-size: 0.85rem; color: #999; }

.role-selector { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; display: none; }
.role-option { display: inline-block; margin-right: 8px; margin-bottom: 8px; cursor: pointer; }
.role-option input { display: none; }
.role-option .role-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; border: 2px solid transparent; transition: all 0.2s; }
.role-option input:checked + .role-badge { box-shadow: 0 0 0 3px rgba(102,126,234,0.3); border-color: #667eea; }

.role-ADMIN       { background: #ffeaa7; color: #8b6914; }
.role-THERAPIST   { background: #81ecec; color: #00796b; }
.role-SECRETARY   { background: #fab1a0; color: #a34400; }
.role-COORDINATOR { background: #d6c1ff; color: #5b3aa0; }
.role-PATIENT     { background: #a29bfe; color: #4527a0; }

.select-company-logo { font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 8px; }
.role-badges { margin-top: 8px; }
.role-badges .badge { margin-right: 4px; }

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC LAYOUT: AGENDA
   Applied via body.page-agenda class
   -------------------------------------------------------------------------- */

body.page-agenda { overflow: hidden; height: 100%; }
html:has(body.page-agenda) { overflow: hidden; height: 100%; }

body.page-agenda .lexa-main {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-agenda .lexa-main > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.page-agenda .lexa-main > main > .d-flex,
body.page-agenda .lexa-main > main > .alert,
body.page-agenda .lexa-main > main > .agenda-toolbar,
body.page-agenda .agenda-info-row {
  flex-shrink: 0;
}

/* El selector Día/Semana de la agenda ahora usa .lexa-segment (estilado más
   arriba, con su propia variante dark); aquí solo quedan los demás botones
   outline del header de la agenda. */
[data-theme="dark"] body.page-agenda .lexa-module-header .btn-outline-secondary {
  background-color: var(--lexa-surface-sunken);
  border-color: var(--lexa-border-strong);
  color: var(--lexa-text-secondary);
}

[data-theme="dark"] body.page-agenda .lexa-module-header .btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--lexa-surface-hover);
  border-color: var(--lexa-primary);
  color: var(--lexa-text-primary);
}

[data-theme="dark"] body.page-agenda .lexa-module-header .btn:disabled,
[data-theme="dark"] body.page-agenda #agendaModeSelector .btn:disabled {
  background-color: var(--lexa-surface-raised);
  border-color: var(--lexa-border-default);
  color: var(--lexa-text-disabled);
  opacity: 1;
}

[data-theme="dark"] body.page-agenda .lexa-module-header .btn-primary:disabled {
  background-color: color-mix(in srgb, var(--lexa-primary) 82%, #000 18%);
  border-color: color-mix(in srgb, var(--lexa-primary) 88%, #000 12%);
  color: var(--lexa-white);
}

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC LAYOUT: SELECT COMPANY
   Applied via body.page-select-company class
   -------------------------------------------------------------------------- */

body.page-select-company {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  padding: 24px;
}

html:has(body.page-select-company) {
  height: 100%;
  overflow: hidden;
}

@media (max-width: 576px) {
  body.page-select-company {
    padding: 16px;
  }

  .select-container {
    max-height: calc(100dvh - 32px);
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC LAYOUT: LOGIN
   Applied via body.page-login class
   -------------------------------------------------------------------------- */

body.page-login {
  background: var(--lexa-primary-50);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--lexa-font-family-base);
}

.login-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* --- Branding column --- */
.login-branding {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--lexa-primary-100) 0%, var(--lexa-primary-50) 100%);
  padding: var(--lexa-spacing-8);
}

.login-branding-content {
  max-width: 480px;
  text-align: center;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lexa-spacing-3);
  margin-bottom: var(--lexa-spacing-8);
}

.login-logo-text {
  font-size: var(--lexa-font-size-4xl);
  font-weight: var(--lexa-font-weight-bold);
  color: var(--lexa-primary);
}

.login-headline {
  font-size: var(--lexa-font-size-2xl);
  font-weight: var(--lexa-font-weight-bold);
  color: var(--lexa-gray-800);
  margin-bottom: var(--lexa-spacing-3);
  line-height: var(--lexa-line-height-tight);
}

.login-subheadline {
  font-size: var(--lexa-font-size-lg);
  color: var(--lexa-gray-500);
  margin-bottom: var(--lexa-spacing-10);
}

.login-illustration svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* --- Form column --- */
.login-form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lexa-white);
  padding: var(--lexa-spacing-8);
}

/* --- Card --- */
.login-card {
  width: 100%;
  max-width: 440px;
  border-radius: var(--lexa-border-radius-xl);
  box-shadow: var(--lexa-shadow-lg);
  overflow: hidden;
  background: var(--lexa-white);
}

.login-card-header {
  background: linear-gradient(135deg, var(--lexa-primary) 0%, var(--lexa-primary-800) 100%);
  color: var(--lexa-white);
  padding: var(--lexa-spacing-6) var(--lexa-spacing-8);
}

.login-card-header h2 {
  margin: 0 0 var(--lexa-spacing-1) 0;
  font-size: var(--lexa-font-size-xl);
  font-weight: var(--lexa-font-weight-bold);
  color: var(--lexa-white);
}

.login-card-header p {
  margin: 0;
  font-size: var(--lexa-font-size-sm);
  opacity: 0.85;
}

.login-card-body {
  padding: var(--lexa-spacing-8);
}

/* --- Form elements --- */
.login-input-group .input-group-text {
  background: var(--lexa-gray-50);
  border-color: var(--lexa-border-color);
  color: var(--lexa-gray-400);
}

.login-input-group .form-control:focus {
  border-color: var(--lexa-primary-300);
  box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.15);
}

.login-toggle-password {
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-gray-50);
  color: var(--lexa-gray-400);
  transition: color var(--lexa-transition-fast), border-color var(--lexa-transition-fast);
}

.login-toggle-password:hover {
  color: var(--lexa-primary);
  border-color: var(--lexa-primary-300);
}

.login-btn {
  background: var(--lexa-primary);
  color: var(--lexa-white);
  font-size: var(--lexa-font-size-lg);
  font-weight: var(--lexa-font-weight-semibold);
  padding: var(--lexa-spacing-3) var(--lexa-spacing-4);
  border: none;
  border-radius: var(--lexa-border-radius-lg);
  transition: transform var(--lexa-transition-fast), box-shadow var(--lexa-transition-fast), background var(--lexa-transition-fast);
}

.login-btn:hover {
  background: var(--lexa-primary-hover);
  color: var(--lexa-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
}

.login-btn:active {
  transform: translateY(0);
  background: var(--lexa-primary-active);
}

.login-forgot-link {
  font-size: var(--lexa-font-size-sm);
  color: var(--lexa-primary);
  text-decoration: none;
}

.login-forgot-link:hover {
  text-decoration: underline;
  color: var(--lexa-primary-hover);
}

/* --- Footer --- */
.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--lexa-spacing-4) var(--lexa-spacing-8);
  font-size: var(--lexa-font-size-xs);
  color: var(--lexa-gray-400);
  flex-shrink: 0;
}

.login-footer-version {
  color: var(--lexa-gray-300);
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .login-branding {
    padding: var(--lexa-spacing-6);
  }
  .login-form-section {
    padding: var(--lexa-spacing-6);
  }
  .login-headline {
    font-size: var(--lexa-font-size-xl);
  }
  .login-illustration svg {
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column-reverse;
  }
  .login-branding {
    padding: var(--lexa-spacing-6) var(--lexa-spacing-4);
  }
  .login-illustration {
    display: none;
  }
  .login-form-section {
    padding: var(--lexa-spacing-6) var(--lexa-spacing-4);
  }
  .login-footer {
    padding: var(--lexa-spacing-3) var(--lexa-spacing-4);
  }
}

@media (max-width: 480px) {
  .login-branding {
    display: none;
  }
  .login-card {
    box-shadow: none;
    border-radius: 0;
  }
  .login-form-section {
    padding: var(--lexa-spacing-4);
    align-items: flex-start;
    padding-top: var(--lexa-spacing-10);
  }
  .login-footer {
    flex-direction: column;
    gap: var(--lexa-spacing-1);
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC LAYOUT: LANDING
   Applied via body.page-landing class
   -------------------------------------------------------------------------- */

/* --- General --- */
.page-landing {
  font-family: var(--lexa-font-family-base);
  color: var(--lexa-gray-700);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

/* --- Nav --- */
.landing-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.75rem 0;
  transition: background 0.3s, box-shadow 0.3s;
  background: transparent;
}

.landing-nav-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lexa-primary);
}

.landing-nav-brand svg {
  flex-shrink: 0;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.landing-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lexa-gray-600);
  text-decoration: none;
  transition: color 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.landing-nav-link:hover {
  color: var(--lexa-primary);
}

.landing-btn-login {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lexa-gray-600);
  text-decoration: none;
  transition: color 0.2s;
}

.landing-btn-login:hover {
  color: var(--lexa-primary);
}

.landing-btn-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--lexa-primary);
  border-radius: var(--lexa-border-radius-lg);
  text-decoration: none;
  transition: all 0.2s;
}

.landing-btn-nav-cta:hover {
  background: var(--lexa-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}

.landing-hamburger {
  display: none;
}

/* --- Hero --- */
.landing-hero {
  padding: 8rem 0 5rem;
  background: linear-gradient(135deg, var(--lexa-primary-50) 0%, var(--lexa-white) 60%);
  position: relative;
  overflow: hidden;
  overflow-x: clip;
}

.landing-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--lexa-primary-100) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.landing-hero-content {
  max-width: 560px;
}

.landing-hero-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--lexa-gray-900);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.landing-hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--lexa-gray-600);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.landing-hero-mockup {
  position: relative;
  max-width: 540px;
}

.landing-hero-mockup svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(109, 40, 217, 0.15));
}

/* --- Buttons (reusable) --- */
.landing-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: var(--lexa-primary);
  border: none;
  border-radius: var(--lexa-border-radius-lg);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.landing-btn-primary:hover {
  background: var(--lexa-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109, 40, 217, 0.3);
  color: white;
}

.landing-btn-primary:active {
  transform: scale(0.97);
  box-shadow: none;
}

.landing-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lexa-primary);
  background: transparent;
  border: 2px solid var(--lexa-primary-200);
  border-radius: var(--lexa-border-radius-lg);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.landing-btn-outline:hover {
  background: var(--lexa-primary-50);
  border-color: var(--lexa-primary-300);
  color: var(--lexa-primary);
}

.landing-btn-outline:active {
  transform: scale(0.97);
}

/* --- Section titles --- */
.landing-section {
  padding: 5rem 0;
}

.landing-section-alt {
  padding: 5rem 0;
  background: var(--lexa-gray-50);
}

.landing-section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--lexa-gray-900);
  margin-bottom: 0.75rem;
}

.landing-section-subtitle {
  font-size: clamp(0.925rem, 1.5vw, 1.05rem);
  color: var(--lexa-gray-600);
  line-height: 1.7;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Pain Points cards --- */
.landing-pain-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  transition: all 0.2s;
}

.landing-pain-card:hover {
  border-color: var(--lexa-primary-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-pain-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--lexa-primary-50);
  border-radius: var(--lexa-border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-pain-icon i {
  font-size: 1.25rem;
  color: var(--lexa-primary);
}

.landing-pain-card .h4-visual {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.25rem;
}

.landing-pain-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-500);
  margin: 0;
  line-height: 1.5;
}

/* --- Product zigzag --- */
.landing-product-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}

.landing-product-block:last-child {
  margin-bottom: 0;
}

.landing-product-block.reverse {
  direction: rtl;
}

.landing-product-block.reverse > * {
  direction: ltr;
}

.landing-product-text h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lexa-gray-900);
  margin-bottom: 0.75rem;
}

.landing-product-text p {
  font-size: 0.95rem;
  color: var(--lexa-gray-500);
  line-height: 1.7;
}

.landing-product-mockup {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--lexa-border-color);
}

.landing-product-mockup svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Feature grid --- */
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.landing-feature-item {
  padding: 1.5rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  transition: all 0.2s;
}

.landing-feature-item:hover {
  border-color: var(--lexa-primary-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-feature-item i {
  font-size: 1.5rem;
  color: var(--lexa-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.landing-feature-item .h3-visual {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.3rem;
}

.landing-feature-item p {
  font-size: 0.825rem;
  color: var(--lexa-gray-500);
  margin: 0;
  line-height: 1.5;
}

/* --- Benefits --- */
.landing-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.landing-benefit-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--lexa-border-radius-lg);
  background: var(--lexa-white);
  border: 1px solid var(--lexa-border-color);
}

.landing-benefit-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-benefit-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--lexa-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-benefit-icon i {
  font-size: 1.25rem;
  color: var(--lexa-primary);
}

.landing-benefit-card .h4-visual {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.25rem;
}

.landing-benefit-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.6;
}

/* --- Audience cards --- */
.landing-audience-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.landing-audience-card {
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  transition: all 0.2s;
}

.landing-audience-card:hover {
  border-color: var(--lexa-primary-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-audience-card:active {
  transform: scale(0.98);
}

.landing-audience-card.featured {
  border-color: var(--lexa-primary-200);
  background: linear-gradient(to bottom, var(--lexa-primary-50), var(--lexa-white));
}

.landing-audience-card i {
  font-size: 2rem;
  color: var(--lexa-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.landing-audience-card .h4-visual {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.3rem;
}

.landing-audience-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.5;
}

.landing-audience-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--lexa-primary);
  background: var(--lexa-primary-100);
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  margin-top: 0.5rem;
}

/* --- Trust --- */
.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.landing-trust-item {
  text-align: center;
  padding: 1.5rem 1rem;
}

.landing-trust-item i {
  font-size: 1.75rem;
  color: var(--lexa-primary-300);
  margin-bottom: 0.75rem;
  display: block;
}

.landing-trust-item p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.5;
}

.landing-testimonial-placeholder {
  margin-top: 3rem;
  text-align: center;
  padding: 2rem;
  border: 1px dashed var(--lexa-gray-300);
  border-radius: var(--lexa-border-radius-lg);
  background: var(--lexa-gray-50);
}

.landing-testimonial-placeholder p {
  font-size: 0.9rem;
  color: var(--lexa-gray-400);
  font-style: italic;
}

/* --- FAQ --- */
.landing-faq {
  max-width: 800px;
  margin: 0 auto;
}

.landing-faq .accordion-item {
  border: 1px solid var(--lexa-border-color);
  border-radius: var(--lexa-border-radius-lg) !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.landing-faq .accordion-button {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--lexa-gray-800);
  background: var(--lexa-white);
  padding: 1rem 1.25rem;
}

.landing-faq .accordion-button:not(.collapsed) {
  color: var(--lexa-primary);
  background: var(--lexa-primary-50);
  box-shadow: none;
}

.landing-faq .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15);
}

.landing-faq .accordion-button::after {
  filter: brightness(0) saturate(100%);
}

.landing-faq .accordion-body {
  font-size: 0.9rem;
  color: var(--lexa-gray-600);
  line-height: 1.7;
  padding: 0 1.25rem 1rem;
}

/* --- Demo form --- */
.landing-demo {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--lexa-primary-50) 0%, var(--lexa-white) 100%);
}

.landing-demo-card {
  background: var(--lexa-white);
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--lexa-border-color);
}

.landing-demo-card .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lexa-gray-700);
}

.landing-demo-card .form-control {
  font-size: 0.9rem;
  border-color: var(--lexa-gray-200);
  padding: 0.6rem 0.75rem;
}

.landing-demo-card .form-control:focus {
  border-color: var(--lexa-primary-300);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

/* --- Footer --- */
.landing-footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--lexa-border-color);
}

.landing-footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-footer-links a {
  font-size: 0.85rem;
  color: var(--lexa-gray-500);
  text-decoration: none;
}

.landing-footer-links a:hover {
  color: var(--lexa-primary);
}

.landing-footer-text {
  font-size: 0.8rem;
  color: var(--lexa-gray-400);
}

.landing-btn-primary.lexa-btn-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* --- Problems section --- */
.landing-problems {
  padding: 5rem 0;
  background: var(--lexa-gray-50);
}

.landing-problem-card {
  padding: 1.75rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  transition: all 0.2s;
  height: 100%;
}

.landing-problem-card:hover {
  border-color: var(--lexa-primary-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-problem-card:active {
  transform: scale(0.98);
}

.landing-problem-icon {
  width: 48px;
  height: 48px;
  background: var(--lexa-primary-50);
  border-radius: var(--lexa-border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.landing-problem-icon i {
  font-size: 1.25rem;
  color: var(--lexa-primary);
}

.landing-problem-card .h4-visual {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.5rem;
}

.landing-problem-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.6;
}

/* --- Product section --- */
.landing-product {
  padding: 5rem 0;
}

.landing-product-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lexa-gray-900);
  margin-bottom: 0.75rem;
}

/* --- Features section (grid) --- */
.landing-features {
  padding: 5rem 0;
  background: var(--lexa-gray-50);
}

.landing-feature-card {
  padding: 1.5rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  transition: all 0.2s;
  height: 100%;
}

.landing-feature-card:hover {
  border-color: var(--lexa-primary-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.landing-feature-card:active {
  transform: scale(0.98);
}

.landing-feature-icon {
  width: 48px;
  height: 48px;
  background: var(--lexa-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.landing-feature-icon i {
  font-size: 1.25rem;
  color: var(--lexa-primary);
}

.landing-feature-card .h3-visual {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.3rem;
}

.landing-feature-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.6;
}

/* --- Benefits section --- */
.landing-benefits {
  padding: 5rem 0;
}

.landing-benefit-card .h4-visual-alt {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lexa-gray-800);
  margin-bottom: 0.25rem;
}

/* --- Audience highlight card --- */
.landing-audience {
  padding: 5rem 0;
  background: var(--lexa-gray-50);
}

.landing-audience-card-highlight {
  border-color: var(--lexa-primary-200);
  background: linear-gradient(to bottom, var(--lexa-primary-50), var(--lexa-white));
  position: relative;
}

.landing-audience-card-highlight .landing-audience-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* --- Trust section --- */
.landing-trust {
  padding: 5rem 0;
}

.landing-trust-card {
  padding: 1.5rem 1rem;
  border-radius: var(--lexa-border-radius-lg);
  border: 1px solid var(--lexa-border-color);
  background: var(--lexa-white);
  height: 100%;
}

.landing-trust-icon {
  font-size: 1.75rem;
  color: var(--lexa-primary-300);
  margin-bottom: 0.75rem;
  display: block;
}

.landing-trust-card p {
  font-size: 0.875rem;
  color: var(--lexa-gray-600);
  margin: 0;
  line-height: 1.5;
}

.landing-testimonial-icon {
  font-size: 2rem;
  color: var(--lexa-gray-300);
  margin-bottom: 0.5rem;
  display: block;
}

.landing-testimonial-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lexa-gray-500);
  font-style: italic;
}

/* --- FAQ section wrapper --- */
.landing-faq-section {
  padding: 5rem 0;
  background: var(--lexa-gray-50);
}

/* --- Check list --- */
.landing-check-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.landing-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--lexa-gray-600);
}

.landing-check-list li i {
  color: var(--lexa-primary);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* --- Footer link --- */
.landing-footer-link {
  font-size: 0.875rem;
  color: var(--lexa-gray-500);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.landing-footer-link:hover {
  color: var(--lexa-primary);
}

/* --- Hero illustration --- */
.landing-hero-illustration svg {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 400;
  filter: drop-shadow(0 20px 40px rgba(109, 40, 217, 0.15));
}

/* --- Landing reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .page-landing, .page-landing *, .page-landing *::before, .page-landing *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Landing responsive --- */
@media (max-width: 991.98px) {
  .landing-nav-links { display: none; }
  .landing-hamburger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .landing-hero { padding: 7rem 0 4rem; }
  .landing-product-block { grid-template-columns: 1fr; gap: 2rem; }
  .landing-product-block.reverse { direction: ltr; }
  .landing-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-audience-grid { grid-template-columns: repeat(3, 1fr); }
  .landing-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-benefit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  /* Hero */
  .landing-hero { padding: 5.5rem 0 2.5rem; text-align: center; overflow: hidden; }
  .landing-hero-content { max-width: 100%; }
  .landing-hero-subtitle { font-size: 1rem; }
  .landing-hero-actions { justify-content: center; }
  .landing-hero-mockup { margin: 1.5rem auto 0; max-width: 100%; }
  .landing-hero-mockup svg { max-width: 100%; height: auto; }

  /* Sections */
  .landing-section, .landing-section-alt { padding: 3rem 0; }
  .landing-section-title { font-size: 1.5rem; }

  /* Pain points — readable text */
  .landing-problem-card .h4-visual { font-size: 1rem; }
  .landing-problem-card p { font-size: 0.925rem; }

  /* Features — single col */
  .landing-feature-grid { grid-template-columns: 1fr; }
  .landing-feature-card .h3-visual { font-size: 1rem; }
  .landing-feature-card p { font-size: 0.925rem; }

  /* Audience */
  .landing-audience-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-audience-card p { font-size: 0.9rem; }

  /* Trust */
  .landing-trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* Demo form */
  .landing-demo-card { padding: 1.5rem; }

  /* SVG mockups — prevent overflow */
  .landing-product-mockup svg { max-width: 100%; height: auto; }

  /* Offcanvas links — proper touch targets */
  .offcanvas a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; padding: 0.5rem 1rem; }
  .offcanvas .btn { min-height: 44px; font-size: 1rem; }
}

@media (max-width: 479.98px) {
  .landing-hero { padding: 5rem 0 2rem; }
  .landing-hero-title { font-size: 1.6rem; }
  .landing-hero-subtitle { font-size: 0.95rem; }
  .landing-hero-actions { flex-direction: column; }
  .landing-hero-actions a { width: 100%; text-align: center; }
  .landing-audience-grid { grid-template-columns: 1fr; }
  .landing-demo-card { padding: 1.25rem; }
  .landing-problem-card { padding: 1.25rem; }
  .landing-section, .landing-section-alt { padding: 2.5rem 0; }
}

/* --- Back to top button --- */
.landing-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--lexa-primary);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
  z-index: 900;
}

.landing-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.landing-back-to-top:hover {
  background: var(--lexa-primary-hover);
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.4);
}

.landing-back-to-top:active {
  transform: scale(0.93);
}

@media (max-width: 479.98px) {
  .landing-back-to-top { bottom: 1rem; right: 1rem; }
}

/* --------------------------------------------------------------------------
   OWNER DASHBOARD
   -------------------------------------------------------------------------- */

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0;
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--lexa-gray-500, #64748B);
  margin-bottom: 0.25rem;
}

.kpi-help {
  font-size: 0.7rem;
  opacity: 0.5;
  cursor: help;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.kpi-help:hover { opacity: 0.9; }

/* Dashboard cards — compact + white surface */
.dash-card {
  background: var(--lexa-white, #ffffff);
  border: 1px solid var(--lexa-border-color, #E2E8F0);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  box-shadow: none;
}

/* Primeros pasos (/Setup) */
.setup-hub-card { max-width: 720px; }
.setup-demo-hint { font-size: 0.75rem; }

/* ════════════════════════════════════════════════
   Subscription / Activar plan (/Subscription/Convert)
   ════════════════════════════════════════════════ */
.sub-hero { text-align: center; max-width: 720px; margin: 0.5rem auto 1.75rem; }
.sub-trial-chip {
  display: inline-flex; align-items: center;
  background: var(--lexa-primary-50, #f5f3ff); color: var(--lexa-primary-700, #6D28D9);
  border: 1px solid var(--lexa-primary-100, #ede9fe);
  border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.8rem; font-weight: 600;
}
.sub-hero-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; margin: 0.8rem 0 0.35rem; color: var(--lexa-gray-900, #111827); }
.sub-hero-subtitle { color: var(--lexa-gray-500, #6b7280); font-size: 1.02rem; margin: 0; }

.sub-billing-toggle {
  display: inline-flex; gap: 0.25rem; margin-top: 1.25rem;
  background: var(--lexa-gray-100, #f3f4f6); border-radius: 999px; padding: 0.25rem;
}
.sub-billing-opt {
  border: 0; background: transparent; border-radius: 999px;
  padding: 0.4rem 1.1rem; font-weight: 600; font-size: 0.9rem; color: var(--lexa-gray-600, #4b5563);
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.15s ease, color 0.15s ease;
}
.sub-billing-opt.is-active { background: #fff; color: var(--lexa-primary-700, #6D28D9); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sub-billing-badge { background: var(--lexa-success, #16a34a); color: #fff; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.68rem; font-weight: 700; }

.sub-plans {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.sub-plan-card {
  position: relative; display: flex; flex-direction: column; gap: 0.85rem;
  background: #fff; border: 1.5px solid var(--lexa-gray-200, #e5e7eb);
  border-radius: 14px; padding: 1.25rem; cursor: pointer; margin: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sub-plan-card:hover { border-color: var(--lexa-primary-300, #A78BFA); box-shadow: 0 4px 14px rgba(109,40,217,.08); }
.sub-plan-card.is-featured { border-color: var(--lexa-primary, #6D28D9); box-shadow: 0 6px 20px rgba(109,40,217,.12); }
.sub-plan-card:has(.sub-plan-radio:checked) { border-color: var(--lexa-primary, #6D28D9); box-shadow: 0 0 0 3px var(--lexa-primary-100, #ede9fe); }
.sub-plan-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--lexa-primary, #6D28D9); color: #fff; font-size: 0.7rem; font-weight: 700;
  border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap;
}
.sub-plan-head { display: flex; align-items: flex-start; gap: 0.6rem; }
.sub-plan-radio { margin-top: 0.25rem; flex-shrink: 0; }
.sub-plan-name { font-weight: 800; font-size: 1.15rem; color: var(--lexa-gray-900, #111827); }
.sub-plan-tagline { font-size: 0.82rem; color: var(--lexa-gray-500, #6b7280); margin-top: 0.1rem; }

.sub-plan-price { min-height: 2.6rem; }
.sub-amount { font-size: 1.6rem; font-weight: 800; color: var(--lexa-gray-900, #111827); }
.sub-period { color: var(--lexa-gray-500, #6b7280); font-size: 0.85rem; }
.sub-price-equiv { display: block; color: var(--lexa-gray-500, #6b7280); font-size: 0.72rem; margin-top: 0.1rem; }
.sub-price-annual { display: none; }
.sub-plans.show-annual .sub-price-monthly { display: none; }
.sub-plans.show-annual .sub-price-annual { display: block; }

.sub-plan-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sub-plan-specs li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--lexa-gray-700, #374151); }
.sub-plan-specs li i { color: var(--lexa-primary, #6D28D9); width: 1rem; text-align: center; }

.sub-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sub-plan-features li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.83rem; color: var(--lexa-gray-600, #4b5563); }
.sub-plan-features li i { color: var(--lexa-success, #16a34a); margin-top: 0.15rem; }
.sub-plan-features li.is-highlight { color: var(--lexa-gray-900, #111827); font-weight: 600; }

.sub-details-toggle {
  border: 0; background: transparent; color: var(--lexa-primary-700, #6D28D9);
  font-size: 0.82rem; font-weight: 600; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: auto;
}
.sub-details-toggle i { transition: transform 0.15s ease; }
.sub-details-toggle:not(.collapsed) i { transform: rotate(180deg); }

.sub-cta-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

/* Selector de día de facturación (5/15/25) */
.sub-billing-day { border: 0; margin: 1.5rem 0 0; padding: 0; }
.sub-billing-day-label { font-weight: 700; font-size: 0.95rem; color: var(--lexa-gray-900, #111827); float: none; width: auto; }
.sub-billing-day-help { font-size: 0.82rem; color: var(--lexa-gray-500, #6b7280); margin: 0.15rem 0 0.6rem; }
.sub-billing-day-opts { display: flex; gap: 0.6rem; }
.sub-billing-day-opt { cursor: pointer; margin: 0; }
.sub-billing-day-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sub-billing-day-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 10px; font-weight: 700;
  border: 1.5px solid var(--lexa-gray-200, #e5e7eb);
  color: var(--lexa-gray-700, #374151); background: #fff; transition: all 0.15s ease;
}
.sub-billing-day-opt input:checked + span { border-color: var(--lexa-primary, #6D28D9); background: var(--lexa-primary-50, #f5f3ff); color: var(--lexa-primary-700, #6D28D9); }
.sub-billing-day-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--lexa-primary-100, #ede9fe); }
[data-theme="dark"] .sub-billing-day-opt span { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }

/* Cualidades / señales de confianza — banda prominente bajo el hero */
.sub-trust {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sub-trust li {
  display: flex; align-items: center; gap: 0.8rem;
  background: #fff; border: 1px solid var(--lexa-gray-200, #e5e7eb);
  border-radius: 12px; padding: 0.9rem 1.1rem;
}
.sub-trust li i {
  font-size: 1.45rem; color: var(--lexa-primary, #6D28D9);
  background: var(--lexa-primary-50, #f5f3ff); border-radius: 10px;
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-trust-title { display: block; font-weight: 700; color: var(--lexa-gray-900, #111827); font-size: 0.92rem; }
.sub-trust-sub { display: block; font-size: 0.78rem; color: var(--lexa-gray-500, #6b7280); margin-top: 0.1rem; }
[data-theme="dark"] .sub-trust li { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }

.sub-compare-wrap { margin-top: 1.5rem; }
.sub-compare-toggle { text-decoration: none; font-weight: 600; padding-left: 0; }
.sub-compare th, .sub-compare td { text-align: center; }
.sub-compare th[scope="row"], .sub-compare thead th:first-child { text-align: left; }
.sub-compare .is-featured { background: var(--lexa-primary-50, #f5f3ff); }

[data-theme="dark"] .sub-plan-card { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .sub-billing-opt.is-active { background: var(--lexa-surface-overlay); }
[data-theme="dark"] .sub-trial-chip { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); }

.dash-birthday-branches {
  font-size: 0.68rem;
  line-height: 1.1;
  margin-top: 0.1rem;
}

/* Card de aviso "Reservas online sin pago" — clickable, acento magenta a juego con
   el indicador de la agenda (.ind-online-unpaid) y el badge del sidebar. */
.dash-attention-card {
  display: block;
  border-left: 3px solid #db2777;
  transition: background var(--lexa-transition-fast, 150ms ease), box-shadow var(--lexa-transition-fast, 150ms ease);
}
.dash-attention-card:hover {
  background: var(--lexa-accent-soft, #FDEAF3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.dash-attention-icon {
  font-size: 1.35rem;
  color: #db2777;
  flex: 0 0 auto;
}
.dash-attention-sub {
  font-size: 0.68rem;
  line-height: 1.15;
}
.dash-attention-count {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: #db2777;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .dash-attention-card:hover {
  background: rgba(219, 39, 119, 0.12);
}

.dash-card .card-body {
  padding: 0.75rem 1rem;
}

/* KPI Strip — compact inline metrics */
.kpi-strip {
  display: flex;
  gap: 0;
}
.kpi-strip-item {
  flex: 1;
  padding: 0.15rem 0.5rem;
  border-right: 1px solid var(--lexa-border-color, #E2E8F0);
  min-width: 0;
}
.kpi-strip-item:last-child { border-right: none; }
.kpi-strip-label {
  display: block;
  font-size: 0.65rem;
  color: var(--lexa-gray-500, #64748B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-strip-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  .kpi-strip { flex-wrap: wrap; }
  .kpi-strip-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--lexa-border-color, #E2E8F0); padding: 0.25rem 0.5rem; }
  .kpi-strip-item:nth-last-child(-n+2) { border-bottom: none; }
  .kpi-strip-value { font-size: 1rem; }
}

.owner-patients-strip .kpi-strip-item {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.owner-kpi-strip-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.owner-kpi-strip-link:hover {
  color: inherit;
  text-decoration: none;
}

.owner-kpi-progress {
  max-width: 7rem;
}

/* Productivity report */
.progress-thin { height: 5px; }

/* Waitlist patient search results */
.waitlist-patient-results {
  z-index: 1050;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

/* Waitlist time preferences compact display */
.waitlist-time-prefs {
  font-size: 0.8rem;
  line-height: 1.4;
}
.waitlist-time-prefs .badge {
  font-weight: 500;
}

/* Waitlist time preference repeater */
.time-pref-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.time-pref-row select,
.time-pref-row input[type="time"] {
  flex: 1;
  min-width: 0;
}
.time-pref-row .btn-remove {
  flex-shrink: 0;
}

/* Waitlist empty state */
.waitlist-empty-state {
  --waitlist-empty-bg: #FFFFFF;
  --waitlist-empty-border: #E5E7EB;
  --waitlist-empty-title: #111827;
  --waitlist-empty-text: #4B5563;
  --waitlist-empty-muted: #6B7280;
  --waitlist-empty-accent: #6D28D9;
  --waitlist-empty-accent-soft: #F5F3FF;
  width: min(100%, 840px);
  margin: 1.75rem auto 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  background:
    radial-gradient(circle at 17% 22%, rgba(139, 92, 246, 0.08), transparent 32%),
    var(--waitlist-empty-bg);
  border: 1px solid var(--waitlist-empty-border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.waitlist-empty-illustration {
  display: flex;
  justify-content: center;
}

.waitlist-lexi {
  width: min(100%, 210px);
  height: auto;
  overflow: visible;
}

.waitlist-empty-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--waitlist-empty-accent-soft);
  color: var(--waitlist-empty-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.waitlist-empty-content h3 {
  margin: 0 0 0.65rem;
  color: var(--waitlist-empty-title);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.waitlist-empty-content p {
  max-width: 34rem;
  margin: 0;
  color: var(--waitlist-empty-text);
  font-size: 0.98rem;
  line-height: 1.65;
}

.waitlist-empty-content .waitlist-empty-hint {
  margin-top: 0.65rem;
  color: var(--waitlist-empty-muted);
}

.waitlist-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.waitlist-lexi-float {
  animation: waitlist-lexi-float 6s ease-in-out infinite;
  transform-origin: center;
}

.waitlist-lexi-halo {
  animation: waitlist-lexi-halo 18s linear infinite;
  transform-origin: 110px 99px;
}

.waitlist-lexi-core {
  animation: waitlist-lexi-core 3.6s ease-in-out infinite;
}

@keyframes waitlist-lexi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes waitlist-lexi-halo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes waitlist-lexi-core {
  0%, 100% { opacity: 0.78; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-lexi-float,
  .waitlist-lexi-halo,
  .waitlist-lexi-core {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .waitlist-empty-state {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: 1.25rem;
  }

  .waitlist-empty-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .waitlist-empty-actions {
    justify-content: center;
  }

  .waitlist-lexi {
    width: min(72vw, 190px);
  }
}

[data-theme="dark"] .waitlist-empty-state {
  --waitlist-empty-bg: var(--lexa-surface-raised, #18181B);
  --waitlist-empty-border: var(--lexa-border-default, #27272A);
  --waitlist-empty-title: var(--lexa-text-primary, #F4F4F5);
  --waitlist-empty-text: var(--lexa-text-secondary, #D4D4D8);
  --waitlist-empty-muted: var(--lexa-text-tertiary, #A1A1AA);
  --waitlist-empty-accent: #C4B5FD;
  --waitlist-empty-accent-soft: rgba(139, 92, 246, 0.14);
  background:
    radial-gradient(circle at 17% 22%, rgba(139, 92, 246, 0.18), transparent 34%),
    var(--waitlist-empty-bg);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

a.dash-card-link {
  text-decoration: none;
  color: inherit;
}
a.dash-card-link .dash-card {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
a.dash-card-link:hover .dash-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Dashboard accent borders — 2px, Lexa palette */
.dash-accent-primary {
  border-left: 2px solid var(--lexa-primary-300, #A78BFA) !important;
}
.dash-accent-danger {
  border-left: 2px solid #FDA4AF !important;
}

/* Dashboard pastel danger text — softer than --lexa-danger */
.dash-text-danger {
  color: #E11D48 !important;
}

/* --------------------------------------------------------------------------
   THERAPIST KPI CHIPS — Compact horizontal strip for mobile
   -------------------------------------------------------------------------- */
.dash-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 2rem;
  background: var(--lexa-gray-100, #f1f5f9);
  border: 1px solid var(--lexa-border-color, #E2E8F0);
  font-size: 0.8rem;
  white-space: nowrap;
}
.dash-kpi-chip-label {
  color: var(--lexa-gray-500, #64748B);
}
.dash-kpi-chip-value {
  font-weight: 700;
  color: var(--lexa-gray-900, #0F172A);
}
.dash-kpi-chip-active {
  background: var(--lexa-primary-50, #F5F3FF);
  border-color: var(--lexa-primary-300, #A78BFA);
}
.dash-kpi-chip-active .dash-kpi-chip-value {
  color: var(--lexa-primary-600, #7C3AED);
}
.dash-kpi-chip-danger {
  background: #FFF1F2;
  border-color: #FDA4AF;
}
.dash-kpi-chip-danger .dash-kpi-chip-value {
  color: #E11D48;
}

/* --------------------------------------------------------------------------
   DASHBOARD KPI CARDS — Purple gradient style
   -------------------------------------------------------------------------- */
.kpi-card {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
  border: none;
  border-radius: 1rem;
  color: #fff;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(109, 40, 217, 0.3);
}
.kpi-card .card-body {
  padding: 1.25rem;
}
.kpi-card .kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}
.kpi-card .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
}
.kpi-card .kpi-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-card .kpi-icon-circle i {
  font-size: 0.95rem;
  color: #fff;
}
.kpi-card .card-footer {
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1.25rem;
}
.kpi-card .card-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.8rem;
}
.kpi-card .card-footer a:hover {
  color: #fff;
}

/* Variant: danger (for pending notes with high count) */
.kpi-card.kpi-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.kpi-card.kpi-danger:hover {
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

/* Variant: warning */
.kpi-card.kpi-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.kpi-card.kpi-warning:hover {
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

/* Variant: muted/secondary */
.kpi-card.kpi-muted {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}
.kpi-card.kpi-muted:hover {
  box-shadow: 0 8px 25px rgba(107, 114, 128, 0.3);
}

/* Branch badges in therapist cards */
.badge-branch {
  font-size: 0.6em;
}

/* --------------------------------------------------------------------------
   UI KIT — Clases estandarizadas lexa-*
   -------------------------------------------------------------------------- */

/* Boton icon-only (cuadrado, sin texto) */
.lexa-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lexa-btn-icon.btn-sm { width: 28px; height: 28px; }
.lexa-btn-icon.btn-lg { width: 40px; height: 40px; }

/* Estado loading en botones */
.btn .btn-spinner { display: none; }
.lexa-btn-loading .btn-text { display: none; }
.lexa-btn-loading .btn-spinner { display: inline-block; }
.lexa-btn-loading { pointer-events: none; opacity: 0.75; }

/* Global auto-loading state */
.lexa-auto-loading { pointer-events: none; opacity: 0.75; }

/* Wrapper centrado de spinner */
.lexa-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lexa-spacing-3, 0.75rem);
  padding: var(--lexa-spacing-8, 2rem);
  color: var(--lexa-gray-500, #64748B);
}

.lexa-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .lexa-loading-overlay {
  background: rgba(19, 19, 22, 0.75);
}

/* Host del overlay inyectado por JS (contenido de tabs, refrescos AJAX):
   da el contexto de posicionamiento sin sumar un segundo veil. */
.lexa-loading-host {
  position: relative;
  min-height: 200px;
}

/* Seccion colapsable warning (emergency/medical) */
.lexa-form-section-warning {
  border-color: #FDE68A;
}
.lexa-form-section-warning > .card-header {
  background-color: #FEF9C3;
  border-bottom-color: #FDE68A;
}
.lexa-form-section-warning > .card-header i.bi-exclamation-triangle {
  color: #CA8A04;
}

/* Checklist container (especialidades, servicios) */
.lexa-checklist {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--lexa-gray-200, #e9ecef);
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  padding: var(--lexa-spacing-2, 0.5rem);
}

/* Daily summary modal: responsive table — hide secondary columns on mobile */
@media (max-width: 576px) {
  #summaryTable th:nth-child(2), #summaryTable td:nth-child(2),
  #summaryTable th:nth-child(n+6):not(:last-child), #summaryTable td:nth-child(n+6):not(:last-child) {
    display: none;
  }
  #summaryTable { font-size: 0.75rem; }
  #summaryTable th, #summaryTable td { padding: 0.3rem 0.4rem; white-space: nowrap; }
}
@media (max-width: 768px) {
  #summaryTable { font-size: 0.8rem; }
  #summaryTable th, #summaryTable td { padding: 0.3rem 0.5rem; }
}

/* Therapist quick card — lightweight popover for appointment clicks */
.therapist-quick-card {
  background: var(--lexa-white, #fff);
  border: 1px solid var(--lexa-border-color, #E2E8F0);
  border-radius: 0.5rem;
  padding: 0.75rem;
  min-width: 220px;
  max-width: 280px;
}
[data-theme="dark"] .therapist-quick-card {
  background: var(--lexa-surface-raised);
  border-color: var(--lexa-border-default);
}

/* Therapist view: hide mode selector (locked to week) */
body.therapist-view #agendaModeSelector { display: none; }

.therapist-mobile-view-selector {
  display: none;
}

.agenda-mobile-summary {
  display: none;
}

@media (max-width: 576px) {
  body.therapist-view .therapist-mobile-view-selector {
    display: inline-flex;
  }

  body.therapist-view .therapist-mobile-view-selector .btn {
    min-height: 34px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
  }

  body.therapist-view.mobile-agenda-compact .agenda-mobile-summary {
    display: block;
  }

  body.therapist-view.mobile-agenda-compact .agenda-grid-week,
  body.therapist-view.mobile-agenda-compact .branch-legend {
    display: none;
  }

  /* Modo DIA en vista compacta: la grilla de escritorio (columnas por terapeuta) no cabe
     en un celular, asi que la reemplaza el listado hora + paciente que trae _AgendaGrid.
     En "detalle" el listado se oculta y vuelve la grilla (regla generica de arriba). */
  body.therapist-view.mobile-agenda-compact .agenda-grid:not(.agenda-grid-week) {
    display: none;
  }

  body.therapist-view.mobile-agenda-detail .agenda-mobile-summary {
    display: none;
  }

  .agenda-mobile-summary {
    padding: 0.55rem 0.5rem 5.8rem;
    background: #f8fafc;
  }

  .agenda-mobile-summary section {
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

  .agenda-mobile-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    color: #17233a;
    font-weight: 700;
  }

  .agenda-mobile-section-title small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: right;
  }

  body.therapist-view.mobile-agenda-compact .agenda-info-row,
  body.therapist-view.mobile-agenda-detail .agenda-info-row {
    display: none;
  }

  body.therapist-view.mobile-agenda-compact .agenda-toolbar,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.28rem;
    padding: 0.25rem 0.5rem;
  }

  body.therapist-view.mobile-agenda-compact .toolbar-date,
  body.therapist-view.mobile-agenda-detail .toolbar-date {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 38px 1fr 38px 42px;
    gap: 0.25rem;
  }

  body.therapist-view.mobile-agenda-compact .toolbar-date input[type="date"],
  body.therapist-view.mobile-agenda-compact .toolbar-date .btn,
  body.therapist-view.mobile-agenda-compact .agenda-toolbar #branchSelect,
  body.therapist-view.mobile-agenda-compact .agenda-toolbar #statusSelect,
  body.therapist-view.mobile-agenda-detail .toolbar-date input[type="date"],
  body.therapist-view.mobile-agenda-detail .toolbar-date .btn,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar #branchSelect,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar #statusSelect {
    min-height: 34px;
    height: 34px;
    font-size: 0.72rem;
  }

  body.therapist-view.mobile-agenda-compact .toolbar-date .btn,
  body.therapist-view.mobile-agenda-detail .toolbar-date .btn {
    min-width: 0;
    padding: 0;
  }

  body.therapist-view.mobile-agenda-compact .agenda-toolbar #branchSelect,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar #branchSelect {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  body.therapist-view.mobile-agenda-compact .agenda-toolbar #statusSelect,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar #statusSelect {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  body.therapist-view.mobile-agenda-compact .agenda-toolbar [data-mode-section="week"],
  body.therapist-view.mobile-agenda-compact .toolbar-actions,
  body.therapist-view.mobile-agenda-detail .agenda-toolbar [data-mode-section="week"],
  body.therapist-view.mobile-agenda-detail .toolbar-actions {
    display: none !important;
  }

  body.therapist-view.mobile-agenda-compact.single-branch .agenda-toolbar,
  body.therapist-view.mobile-agenda-detail.single-branch .agenda-toolbar {
    grid-template-columns: 1fr;
  }

  body.therapist-view.mobile-agenda-compact.single-branch .agenda-toolbar #statusSelect,
  body.therapist-view.mobile-agenda-detail.single-branch .agenda-toolbar #statusSelect {
    grid-column: 1;
    grid-row: 2;
  }

  /* ── Mobile Weekly View (Therapist Agenda) - NEW COMPACT DESIGN ── */
  body.therapist-view.mobile-agenda-week #agendaMobileWeeklyGrid {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 280px);
    background: var(--lexa-surface-base);
    font-family: var(--lexa-font-family-base);
  }

  body.therapist-view.mobile-agenda-week .agenda-mobile-summary,
  body.therapist-view.mobile-agenda-week .agenda-info-row,
  body.therapist-view.mobile-agenda-week .agenda-grid-wrapper {
    display: none !important;
  }

  /* Weekly Grid Header (Day Names) */
  .weekly-grid-header {
    display: flex;
    gap: 0;
    background: var(--lexa-surface-raised);
    border-bottom: 1px solid var(--lexa-border-default);
    flex-shrink: 0;
  }

  .weekly-grid-header-time {
    width: 42px;
    padding: 4px 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--lexa-text-tertiary);
    flex-shrink: 0;
  }

  .weekly-grid-header-day {
    flex: 1;
    min-width: 0;
    padding: 4px 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--lexa-text-tertiary);
    text-align: center;
    border-right: 1px solid var(--lexa-border-subtle);
  }

  .weekly-grid-header-day:last-child {
    border-right: none;
  }

  /* Weekly Grid Container */
  .weekly-grid-body {
    display: flex;
    overflow: auto;
    flex: 1;
    gap: 0;
  }

  /* Time Column (Sticky Left) */
  .weekly-grid-time-column {
    width: 42px;
    flex-shrink: 0;
    background: var(--lexa-surface-raised);
    border-right: 1px solid var(--lexa-border-default);
    overflow-y: hidden;
    z-index: 5;
  }

  .weekly-grid-time-slot {
    min-height: 24px;
    height: 24px;
    padding: 0 2px;
    font-size: 0.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lexa-text-tertiary);
    border-bottom: 1px solid var(--lexa-border-subtle);
    font-weight: 500;
  }

  /* Day Columns */
  .weekly-grid-day-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid var(--lexa-border-subtle);
  }

  .weekly-grid-day-column:last-child {
    border-right: none;
  }

  .weekly-grid-appointment-slot {
    min-height: 24px;
    height: 24px;
    border-bottom: 1px solid var(--lexa-border-subtle);
    padding: 1px;
    position: relative;
    background: var(--lexa-surface-base);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Appointment Badge in Weekly Mobile */
  .weekly-appointment-badge {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lexa-primary);
    color: var(--lexa-text-inverse);
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }

  .weekly-appointment-badge.status-confirmed {
    background: var(--lexa-status-confirmed);
    color: #fff;
  }

  /* Desktop card class for Attended status is `status-completed` (see _AgendaWeekGrid.cshtml). */
  .weekly-appointment-badge.status-completed,
  .weekly-appointment-badge.status-attended {
    background: var(--lexa-status-attended);
    color: #fff;
  }

  .weekly-appointment-badge.status-scheduled {
    background: var(--lexa-status-scheduled);
    color: #fff;
  }

  .weekly-appointment-badge.status-rescheduled {
    background: var(--lexa-status-rescheduled);
    color: #fff;
  }

  .weekly-appointment-badge.status-inprogress {
    background: var(--lexa-status-inprogress);
    color: #fff;
  }

  .weekly-appointment-badge.status-cancelled {
    background: var(--lexa-status-cancelled);
    color: #fff;
  }

  .weekly-appointment-badge.status-noshow {
    background: var(--lexa-status-noshow);
    color: #fff;
  }

  /* Empty State */
  .weekly-grid-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--lexa-text-tertiary);
    font-size: 0.75rem;
  }

  /* Toolbar adjustments for weekly mobile */
  body.therapist-view.mobile-agenda-week .agenda-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.28rem;
    padding: 0.25rem 0.5rem;
  }

  body.therapist-view.mobile-agenda-week .toolbar-date {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 38px 1fr 38px 42px;
    gap: 0.25rem;
  }

  body.therapist-view.mobile-agenda-week .toolbar-date input[type="date"],
  body.therapist-view.mobile-agenda-week .toolbar-date .btn,
  body.therapist-view.mobile-agenda-week .agenda-toolbar #branchSelect,
  body.therapist-view.mobile-agenda-week .agenda-toolbar #statusSelect {
    min-height: 34px;
    height: 34px;
    font-size: 0.72rem;
  }

  body.therapist-view.mobile-agenda-week .toolbar-date .btn {
    min-width: 0;
    padding: 0;
  }

  body.therapist-view.mobile-agenda-week .agenda-toolbar #branchSelect {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  body.therapist-view.mobile-agenda-week .agenda-toolbar #statusSelect {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  body.therapist-view.mobile-agenda-week.single-branch .agenda-toolbar {
    grid-template-columns: 1fr;
  }

  body.therapist-view.mobile-agenda-week.single-branch .agenda-toolbar #statusSelect {
    grid-column: 1;
    grid-row: 2;
  }

  body.therapist-view.mobile-agenda-week .agenda-toolbar [data-mode-section="week"],
  body.therapist-view.mobile-agenda-week .toolbar-actions {
    display: none !important;
  }

  body.therapist-view.mobile-agenda-compact .agenda-mobile-next {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 1040;
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem;
    border-color: #cbd5e1;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  }

  body.therapist-view.mobile-agenda-compact .agenda-mobile-next .agenda-mobile-section-title {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin: 0;
    min-width: 0;
  }

  body.therapist-view.mobile-agenda-compact .agenda-mobile-next .agenda-mobile-section-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
  }

  body.therapist-view.mobile-agenda-compact .agenda-mobile-next .agenda-mobile-section-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 0.62rem;
  }

  .agenda-mobile-next-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 48px;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #6d28d9;
    border-radius: 8px;
    background: #f8fbff;
    color: #17233a;
    padding: 0.38rem 0.45rem;
    text-align: left;
  }

  .agenda-mobile-next-time {
    color: #5b21b6;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
  }

  .agenda-mobile-next-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .agenda-mobile-next-copy strong,
  .agenda-mobile-next-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-mobile-next-copy .service-name {
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
  }

  .agenda-mobile-next-copy .appt-meta {
    display: flex;
    gap: 0.25rem;
    color: #64748b;
    font-size: 0.62rem;
    min-width: 0;
  }

  .agenda-mobile-status-chip,
  .therapist-quick-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .agenda-mobile-status-chip {
    max-width: 82px;
    padding: 0.25rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .therapist-quick-status {
    padding: 0.3rem 0.5rem;
  }

  .agenda-mobile-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.85rem;
  }

  .agenda-mobile-timeline {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.65rem;
  }

  .agenda-mobile-time-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    height: 420px;
  }

  .agenda-mobile-rail {
    position: relative;
    height: 420px;
    overflow: hidden;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background:
      repeating-linear-gradient(
        to bottom,
        #f8fafc 0,
        #f8fafc 34px,
        #edf2f7 35px
      );
  }

  .agenda-mobile-window,
  .agenda-mobile-block {
    position: absolute;
    box-sizing: border-box;
    left: 8px;
    right: 8px;
    min-height: 26px;
    border-radius: 7px;
    overflow: hidden;
  }

  .agenda-mobile-window {
    display: flex;
    align-items: center;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.55rem;
  }

  .agenda-mobile-block {
    display: flex;
    align-items: center;
    column-gap: 0.55rem;
    border: 1px solid #c4b5fd;
    border-left: 4px solid #6d28d9;
    background: #ede9fe;
    color: #2e1065;
    padding: 0.18rem 0.5rem;
    text-align: left;
  }

  .agenda-mobile-block .time-range {
    display: inline;
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .agenda-mobile-block .patient-name {
    display: inline;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    line-height: 1;
  }

  .agenda-mobile-block .service-name {
    display: inline;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5b21b6;
    font-size: 0.66rem;
    line-height: 1;
  }

  .agenda-mobile-week-list {
    display: grid;
    gap: 0.45rem;
  }

  .agenda-mobile-week-row {
    display: block;
    min-height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
  }

  .agenda-mobile-week-row-head {
    display: grid;
    grid-template-columns: 62px 1fr 86px;
    align-items: center;
    gap: 0.55rem;
  }

  /* Lista hora + paciente de cada dia (antes solo se veia el conteo de citas). */
  .agenda-mobile-appts {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.35rem 0 0;
    border-top: 1px dashed #e2e8f0;
  }

  .agenda-mobile-appts li + li { margin-top: 0.15rem; }

  .agenda-mobile-appt {
    /* appointment-card es position:absolute (slots de la grilla); en la lista tiene que
       volver al flujo normal o todas las citas del dia se apilan una sobre otra. */
    position: static;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 0.2rem 0.25rem;
    text-align: left;
  }

  .agenda-mobile-appt > .time-range {
    font-size: 0.72rem;
    font-weight: 700;
    color: #17233a;
    font-variant-numeric: tabular-nums;
  }

  .agenda-mobile-appt > .patient-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: #17233a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-mobile-appt > .service-name {
    font-size: 0.63rem;
    /* font-weight explicito: `.agenda-mobile-week-row span` (0,1,1) le pone 600 a cualquier span
       descendiente de la fila, incluidos los del listado nuevo. */
    font-weight: 400;
    color: #64748b;
    white-space: nowrap;
  }

  .agenda-mobile-week-row.active {
    border-color: #c4b5fd;
    background: #faf5ff;
  }

  .agenda-mobile-week-row strong,
  .agenda-mobile-week-row span {
    display: block;
    line-height: 1.1;
  }

  .agenda-mobile-week-row strong {
    color: #17233a;
    font-size: 0.78rem;
  }

  .agenda-mobile-week-row span,
  .agenda-mobile-week-row small {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
  }

  .agenda-mobile-week-meter {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
  }

  .agenda-mobile-week-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #6d28d9;
  }
}

/* Empty state para tablas */
.lexa-table-empty {
  text-align: center;
  padding: var(--lexa-spacing-8, 2rem) !important;
  color: var(--lexa-gray-500, #64748B);
}
.lexa-table-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
  opacity: 0.5;
}

/* Loading overlay para tablas */
.lexa-table-loading {
  position: relative;
  min-height: 200px;
}
.lexa-table-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 5;
}
[data-theme="dark"] .lexa-table-loading::after {
  background: rgba(19, 19, 22, 0.7);
}

/* Flash de fila recién actualizada tras un refresco AJAX */
@keyframes lexa-row-flash {
  from { background-color: var(--lexa-primary-100, #EDE9FE); }
  to { background-color: transparent; }
}
.lexa-row-flash > td {
  animation: lexa-row-flash 1.6s ease-out 1;
}

/* Header de modulo (titulo + acciones) */
.lexa-module-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--lexa-spacing-2, 0.5rem);
  margin-bottom: var(--lexa-spacing-1, 0.25rem);
  flex-wrap: wrap;
}
.lexa-module-header h2 {
  display: none;
}

/* Barra de filtros */
.lexa-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  align-items: flex-end;
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
  padding: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  background: var(--lexa-gray-50, #f8f9fa);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  border: 1px solid var(--lexa-gray-200, #e9ecef);
}

/* Altura uniforme: inputs, selects y botones dentro de filter bar */
.lexa-filter-bar .form-control,
.lexa-filter-bar .form-select,
.lexa-filter-bar .input-group .form-control {
  height: 2rem;
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  line-height: 1.5;
}

/* Select: padding derecho extra para no pisar la flecha */
.lexa-filter-bar .form-select {
  padding-right: 2rem;
}

/* Input-group addon alineado */
.lexa-filter-bar .input-group .input-group-text {
  height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

/* Botones: misma altura que los controles */
.lexa-filter-bar .btn {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  line-height: 2rem;
  white-space: nowrap;
}

/* Labels consistentes */
.lexa-filter-bar .form-label {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  margin-bottom: 0.25rem;
  font-weight: var(--lexa-font-weight-medium, 500);
  color: var(--lexa-gray-600, #475569);
}

/* Switch dentro de filter bar: alinea verticalmente con los inputs de 2rem */
.lexa-filter-bar .lexa-filter-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding-left: 0;
  margin: 0;
  align-self: flex-end;
}
.lexa-filter-bar .lexa-filter-switch .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}
.lexa-filter-bar .lexa-filter-switch .form-check-label {
  margin: 0;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  white-space: nowrap;
  cursor: pointer;
}

/* Trailing action cluster inside the filter bar: Filtrar / Limpiar / Descargar.
   Kept on a single baseline-aligned row so the three never stack on desktop. */
.lexa-filter-bar .lexa-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--lexa-spacing-2, 0.5rem);
  align-self: flex-end;
}

/* Action row between the filter bar and the table:
   result count on the left, "Nuevo X" creation button on the right. */
.lexa-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lexa-spacing-2, 0.5rem);
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
}
.lexa-list-actions .lexa-list-count {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  color: var(--lexa-gray-600, #475569);
}
/* Everything after the count is pushed to the right edge. */
.lexa-list-actions .lexa-list-actions-end {
  display: flex;
  align-items: center;
  gap: var(--lexa-spacing-2, 0.5rem);
  margin-left: auto;
}

/* ── Bulk actions toolbar (reporte de citas) ──
   Aparece entre la filter bar y la tabla cuando hay filas seleccionadas. */
.lexa-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  margin-bottom: var(--lexa-spacing-2, 0.5rem);
  padding: var(--lexa-spacing-2, 0.5rem) var(--lexa-spacing-3, 0.75rem);
  background: var(--lexa-primary-50, #F5F3FF);
  border: 1px solid var(--lexa-primary-light, #EDE9FE);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
}
.lexa-bulk-count {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  font-weight: var(--lexa-font-weight-medium, 500);
  color: var(--lexa-gray-700, #334155);
}
.lexa-bulk-clear,
.lexa-bulk-banner {
  font-size: var(--lexa-font-size-sm, 0.875rem);
}
.lexa-bulk-banner {
  color: var(--lexa-gray-600, #475569);
}
/* Columna de checkboxes de selección masiva: angosta y centrada */
.bulk-check-col {
  width: 2rem;
  text-align: center;
}
[data-theme="dark"] .lexa-bulk-toolbar {
  background: var(--lexa-surface-raised);
  border-color: var(--lexa-border-default);
}

/* ── Date Range Picker ── */
.lexa-daterange { position: relative; }

.lexa-daterange-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  background: var(--lexa-surface-base, #fff);
  min-width: 13rem;
}
.lexa-daterange-toggle .bi-chevron-down {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: auto;
  transition: transform 0.2s;
}
.lexa-daterange-toggle.active .bi-chevron-down { transform: rotate(180deg); }

.lexa-dr-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1055;
  margin-top: 4px;
  background: var(--lexa-surface-base, #fff);
  border: 1px solid var(--lexa-gray-200, #e9ecef);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.lexa-dr-dropdown.show { display: block; }

.lexa-dr-body { display: flex; }

/* Presets sidebar */
.lexa-dr-presets {
  min-width: 11rem;
  padding: 0.5rem 0;
  border-right: 1px solid var(--lexa-gray-200, #e9ecef);
}
.lexa-dr-preset {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--lexa-gray-700, #334155);
  transition: background 0.15s;
  white-space: nowrap;
}
.lexa-dr-preset:hover { background: var(--lexa-gray-100, #f1f5f9); }
.lexa-dr-preset.active {
  background: var(--lexa-primary-50, #eff6ff);
  color: var(--lexa-primary, #2563eb);
  font-weight: 500;
}

/* Calendars wrapper */
.lexa-dr-cals-wrapper { display: flex; flex-direction: column; }
.lexa-dr-calendars { display: flex; gap: 1rem; padding: 0.75rem 1rem 0; }

/* Single calendar */
.lexa-dr-cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.lexa-dr-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  color: var(--lexa-gray-600, #475569);
  line-height: 1;
}
.lexa-dr-nav:hover { background: var(--lexa-gray-100, #f1f5f9); }
.lexa-dr-month-sel, .lexa-dr-year-sel {
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lexa-gray-800, #1e293b);
  cursor: pointer;
  padding: 0.15rem 0;
}
.lexa-dr-month-sel { min-width: 5.5rem; }
.lexa-dr-year-sel { min-width: 3.5rem; }

/* Day grid */
.lexa-dr-grid {
  display: grid;
  grid-template-columns: repeat(7, 2rem);
  gap: 1px;
  justify-content: center;
}
.lexa-dr-dow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--lexa-primary, #2563eb);
  padding: 0.25rem 0;
  text-transform: capitalize;
}
.lexa-dr-day {
  text-align: center;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
  color: var(--lexa-gray-800, #1e293b);
}
.lexa-dr-day:hover:not(.other):not(.range-start):not(.range-end) { background: var(--lexa-gray-100, #f1f5f9); }
.lexa-dr-day.range-start:hover, .lexa-dr-day.range-end:hover { opacity: 0.85; }
.lexa-dr-day.other { color: var(--lexa-gray-400, #94a3b8); }
.lexa-dr-day.today {
  font-weight: 600;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--lexa-primary, #2563eb);
  color: var(--lexa-primary, #2563eb);
}
.lexa-dr-day.in-range {
  background: var(--lexa-primary-50, #eff6ff);
  border-radius: 0;
}
.lexa-dr-day.in-range:hover:not(.range-start):not(.range-end) { background: var(--lexa-primary-100, #dbeafe); }
.lexa-dr-day.range-start {
  background: var(--lexa-primary, #2563eb);
  color: #fff;
  border-radius: 4px 0 0 4px;
}
.lexa-dr-day.range-end {
  background: var(--lexa-primary, #2563eb);
  color: #fff;
  border-radius: 0 4px 4px 0;
}
.lexa-dr-day.range-single {
  border-radius: 4px;
}
.lexa-dr-day.today.range-start,
.lexa-dr-day.today.range-end {
  background: var(--lexa-primary, #2563eb);
  color: #fff;
  box-shadow: none;
}
.lexa-dr-day.today.in-range:not(.range-start):not(.range-end) {
  color: var(--lexa-primary, #2563eb);
  box-shadow: inset 0 0 0 2px var(--lexa-primary, #2563eb);
  background: var(--lexa-primary-50, #eff6ff);
}

/* Footer */
.lexa-dr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--lexa-gray-200, #e9ecef);
  font-size: 0.8rem;
  color: var(--lexa-gray-600, #475569);
}
.lexa-dr-footer-actions { display: flex; gap: 0.5rem; }

/* Filter bar integration */
.lexa-filter-bar .lexa-daterange-toggle {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--lexa-font-size-sm, 0.875rem);
  line-height: 2rem;
}

/* ── Date Range Picker – responsive ── */
@media (max-width: 640px) {
  .lexa-dr-body { flex-direction: column; }
  .lexa-dr-presets {
    border-right: none;
    border-bottom: 1px solid var(--lexa-gray-200, #e9ecef);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    min-width: unset;
  }
  .lexa-dr-preset { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 1rem; }
  .lexa-dr-calendars { flex-direction: column; gap: 0.5rem; padding: 0.5rem; }
  .lexa-dr-dropdown { right: 0; left: auto; max-width: calc(100vw - 2rem); }
  .lexa-dr-footer { flex-wrap: wrap; justify-content: center; }
}

/* Empty state completo (seccion/pagina) */
.lexa-empty-state {
  text-align: center;
  padding: var(--lexa-spacing-12, 3rem) var(--lexa-spacing-4, 1rem);
  color: var(--lexa-gray-500, #64748B);
}
.lexa-empty-state i {
  font-size: 3rem;
  opacity: 0.4;
  margin-bottom: var(--lexa-spacing-3, 0.75rem);
  display: block;
}
.lexa-empty-state .lexa-empty-title {
  font-size: var(--lexa-font-size-lg, 1.125rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  color: var(--lexa-gray-700, #334155);
  margin-bottom: var(--lexa-spacing-1, 0.25rem);
}
.lexa-empty-state .lexa-empty-text {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  margin-bottom: var(--lexa-spacing-4, 1rem);
}

/* Drawer lateral (sobre Bootstrap offcanvas) */
.lexa-drawer {
  width: 480px !important;
  border-left: 1px solid var(--lexa-gray-200, #e9ecef);
  box-shadow: var(--lexa-shadow-lg);
}
.lexa-drawer .offcanvas-header {
  border-bottom: 1px solid var(--lexa-gray-200, #e9ecef);
  padding: var(--lexa-spacing-4, 1rem);
}
.lexa-drawer .offcanvas-body {
  padding: var(--lexa-spacing-4, 1rem);
}
@media (max-width: 575px) {
  .lexa-drawer { width: 100% !important; }
}

/* Timeline vertical */
.lexa-timeline {
  position: relative;
  padding-left: 24px;
}
.lexa-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lexa-gray-200, #e9ecef);
}
.lexa-timeline-item {
  position: relative;
  padding-bottom: var(--lexa-spacing-4, 1rem);
}
.lexa-timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lexa-primary, #6D28D9);
  border: 2px solid var(--lexa-white, #ffffff);
}
.lexa-timeline-item.timeline-success::before {
  background: var(--lexa-success, #16A34A);
}
.lexa-timeline-item.timeline-danger::before {
  background: var(--lexa-danger, #DC2626);
}
.lexa-timeline-item.timeline-warning::before {
  background: var(--lexa-warning, #F59E0B);
}
.lexa-timeline-date {
  font-size: var(--lexa-font-size-xs, 0.75rem);
  color: var(--lexa-gray-500, #64748B);
}
.lexa-timeline-content {
  font-size: var(--lexa-font-size-sm, 0.875rem);
}

/* Schedule editor */
.schedule-branch-filter {
  min-width: 200px;
}
.schedule-branch-select {
  min-width: 140px;
}
.schedule-day-select {
  width: auto;
}

/* ============================================
   PORTAL — MOBILE-FIRST RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
  /* KPIs: 2 per row instead of 3 */
  .portal-kpis .col-4 { flex: 0 0 50%; max-width: 50%; }
  .portal-kpis .kpi-value { font-size: 1.5rem; }
  .portal-kpis .kpi-label { font-size: 0.7rem; }

  /* Plan columns: stack vertically */
  .portal-plan-cols .col-sm-4 { flex: 0 0 100%; max-width: 100%; }

  /* Tables: smaller font, enforce horizontal scroll */
  .portal-table { font-size: 0.8rem; }
  .portal-table th,
  .portal-table td { padding: 0.4rem 0.5rem; white-space: nowrap; }

  /* Upload form: stack fields */
  #uploadDocForm { flex-direction: column; }
  #uploadDocForm .col,
  #uploadDocForm .col-auto { flex: 0 0 100%; max-width: 100%; width: 100%; }

  /* Touch targets: minimum 38px for action buttons */
  .portal-table .btn-sm { min-height: 38px; min-width: 38px; }

  /* Header: stack vertically */
  .portal-header { flex-direction: column; align-items: flex-start !important; }
  .portal-header .btn { width: 100%; }
}

@media (max-width: 768px) {
  /* Plan cards compact */
  .portal-plan-cols .border.rounded { padding: 0.5rem !important; }
  .portal-plan-cols .fs-5 { font-size: 1.1rem !important; }
}

/* ============================================
   THERAPIST MOBILE RESPONSIVE
   ============================================ */

/* -- Tablet (768px) -- */
@media (max-width: 768px) {
  /* Note form: stack fields at tablet, not just mobile */
  #noteForm .col-md-6 { flex: 0 0 100%; max-width: 100%; }

  /* Note form header: wrap buttons */
  #noteForm .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }

  /* Dashboard next session: stack buttons below info */
  .dash-card .d-flex.justify-content-between.align-items-start { flex-direction: column; gap: 0.75rem; }
}

/* -- Dashboard cards: reset h-100 when cols wrap (<lg) -- */
/* Cards that use .h-100 for desktop grid alignment (Alertas, Estado Citas, etc.)
   overflow their natural content box at mobile, covering the next <h6> section
   title. When cols stack there's no sibling to match, so force height: auto. */
@media (max-width: 991.98px) {
  .dash-card.h-100 { height: auto !important; }
}

/* -- CashRegister date navigator -- */
/* Arrow buttons stay compact (icon-only), the date input flexes to fill the
   row, and nothing wraps. Without these rules the arrows grew to ~90px on
   mobile and the date value was clipped. */
.cash-date-nav { flex-wrap: nowrap; }
.cash-date-nav-arrow {
  flex: 0 0 auto;
  padding: 0.375rem 0.5rem;
  min-width: 36px;
}
.cash-date-nav-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 180px;
}
.cash-date-nav-today { flex: 0 0 auto; }
@media (max-width: 576px) {
  .cash-date-nav-input { max-width: none; }
}

/* -- Tablet: filter controls grow to fill rows evenly (577–992px) -- */
@media (min-width: 576.02px) and (max-width: 991.98px) {
  .lexa-filter-bar > div,
  .lexa-filter-bar > .lexa-daterange { flex: 1 1 11rem; min-width: 0; }
  .lexa-filter-bar .lexa-daterange-toggle { min-width: 0; width: 100%; }
  /* Action cluster drops to its own full-width row, right-aligned */
  .lexa-filter-bar .lexa-filter-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* -- Mobile (576px) -- */
@media (max-width: 576px) {
  /* === AGENDA === */
  .agenda-time-cell,
  .agenda-time-header { width: 50px; min-width: 50px; font-size: 0.7rem; }

  .agenda-therapist-header {
    padding: 0.25rem;
    gap: 0.25rem;
    min-height: 36px;
  }
  .agenda-therapist-header img,
  .agenda-therapist-header .therapist-avatar { width: 22px; height: 22px; font-size: 0.6rem; }
  .agenda-therapist-header .therapist-name {
    font-size: 0.7rem;
    max-width: 70px;
  }
  /* Con 4+ terapeutas, ocultar nombre y dejar solo avatar (el tooltip title lo cubre) */
  .agenda-grid[style*="repeat(4"] .agenda-therapist-header .therapist-name,
  .agenda-grid[style*="repeat(5"] .agenda-therapist-header .therapist-name,
  .agenda-grid[style*="repeat(6"] .agenda-therapist-header .therapist-name,
  .agenda-grid[style*="repeat(7"] .agenda-therapist-header .therapist-name,
  .agenda-grid[style*="repeat(8"] .agenda-therapist-header .therapist-name {
    display: none;
  }

  /* Appointment cards: bigger touch targets (min 44px tap area) */
  .appointment-card { padding: 4px 6px; min-height: 44px; }
  .appointment-card .patient-name { font-size: 0.7rem; }
  .appointment-card .service-name { font-size: 0.6rem; }
  .appointment-card .appt-meta { font-size: 0.6rem; }
  .appointment-card .appt-indicators { font-size: 0.7rem; }

  /* === DETAIL MODAL === */
  .detail-footer { flex-wrap: wrap; gap: 0.5rem; }
  .detail-footer > div { width: 100%; display: flex; gap: 0.5rem; }
  .detail-footer > div .btn { flex: 1; }
  .detail-footer > button { width: 100%; }

  .detail-summary-card { padding: 0.75rem; }
  .summary-row .summary-label { font-size: 0.75rem; }
  .summary-row .summary-value { font-size: 0.8rem; }

  .detail-status-row { flex-wrap: wrap; gap: 0.5rem; }
  .detail-status-row select { width: 100%; min-height: 44px; }

  /* Detail action buttons: touch-friendly */
  .detail-body .btn-sm { min-height: 38px; min-width: 38px; }

  /* Patient info: stack labels */
  .detail-patient-section .info-item { font-size: 0.8rem; }

  /* === DASHBOARD === */
  .dash-card .kpi-value { font-size: clamp(1.05rem, 4.8vw, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-card .kpi-label { font-size: 0.7rem; }
  .dash-card .card-body { padding: 0.5rem 0.75rem; }

  /* Dashboard agenda table: horizontal scroll + nowrap */
  .dash-card .table { font-size: 0.8rem; white-space: nowrap; }
  .dash-card .table th,
  .dash-card .table td { padding: 0.3rem 0.5rem; }
  .dash-card .table .btn-sm { min-height: 38px; min-width: 38px; }

  /* Pending notes list: compact */
  .dash-card .list-group-item { padding: 0.5rem 0.75rem; font-size: 0.85rem; }

  /* === NOTE FORM === */
  #noteForm .d-flex.gap-2 .btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; min-height: 38px; }

  /* Note form textareas: taller on mobile for easier editing */
  #noteForm textarea { min-height: 80px; }

  /* === MODULE HEADERS === */
  .lexa-module-header { flex-wrap: wrap; gap: 0.5rem; }
  .lexa-module-header .btn { font-size: 0.8rem; }

  /* === FILTER BARS === */
  .lexa-filter-bar { flex-direction: column; align-items: stretch; }
  .lexa-filter-bar > div,
  .lexa-filter-bar > .lexa-daterange { width: 100%; }
  /* Touch targets ≥44px on mobile (controls are 2rem on desktop) */
  .lexa-filter-bar .form-control,
  .lexa-filter-bar .form-select,
  .lexa-filter-bar .input-group .form-control,
  .lexa-filter-bar .input-group .input-group-text,
  .lexa-filter-bar .lexa-daterange-toggle {
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .lexa-filter-bar .btn { height: 2.75rem; line-height: 2.75rem; width: 100%; }
  /* Trailing actions stay on one row: Filtrar/Limpiar grow, Descargar stays compact */
  .lexa-filter-bar .lexa-filter-actions { width: 100%; }
  .lexa-filter-bar .lexa-filter-actions > .btn,
  .lexa-filter-bar .lexa-filter-actions > button { flex: 1 1 auto; width: auto; }
  .lexa-filter-bar .lexa-filter-actions .dropdown .btn { flex: 0 0 auto; }
  /* Action row stacks: count on top, create button full-width below */
  .lexa-list-actions { flex-direction: column; align-items: stretch; }
  .lexa-list-actions .lexa-list-actions-end { margin-left: 0; }
  .lexa-list-actions .lexa-list-actions-end .btn { width: 100%; }

  /* === TABLES GENERAL === */
  .table-responsive .btn-group-sm .btn { min-height: 38px; min-width: 38px; }
}

/* -- Extra small phones (360px) -- */
@media (max-width: 360px) {
  .dash-card .kpi-value { font-size: 1.2rem; }
  .appointment-card .patient-name { font-size: 0.65rem; }
  .detail-body { padding: 0.75rem; }
  .lexa-module-header .btn { font-size: 0.75rem; }
}

/* Agenda header buttons: tight wrap en ≤576px (F01) */
@media (max-width: 575.98px) {
  body.page-agenda .lexa-module-header > div.d-flex {
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }
  body.page-agenda .lexa-module-header .btn {
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    min-height: 38px;
  }
  /* Día/Semana group: let it sit inline without filling width */
  body.page-agenda #agendaModeSelector { flex: 0 0 auto; }
  body.page-agenda #agendaModeSelector .btn { flex: 0 0 auto; }
  /* Nueva Cita + Lista Espera share the first row 50/50 */
  body.page-agenda #btnNewAppointment,
  body.page-agenda .lexa-module-header a[href="/Waitlist/Index"] {
    flex: 1 1 auto;
  }
}

/* ============================================
   CLINICAL NOTE TEMPLATE BUILDER (F035)
   ============================================ */

.note-template-preview-sticky {
  position: sticky;
  top: 80px;
}

.note-field-item {
  border: 1px solid var(--lexa-gray-200);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--lexa-gray-50, #f8f9fa);
}

.note-field-item:hover {
  border-color: var(--lexa-primary-light, #a78bfa);
}

.note-preview-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--lexa-primary);
  border-bottom: 2px solid var(--lexa-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.note-preview-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lexa-gray-700, #374151);
  border-bottom: 1px solid var(--lexa-gray-200);
  padding: 0.5rem 0 0.25rem;
  margin: 0.75rem 0 0.5rem;
}

.note-preview-field {
  margin-bottom: 0.75rem;
}

.note-preview-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--lexa-gray-600, #4b5563);
  margin-bottom: 0.25rem;
}

.note-field-display {
  white-space: pre-wrap;
}

.note-preview-value {
  font-size: 0.85rem;
  color: var(--lexa-gray-500, #6b7280);
  font-style: italic;
  padding: 0.25rem 0.5rem;
  background: var(--lexa-gray-50, #f8f9fa);
  border-radius: 0.25rem;
}

/* ==========================================================================
   WIKI / CENTRO DE AYUDA
   ========================================================================== */

.wiki-topnav {
  background: var(--lexa-white, #fff);
  border-bottom: 1px solid var(--lexa-border-color, #E2E8F0);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.wiki-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lexa-primary, #6D28D9);
  text-decoration: none;
}
.wiki-brand:hover { opacity: 0.8; }
.wiki-topnav-link {
  color: var(--lexa-gray-600, #475569);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.wiki-topnav-link:hover { color: var(--lexa-primary, #6D28D9); }

.wiki-layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

/* Sidebar */
.wiki-sidebar {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--lexa-border-color, #E2E8F0);
  background: var(--lexa-gray-50, #F8FAFC);
  padding: 1rem 0;
  overflow-y: auto;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
}

.wiki-nav-tree { padding: 0 0.5rem; }
.wiki-nav-item {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--lexa-gray-700, #334155);
  text-decoration: none;
  font-size: 0.85rem;
  border-radius: 0.375rem;
  margin-bottom: 1px;
}
.wiki-nav-item:hover { background: var(--lexa-primary-light, #EDE9FE); color: var(--lexa-primary, #6D28D9); }
.wiki-nav-item.active { background: var(--lexa-primary-light, #EDE9FE); color: var(--lexa-primary, #6D28D9); font-weight: 600; }

.wiki-nav-section { margin-bottom: 0.25rem; }
.wiki-nav-section-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lexa-gray-500, #64748B);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
}
.wiki-nav-section-header:hover { color: var(--lexa-primary, #6D28D9); }
.wiki-nav-chevron { transition: transform 0.2s; font-size: 0.7rem; }
.wiki-nav-section.open .wiki-nav-chevron { transform: rotate(90deg); }
.wiki-nav-section-items {
  display: none;
  padding-left: 1rem;
}
.wiki-nav-section.open .wiki-nav-section-items { display: block; }

/* Main content */
.wiki-main {
  flex: 1;
  padding: 1.5rem 2rem;
  max-width: 900px;
}

.wiki-breadcrumb {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.wiki-breadcrumb a { color: var(--lexa-primary, #6D28D9); text-decoration: none; }
.wiki-breadcrumb a:hover { text-decoration: underline; }

/* Prose styles for rendered markdown */
.wiki-content h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--lexa-gray-900, #0F172A); }
.wiki-content h2 { font-size: 1.3rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--lexa-border-color, #E2E8F0); }
.wiki-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.wiki-content p { line-height: 1.7; margin-bottom: 1rem; color: var(--lexa-gray-700, #334155); }
.wiki-content ul, .wiki-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.wiki-content li { margin-bottom: 0.3rem; line-height: 1.6; color: var(--lexa-gray-700, #334155); }
.wiki-content blockquote { border-left: 3px solid var(--lexa-primary-200, #C4B5FD); padding: 0.5rem 1rem; margin: 1rem 0; background: var(--lexa-primary-50, #F5F3FF); border-radius: 0 0.375rem 0.375rem 0; }
.wiki-content blockquote p { margin-bottom: 0; color: var(--lexa-gray-600, #475569); }
.wiki-content code { background: var(--lexa-gray-100, #F1F5F9); padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
.wiki-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; }
.wiki-content th { background: var(--lexa-gray-100, #F1F5F9); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid var(--lexa-border-color, #E2E8F0); }
.wiki-content td { padding: 0.5rem 0.75rem; border: 1px solid var(--lexa-border-color, #E2E8F0); }
.wiki-content a { color: var(--lexa-primary, #6D28D9); }
.wiki-content hr { border: 0; border-top: 1px solid var(--lexa-border-color, #E2E8F0); margin: 2rem 0; }
.wiki-content strong { color: var(--lexa-gray-900, #0F172A); }
.wiki-content img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }

.wiki-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lexa-border-color, #E2E8F0);
}

/* --- Wiki Search --- */
.wiki-search-wrapper { max-width: 280px; width: 100%; }
.wiki-search-input {
  padding-left: 2rem;
  border-radius: 8px;
  border: 1px solid var(--lexa-gray-200, #E2E8F0);
  font-size: 0.85rem;
  background: var(--lexa-gray-50, #F8FAFC);
}
.wiki-search-input:focus {
  background: #fff;
  border-color: var(--lexa-primary, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.1);
}
.wiki-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--lexa-gray-400, #94A3B8);
  pointer-events: none;
  z-index: 2;
}
.wiki-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--lexa-gray-200, #E2E8F0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 1000;
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
}
.wiki-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  color: var(--lexa-gray-800, #1E293B);
  border-bottom: 1px solid var(--lexa-gray-100, #F1F5F9);
  transition: background 0.15s;
}
.wiki-search-item:last-child { border-bottom: none; }
.wiki-search-item:hover { background: var(--lexa-primary-50, #F5F3FF); color: var(--lexa-primary, #6D28D9); }
.wiki-search-item-title { font-size: 0.875rem; font-weight: 500; }
.wiki-search-item-section {
  font-size: 0.7rem;
  color: var(--lexa-gray-400, #94A3B8);
  background: var(--lexa-gray-100, #F1F5F9);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.wiki-search-empty {
  padding: 1rem;
  text-align: center;
  color: var(--lexa-gray-400, #94A3B8);
  font-size: 0.85rem;
}

@media (max-width: 767.98px) {
  .wiki-search-wrapper { max-width: 180px; }
}

/* Sidebar help link in main app */
.sidebar-help-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  color: var(--lexa-gray-400, #94A3B8);
  text-decoration: none;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: auto;
}
.sidebar-help-link:hover { color: var(--lexa-white, #fff); }
.sidebar-collapsed .sidebar-help-link span { display: none; }
.sidebar-collapsed .sidebar-help-link { justify-content: center; }

@media (max-width: 991.98px) {
  .wiki-main { padding: 1rem; }
  .wiki-content h1 { font-size: 1.4rem; }
  .wiki-content h2 { font-size: 1.15rem; }
}
@media (max-width: 575.98px) {
  .wiki-main { padding: 0.75rem; }
  .wiki-topnav { padding: 0.5rem 1rem; }
}

/* --------------------------------------------------------------------------
   NOTIFICATION CENTER
   -------------------------------------------------------------------------- */
.notification-dropdown { width: 360px; max-height: 420px; overflow: hidden; }
.notification-list { overflow-y: auto; max-height: 360px; }
.notification-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--lexa-border-color, #E2E8F0); cursor: pointer; transition: background var(--lexa-transition-fast, 150ms); }
.notification-item.unread { background: var(--lexa-primary-50, #F5F3FF); }
.notification-item:hover { background: var(--lexa-gray-50, #F8FAFC); }
.notification-item:last-child { border-bottom: none; }
.notif-time { font-size: 0.7rem; color: var(--lexa-gray-400, #94A3B8); margin-top: 2px; }
#notifBadge { font-size: 0.6rem; padding: 0.2em 0.45em; }

/* Payment method surcharge input */
.surcharge-input {
    width: 80px;
    display: inline-block;
}

/* Dashboard KPI card border-left accent */
.dash-card.border-accent-primary { border-left: 4px solid var(--bs-primary); }
.dash-card.border-accent-success { border-left: 4px solid var(--bs-success); }
.dash-card.border-accent-danger { border-left: 4px solid var(--bs-danger); }
.dash-card.border-accent-warning { border-left: 4px solid var(--bs-warning); }
.dash-card.border-accent-info { border-left: 4px solid var(--bs-info); }
.dash-card.border-accent-secondary { border-left: 4px solid var(--bs-secondary); }

/* Therapist dashboard side column */
.therapist-dashboard-side {
  min-width: 0;
}

/* Status quick-edit dropdown in the day agenda: widen so the label
   ("Confirmada"/"Reprogramada") doesn't overlap the select's arrow. */
.therapist-status-quick {
  min-width: 130px;
}

.therapist-pending-notes-card .card-body {
  max-height: clamp(260px, 42vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.therapist-pending-notes-list .list-group-item {
  min-width: 0;
}

.therapist-pending-notes-list .min-w-0 {
  min-width: 0;
}

/* Sesiones sin registrar agrupadas por paciente: la primera fila del paciente lleva su
   nombre; las siguientes se indentan y se pegan a la anterior para leerse como un bloque. */
.therapist-pending-notes-list .pending-note-group-follow {
  padding-left: 1.5rem;
  border-top-color: transparent;
}

.therapist-pending-notes-list .pending-note-group-follow::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--lexa-border-default, #dee2e6);
}

.therapist-pending-notes-list .pending-note-group-follow {
  position: relative;
}

@media (max-width: 991.98px) {
  .therapist-pending-notes-card .card-body {
    max-height: 360px;
  }
}

@media (max-width: 576px) {
  .therapist-pending-notes-card .card-body {
    max-height: 300px;
  }
}

/* Compact inline filter bar */
.filter-date-input { width: 140px; }
.filter-search-input { width: 150px; }
.filter-select-auto { width: auto; }

/* Patient search dropdown (appointment modal) */
.patient-search-dropdown {
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    left: 12px;
    right: 12px;
}

/* ==========================================================================
   LEXA MOTION — Subtle Professional Animations
   Design tokens: 150-300ms, ease-out enter, ease-in exit, transform/opacity only
   ========================================================================== */

/* ── 1. Fade-in content on page load ── */
.lexa-fade-in {
    animation: lexaFadeIn 200ms ease-out both;
}

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

/* Stagger support: add .lexa-stagger on parent, children get sequential delay */
.lexa-stagger > .lexa-fade-in:nth-child(1) { animation-delay: 0ms; }
.lexa-stagger > .lexa-fade-in:nth-child(2) { animation-delay: 30ms; }
.lexa-stagger > .lexa-fade-in:nth-child(3) { animation-delay: 60ms; }
.lexa-stagger > .lexa-fade-in:nth-child(4) { animation-delay: 90ms; }
.lexa-stagger > .lexa-fade-in:nth-child(5) { animation-delay: 120ms; }
.lexa-stagger > .lexa-fade-in:nth-child(n+6) { animation-delay: 150ms; }

/* ── 2. Card hover — lift + shadow ── */
.dash-card,
.card {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.dash-card:hover,
.card.lexa-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── 3. Table row hover — smooth highlight ── */
.table-hover tbody tr {
    transition: background-color 150ms ease;
}

.lexa-patient-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: min(100%, 15rem);
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
    font-weight: 600;
    line-height: 1;
}

.lexa-patient-plan-badge i {
    flex: 0 0 auto;
    font-size: 0.8rem;
}

.lexa-patient-plan-badge-text {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lexa-patient-plan-badge-muted {
    background: #f3f4f6;
    color: #6b7280;
}

.lexa-patient-plan-badge-eval {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

/* ── 4. Modal entrance — scale + fade ── */
.modal.fade .modal-dialog {
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    transform: scale(0.95);
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* ── 5. Sidebar menu — hover indicator ── */
.lexa-sidebar .nav-link {
    transition: background-color 150ms ease, padding-left 150ms ease, border-left-color 150ms ease;
}

/* ── 6. Toast notifications — slide-in/out ── */
.toast-notification {
    animation: lexaToastIn 250ms ease-out both;
}

@keyframes lexaToastIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-hiding {
    animation: lexaToastOut 150ms ease-in both;
}

@keyframes lexaToastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-16px); }
}

/* ── 7. Button press — micro-scale feedback ── */
.btn:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 100ms ease;
}

/* ── 8. KPI value highlight pulse (for dynamic updates) ── */
@keyframes lexaValuePulse {
    0%   { background-color: transparent; }
    30%  { background-color: rgba(99, 102, 241, 0.06); }
    100% { background-color: transparent; }
}

.lexa-value-pulse {
    animation: lexaValuePulse 400ms ease-out;
}

/* ── 9. Collapse/accordion smooth (reinforce Bootstrap) ── */
.collapsing {
    transition: height 200ms ease;
}

/* ── 10. Focus ring animation ── */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    transition: box-shadow 150ms ease;
}

/* ── 11. Badge/status dot pulse (for live indicators) ── */
@keyframes lexaPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.lexa-pulse {
    animation: lexaPulse 2s ease-in-out infinite;
}

/* ── REDUCED MOTION — Respect user preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   DARK MODE — Semantic Token Overrides
   v4.0 — Graphite / Near-Black, premium B2B SaaS

   Design principles:
   - Graphite neutral foundation, ZERO blue tint
   - Sidebar uses hardcoded graphite hex (immune to variable mapping)
   - Semantic colors only for status, not structural backgrounds
   - Purple brand accent only on primary actions and active states
   - Surface hierarchy: bg-app → bg-page → surface-card → surface-overlay
   ========================================================================== */

/* ── 1. Foundation ── */
[data-theme="dark"] body { background-color: var(--lexa-surface-base); color: var(--lexa-text-secondary); }
[data-theme="dark"] main { background: var(--lexa-surface-base); }
[data-theme="dark"] .lexa-main { background: var(--lexa-surface-base); }

/* ── 2. Sidebar (hardcoded graphite — immune to variable mapping) ── */
[data-theme="dark"] .lexa-sidebar { background: #09090B; color: #A0A0A8; }
[data-theme="dark"] .lexa-sidebar-header { border-color: #1E1E22; }
[data-theme="dark"] .lexa-sidebar-brand { color: #EDEDEF; }
[data-theme="dark"] .lexa-sidebar-collapse-btn { color: #6B6B74; }
[data-theme="dark"] .lexa-sidebar-section { color: #4E4E56; }
[data-theme="dark"] .lexa-sidebar-divider { border-color: #1E1E22; }
[data-theme="dark"] .lexa-sidebar-arrow { color: #4E4E56; }
[data-theme="dark"] .lexa-sidebar-link { color: #A0A0A8; }
[data-theme="dark"] .lexa-sidebar-link > i:first-child { color: #6B6B74; }
[data-theme="dark"] .lexa-sidebar-link:hover { background: rgba(255,255,255,0.04); color: #D4D4D8; }
[data-theme="dark"] .lexa-sidebar-link:hover > i:first-child { color: #A0A0A8; }
[data-theme="dark"] .lexa-sidebar-link.active { background: rgba(139,92,246,0.1); color: #EDEDEF; border-left-color: #8B5CF6; }
[data-theme="dark"] .lexa-sidebar-link.active > i:first-child { color: #A78BFA; }
[data-theme="dark"] .lexa-sidebar-submenu a { color: #6B6B74; }
[data-theme="dark"] .lexa-sidebar-submenu a:hover { background: rgba(255,255,255,0.03); color: #A0A0A8; }
[data-theme="dark"] .lexa-sidebar-submenu a.active { color: #EDEDEF; background: rgba(139,92,246,0.08); }

/* Collapsed-sidebar flyout panel: base bg uses var(--lexa-gray-800) which the
   dark palette remaps to a light tone (panel showed white). Pin to graphite to
   match the hardcoded dark sidebar above. */
[data-theme="dark"] .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] > .lexa-sidebar-submenu {
  background: #18181B;
  border: 1px solid #27272A;
  border-left: none;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
}
[data-theme="dark"] .lexa-sidebar.collapsed .lexa-sidebar-group:hover > div[id^="menu"] .lexa-submenu-header { color: #6B6B74; }

/* Same var-remap fix for the collapsed-link tooltip (was light bg + white text). */
[data-theme="dark"] .lexa-sidebar.collapsed .lexa-sidebar-link::after {
  background: #18181B;
  border: 1px solid #27272A;
  color: #EDEDEF;
}

/* ── 3. Topbar ── */
[data-theme="dark"] .lexa-topbar { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-topbar .nav-link { color: var(--lexa-text-tertiary); }
[data-theme="dark"] .lexa-topbar .nav-link:hover { color: #C4B5FD; }
[data-theme="dark"] .lexa-topbar-search input { background: var(--lexa-surface-sunken); color: var(--lexa-text-secondary); }
[data-theme="dark"] .lexa-topbar-search input:focus { background: var(--lexa-surface-base); }
[data-theme="dark"] .lexa-search-results { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-search-item:hover { background: var(--lexa-surface-hover); }
[data-theme="dark"] .lexa-search-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .lexa-search-input { background: var(--lexa-surface-raised); color: var(--lexa-text-secondary); border-color: var(--lexa-border-default); }

/* ── 4. Cards & Panels ── */
[data-theme="dark"] .card { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }
[data-theme="dark"] .card-header { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); }
[data-theme="dark"] .dash-card { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .kpi-card { background: var(--lexa-surface-raised); }
[data-theme="dark"] .stat-card { background: var(--lexa-surface-overlay); }
[data-theme="dark"] .stat-card .stat-number { color: var(--lexa-text-primary); }

/* ── 5. Tables ── */
[data-theme="dark"] .table { color: var(--lexa-text-secondary); --bs-table-bg: transparent; }
[data-theme="dark"] .table-light { --bs-table-bg: var(--lexa-surface-overlay); --bs-table-color: var(--lexa-text-tertiary); background: var(--lexa-surface-overlay) !important; color: var(--lexa-text-tertiary); }
[data-theme="dark"] .table thead { background: var(--lexa-surface-overlay) !important; color: var(--lexa-text-tertiary); }
[data-theme="dark"] .table-hover tbody tr:hover { background: var(--lexa-surface-hover); }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-patient-plan-badge { background: rgba(167, 139, 250, 0.16); color: #d8b4fe; }
[data-theme="dark"] .lexa-patient-plan-badge-muted { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
[data-theme="dark"] .lexa-patient-plan-badge-eval { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }

/* Table contextual rows — navy tint + colored left border, NO brown/orange bg */
[data-theme="dark"] .table-warning { --bs-table-bg: var(--lexa-state-warning-bg); --bs-table-color: var(--lexa-state-warning-text); background-color: var(--lexa-state-warning-bg); color: var(--lexa-state-warning-text); }
[data-theme="dark"] .table-warning td,
[data-theme="dark"] .table-warning th { background-color: var(--lexa-state-warning-bg) !important; color: var(--lexa-state-warning-text) !important; border-left: 3px solid #FBBF24; }
[data-theme="dark"] .table-info { --bs-table-bg: var(--lexa-state-info-bg); --bs-table-color: var(--lexa-state-info-text); background-color: var(--lexa-state-info-bg); color: var(--lexa-state-info-text); }
[data-theme="dark"] .table-info td,
[data-theme="dark"] .table-info th { background-color: var(--lexa-state-info-bg) !important; color: var(--lexa-state-info-text) !important; border-left: 3px solid #60A5FA; }

/* ── 6. Forms ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background-color: var(--lexa-surface-sunken); border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: var(--lexa-surface-base); border-color: var(--lexa-primary); color: var(--lexa-text-primary); }
[data-theme="dark"] .form-control::placeholder { color: var(--lexa-text-disabled); }
[data-theme="dark"] .form-label { color: var(--lexa-text-secondary); }
[data-theme="dark"] .form-text { color: var(--lexa-text-tertiary); }
[data-theme="dark"] .form-check-input { background-color: var(--lexa-surface-sunken); border-color: var(--lexa-border-strong); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--lexa-primary); border-color: var(--lexa-primary); }
[data-theme="dark"] .input-group-text { background-color: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); color: var(--lexa-text-tertiary); }

/* ── 7. Modals ── */
[data-theme="dark"] .modal-content { background: var(--lexa-surface-raised); color: var(--lexa-text-secondary); }
[data-theme="dark"] .modal-header { border-color: var(--lexa-border-default); }
[data-theme="dark"] .modal-footer { border-color: var(--lexa-border-default); }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ── 8. Dropdowns & Context Menu ── */
[data-theme="dark"] .dropdown-menu { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); }
[data-theme="dark"] .dropdown-item { color: var(--lexa-text-secondary); }
[data-theme="dark"] .dropdown-item:hover { background: var(--lexa-surface-hover); color: var(--lexa-text-primary); }
[data-theme="dark"] .dropdown-divider { border-color: var(--lexa-border-default); }
[data-theme="dark"] .context-menu { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); box-shadow: var(--lexa-shadow-lg); }
[data-theme="dark"] .context-menu-item { color: var(--lexa-text-secondary); }
[data-theme="dark"] .context-menu-item:hover { background-color: var(--lexa-surface-hover); }
[data-theme="dark"] .context-menu-item.text-danger:hover { background-color: var(--lexa-state-danger-bg); color: var(--lexa-state-danger-text); }

/* ── 9. Alerts — navy bg + colored text + left border accent ── */
[data-theme="dark"] .alert { border-color: var(--lexa-border-default); }
[data-theme="dark"] .alert-warning { background-color: var(--lexa-state-warning-bg); color: var(--lexa-state-warning-text); border-left: 3px solid #FBBF24; }
[data-theme="dark"] .alert-danger { background-color: var(--lexa-state-danger-bg); color: var(--lexa-state-danger-text); border-left: 3px solid #F87171; }
[data-theme="dark"] .alert-info { background-color: var(--lexa-state-info-bg); color: var(--lexa-state-info-text); border-left: 3px solid #60A5FA; }
[data-theme="dark"] .alert-success { background-color: var(--lexa-state-success-bg); color: var(--lexa-state-success-text); border-left: 3px solid #4ADE80; }
[data-theme="dark"] .alert-secondary { background-color: var(--lexa-state-neutral-bg); color: var(--lexa-state-neutral-text); border-left: 3px solid #8B9DB8; }

/* ── 10. Appointment status badges — subdued semantic pill badges ── */
[data-theme="dark"] .status-scheduled { background: rgba(160,160,168,0.1); color: #A0A0A8; border: 1px solid rgba(160,160,168,0.15); }
[data-theme="dark"] .status-confirmed { background: rgba(59,130,246,0.1); color: #60A5FA; border: 1px solid rgba(59,130,246,0.2); }
[data-theme="dark"] .status-rescheduled { background: rgba(249,115,22,0.1); color: #FB923C; border: 1px solid rgba(249,115,22,0.2); }
[data-theme="dark"] .status-inprogress { background: rgba(6,182,212,0.1); color: #22D3EE; border: 1px solid rgba(6,182,212,0.2); }
[data-theme="dark"] .status-completed { background: rgba(34,197,94,0.1); color: #4ADE80; border: 1px solid rgba(34,197,94,0.2); }
[data-theme="dark"] .status-cancelled { background: rgba(239,68,68,0.08); color: #F87171; border: 1px solid rgba(239,68,68,0.15); }
[data-theme="dark"] .status-noshow { background: rgba(160,160,168,0.08); color: #6B6B74; border: 1px solid rgba(160,160,168,0.12); }

/* Badge detail variants */
[data-theme="dark"] .badge-detail-scheduled { background: rgba(160,160,168,0.1); color: #A0A0A8; }
[data-theme="dark"] .badge-detail-confirmed { background: rgba(59,130,246,0.1); color: #60A5FA; }
[data-theme="dark"] .badge-detail-rescheduled { background: rgba(249,115,22,0.1); color: #FB923C; }
[data-theme="dark"] .badge-plan { background: rgba(168,85,247,0.15); color: #C084FC; }
[data-theme="dark"] .badge-plan-pending { background: rgba(168,85,247,0.08); color: #B0A0C4; border-color: rgba(168,85,247,0.4); }
[data-theme="dark"] .badge-plan-recovery { background: rgba(239,68,68,0.15); color: #FCA5A5; }
[data-theme="dark"] .badge-detail-inprogress { background: rgba(6,182,212,0.1); color: #22D3EE; }
[data-theme="dark"] .badge-detail-attended { background: rgba(34,197,94,0.1); color: #4ADE80; }
[data-theme="dark"] .badge-detail-cancelled { background: rgba(239,68,68,0.08); color: #F87171; }
[data-theme="dark"] .badge-detail-noshow { background: rgba(160,160,168,0.08); color: #6B6B74; }

/* Bootstrap badge combos */
[data-theme="dark"] .badge.bg-warning { background-color: rgba(234,179,8,0.12) !important; color: var(--warning-text) !important; }
[data-theme="dark"] .badge.bg-warning.text-dark { color: var(--warning-text) !important; }
[data-theme="dark"] .badge.bg-info { background-color: rgba(59,130,246,0.12) !important; color: var(--info-text) !important; }
[data-theme="dark"] .badge.bg-info.text-dark { color: var(--info-text) !important; }

/* ── 11. Outline buttons — semantic token colors ── */
[data-theme="dark"] .btn-outline-primary { color: var(--lexa-outline-primary); border-color: var(--lexa-outline-primary); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--lexa-outline-primary); color: var(--lexa-text-inverse); border-color: var(--lexa-outline-primary); }
[data-theme="dark"] .btn-outline-success { color: var(--lexa-outline-success); border-color: var(--lexa-outline-success); }
[data-theme="dark"] .btn-outline-success:hover { background: var(--lexa-outline-success); color: var(--lexa-text-inverse); border-color: var(--lexa-outline-success); }
[data-theme="dark"] .btn-outline-danger { color: var(--lexa-outline-danger); border-color: var(--lexa-outline-danger); }
[data-theme="dark"] .btn-outline-danger:hover { background: var(--lexa-outline-danger); color: var(--lexa-text-inverse); border-color: var(--lexa-outline-danger); }
[data-theme="dark"] .btn-outline-warning { color: var(--lexa-outline-warning); border-color: var(--lexa-outline-warning); }
[data-theme="dark"] .btn-outline-warning:hover { background: var(--lexa-outline-warning); color: var(--lexa-text-inverse); border-color: var(--lexa-outline-warning); }
[data-theme="dark"] .btn-outline-info { color: var(--lexa-outline-info); border-color: var(--lexa-outline-info); }
[data-theme="dark"] .btn-outline-info:hover { background: var(--lexa-outline-info); color: var(--lexa-text-inverse); border-color: var(--lexa-outline-info); }
[data-theme="dark"] .btn-outline-secondary { color: var(--lexa-outline-secondary); border-color: var(--lexa-border-strong); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--lexa-surface-hover); color: var(--lexa-text-primary); }

/* ── 12. Agenda ── */
[data-theme="dark"] .agenda-grid { background: var(--lexa-surface-base); }
[data-theme="dark"] .agenda-grid-wrapper { background: var(--lexa-surface-base); border-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-grid-container { background: var(--lexa-surface-base); }
[data-theme="dark"] .agenda-time-cell { background: var(--lexa-surface-raised); color: var(--lexa-text-secondary); border-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-time-cell.agenda-time-hour { border-top-color: var(--lexa-border-strong); }
[data-theme="dark"] .agenda-time-cell.agenda-time-sub { border-top-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-time-header { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); color: var(--lexa-text-primary); }
[data-theme="dark"] .agenda-therapist-header { background: var(--lexa-surface-raised); color: var(--lexa-text-secondary); }
[data-theme="dark"] .agenda-therapist-header .therapist-name { color: var(--lexa-text-primary); }
[data-theme="dark"] .agenda-toolbar { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); box-shadow: 0 1px 0 rgba(255,255,255,0.03); }
[data-theme="dark"] .agenda-toolbar .form-select,
[data-theme="dark"] .agenda-toolbar .form-control,
[data-theme="dark"] .agenda-toolbar .btn-outline-secondary { background-color: var(--lexa-surface-sunken); color: var(--lexa-text-primary); border-color: var(--lexa-border-strong); }
[data-theme="dark"] .agenda-toolbar .btn-outline-secondary:hover { background-color: var(--lexa-surface-hover); border-color: var(--lexa-primary); }
[data-theme="dark"] .agenda-info-row { color: var(--lexa-text-secondary); }
[data-theme="dark"] .agenda-slot { border-color: var(--lexa-border-default); background: var(--lexa-surface-base); }
[data-theme="dark"] .agenda-slot:hover { background-color: var(--lexa-surface-hover); }
[data-theme="dark"] .agenda-slot.slot-hour-boundary { border-top-color: var(--lexa-border-strong); }
[data-theme="dark"] .agenda-slot.slot-outside-hours,
[data-theme="dark"] .agenda-slot.slot-outside-hours:hover { background-color: var(--lexa-surface-sunken); background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px); }
[data-theme="dark"] .agenda-slot.slot-holiday-blocked,
[data-theme="dark"] .agenda-slot.slot-holiday-blocked:hover { background-color: var(--lexa-state-danger-bg); background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(248,113,113,0.05) 10px, rgba(248,113,113,0.05) 20px); }
[data-theme="dark"] .agenda-slot-week { background: var(--lexa-surface-base); border-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-slot-week:hover { background: var(--lexa-surface-hover); }
[data-theme="dark"] .agenda-slot-week[class*="branch-tone-"] { background-color: var(--branch-slot-bg-dark); }
[data-theme="dark"] .agenda-slot-week.branch-mixed {
  background: repeating-linear-gradient(135deg, #141821, #141821 8px, #1a2030 8px, #1a2030 16px);
}
[data-theme="dark"] .agenda-slot-week[class*="branch-tone-"]:hover,
[data-theme="dark"] .agenda-slot-week.branch-mixed:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.04); }
[data-theme="dark"] .agenda-slot-week.slot-blocked { background-color: var(--lexa-surface-sunken); }
[data-theme="dark"] .agenda-slot-week.slot-holiday-blocked { background: var(--lexa-state-danger-bg); }
[data-theme="dark"] .agenda-slot-week.slot-outside-hours.drag-over { background-color: var(--lexa-surface-sunken) !important; }
[data-theme="dark"] .agenda-day-header { background: var(--lexa-surface-raised); color: var(--lexa-text-primary); border-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-day-header.today { background: #221a35; border-bottom-color: var(--lexa-primary); }
[data-theme="dark"] .agenda-day-header .text-muted { color: var(--lexa-text-secondary) !important; }
[data-theme="dark"] .agenda-day-header.holiday-header { background: var(--lexa-state-danger-bg); }
[data-theme="dark"] .agenda-holiday-name { color: var(--lexa-state-danger-text) !important; }
[data-theme="dark"] .agenda-week-grid-container { background: var(--lexa-surface-base); }
[data-theme="dark"] .agenda-day-column { border-color: var(--lexa-border-default); }
[data-theme="dark"] .agenda-holiday-banner { background: var(--lexa-state-warning-bg); color: var(--lexa-state-warning-text); }

[data-theme="dark"] .appointment-card.appointment-conflict {
  border-color: #fbbf24 !important;
  box-shadow: inset 3px 0 0 #fbbf24, 0 2px 8px rgba(251, 191, 36, 0.14);
}

[data-theme="dark"] .appt-indicators .ind-conflict { color: #fbbf24; }
[data-theme="dark"] .appt-indicators .ind-exceptional { color: #fcd34d; }
[data-theme="dark"] .schedule-conflicts-kpi { background: var(--lexa-surface); border-color: var(--lexa-border); }
[data-theme="dark"] .schedule-conflicts-kpi .label { color: var(--lexa-text-muted); }
[data-theme="dark"] .schedule-conflicts-kpi strong { color: var(--lexa-text-primary); }
[data-theme="dark"] .appointment-card { box-shadow: 0 1px 4px rgba(0,0,0,0.4); color: var(--lexa-text-primary); }
[data-theme="dark"] .appointment-card[class*="branch-tone-"] { box-shadow: inset 0 3px 0 var(--branch-accent), 0 1px 4px rgba(0,0,0,0.45); }
[data-theme="dark"] .appointment-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.55); }
[data-theme="dark"] .appointment-card[class*="branch-tone-"]:hover { box-shadow: inset 0 3px 0 var(--branch-accent), 0 2px 10px rgba(0,0,0,0.55); }
[data-theme="dark"] .appointment-card .patient-name { color: var(--lexa-text-primary); }
[data-theme="dark"] .appointment-card .service-name { color: var(--lexa-text-secondary); opacity: 1; }
[data-theme="dark"] .appointment-card .appt-meta { color: var(--lexa-text-tertiary); opacity: 1; }
[data-theme="dark"] .first-visit-chip { background: rgba(14, 165, 233, 0.18); color: #bae6fd; border-color: rgba(125, 211, 252, 0.45); }
[data-theme="dark"] .online-chip { background: rgba(139, 92, 246, 0.20); color: #ddd6fe; border-color: rgba(196, 181, 253, 0.45); }
[data-theme="dark"] .appointment-card.status-scheduled { background: #2a2f3a; color: #e2e8f0; border: 1px solid #475569; border-left: 4px solid #94a3b8; }
[data-theme="dark"] .appointment-card.status-confirmed { background: #102b22; color: #d1fae5; border: 1px solid #176b50; border-left: 4px solid #34d399; }
[data-theme="dark"] .appointment-card.status-rescheduled { background: #33210d; color: #ffedd5; border: 1px solid #9a5a16; border-left: 4px solid #fb923c; }
[data-theme="dark"] .appointment-card.status-inprogress { background: #0e2d36; color: #cffafe; border: 1px solid #117086; border-left: 4px solid #22d3ee; }
[data-theme="dark"] .appointment-card.status-completed { background: #102846; color: #dbeafe; border: 1px solid #1d4f8f; border-left: 4px solid #60a5fa; }
[data-theme="dark"] .appointment-card.status-cancelled { background: #3b1518; color: #fee2e2; border: 1px solid #8f2c34; border-left: 4px solid #f87171; }
[data-theme="dark"] .appointment-card.status-noshow { background: #25272d; color: #d1d5db; border: 1px solid #4b5563; border-left: 4px solid #9ca3af; }
[data-theme="dark"] .branch-legend { color: var(--lexa-text-secondary); }
[data-theme="dark"] .branch-legend-swatch { border-color: rgba(255,255,255,0.24); }
[data-theme="dark"] .therapist-block-card { background: repeating-linear-gradient(45deg, #161618, #161618 5px, #1A1A1D 5px, #1A1A1D 10px); color: var(--text-muted); }
[data-theme="dark"] .load-more-col { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }

/* ── 13. Detail modal ── */
[data-theme="dark"] .detail-summary-card { background: var(--lexa-surface-overlay); }
[data-theme="dark"] .detail-patient-section { border-color: var(--lexa-border-default); }
[data-theme="dark"] .detail-header { border-color: var(--lexa-border-default); }
[data-theme="dark"] .detail-footer { border-color: var(--lexa-border-default); background: var(--lexa-surface-raised); }
[data-theme="dark"] .detail-body { color: var(--lexa-text-secondary); }
[data-theme="dark"] .detail-notes { background: var(--lexa-state-warning-bg); border-left: 3px solid #FBBF24; color: var(--lexa-state-warning-text); }

/* ── 14. Patient chart ── */
[data-theme="dark"] .chart-header { background: linear-gradient(135deg, var(--lexa-surface-raised) 0%, var(--lexa-surface-overlay) 100%); }
[data-theme="dark"] .chart-header .patient-meta { color: var(--lexa-text-tertiary); }
[data-theme="dark"] .chart-header-badge { background: rgba(139, 92, 246, 0.14); color: #ddd6fe; }
[data-theme="dark"] .chart-header-badge-label { color: var(--lexa-text-tertiary); }
[data-theme="dark"] .info-section h6 { color: var(--lexa-text-tertiary); border-bottom-color: var(--lexa-border-default); }

/* ── 15. Filter bars ── */
[data-theme="dark"] .lexa-filter-bar { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-dr-dropdown { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-dr-presets { border-color: var(--lexa-border-default); }
[data-theme="dark"] .lexa-dr-preset { color: var(--lexa-text-secondary); }
[data-theme="dark"] .lexa-dr-preset:hover { background: var(--lexa-surface-hover); }
[data-theme="dark"] .lexa-dr-preset.active { background: rgba(59,130,246,0.12); color: #60A5FA; }
[data-theme="dark"] .lexa-dr-day { color: var(--lexa-text-primary); }
[data-theme="dark"] .lexa-dr-day:hover:not(.other) { background: var(--lexa-surface-hover); }
[data-theme="dark"] .lexa-dr-day.other { color: var(--lexa-text-muted); }
[data-theme="dark"] .lexa-dr-day.in-range { background: rgba(59,130,246,0.12); }
[data-theme="dark"] .lexa-dr-footer { border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }
[data-theme="dark"] .lexa-dr-month-sel, [data-theme="dark"] .lexa-dr-year-sel { color: var(--lexa-text-primary); }
[data-theme="dark"] .lexa-dr-nav { color: var(--lexa-text-secondary); }
[data-theme="dark"] .lexa-dr-nav:hover { background: var(--lexa-surface-hover); }
[data-theme="dark"] .lexa-daterange-toggle { background: var(--lexa-surface-raised); }

/* ── 16. Navigation components ── */
[data-theme="dark"] .breadcrumb { background: transparent; }
[data-theme="dark"] .breadcrumb-item a { color: var(--lexa-text-tertiary); }
/* h2 hidden in module headers — breadcrumbs serve as page title */
[data-theme="dark"] .nav-tabs { border-color: var(--lexa-border-default); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--lexa-text-tertiary); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); color: var(--lexa-text-primary); }

/* ── 17. List groups & Notifications ── */
[data-theme="dark"] .list-group-item { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }
[data-theme="dark"] .notification-item.unread { background: var(--lexa-primary-50); }
[data-theme="dark"] .notification-item:hover { background: var(--lexa-surface-hover); }

/* ── 18. Pagination ── */
[data-theme="dark"] .page-link { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }
[data-theme="dark"] .page-item.active .page-link { background: var(--lexa-primary); border-color: var(--lexa-primary); color: #fff; }

/* ── 19. Popover & Tooltip ── */
[data-theme="dark"] .popover { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); }
[data-theme="dark"] .popover-header { background: var(--lexa-surface-hover); border-color: var(--lexa-border-default); color: var(--lexa-text-primary); }
[data-theme="dark"] .popover-body { color: var(--lexa-text-secondary); }
[data-theme="dark"] .tooltip-inner { background: var(--lexa-surface-overlay); color: var(--lexa-text-primary); }

/* ── 20. Accordion ── */
[data-theme="dark"] .accordion-item { background: var(--lexa-surface-raised); border-color: var(--lexa-border-default); }
[data-theme="dark"] .accordion-button { background: var(--lexa-surface-overlay); color: var(--lexa-text-secondary); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--lexa-primary-light); color: var(--lexa-text-primary); }

/* ── 21. Offcanvas / Drawer ── */
[data-theme="dark"] .offcanvas { background: var(--lexa-surface-raised); color: var(--lexa-text-secondary); }
[data-theme="dark"] .offcanvas-header { border-color: var(--lexa-border-default); }

/* ── 22. Toast ── */
[data-theme="dark"] .toast { background: var(--lexa-surface-overlay); border-color: var(--lexa-border-default); color: var(--lexa-text-secondary); }

/* ── 23. Misc components ── */
[data-theme="dark"] code { background: var(--lexa-surface-overlay); color: #C4B5FD; }
[data-theme="dark"] hr { border-color: var(--lexa-border-default); opacity: 0.5; }
[data-theme="dark"] .progress { background-color: var(--lexa-surface-sunken); }
[data-theme="dark"] .lexa-empty-state i { color: var(--lexa-text-disabled); }
[data-theme="dark"] #dailySummaryModal .table thead th { background: var(--lexa-surface-overlay); }

/* ── 24. Scrollbars ── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--lexa-surface-base); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--lexa-border-strong); }

/* ── 25. Bootstrap utility overrides ── */
[data-theme="dark"] .text-muted { color: var(--text-muted, var(--lexa-text-tertiary)) !important; }
[data-theme="dark"] .text-dark { color: var(--text-secondary, var(--lexa-text-secondary)) !important; }
/* Utilidades semánticas de color de texto: en oscuro, --lexa-success/danger/warning/info
   siguen en su tono de modo claro (poco contraste sobre fondos oscuros) y text-secondary/info
   caen al default de Bootstrap. Remapear a los tokens *-text pensados para superficies oscuras
   (afecta íconos de estado/DTE/conciliación del reporte de ventas y cualquier texto semántico). */
[data-theme="dark"] .text-success { color: var(--success-text, #4ADE80) !important; }
[data-theme="dark"] .text-danger { color: var(--danger-text, #F87171) !important; }
[data-theme="dark"] .text-warning { color: var(--warning-text, #FACC15) !important; }
[data-theme="dark"] .text-info { color: var(--info-text, #60A5FA) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary, #A0A0A8) !important; }
[data-theme="dark"] .bg-light { background-color: var(--surface-panel, var(--lexa-surface-overlay)) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface-card, var(--lexa-surface-raised)) !important; }
[data-theme="dark"] .border { border-color: var(--border-default, var(--lexa-border-default)) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--border-default, var(--lexa-border-default)) !important; }

/* ── 26. Action Button System (Acciones column) ── */
/* Ghost icon buttons — uniform, compact, grouped */
[data-theme="dark"] .btn-group-sm .btn-outline-primary,
[data-theme="dark"] .btn-group-sm .btn-outline-secondary,
[data-theme="dark"] .btn-group-sm .btn-outline-success,
[data-theme="dark"] .btn-group-sm .btn-outline-danger,
[data-theme="dark"] .btn-group-sm .btn-outline-info {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Unified hover: subtle surface lift */
[data-theme="dark"] .btn-group-sm .btn-outline-secondary:hover,
[data-theme="dark"] .btn-group-sm .btn-outline-info:hover {
  background: var(--surface-row-hover);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
/* Primary action hover: subtle brand tint */
[data-theme="dark"] .btn-group-sm .btn-outline-primary:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: #A78BFA;
}
/* Success action hover (cobrar): subtle green */
[data-theme="dark"] .btn-group-sm .btn-outline-success:hover {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
/* Danger action hover: subtle red */
[data-theme="dark"] .btn-group-sm .btn-outline-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
/* Remove double borders between grouped buttons */
[data-theme="dark"] .btn-group-sm > .btn + .btn { margin-left: -1px; }

/* ── 27. KPI cards — refined dark treatment ── */
[data-theme="dark"] .kpi-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
[data-theme="dark"] .kpi-card .kpi-value,
[data-theme="dark"] .kpi-card h3 { color: var(--text-primary); }
[data-theme="dark"] .kpi-card .kpi-label,
[data-theme="dark"] .kpi-card .text-muted { color: var(--text-muted) !important; }

/* Danger KPI (Pagos Pendientes) — refined semantic treatment */
[data-theme="dark"] .kpi-card.border-danger,
[data-theme="dark"] .kpi-card[class*="border-danger"] {
  border-color: var(--danger-border) !important;
  background: var(--danger-bg);
}

/* ── 28. Quick action buttons (right panel) ── */
[data-theme="dark"] .btn-outline-primary:not(.btn-group-sm .btn-outline-primary) {
  color: #A78BFA;
  border-color: var(--border-default);
  background: transparent;
}
[data-theme="dark"] .btn-outline-primary:not(.btn-group-sm .btn-outline-primary):hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: #C4B5FD;
}

/* ── 29. Agenda row indicators (replaces table-warning/table-info backgrounds) ── */
.row-overdue td:first-child { border-left: 3px solid #EF4444; }
.row-inprogress td:first-child { border-left: 3px solid #3B82F6; }
[data-theme="dark"] .row-overdue { background: rgba(239,68,68,0.04); }
[data-theme="dark"] .row-overdue:hover { background: rgba(239,68,68,0.07) !important; }
[data-theme="dark"] .row-inprogress { background: rgba(59,130,246,0.04); }
[data-theme="dark"] .row-inprogress:hover { background: rgba(59,130,246,0.07) !important; }
/* Light mode fallback */
.row-overdue { background: #FEF2F2; }
.row-overdue:hover { background: #FEE2E2 !important; }
.row-inprogress { background: #EFF6FF; }
.row-inprogress:hover { background: #DBEAFE !important; }

/* ── 30. POS Sales — items table → cards en ≤576px (F05) ── */
@media (max-width: 575.98px) {
  #itemsTable { min-width: 0; }
  #itemsTable thead { display: none; }
  #itemsTable, #itemsTable tbody, #itemsTable tbody tr { display: block; width: 100%; }
  #itemsTable tbody tr {
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--surface, #fff);
  }
  #itemsTable tbody td {
    display: block;
    padding: 0.25rem 0;
    border: none;
    text-align: left !important;
  }
  #itemsTable tbody td::before {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 0.1rem;
  }
  #itemsTable tbody td:nth-of-type(1)::before { content: "Descripcion"; }
  #itemsTable tbody td:nth-of-type(2)::before { content: "Servicio"; }
  #itemsTable tbody td:nth-of-type(3)::before { content: "Cantidad"; }
  #itemsTable tbody td:nth-of-type(4)::before { content: "Precio unit."; }
  #itemsTable tbody td:nth-of-type(5)::before { content: "Descuento"; }
  #itemsTable tbody td:nth-of-type(6)::before { content: "Total"; }
  #itemsTable tbody td:nth-of-type(6) {
    font-size: 1.05rem;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--border-subtle, #e5e7eb);
    text-align: right !important;
  }
  #itemsTable tbody td:nth-of-type(7) {
    text-align: right !important;
    margin-top: 0.25rem;
  }
  #itemsTable tbody td:nth-of-type(7)::before { display: none; }
  #itemsTable tbody td input,
  #itemsTable tbody td .service-search,
  #itemsTable tbody td input[type="number"] {
    width: 100% !important;
  }
}

/* ============================================
   MURAL / NOVEDADES (F054)
   ============================================ */
.mural-post {
    border: 1px solid var(--border-subtle, #e5e7eb);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.mural-post.mural-pinned {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .12);
}
.mural-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lexa-gray-100, #f3f4f6);
    color: var(--lexa-gray-500, #6b7280);
    font-size: 1.5rem; flex-shrink: 0;
}
.mural-content {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--lexa-gray-800, #1f2937);
    line-height: 1.5;
}
.mural-attachments {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.mural-attachment-image img {
    max-width: 180px; max-height: 180px;
    border-radius: .375rem;
    border: 1px solid var(--border-subtle, #e5e7eb);
    object-fit: cover;
}
.mural-attachment-file {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .75rem;
    background: var(--lexa-gray-50, #f9fafb);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: .375rem;
    text-decoration: none;
    color: var(--lexa-gray-800, #1f2937);
    font-size: .85rem;
}
.mural-attachment-file:hover {
    background: var(--lexa-gray-100, #f3f4f6);
}
.mural-reactions {
    display: flex; flex-wrap: wrap; gap: .35rem;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    padding-top: .5rem;
}
.mural-reaction-btn, .mural-comment-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .85rem;
    color: var(--lexa-gray-700, #374151);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mural-reaction-btn:hover, .mural-comment-btn:hover {
    background: var(--lexa-gray-100, #f3f4f6);
}
.mural-reaction-btn.active {
    background: rgba(109, 40, 217, .08);
    border-color: rgba(109, 40, 217, .25);
    color: var(--lexa-primary, #6d28d9);
}
.mural-reaction-emoji { font-size: 1rem; line-height: 1; }
.mural-reaction-count, .mural-comment-count { font-weight: 500; }
.mural-comments {
    border-top: 1px dashed var(--border-subtle, #e5e7eb);
    padding-top: .75rem;
}
.mural-comment-row {
    padding: .4rem .5rem;
    border-radius: .375rem;
    background: var(--lexa-gray-50, #f9fafb);
    margin-bottom: .35rem;
}
.mural-comment-author { font-size: .8rem; font-weight: 600; }
.mural-comment-content { font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.mural-comment-form { margin-top: .5rem; }

/* ============================================
   Unpaid appointments report
   ============================================ */
.unpaid-table .tabular {
    font-variant-numeric: tabular-nums;
}
.unpaid-table .unpaid-patient-row {
    cursor: pointer;
    transition: background-color 150ms ease;
}
.unpaid-table .unpaid-chevron {
    transition: transform 200ms ease;
    display: inline-block;
    color: var(--lexa-gray-500, #6b7280);
}
.unpaid-table .unpaid-patient-row.expanded .unpaid-chevron {
    transform: rotate(90deg);
}
.unpaid-table .unpaid-patient-row.expanded {
    background: var(--lexa-primary-light, rgba(99, 102, 241, .06));
}
.unpaid-subtable {
    background: var(--lexa-gray-50, #f9fafb);
}
.unpaid-subtable .tabular {
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Birthday row hover (Reception dashboard)
   ============================================ */
.birthday-row {
    transition: background-color 120ms ease;
}
.birthday-row:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* ============================================
   Monthly P&L table (desglose por categoría)
   ============================================ */
.pandl-table {
    font-variant-numeric: tabular-nums;
    min-width: max-content;
}
.pandl-table thead th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-table-bg, #fff);
}
.pandl-table .pandl-col-mes,
.pandl-table tbody tr > td:first-child,
.pandl-table tfoot tr > td:first-child {
    position: sticky;
    left: 0;
    background: var(--bs-body-bg, #fff);
    z-index: 1;
    min-width: 140px;
}
.pandl-table thead th.pandl-col-mes {
    z-index: 3;
}
.pandl-table .pandl-col-gastos,
.pandl-table .pandl-sticky-left-2 {
    min-width: 120px;
}
.pandl-table .pandl-sticky-left-2 {
    position: sticky;
    left: 140px;
    background: var(--bs-body-bg, #fff);
    z-index: 1;
    box-shadow: 10px 0 12px -12px rgba(15, 23, 42, 0.45);
}
.pandl-table thead th.pandl-sticky-left-2 {
    background: var(--bs-table-bg, #fff);
    z-index: 3;
}
.pandl-table .pandl-col-ingresos,
.pandl-table .pandl-col-utilidad {
    min-width: 120px;
}
.pandl-table .pandl-col-margen {
    min-width: 88px;
}
@media (min-width: 768px) {
    .pandl-table .pandl-sticky-right {
        position: sticky;
        background: var(--bs-body-bg, #fff);
        z-index: 1;
    }
    .pandl-table thead th.pandl-sticky-right {
        background: var(--bs-table-bg, #fff);
        z-index: 3;
    }
    .pandl-table .pandl-sticky-right-1 {
        right: 0;
    }
    .pandl-table .pandl-sticky-right-2 {
        right: 88px;
    }
    .pandl-table .pandl-sticky-right-3 {
        right: 208px;
        box-shadow: -10px 0 12px -12px rgba(15, 23, 42, 0.45);
    }
}
.pandl-table tr.pandl-year-subtotal > td {
    background: var(--lexa-primary-light, rgba(99, 102, 241, .08));
    border-top: 2px solid var(--bs-border-color, #dee2e6);
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}
.pandl-table tr.pandl-year-subtotal > td.pandl-sticky-right {
    background: var(--lexa-primary-light, rgba(99, 102, 241, .08));
}
.pandl-table tr.pandl-year-subtotal > td.pandl-sticky-left-2 {
    background: var(--lexa-primary-light, rgba(99, 102, 241, .08));
}
.pandl-table tfoot td {
    background: var(--bs-table-bg, #f8f9fa);
}
.pandl-table tfoot td.pandl-sticky-right {
    background: var(--bs-table-bg, #f8f9fa);
    z-index: 2;
}
.pandl-table tfoot td.pandl-sticky-left-2 {
    background: var(--bs-table-bg, #f8f9fa);
    z-index: 2;
}

/* Inputs angostos para campos numéricos cortos (sesiones, cantidades, recargos). */
.lexa-input-narrow {
    max-width: 200px;
}

/* Cards informativas dentro de modales/forms para resaltar bloques agrupados.
   Reemplazan inline styles de background usados en _AppointmentForm.cshtml y
   _AppointmentDetail.cshtml / Chart.cshtml. */
.lexa-soft-card {
    background: var(--lexa-gray-50, #f8f9fa);
}
.lexa-soft-card-blue {
    background: var(--lexa-blue-50, #eef4ff);
}

/* Letras tipo "Eyebrow" en pequeño caps + tracking, usado en headers de cards. */
.lexa-eyebrow {
    letter-spacing: .05em;
}

/* ─── Payment modal (Cobrar al cliente) ──────────────────────────────────── */
.lexa-pay-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
}
/* Scrim reforzado solo para el modal de pago, para que el panel de fondo
   ("Precio del servicio") quede claramente secundario y no compita con el
   "Total a cobrar" que se calcula dentro del modal. */
.modal-backdrop.lexa-pay-backdrop {
    --bs-backdrop-opacity: 0.65;
}
.lexa-pay-header {
    border-bottom: 1px solid var(--lexa-border-color, #E2E8F0);
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
}
.lexa-pay-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--lexa-primary-light, #EDE9FE);
    color: var(--lexa-primary, #6D28D9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.lexa-pay-header-subtitle {
    color: var(--lexa-gray-500, #64748B);
    font-size: .875rem;
    margin-top: 2px;
}

.lexa-pay-summary {
    background: var(--lexa-gray-50, #F8FAFC);
    border: 1px solid var(--lexa-border-color, #E2E8F0);
    border-radius: 12px;
    padding: 0.5rem 0.25rem;
}
.lexa-pay-summary .kpi-strip-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.lexa-pay-summary .kpi-strip-value {
    font-size: 1.35rem;
}
.lexa-pay-summary-total {
    background: var(--lexa-primary-light, #EDE9FE);
    border-radius: 10px;
    margin: -0.5rem 0;
}
.lexa-pay-summary-total .kpi-strip-value {
    font-size: 1.6rem;
    font-weight: 700;
}
.lexa-pay-total-hint {
    display: block;
    margin-top: .25rem;
    font-size: .72rem;
    color: var(--lexa-gray-600, #475569);
    font-weight: 500;
    line-height: 1.2;
}
[data-theme="dark"] .lexa-pay-total-hint {
    color: var(--lexa-dark-text-secondary, #cbd5e1);
}
.lexa-pay-info-icon {
    color: var(--lexa-gray-400, #94A3B8);
    cursor: help;
    font-size: .85em;
}

.lexa-pay-section {
    margin-top: 1.75rem;
}
.lexa-pay-section:first-of-type {
    margin-top: 1rem;
}
.lexa-pay-section-title {
    color: var(--lexa-primary, #6D28D9);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--lexa-border-color, #E2E8F0);
    display: flex;
    align-items: baseline;
    gap: .35rem;
}
.lexa-pay-step {
    color: var(--lexa-primary, #6D28D9);
    font-weight: 700;
}
.lexa-pay-optional {
    color: var(--lexa-gray-500, #64748B);
    font-weight: 400;
    font-size: .85em;
}

/* Contexto del cobro: a quién y por qué servicios se está cobrando. */
.lexa-pay-context {
    background: var(--lexa-gray-50, #F8FAFC);
    border: 1px solid var(--lexa-border-color, #E2E8F0);
    border-left: 3px solid var(--lexa-primary, #6D28D9);
    border-radius: 10px;
    padding: .65rem .9rem;
}
.lexa-pay-context-patient {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--lexa-gray-900, #0F172A);
}
.lexa-pay-context-patient i {
    color: var(--lexa-primary, #6D28D9);
}
.lexa-pay-context-services {
    margin-top: .2rem;
    font-size: .85rem;
    color: var(--lexa-gray-600, #475569);
}

/* Pagadores habituales: chips de selección rápida. */
.lexa-pay-payer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.lexa-pay-payer-chip {
    border: 1px solid var(--lexa-border-color, #E2E8F0);
    background: #fff;
    color: var(--lexa-gray-700, #334155);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lexa-pay-payer-chip:hover {
    border-color: var(--lexa-primary, #6D28D9);
}
.lexa-pay-payer-chip.active {
    background: var(--lexa-primary, #6D28D9);
    border-color: var(--lexa-primary, #6D28D9);
    color: #fff;
}
.lexa-pay-payer-chip .bi-star-fill {
    font-size: .7em;
    opacity: .8;
}

[data-theme="dark"] .lexa-pay-context {
    background: rgba(148, 163, 184, .08);
}
[data-theme="dark"] .lexa-pay-context-patient {
    color: #E2E8F0;
}
[data-theme="dark"] .lexa-pay-payer-chip {
    background: transparent;
    color: #CBD5E1;
}
[data-theme="dark"] .lexa-pay-payer-chip.active {
    color: #fff;
}

.lexa-pay-breakdown-card {
    border: 1px dashed var(--lexa-border-color, #E2E8F0);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.lexa-pay-breakdown-card + .lexa-pay-breakdown-card {
    margin-top: 0.5rem;
}
.lexa-pay-breakdown-card .form-label {
    font-size: .85rem;
    color: var(--lexa-gray-600, #475569);
    margin-bottom: .35rem;
}
.lexa-pay-remove-btn {
    line-height: 1;
}

.lexa-pay-add-btn {
    border-style: dashed;
    border-width: 1.5px;
}

.lexa-pay-summary-table thead th {
    background: var(--lexa-gray-50, #F8FAFC);
    color: var(--lexa-gray-600, #475569);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--lexa-border-color, #E2E8F0);
}
.lexa-pay-summary-table tbody td {
    border-bottom: 1px solid var(--lexa-border-color, #E2E8F0);
}
.lexa-pay-summary-method {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}
.lexa-pay-summary-method-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--lexa-primary-light, #EDE9FE);
    color: var(--lexa-primary, #6D28D9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.lexa-pay-summary-total-row > td {
    background: var(--lexa-primary-light, #EDE9FE);
    border-top: 2px solid var(--lexa-primary, #6D28D9) !important;
    border-bottom: none !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.lexa-pay-summary-total-row > td:first-child {
    border-top-left-radius: 8px;
}
.lexa-pay-summary-total-row > td:last-child {
    border-top-right-radius: 8px;
}
.lexa-pay-summary-empty td {
    background: #fff;
}
.lexa-pay-summary-action {
    width: 60px;
}

.lexa-pay-footer {
    border-top: 1px solid var(--lexa-border-color, #E2E8F0);
    padding: 1rem 1.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.lexa-pay-footer-info {
    color: var(--lexa-gray-500, #64748B);
    font-size: .85rem;
}
.lexa-pay-footer-actions {
    display: flex;
    gap: .5rem;
}

@media (max-width: 768px) {
    .lexa-pay-summary {
        padding: 0.5rem;
    }
    .lexa-pay-summary-total {
        margin: 0;
    }
    .lexa-pay-summary-total .kpi-strip-value {
        font-size: 1.35rem;
    }
    .lexa-pay-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .lexa-pay-footer-actions {
        justify-content: stretch;
    }
    .lexa-pay-footer-actions .btn {
        flex: 1;
    }
}

[data-theme="dark"] .lexa-pay-summary,
[data-theme="dark"] .lexa-pay-summary-table thead th {
    background: var(--lexa-dark-surface-2, #1f2937);
}
[data-theme="dark"] .lexa-pay-breakdown-card {
    background: var(--lexa-dark-surface, #111827);
    border-color: var(--lexa-dark-border, #334155);
}
[data-theme="dark"] .lexa-pay-summary-empty td {
    background: var(--lexa-dark-surface, #111827);
}
[data-theme="dark"] .lexa-pay-summary-total,
[data-theme="dark"] .lexa-pay-summary-total-row > td {
    background: rgba(124, 58, 237, .25);
}

/* ─── Mural compact layout ─────────────────────────────────────────────────
   Header inline + filter chips + grid responsive (1/2/3 cols). Densifica el
   feed para mostrar 3-4× más mensajes en la primera pantalla sin perder
   legibilidad. */

.lexa-mural-header {
    position: sticky;
    top: 56px;                 /* debajo del navbar fijo */
    background: var(--lexa-bg, #f8f9fa);
    z-index: 5;
    padding: .5rem 0;
    margin-top: -.5rem;
    border-bottom: 1px solid transparent;
}
.lexa-mural-header.is-stuck {
    border-bottom-color: var(--lexa-border-color, #E2E8F0);
}
.lexa-mural-title {
    font-size: 1.25rem;
    font-weight: 600;
}
.lexa-mural-filters .form-select,
.lexa-mural-filters .form-control {
    border-left: 0;
}
.lexa-mural-filters .input-group-text {
    border-right: 0;
    padding-right: 0;
}
.lexa-mural-filter-group select { min-width: 12rem; }
.lexa-mural-filter-search { min-width: 16rem; flex: 1 1 16rem; }
.lexa-mural-important-toggle {
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

/* Grid responsive: 1 col mobile, 2 cols ≥1024, 3 cols ≥1600. Pinned o
   Important hacen span del ancho completo (toda la fila). */
.lexa-mural-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.lexa-mural-grid-full { grid-column: 1 / -1; }

@media (min-width: 1024px) {
    .lexa-mural-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (min-width: 1600px) {
    .lexa-mural-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Card density: padding más compacto que el default Bootstrap. */
.lexa-mural-grid-item .card.mural-post {
    margin-bottom: 0;
    border-color: var(--lexa-border-color, #E2E8F0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lexa-mural-grid-item .card.mural-post .card-body {
    padding: .75rem 1rem;
}
.lexa-mural-grid-item .card.mural-post h5 {
    font-size: 1rem;
    margin-top: .25rem !important;
    margin-bottom: .35rem !important;
    line-height: 1.3;
}
.lexa-mural-grid-item .card.mural-post .mural-content {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--lexa-gray-700, #334155);
}
.lexa-mural-grid-item .card.mural-post .mural-reactions {
    margin-top: .75rem !important;
    gap: .25rem;
}
.lexa-mural-grid-item .card.mural-post .mural-attachments {
    margin-top: .5rem !important;
}
.lexa-mural-grid-item .card.mural-post .mural-comments {
    margin-top: .5rem !important;
}

/* Pinned: borde lateral lila para distinguir visualmente sin badge dominante. */
.lexa-mural-grid-item .card.mural-post.mural-pinned {
    border-left: 3px solid var(--lexa-primary, #6D28D9);
}
.lexa-mural-grid-item .card.mural-post.mural-important {
    border-left: 3px solid var(--lexa-danger, #dc2626);
}
.lexa-mural-grid-item .card.mural-post.mural-pinned.mural-important {
    border-left: 3px solid var(--lexa-danger, #dc2626);
    box-shadow: inset 3px 0 0 var(--lexa-primary, #6D28D9), 0 1px 2px rgba(15, 23, 42, .04);
}

@media (max-width: 767px) {
    .lexa-mural-header {
        position: static;
    }
    .lexa-mural-filter-search { width: 100%; flex-basis: 100%; }
    .lexa-mural-filter-group { width: 100%; }
    .lexa-mural-filter-group select,
    .lexa-mural-filter-search input { min-width: 0; width: 100%; }
}

[data-theme="dark"] .lexa-mural-header {
    background: var(--lexa-dark-surface, #111827);
}
[data-theme="dark"] .lexa-mural-grid-item .card.mural-post {
    background: var(--lexa-dark-surface-2, #1f2937);
    border-color: var(--lexa-dark-border, #334155);
}

/* Dropdown items con clase .text-danger (acciones destructivas como "Eliminar")
   deben mantenerse legibles en hover/focus/active. Por default Bootstrap pinta
   el item activo con fondo azul + texto blanco, lo que hace ilegible el rojo. */
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background-color: var(--lexa-danger-light, #f8d7da);
    color: var(--lexa-danger, #dc2626) !important;
}
.dropdown-item.text-danger:active,
.dropdown-item.text-danger.active {
    background-color: var(--lexa-danger, #dc2626);
    color: #fff !important;
}
.dropdown-item.text-danger:active i.bi,
.dropdown-item.text-danger.active i.bi {
    color: #fff !important;
}

/* Filtro de sucursal en la pestaña Arriendos (Admin > Sucursales): ancho minimo
   para que el nombre de la sucursal no se trunque ni se solape con el contenido. */
.lexa-rents-branch-select {
    min-width: 12rem;
}

/* =============================================================================
   DETAIL MODAL PATTERN  (lexa-detail-*)
   Patron unificado para modales de solo lectura ("detalle de..."). Documentado en
   /Admin/UIKit/Patterns (#detailmodal). Generaliza y reemplaza los antiguos
   detail-* / th-* / task-* que hoy viven dispersos e inline. Dark-mode via tokens
   --lexa-* + utilidades Bootstrap 5.3 (bg-*-subtle / text-*-emphasis).
   Regiones: header (modal-header BS) · hero · grid · card(s) · history · footer.
   ============================================================================= */

/* Utilidad generica (evita text-truncate roto en flex hijos). */
.min-w-0 { min-width: 0; }

/* --- 2. HERO: identidad a la izquierda, contacto/estado a la derecha --- */
.lexa-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.lexa-detail-hero-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.lexa-detail-hero-title {
    font-size: var(--lexa-font-size-xl);
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.lexa-detail-hero-subtitle {
    color: var(--lexa-text-secondary);
    font-size: var(--lexa-font-size-sm);
}

/* Avatar circular (imagen o iniciales). Reusado por hero e historial. */
.lexa-detail-avatar,
.lexa-detail-avatar-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}
.lexa-detail-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 600;
    background: var(--lexa-primary);
    color: var(--lexa-primary-contrast, #fff);
    text-transform: uppercase;
}
/* Modificador chico (historial, listas). */
.lexa-detail-avatar-sm.lexa-detail-avatar,
.lexa-detail-avatar-sm.lexa-detail-avatar-initials {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
}

/* Bloque de contacto copiable (label fijo + valor truncable + boton copiar). */
.lexa-detail-contact {
    min-width: 230px;
    max-width: 360px;
    font-size: var(--lexa-font-size-sm);
}
.lexa-detail-contact-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}
.lexa-detail-contact-label {
    width: 76px;
    flex: 0 0 auto;
    color: var(--lexa-text-secondary);
}
.lexa-detail-contact-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 3. INFO PRINCIPAL: grilla responsive icono·label·valor con divisores --- */
.lexa-detail-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}
.lexa-detail-cell {
    flex: 1 1 33.333%;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}
.lexa-detail-cell-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
    background: var(--lexa-primary-light);
    color: var(--lexa-primary);
}
.lexa-detail-cell-label {
    color: var(--lexa-text-secondary);
    font-size: var(--lexa-font-size-sm);
}
.lexa-detail-cell-value {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .lexa-detail-grid .lexa-detail-cell + .lexa-detail-cell {
        border-left: 1px solid var(--bs-border-color-translucent);
        padding-left: 1.25rem;
    }
}

/* --- 4. SECCIONES SECUNDARIAS: cards independientes --- */
.lexa-detail-card {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.9rem;
    padding: 1rem 1.25rem;
    background: var(--lexa-surface-raised);
}
.lexa-detail-card + .lexa-detail-card { margin-top: 0.75rem; }
.lexa-detail-card-title {
    font-size: var(--lexa-font-size-sm);
    color: var(--lexa-text-secondary);
    margin-bottom: 0.5rem;
}

/* --- 5. HISTORIAL: timeline de eventos (avatar + actor + comentario + fecha) --- */
.lexa-detail-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
}
.lexa-detail-history-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
}
.lexa-detail-history-body { flex: 1 1 auto; min-width: 0; }
.lexa-detail-history-time {
    color: var(--lexa-text-secondary);
    font-size: var(--lexa-font-size-sm);
    white-space: nowrap;
    align-self: flex-start;
}

/* Dark mode: los tokens --lexa-surface-raised ya remapean; --bs-border-color-*
   NO reacciona a data-theme (Lexa usa data-theme, no data-bs-theme), asi que
   fijamos los bordes con el token propio. */
[data-theme="dark"] .lexa-detail-card,
[data-theme="dark"] .lexa-detail-history-item {
    border-color: var(--lexa-border-default);
}
[data-theme="dark"] .lexa-detail-grid .lexa-detail-cell + .lexa-detail-cell {
    border-left-color: var(--lexa-border-default);
}

/* --------------------------------------------------------------------------
   NOTA CLINICA - grupo "Campos adicionales" plegable (formulario sin plantilla)
   -------------------------------------------------------------------------- */

.lexa-note-extra > summary {
    cursor: pointer;
    padding: 0.35rem 0;
    border-top: 1px solid var(--lexa-border-default, #dee2e6);
    list-style: none;
}

.lexa-note-extra > summary::-webkit-details-marker { display: none; }

.lexa-note-extra > summary::before {
    content: "\F285"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.lexa-note-extra[open] > summary::before { transform: rotate(90deg); }

.lexa-note-extra > summary:hover { color: var(--lexa-primary); }

/* =====================================================================   RIEL DE CATEGORIAS + PANEL CONTEXTUAL  (rediseño de navegación, paso 2)
   ----------------------------------------------------------------------------
   Convive con el menú clásico: todo cuelga de body.lexa-nav-rail, que solo se
   agrega para las empresas del piloto (Nav__RailPilotCompanyIds). Sin esa clase
   ninguna regla de acá aplica.

   El aside.lexa-sidebar sigue siendo el contenedor, así que el off-canvas
   móvil, el overlay y el JS del drawer funcionan sin cambios: solo pasa a ser
   una fila de dos columnas, riel 72px + panel 232px = 304px.
   ============================================================================ */

body.lexa-nav-rail .lexa-sidebar {
  width: 304px;
  /* .lexa-sidebar es un bloque con overflow-y:auto; en modo riel pasa a ser una
     fila de dos columnas que scrollean por separado. */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  background: var(--lexa-gray-900, #0F172A);
}

body.lexa-nav-rail .lexa-topbar { left: 304px; }
body.lexa-nav-rail .lexa-main { margin-left: 304px; }

/* Marca compacta: en 72px solo entra el logo cuadrado (o la marca de Lexa). */
.lexa-rail-brand {
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lexa-rail-brand img,
.lexa-rail-brand svg { width: 28px; height: 28px; border-radius: var(--lexa-border-radius-base, 0.375rem); }

/* --- Riel --- */
.lexa-rail {
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  background: var(--lexa-gray-900, #0F172A);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.lexa-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0;
  overflow-y: auto;
  /* El riel no deberia scrollear: 6 categorias caben de sobra. El overflow es
     la red por si un rol futuro suma ranuras. */
  scrollbar-width: none;
}
.lexa-rail-nav::-webkit-scrollbar { width: 0; }

.lexa-rail-item {
  position: relative;
  min-height: 56px;
  padding: 0.45rem 0.15rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: rgba(226, 232, 240, 0.62);
  text-decoration: none;
  transition: color var(--lexa-transition-fast, 150ms ease), background var(--lexa-transition-fast, 150ms ease);
}

.lexa-rail-item:hover,
.lexa-rail-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.lexa-rail-icon {
  position: relative;
  width: 34px;
  height: 26px;
  border-radius: var(--lexa-border-radius-full, 9999px);
  display: grid;
  place-items: center;
  transition: background var(--lexa-transition-fast, 150ms ease);
}

.lexa-rail-icon i { font-size: 1.05rem; line-height: 1; }

.lexa-rail-label {
  font-size: 0.5625rem;
  line-height: 1.15;
  text-align: center;
  max-width: 66px;
  /* Etiquetas largas se cortan en 2 lineas en vez de desbordar el riel.
     overflow-wrap: anywhere para que una palabra sola larga ("Administracion")
     parta en dos lineas en vez de quedar recortada. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lexa-rail-item.active { color: #fff; }
.lexa-rail-item.active .lexa-rail-icon { background: var(--lexa-primary, #6D28D9); }

/* Indicador de dos niveles: barra en el riel + fila tintada en el panel, para
   que la ubicacion actual se lea en los dos. */
.lexa-rail-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 3px;
  background: #fff;
  border-radius: 0 3px 3px 0;
}

.lexa-rail-dot {
  position: absolute;
  top: -2px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: var(--lexa-border-radius-full, 9999px);
  background: var(--lexa-warning, #F59E0B);
  border: 1.5px solid var(--lexa-gray-900, #0F172A);
}

.lexa-rail-pinned {
  margin-top: auto;
  padding: 0.35rem 0 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lexa-rail-item--pinned { min-height: 48px; }
.lexa-rail-item--pinned .lexa-rail-icon i { color: var(--lexa-primary-300, #A78BFA); }
.lexa-rail-item--pinned:hover .lexa-rail-icon i { color: #fff; }

/* --- Panel --- */
.lexa-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--lexa-bg-body, #fff);
  border-right: 1px solid var(--lexa-border-color, #E2E8F0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Se renderizan todos los paneles; se muestra el de la categoria activa. */
.lexa-panel-group { display: none; flex-direction: column; overflow-y: auto; height: 100%; }
.lexa-panel-group.active { display: flex; }

.lexa-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.55rem;
  background: var(--lexa-bg-body, #fff);
}

.lexa-panel-title {
  font-size: var(--lexa-font-size-sm, 0.875rem);
  font-weight: var(--lexa-font-weight-semibold, 600);
  color: var(--lexa-text-primary, #0F172A);
}

.lexa-panel-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--lexa-text-tertiary, #64748B);
  padding: 0.25rem;
  line-height: 0;
  border-radius: var(--lexa-border-radius-sm, 0.25rem);
  cursor: pointer;
}
.lexa-panel-close:hover { color: var(--lexa-primary, #6D28D9); background: var(--lexa-surface-hover, #F1F5F9); }

.lexa-panel-list { display: flex; flex-direction: column; padding: 0 0.5rem 0.75rem; }

.lexa-panel-subhead {
  font-size: 0.65rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lexa-text-disabled, #94A3B8);
  padding: 0.75rem 0.5rem 0.3rem;
}

/* Los items del panel no llevan icono a proposito: el icono es la marca de la
   categoria en el riel, no de cada enlace (mismo criterio que Google Ads).

   Va calificado con .lexa-panel a proposito: `.lexa-sidebar a { color: inherit }`
   tiene especificidad (0,1,1) y le ganaria a un `.lexa-panel-link` suelto (0,1,0),
   dejando los enlaces con el gris claro del sidebar oscuro sobre fondo blanco. */
.lexa-panel .lexa-panel-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.8125rem;
  color: var(--lexa-text-secondary, #334155);
  text-decoration: none;
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  border-left: 2px solid transparent;
  transition: background var(--lexa-transition-fast, 150ms ease), color var(--lexa-transition-fast, 150ms ease);
}

.lexa-panel .lexa-panel-link > span:first-child { flex: 1; min-width: 0; }

.lexa-panel .lexa-panel-link:hover {
  background: var(--lexa-surface-hover, #F1F5F9);
  color: var(--lexa-text-primary, #0F172A);
}

.lexa-panel .lexa-panel-link.active {
  background: var(--lexa-surface-active, #EDE9FE);
  border-left-color: var(--lexa-primary, #6D28D9);
  color: var(--lexa-primary-800, #4C1D95);
  font-weight: var(--lexa-font-weight-semibold, 600);
}

.lexa-panel .lexa-panel-link.lexa-nav-locked { color: var(--lexa-text-disabled, #94A3B8); cursor: not-allowed; }
.lexa-panel .lexa-panel-link.lexa-nav-locked:hover { background: transparent; color: var(--lexa-text-disabled, #94A3B8); }

.lexa-panel-badge {
  font-size: 0.625rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  background: var(--lexa-warning-bg, #FEF3C7);
  color: var(--lexa-warning-text, #92400E);
  border-radius: var(--lexa-border-radius-full, 9999px);
  padding: 0.05rem 0.35rem;
}

/* --- Panel despinchado (>=992px): el riel queda solo y el panel flota ---
   Reusa la clase sidebar-collapsed que ya togglea y persiste site.js, asi el
   boton de colapsar del topbar funciona en modo riel sin tocar el JS. */
@media (min-width: 992px) {
  body.lexa-nav-rail.sidebar-collapsed .lexa-sidebar { width: 72px; overflow: visible; }
  body.lexa-nav-rail.sidebar-collapsed .lexa-topbar { left: 72px; }
  body.lexa-nav-rail.sidebar-collapsed .lexa-main { margin-left: 72px; }

  body.lexa-nav-rail.sidebar-collapsed .lexa-panel {
    position: absolute;
    left: 72px;
    top: 0;
    bottom: 0;
    width: 232px;
    box-shadow: var(--lexa-shadow-lg, 0 10px 24px -6px rgba(15, 23, 42, 0.18));
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--lexa-transition-base, 200ms ease), opacity var(--lexa-transition-base, 200ms ease);
  }
  body.lexa-nav-rail.sidebar-collapsed .lexa-sidebar:hover .lexa-panel,
  body.lexa-nav-rail.sidebar-collapsed .lexa-sidebar:focus-within .lexa-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* --- Movil: el drawer de 304px muestra riel + panel juntos --- */
@media (max-width: 991.98px) {
  body.lexa-nav-rail .lexa-topbar { left: 0; }
  body.lexa-nav-rail .lexa-main { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lexa-rail-item,
  .lexa-rail-icon,
  .lexa-panel-link,
  body.lexa-nav-rail.sidebar-collapsed .lexa-panel { transition: none; }
}

/* Anclas del portal del paciente: el ancla es un div de alto 0; scroll-margin-top
   evita que la topbar fija (56px) tape la seccion al saltar. */
.portal-anchor { scroll-margin-top: 72px; }

/* ----------------------------------------------------------------------------
   Navegacion degenerada: una sola categoria.
   El scroll-spy del portal quita las categorias que esta visita no renderizo.
   Un paciente sin pacientes vinculados queda con un unico destino, y ahi 304px
   de chrome para un enlace es peor que no tener chrome. :has() reacciona al
   podado del JS sin necesidad de mas JS.
   ---------------------------------------------------------------------------- */
body.lexa-nav-rail:has(.lexa-rail-nav > .lexa-rail-item:only-child) .lexa-sidebar,
body.lexa-nav-rail:has(.lexa-rail-nav > .lexa-rail-item:only-child) .lexa-bottom-nav {
  display: none;
}

@media (min-width: 992px) {
  body.lexa-nav-rail:has(.lexa-rail-nav > .lexa-rail-item:only-child) .lexa-topbar { left: 0; }
  body.lexa-nav-rail:has(.lexa-rail-nav > .lexa-rail-item:only-child) .lexa-main { margin-left: 0; }
}

@media (max-width: 991.98px) {
  /* Sin barra inferior no hay que reservarle espacio. */
  body.lexa-nav-rail:has(.lexa-rail-nav > .lexa-rail-item:only-child) .lexa-main { padding-bottom: 0; }
}

/* =====================================================================   Pagina indice de configuracion (/Admin): las paginas de administracion
   agrupadas en secciones de tarjetas, en vez de 19 enlaces en el sidebar.
   ============================================================================ */

.lexa-setup-group { margin-bottom: 1.75rem; }

.lexa-setup-heading {
  font-size: 0.7rem;
  font-weight: var(--lexa-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lexa-text-tertiary, #64748B);
  margin: 0 0 0.6rem;
  /* La topbar es fija: el ancla del riel debe dejar la seccion visible. */
  scroll-margin-top: 76px;
}

.lexa-setup-grid {
  display: grid;
  /* auto-fill (no auto-fit): con pocos items las tarjetas conservan su ancho en
     vez de estirarse a media pantalla. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}

.lexa-setup-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: var(--lexa-bg-body, #fff);
  border: 1px solid var(--lexa-border-color, #E2E8F0);
  border-radius: var(--lexa-border-radius-lg, 0.5rem);
  color: var(--lexa-text-primary, #0F172A);
  text-decoration: none;
  transition: border-color var(--lexa-transition-fast, 150ms ease),
              box-shadow var(--lexa-transition-fast, 150ms ease);
}

.lexa-setup-card:hover {
  border-color: var(--lexa-primary, #6D28D9);
  box-shadow: var(--lexa-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.1));
  color: var(--lexa-text-primary, #0F172A);
}

.lexa-setup-card:focus-visible {
  outline: 2px solid var(--lexa-primary, #6D28D9);
  outline-offset: 2px;
}

.lexa-setup-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--lexa-border-radius-base, 0.375rem);
  background: var(--lexa-surface-active, #EDE9FE);
  color: var(--lexa-primary, #6D28D9);
}

.lexa-setup-icon i { font-size: 1rem; line-height: 1; }

.lexa-setup-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.lexa-setup-chevron,
.lexa-setup-lock {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--lexa-text-disabled, #94A3B8);
}

.lexa-setup-card:hover .lexa-setup-chevron { color: var(--lexa-primary, #6D28D9); }

/* Fuera del plan: visible en gris, no se esconde (mismo criterio que el menu). */
.lexa-setup-card--locked {
  /* Navegable a proposito (lleva al upsell), pero se lee como no disponible. */
  cursor: default;
  background: var(--lexa-bg-subtle, #F8FAFC);
  color: var(--lexa-text-disabled, #94A3B8);
}

.lexa-setup-card--locked .lexa-setup-icon {
  background: var(--lexa-bg-muted, #F1F5F9);
  color: var(--lexa-text-disabled, #94A3B8);
}

.lexa-setup-card--locked:hover {
  border-color: var(--lexa-border-color, #E2E8F0);
  box-shadow: none;
}

/* =====================================================================   BARRA INFERIOR (modo riel, <992px)
   El riel tumbado: primeras categorias + "Mas". Solo existe con el flag del
   riel; el menu clasico sigue con su cajon y su hamburguesa.
   ============================================================================ */

.lexa-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Un nivel por debajo del overlay del cajon: con el cajon abierto la barra se
     atenua con el resto del fondo en vez de asomar sin atenuar. */
  z-index: calc(var(--lexa-z-fixed, 1030) - 2);
  display: flex;
  background: var(--lexa-gray-900, #0F172A);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Home indicator de iOS: la fila de toque no puede quedar debajo. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.lexa-bottom-item {
  flex: 1 1 0;
  min-width: 0;
  /* 48px de alto util + etiqueta: sobre el minimo de 44px de Apple / 48dp de
     Material incluso con la barra de gestos. */
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.15rem;
  border: 0;
  background: transparent;
  color: rgba(226, 232, 240, 0.62);
  text-decoration: none;
  transition: color var(--lexa-transition-fast, 150ms ease);
}

.lexa-bottom-item:hover,
.lexa-bottom-item:focus-visible { color: #fff; }

.lexa-bottom-icon {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--lexa-border-radius-full, 9999px);
  display: grid;
  place-items: center;
  transition: background var(--lexa-transition-fast, 150ms ease);
}

.lexa-bottom-icon i { font-size: 1.05rem; line-height: 1; }

.lexa-bottom-label {
  font-size: 0.625rem;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lexa-bottom-item.active { color: #fff; }
.lexa-bottom-item.active .lexa-bottom-icon { background: var(--lexa-primary, #6D28D9); }

.lexa-bottom-dot {
  position: absolute;
  top: -1px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--lexa-border-radius-full, 9999px);
  background: var(--lexa-warning, #F59E0B);
  border: 1.5px solid var(--lexa-gray-900, #0F172A);
}

/* El contenido no puede quedar tapado por la barra. */
@media (max-width: 991.98px) {
  body.lexa-nav-rail .lexa-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* El cajon se abre desde "Mas": debe quedar por encima de la barra. */
  body.lexa-nav-rail .lexa-sidebar { z-index: var(--lexa-z-fixed, 1030); }
}

@media (prefers-reduced-motion: reduce) {
  .lexa-bottom-item,
  .lexa-bottom-icon { transition: none; }
=======
/* --------------------------------------------------------------------------
   AGENDA MOVIL (therapist-view <=576px) - DARK MODE

   Las reglas de la agenda movil se escribieron con una paleta clara literal
   (#fff, #f8fafc, #17233a...), asi que en dark mode quedaba una tarjeta blanca
   con texto oscuro sobre la app oscura. Aca se re-mapea cada superficie, borde
   y texto a las variables del tema (theme.css) manteniendo la misma jerarquia
   visual: violeta de marca para la proxima cita y la ocupacion, verde para las
   ventanas libres.

   Va dentro del mismo breakpoint que las reglas que corrige: fuera de <=576px
   estos elementos ni se muestran.
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
  [data-theme="dark"] .agenda-mobile-summary {
    background: var(--bg-page);
  }

  [data-theme="dark"] .agenda-mobile-summary section {
    background: var(--surface-card);
    border-color: var(--border-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .agenda-mobile-section-title {
    color: var(--text-primary);
  }

  [data-theme="dark"] .agenda-mobile-section-title small,
  [data-theme="dark"] .agenda-mobile-next-copy .appt-meta,
  [data-theme="dark"] .agenda-mobile-time-labels {
    color: var(--text-muted);
  }

  /* Proxima cita: la tarjeta destacada del compact view. */
  [data-theme="dark"] body.therapist-view.mobile-agenda-compact .agenda-mobile-next {
    border-color: var(--border-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  }

  [data-theme="dark"] .agenda-mobile-next-card {
    border-color: var(--border-default);
    border-left-color: var(--brand-primary);
    background: var(--surface-card-hover);
    color: var(--text-primary);
  }

  [data-theme="dark"] .agenda-mobile-next-time {
    color: var(--brand-primary);
  }

  [data-theme="dark"] .agenda-mobile-next-copy .service-name {
    color: var(--text-secondary);
  }

  [data-theme="dark"] .agenda-mobile-empty {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  /* Timeline del dia en foco. La grilla horaria se dibuja con un
     repeating-linear-gradient casi blanco (#f8fafc/#edf2f7): en oscuro dejaba un
     rectangulo claro del alto del dia detras de las citas, asi que hay que
     re-declarar el gradiente completo (no alcanza con cambiar el borde). */
  [data-theme="dark"] .agenda-mobile-rail {
    border-color: var(--border-default);
    background:
      repeating-linear-gradient(
        to bottom,
        var(--bg-elevated) 0,
        var(--bg-elevated) 34px,
        var(--border-subtle) 35px
      );
  }

  /* Ventana libre: se mantiene el verde, atenuado para no brillar en oscuro. */
  [data-theme="dark"] .agenda-mobile-window {
    color: #4ADE80;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
  }

  [data-theme="dark"] .agenda-mobile-block {
    border-color: rgba(139, 92, 246, 0.35);
    border-left-color: var(--brand-primary);
    background: rgba(139, 92, 246, 0.14);
    color: var(--text-primary);
  }

  [data-theme="dark"] .agenda-mobile-block .service-name {
    color: var(--brand-primary);
  }

  /* Resumen semanal + listado hora/paciente. */
  [data-theme="dark"] .agenda-mobile-week-row {
    border-color: var(--border-default);
  }

  [data-theme="dark"] .agenda-mobile-week-row.active {
    border-color: var(--brand-border);
    background: var(--brand-soft);
  }

  [data-theme="dark"] .agenda-mobile-week-row strong {
    color: var(--text-primary);
  }

  [data-theme="dark"] .agenda-mobile-week-row span,
  [data-theme="dark"] .agenda-mobile-week-row small {
    color: var(--text-muted);
  }

  [data-theme="dark"] .agenda-mobile-week-meter {
    background: var(--border-default);
  }

  [data-theme="dark"] .agenda-mobile-week-meter span {
    background: var(--brand-primary);
  }

  [data-theme="dark"] .agenda-mobile-appts {
    border-top-color: var(--border-default);
  }

  [data-theme="dark"] .agenda-mobile-appt > .time-range,
  [data-theme="dark"] .agenda-mobile-appt > .patient-name {
    color: var(--text-primary);
  }

  [data-theme="dark"] .agenda-mobile-appt > .service-name {
    color: var(--text-muted);
  }
}

/* Los dos chips que quedaron fuera del bloque dark de la agenda movil: viven en la tarjeta de
   proxima cita y en la quick card del terapeuta, asi que en oscuro quedaban claros sobre oscuro. */
@media (max-width: 576px) {
  [data-theme="dark"] .agenda-mobile-status-chip {
    background: var(--surface-card-hover);
    border-color: var(--border-default);
    color: var(--text-secondary);
  }
}

[data-theme="dark"] .therapist-quick-status {
  background: var(--surface-card-hover);
  border-color: var(--border-default);
  color: var(--text-secondary);
=======
/* --------------------------------------------------------------------------
   FICHA DEL PACIENTE - barra de contexto clinico (cabecera)

   Alergias, equipo tratante y ultima visita vivian SOLO en la pestana Resumen,
   pero el deep-link "Evolucionar" de la agenda entra en tab=notes: el terapeuta
   escribia la evolucion sin ese contexto a la vista. Esta barra lo deja visible
   en todas las pestanas, en una linea que envuelve para no empujar el contenido.
   -------------------------------------------------------------------------- */

.chart-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.4rem;
    /* .chart-header-row es un flex con wrap: sin esto la barra se acomoda al lado del nombre
       cuando patient-meta viene vacia (paciente sin RUT/telefono). Fila propia siempre. */
    flex-basis: 100%;
}

.chart-context-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--lexa-border-default, #dee2e6);
    border-radius: 999px;
    background: var(--lexa-surface-raised, #f8f9fa);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow: hidden;
}

.chart-context-chip > i {
    flex-shrink: 0;
    font-size: 0.7rem;
}

.chart-context-chip-label {
    color: var(--lexa-text-muted, #6c757d);
}

.chart-context-chip strong {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alergias: senal de seguridad clinica, se lee antes que el resto. */
.chart-context-chip-alert {
    border-color: #f5c2c7;
    background: #fff5f5;
    color: #842029;
}

.chart-context-chip-alert .chart-context-chip-label,
.chart-context-chip-alert > i {
    color: #b02a37;
}

/* Dato faltante: presente pero sin competir con el contenido. */
.chart-context-chip-muted {
    border-style: dashed;
    background: transparent;
    color: var(--lexa-text-muted, #6c757d);
}

[data-theme="dark"] .chart-context-chip {
    border-color: var(--border-default);
=======
/* Nota de secretaria en la quick card del terapeuta (Appointment.Notes). Antes solo se veia en
   la tabla "hoy" del panel; en la agenda no habia ni el dato ni senal de que existiera. */
.therapist-quick-note {
    display: flex;
    gap: 0.3rem;
    max-height: 6.5rem;
    overflow-y: auto;
    padding: 0.35rem 0.5rem;
    border-left: 3px solid var(--lexa-primary, #6d28d9);
    border-radius: 4px;
    background: var(--lexa-surface-raised, #f8f9fa);
    font-size: 0.78rem;
    white-space: pre-wrap;
    text-align: left;
}

.therapist-quick-note > i {
    flex-shrink: 0;
    color: var(--lexa-primary, #6d28d9);
}

[data-theme="dark"] .therapist-quick-note {
    background: var(--surface-card-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .chart-context-chip-label {
    color: var(--text-muted);
}

[data-theme="dark"] .chart-context-chip-alert {
    border-color: rgba(248, 81, 73, 0.35);
    background: rgba(248, 81, 73, 0.12);
    color: #ff9b95;
}

[data-theme="dark"] .chart-context-chip-alert .chart-context-chip-label,
[data-theme="dark"] .chart-context-chip-alert > i {
    color: #ff9b95;
}

[data-theme="dark"] .chart-context-chip-muted {
    background: transparent;
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .chart-context-bar {
        gap: 0.3rem;
    }

    .chart-context-chip {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }
/* Icono en la tarjeta: mismo tamano que el resto de los indicadores. */
.ind-secretary-note {
    color: #6d28d9;
}

[data-theme="dark"] .ind-secretary-note {
    color: #a78bfa;
}