/* ═══════════════════════════════════════════════════════════════
   VORTEX DESIGN SYSTEM — v3.0
   Referente: Zendenta V2 (Fikri Studio, Behance 2024)
   Sidebar: BLANCO (light mode) | Topbar: 64px | Grid: 264px
═══════════════════════════════════════════════════════════════ */

/* ── 1. TIPOGRAFÍA ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* ── 2. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --vx-primary:        #2563EB;
  --vx-primary-light:  #BFDBFE;
  --vx-primary-xlight: #EFF6FF;
  --vx-primary-dark:   #1E40AF;
  --vx-secondary:      #38BDF8;

  /* Sidebar — WHITE mode */
  --vx-sidebar-bg:        #FFFFFF;
  --vx-sidebar-border:    #E2E8F0;
  --vx-sidebar-width:     264px;
  --vx-sidebar-text:      #475569;
  --vx-sidebar-text-muted:#94A3B8;
  --vx-sidebar-active-bg: #EFF6FF;
  --vx-sidebar-active:    #2563EB;
  --vx-sidebar-hover:     #F8FAFC;
  --vx-sidebar-hover-text:#0F172A;

  /* Topbar */
  --vx-topbar-height: 64px;

  /* Backgrounds */
  --vx-bg-main:   #F1F5F9;
  --vx-bg-card:   #FFFFFF;
  --vx-bg-input:  #F8FAFC;

  /* Text */
  --vx-text-primary:   #0F172A;
  --vx-text-secondary: #64748B;
  --vx-text-muted:     #94A3B8;

  /* Border & Shadow */
  --vx-border:      #E2E8F0;
  --vx-radius-sm:   8px;
  --vx-radius:      10px;
  --vx-radius-lg:   16px;
  --vx-radius-xl:   20px;
  --vx-shadow:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --vx-shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --vx-shadow-lg:   0 25px 50px rgba(0,0,0,.15);
  --vx-transition:  150ms ease;
  --vx-transition-md: 200ms ease;
}

/* ── 3. BASE ──────────────────────────────────────────────────── */
body, html {
  font-family: 'Manrope', sans-serif !important;
  background: var(--vx-bg-main) !important;
  color: var(--vx-text-primary) !important;
}
body > * { font-size: 13.5px; }
h1,h2,h3,h4,h5,h6 {
  font-family: 'Manrope', sans-serif !important;
  color: var(--vx-text-primary);
}
a { color: var(--vx-primary); }
a:hover { color: var(--vx-primary-dark); }

/* ── 4. LAYOUT GRID ────────────────────────────────────────���────
   sidebar: 264px fixed left
   #header: 64px fixed top, spanning full width right of sidebar
   #wrapper: content area with proper offsets
────────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--vx-sidebar-width) !important;
  background: var(--vx-sidebar-bg) !important;
  border-right: 1px solid var(--vx-sidebar-border) !important;
  padding: 0 !important;
  box-shadow: none !important;
  top: 0 !important;
}

#header {
  height: var(--vx-topbar-height) !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--vx-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
  margin-left: var(--vx-sidebar-width) !important;
}

#wrapper {
  margin-left: var(--vx-sidebar-width) !important;
  background: var(--vx-bg-main) !important;
}

.navbar-nav > li > a {
  height: var(--vx-topbar-height) !important;
  line-height: 1 !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* Fix small/hidden sidebar states */
body.hide-sidebar:not(.show-sidebar) #wrapper,
body.hide-sidebar:not(.show-sidebar) #header {
  margin-left: 0 !important;
}
body.page-small #menu  { margin-left: calc(-1 * var(--vx-sidebar-width)) !important; }
body.page-small #wrapper,
body.page-small #header { margin-left: 0 !important; }
body.page-small.show-sidebar #menu   { margin-left: 0 !important; }
body.page-small.show-sidebar #wrapper,
body.page-small.show-sidebar #header { margin-left: var(--vx-sidebar-width) !important; }

.content {
  padding: 24px !important;
  min-width: 320px !important;
}

/* ── 5. SIDEBAR BRAND / LOGO ─────────────────────────────────── */
.vx-sidebar-brand {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  height: var(--vx-topbar-height);
  justify-content: center;
  border-bottom: 1px solid var(--vx-sidebar-border);
  flex-shrink: 0;
}

.vx-sidebar-logo-text {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--vx-primary);
  line-height: 1;
  letter-spacing: -.02em;
}

.vx-sidebar-clinic-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--vx-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 6. SIDEBAR USER PROFILE ─────────────────────────────────── */
.vx-sidebar-profile {
  padding: 12px 8px !important;
  margin-top: 0 !important;
  border-bottom: 1px solid var(--vx-sidebar-border);
}

.sidebar .sidebar-user-profile {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ── 7. SIDEBAR NAV ITEMS ────────────────────────────────────── */
.sidebar ul.nav {
  padding: 8px 0 !important;
}

.sidebar ul.nav li a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--vx-sidebar-text) !important;
  padding: 9px 12px 9px 16px !important;
  border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0 !important;
  border: 0 !important;
  margin: 1px 8px 1px 0 !important;
  transition: background var(--vx-transition), color var(--vx-transition) !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--vx-sidebar-text-muted) !important;
  font-size: 15px !important;
  width: 18px !important;
  margin-right: 10px !important;
  transition: color var(--vx-transition) !important;
}

/* Hover */
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  background: var(--vx-sidebar-hover) !important;
  color: var(--vx-sidebar-hover-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sidebar ul.nav > li > a:hover i.menu-icon,
.sidebar ul.nav > li > a:focus i.menu-icon {
  color: var(--vx-sidebar-text) !important;
}

/* Active — left border indicator */
.sidebar > ul.nav > li {
  border-left: 3px solid transparent !important;
}

.sidebar > ul.nav > li.active {
  border-left: 3px solid var(--vx-primary) !important;
  background: transparent !important;
}

.sidebar > ul.nav > li.active > a:first-child,
.sidebar ul.nav li.active > a {
  background: var(--vx-sidebar-active-bg) !important;
  color: var(--vx-sidebar-active) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.sidebar ul.nav li.active > a i.menu-icon,
.sidebar > ul.nav > li.active > a:first-child i.menu-icon {
  color: var(--vx-primary) !important;
}

/* Active hover */
.sidebar > ul.nav > li.active:hover a:first-child {
  background: #DBEAFE !important;
}

/* Submenu */
.sidebar ul.nav li .nav-second-level li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vx-text-secondary) !important;
  padding: 7px 12px 7px 44px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0 !important;
  margin: 1px 8px 1px 0 !important;
}
.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav li .nav-second-level li a:hover {
  color: var(--vx-primary) !important;
  background: var(--vx-primary-xlight) !important;
}

/* ── 8. SIDEBAR SECTION LABELS ───────────────────────────────── */
.sidebar ul.nav > li[data-section]::before {
  content: attr(data-section);
  display: block;
  padding: 20px 16px 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vx-sidebar-text-muted);
  pointer-events: none;
}

/* Sidebar footer version badge */
.sidebar > div:last-child {
  border-top: 1px solid var(--vx-sidebar-border) !important;
  color: var(--vx-text-muted) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
}

/* ── 9. TOPBAR / HEADER ──────────────────────────────────────── */

/* Header above sidebar (1020) but below modal-backdrop (1040) and Setup panel.
   1050 was blocking the Perfex customizer/setup slide-in panel. */
#header {
  z-index: 1030 !important;
}

/* Sidebar stays below the topbar */
#menu.sidebar {
  z-index: 1020 !important;
}

/* Page title inside the topbar — never hidden behind sidebar */
#logo,
#logo .vx-topbar-title,
.vx-topbar-title {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
}

#header a,
#header .navbar-right a {
  color: var(--vx-text-secondary) !important;
}
#header a:hover,
#header .navbar-right a:hover {
  color: var(--vx-primary) !important;
}
/* Topbar dynamic page title — replaces logo */
.vx-topbar-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* Logo area in header */
#logo.tw-h-\[57px\] {
  height: var(--vx-topbar-height) !important;
}

/* Patient list subtitle */
.vx-list-subtitle {
  font-size: 13px;
  color: var(--vx-text-muted);
  margin: 2px 0 0;
  font-weight: 400;
}

/* Search bar */
#search_input {
  font-family: 'Manrope', sans-serif !important;
  background: #F1F5F9 !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-size: 13.5px !important;
  color: var(--vx-text-primary) !important;
  height: 38px !important;
}
#search_input:focus {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px var(--vx-primary-light) !important;
  outline: none !important;
}
#top_search_button button {
  color: var(--vx-text-muted) !important;
}

/* ── 10. CARDS / PANELS ──────────────────────────────────────── */
.panel_s, .panel {
  background: var(--vx-bg-card) !important;
  border-radius: var(--vx-radius-lg) !important;
  border: 1px solid var(--vx-border) !important;
  box-shadow: var(--vx-shadow) !important;
  margin-bottom: 20px !important;
  animation: vxFadeInUp 220ms ease-out both;
}
.panel_s > .panel-body,
.panel > .panel-body {
  padding: 24px !important;
  border-radius: var(--vx-radius-lg) !important;
}
.panel_s > .panel-heading,
.panel > .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--vx-border) !important;
  padding: 16px 24px !important;
  border-radius: var(--vx-radius-lg) var(--vx-radius-lg) 0 0 !important;
}
.panel_s > .panel-heading .panel-title,
.panel > .panel-heading .panel-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
}
.panel_s > .panel-footer,
.panel > .panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--vx-border) !important;
  padding: 14px 24px !important;
  border-radius: 0 0 var(--vx-radius-lg) var(--vx-radius-lg) !important;
}

/* KPI / Stat cards */
.vx-stat-card {
  background: var(--vx-bg-card);
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 20px 24px;
  box-shadow: var(--vx-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  animation: vxFadeInUp 220ms ease-out both;
  height: 100%;
}
.vx-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.vx-stat-icon.blue   { background: #EFF6FF; color: #2563EB; }
.vx-stat-icon.green  { background: #F0FDF4; color: #16A34A; }
.vx-stat-icon.amber  { background: #FFFBEB; color: #D97706; }
.vx-stat-icon.purple { background: #FAF5FF; color: #9333EA; }
.vx-stat-icon.rose   { background: #FFF1F2; color: #E11D48; }
.vx-stat-icon.sky    { background: #F0F9FF; color: #0284C7; }
.vx-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--vx-text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vx-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--vx-text-primary);
  line-height: 1;
}
.vx-stat-sub {
  font-size: 12px;
  color: var(--vx-text-muted);
  margin-top: 4px;
}
.vx-stat-trend-up   { color: #16A34A; font-weight: 600; font-size: 12px; }
.vx-stat-trend-down { color: #DC2626; font-weight: 600; font-size: 12px; }

/* ── 11. BOTONES ─────────────────────────────────────────────── */
.btn {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--vx-radius) !important;
  font-size: 13.5px !important;
  padding: 9px 18px !important;
  transition: all var(--vx-transition) !important;
  line-height: 1.4 !important;
}
.btn:hover  { transform: translateY(-1px) !important; }
.btn:active { transform: translateY(0) !important; }

.btn-primary, .btn-primary:focus {
  background: var(--vx-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.28) !important;
}
.btn-primary:hover {
  background: var(--vx-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.4) !important;
}
.btn-default {
  background: #EFF6FF !important;
  color: var(--vx-primary) !important;
  border: 1px solid var(--vx-primary-light) !important;
  box-shadow: none !important;
}
.btn-default:hover {
  background: var(--vx-primary-light) !important;
  color: var(--vx-primary-dark) !important;
}
.btn-danger {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid #FECACA !important;
  box-shadow: none !important;
}
.btn-danger:hover {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.btn-warning {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid #FDE68A !important;
  box-shadow: none !important;
}
.btn-success {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border: 1px solid #BBF7D0 !important;
  box-shadow: none !important;
}
.btn-success:hover { background: #DCFCE7 !important; }
.btn-sm { padding: 6px 12px !important; font-size: 12.5px !important; }
.btn-xs { padding: 4px 9px !important;  font-size: 11.5px !important; }

/* ── 12. FORMULARIOS / INPUTS ────────────────────────────────── */
.form-control {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  background: var(--vx-bg-input) !important;
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  color: var(--vx-text-primary) !important;
  padding: 9px 13px !important;
  transition: border-color var(--vx-transition), box-shadow var(--vx-transition) !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 38px !important;
}
.form-control:focus {
  border-color: var(--vx-primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--vx-text-muted) !important; }
textarea.form-control {
  height: auto !important;
  min-height: 90px !important;
  resize: vertical !important;
}
select.form-control { appearance: auto !important; cursor: pointer !important; }

.control-label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--vx-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 6px !important;
}
.form-group { margin-bottom: 18px !important; }

.input-group-addon {
  background: var(--vx-bg-input) !important;
  border: 1.5px solid var(--vx-border) !important;
  color: var(--vx-text-muted) !important;
  border-radius: 0 var(--vx-radius) var(--vx-radius) 0 !important;
}
.bootstrap-select .dropdown-toggle {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  background: var(--vx-bg-input) !important;
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  color: var(--vx-text-primary) !important;
  padding: 9px 13px !important;
  min-height: 38px !important;
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.open > .dropdown-toggle {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
}
.checkbox label, .radio label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--vx-text-primary) !important;
}

/* ── 13. TABLAS — Zendenta style ─────────────────────────────── */
.table {
  font-family: 'Manrope', sans-serif !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
.table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vx-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--vx-border) !important;
  border-top: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
}
.table > tbody > tr > td {
  font-size: 13.5px !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-top: 0 !important;
  color: var(--vx-text-primary) !important;
  vertical-align: middle !important;
}
.table > tbody > tr:hover > td { background: #F8FAFC !important; }
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

/* Avatar + name pattern in tables */
.vx-table-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
}
.vx-table-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vx-table-name { font-weight: 600; color: var(--vx-text-primary); font-size: 13.5px; }
.vx-table-sub  { font-size: 12px; color: var(--vx-text-muted); margin-top: 1px; }

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: 'Manrope', sans-serif !important;
  border-radius: var(--vx-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  font-family: 'Manrope', sans-serif !important;
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  background: var(--vx-bg-input) !important;
  padding: 7px 12px !important;
}

/* ── 14. MODALES ─────────────────────────────────────────────── */
/* Explicit z-index: keeps modal above backdrop even if a parent
   creates a stacking context (belt-and-suspenders alongside the
   JS move-to-body fix in scripts.php) */
.modal           { z-index: 1050 !important; }
.modal-backdrop  { z-index: 1040 !important; background: rgba(15,23,42,.4) !important; }
.modal-dialog    { z-index: 1051 !important; }
.modal-backdrop.in {
  opacity: 1 !important;
  backdrop-filter: blur(4px) !important;
}
.modal-dialog .modal-content {
  font-family: 'Manrope', sans-serif !important;
  border-radius: var(--vx-radius-xl) !important;
  border: 0 !important;
  box-shadow: var(--vx-shadow-lg) !important;
  animation: vxModalIn 200ms ease-out both !important;
  overflow: hidden !important;
}
.modal-dialog .modal-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--vx-border) !important;
  padding: 20px 28px !important;
  border-radius: var(--vx-radius-xl) var(--vx-radius-xl) 0 0 !important;
}
.modal-dialog .modal-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--vx-text-primary) !important;
}
.modal-dialog .modal-body { padding: 24px 28px !important; }
.modal-dialog .modal-footer {
  background: #FAFAFA !important;
  border-top: 1px solid var(--vx-border) !important;
  padding: 16px 28px !important;
  border-radius: 0 0 var(--vx-radius-xl) var(--vx-radius-xl) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* ── 15. BADGES Y ESTADOS ────────────────────────────────────── */
.badge, .label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  line-height: 1.4 !important;
}
.badge-scheduled  { background: #DBEAFE; color: #1E40AF; }
.badge-confirmed  { background: #DCFCE7; color: #166534; }
.badge-in_progress,
.badge-en_curso   { background: #FEF9C3; color: #854D0E; }
.badge-completed,
.badge-completada { background: #F1F5F9; color: #475569; }
.badge-cancelled,
.badge-cancelada  { background: #FEE2E2; color: #991B1B; }
.badge-no_show    { background: #FFEDD5; color: #9A3412; }

.bg-success, .badge.bg-success { background: #DCFCE7 !important; color: #166534 !important; }
.bg-danger,  .badge.bg-danger  { background: #FEE2E2 !important; color: #991B1B !important; }
.bg-warning, .badge.bg-warning { background: #FEF9C3 !important; color: #854D0E !important; }
.bg-info,    .badge.bg-info    { background: #DBEAFE !important; color: #1E40AF !important; }

/* ── 16. ALERTS ──────────────────────────────────────────────── */
.alert {
  font-family: 'Manrope', sans-serif !important;
  border-radius: var(--vx-radius) !important;
  border: 1.5px solid !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.alert-success { background:#F0FDF4 !important; border-color:#BBF7D0 !important; color:#166534 !important; }
.alert-danger  { background:#FEF2F2 !important; border-color:#FECACA !important; color:#991B1B !important; }
.alert-warning { background:#FFFBEB !important; border-color:#FDE68A !important; color:#854D0E !important; }
.alert-info    { background:#EFF6FF !important; border-color:#BFDBFE !important; color:#1E40AF !important; }

/* ── 17. DROPDOWNS ───────────────────────────────────────────── */
.dropdown-menu {
  font-family: 'Manrope', sans-serif !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  box-shadow: var(--vx-shadow-md) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--vx-radius-sm) !important;
  color: var(--vx-text-primary) !important;
  transition: background var(--vx-transition) !important;
}
.dropdown-menu > li > a:hover {
  background: var(--vx-bg-input) !important;
  color: var(--vx-primary) !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--vx-primary) !important;
  color: #FFFFFF !important;
}

/* ── 18. TABS Bootstrap ──────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--vx-border) !important; }
.nav-tabs > li > a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--vx-text-secondary) !important;
  border-radius: var(--vx-radius-sm) var(--vx-radius-sm) 0 0 !important;
  border: 0 !important;
  padding: 10px 16px !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--vx-primary) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--vx-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.nav-tabs > li > a:hover {
  background: var(--vx-bg-input) !important;
  color: var(--vx-text-primary) !important;
  border: 0 !important;
}
/* opacity-only animation: avoids creating a CSS stacking context (transform≠none
   would permanently trap Bootstrap modals below the backdrop) */
.tab-content { animation: vxFadeIn 150ms ease-out both !important; }

/* Customer profile tabs */
.customer-tabs a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--vx-radius-sm) !important;
  transition: background var(--vx-transition), color var(--vx-transition) !important;
}

/* ── 19. SECTION HEADINGS ────────────────────────────────────── */
.customer-profile-group-heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--vx-text-primary) !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--vx-border) !important;
}
.vx-section-heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--vx-text-muted) !important;
  border-bottom: 1px solid var(--vx-border) !important;
  padding-bottom: 6px !important;
  margin: 0 0 18px !important;
}

/* ── 20. PAGINATION ──────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--vx-radius-sm) !important;
  border: 1px solid var(--vx-border) !important;
  color: var(--vx-text-secondary) !important;
  margin: 0 2px !important;
}
.pagination > .active > a,
.pagination > .active > a:hover {
  background: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  color: #FFFFFF !important;
}

/* ── 21. ODONTOGRAM ──────────────────────────────────────────── */
.tooth-svg {
  transition: fill 200ms ease, transform 150ms ease !important;
}
.tooth-svg:hover { transform: scale(1.08) !important; cursor: pointer !important; }
.tooth-svg.selected { transform: scale(1.05) !important; }

/* ── 22. DASHBOARD ───────────────────────────────────────────── */
.vx-dashboard-greeting {
  font-family: 'Manrope', sans-serif;
  margin-bottom: 28px;
}
.vx-dashboard-greeting h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--vx-text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}
.vx-dashboard-greeting p {
  font-size: 13.5px;
  color: var(--vx-text-secondary);
  margin: 0;
}

/* Chart cards */
.vx-chart-card {
  background: var(--vx-bg-card);
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 24px;
  box-shadow: var(--vx-shadow);
  animation: vxFadeInUp 240ms ease-out both;
}
.vx-chart-card.h-full { height: 100%; }

.vx-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vx-text-muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vx-card-subtitle {
  font-size: 11px;
  color: var(--vx-text-muted);
  font-weight: 500;
}
.vx-big-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--vx-text-primary);
  line-height: 1;
}
.vx-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vx-bg-input);
  border: 1px solid var(--vx-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vx-text-secondary);
  cursor: pointer;
}

/* Today's appointments */
.vx-apt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}
.vx-apt-row:last-child { border-bottom: 0; }
.vx-apt-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--vx-text-muted);
  min-width: 44px;
}
.vx-apt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.vx-apt-info { flex: 1; min-width: 0; }
.vx-apt-patient {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vx-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vx-apt-specialist {
  font-size: 11.5px;
  color: var(--vx-text-muted);
}

/* Recent patients */
.vx-patient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}
.vx-patient-row:last-child { border-bottom: 0; }
.vx-patient-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.vx-patient-name { font-size: 13.5px; font-weight: 600; color: var(--vx-text-primary); }
.vx-patient-meta { font-size: 12px; color: var(--vx-text-muted); }

/* Popular treatments */
.vx-treatment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F8FAFC;
}
.vx-treatment-row:last-child { border-bottom: 0; }
.vx-treatment-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vx-treatment-name { font-size: 13px; font-weight: 600; color: var(--vx-text-primary); flex: 1; }
.vx-treatment-count { font-size: 12px; color: var(--vx-text-muted); font-weight: 500; }

/* Progress bar */
.vx-progress-wrap { background: #F1F5F9; border-radius: 6px; height: 6px; overflow: hidden; margin-top: 4px; }
.vx-progress-bar  { height: 6px; border-radius: 6px; background: var(--vx-primary); transition: width .4s ease; }
.vx-progress-bar.green  { background: #16A34A; }
.vx-progress-bar.amber  { background: #D97706; }

/* Empty state */
.vx-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--vx-text-muted);
}
.vx-empty-state i { font-size: 36px; display: block; margin-bottom: 12px; opacity: .5; }
.vx-empty-state p { margin: 0; font-size: 13.5px; }

/* ── 23. STEPPER / WIZARD ────────────────────────────────────── */
.vx-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  padding: 0 4px;
}
.vx-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.vx-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
  transition: all 200ms ease;
}
.vx-step-circle.done {
  background: var(--vx-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.vx-step-circle.active {
  background: #FFFFFF;
  border: 2px solid var(--vx-primary);
  color: var(--vx-primary);
  box-shadow: 0 0 0 3px var(--vx-primary-light);
}
.vx-step-circle.pending {
  background: var(--vx-bg-input);
  color: var(--vx-text-muted);
}
.vx-step-label { font-size: 11px; font-weight: 600; color: var(--vx-text-muted); text-align: center; white-space: nowrap; }
.vx-step-label.active { color: var(--vx-primary); }
.vx-step-label.done   { color: var(--vx-text-secondary); }
.vx-step-line {
  flex: 1;
  height: 2px;
  background: var(--vx-border);
  margin-bottom: 22px;
  transition: background 300ms ease;
}
.vx-step-line.done { background: var(--vx-primary); }
.vx-wizard-step { display: none; }
.vx-wizard-step.active { display: block; animation: vxFadeInUp 180ms ease-out both; }

/* ── 24. SCHEDULE — columna por doctor ───────────────���───────── */
.vx-schedule-header {
  background: var(--vx-bg-card);
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 16px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--vx-shadow);
}
.vx-schedule-date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vx-schedule-date-nav button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--vx-bg-input);
  border: 1px solid var(--vx-border);
  color: var(--vx-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--vx-transition);
}
.vx-schedule-date-nav button:hover {
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  border-color: var(--vx-primary-light);
}
.vx-schedule-date-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--vx-text-primary);
  min-width: 180px;
  text-align: center;
}
.vx-view-toggle {
  display: flex;
  background: var(--vx-bg-input);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-sm);
  overflow: hidden;
}
.vx-view-toggle button {
  padding: 6px 16px;
  background: transparent;
  border: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--vx-text-secondary);
  cursor: pointer;
  transition: all var(--vx-transition);
}
.vx-view-toggle button.active {
  background: var(--vx-primary);
  color: #FFFFFF;
}
.vx-total-apts-badge {
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Column grid */
.vx-day-grid {
  display: flex;
  gap: 0;
  background: var(--vx-bg-card);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  overflow: auto;
  box-shadow: var(--vx-shadow);
  min-height: 600px;
}
.vx-time-col {
  width: 64px;
  flex-shrink: 0;
  border-right: 1px solid var(--vx-border);
}
.vx-time-col-header {
  height: 80px;
  border-bottom: 1px solid var(--vx-border);
  background: var(--vx-bg-input);
  border-radius: var(--vx-radius-lg) 0 0 0;
}
.vx-time-slot {
  height: 60px;
  border-bottom: 1px solid #F8FAFC;
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vx-text-muted);
}
.vx-doctor-col {
  flex: 1;
  min-width: 160px;
  border-right: 1px solid var(--vx-border);
  position: relative;
}
.vx-doctor-col:last-child { border-right: 0; }
.vx-doctor-header {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--vx-border);
  background: var(--vx-bg-input);
}
.vx-doctor-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.vx-doctor-name-sm {
  font-size: 12px;
  font-weight: 600;
  color: var(--vx-text-primary);
  text-align: center;
}
.vx-doctor-pt-count {
  font-size: 11px;
  color: var(--vx-text-muted);
}
.vx-doctor-slots { position: relative; }
.vx-slot-row {
  height: 60px;
  border-bottom: 1px solid #F8FAFC;
  position: relative;
  cursor: pointer;
}
.vx-slot-row:hover { background: var(--vx-primary-xlight); }
.vx-slot-row:hover::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 20px;
  color: var(--vx-primary);
  opacity: .5;
}

/* Appointment cards in grid */
.vx-apt-card {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 6px;
  padding: 6px 8px;
  font-family: 'Manrope', sans-serif;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  transition: box-shadow var(--vx-transition);
}
.vx-apt-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.vx-apt-card-time  { font-size: 10px; font-weight: 700; opacity: .85; }
.vx-apt-card-name  { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-apt-card-type  { font-size: 11px; opacity: .8; }

.vx-apt-card.finished   { background: #DCFCE7; color: #166534; border-left: 3px solid #16A34A; }
.vx-apt-card.registered { background: #DBEAFE; color: #1E40AF; border-left: 3px solid #2563EB; }
.vx-apt-card.doing      { background: #FEF9C3; color: #854D0E; border-left: 3px solid #D97706; }
.vx-apt-card.cancelled  { background: #FEE2E2; color: #991B1B; border-left: 3px solid #DC2626; }
.vx-apt-card.confirmed  { background: #D1FAE5; color: #065F46; border-left: 3px solid #059669; }

/* Now line */
.vx-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #EF4444;
  z-index: 5;
  pointer-events: none;
}
.vx-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
}

/* ── 25. PATIENT PROFILE HEADER ─────────────────────────────── */
.vx-patient-header {
  background: var(--vx-bg-card);
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 24px 28px;
  box-shadow: var(--vx-shadow);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  animation: vxFadeInUp 200ms ease-out both;
}
.vx-patient-header-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
}
.vx-patient-header-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--vx-text-primary);
  line-height: 1.1;
}
.vx-patient-header-meta {
  font-size: 13px;
  color: var(--vx-text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vx-patient-header-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 26. SETUP / LOGIN ───────────────────────────────────────── */
#setup-menu-wrapper {
  background: #FFFFFF !important;
  border-right: 1px solid var(--vx-border) !important;
}

body.login_admin {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
  font-family: 'Manrope', sans-serif !important;
}
.login_admin .panel_s, .login_admin .tw-bg-white {
  border-radius: var(--vx-radius-xl) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.login_admin .form-control { background: #F8FAFC !important; }
.login_admin .btn-primary { width: 100%; padding: 11px 20px !important; font-size: 14px !important; }

/* Quick-create button */
.tw-rounded-full.tw-bg-primary-600,
.tw-bg-primary-600 { background: var(--vx-primary) !important; }
.tw-bg-primary-700,
.group-hover\:tw-bg-primary-700:hover { background: var(--vx-primary-dark) !important; }

/* ── 27. MISC ────────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 0 8px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
}
.breadcrumb > li + li::before { color: var(--vx-text-muted) !important; }
.text-muted { color: var(--vx-text-muted) !important; }
.alert_float_box {
  font-family: 'Manrope', sans-serif !important;
  border-radius: var(--vx-radius) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── 28. ANIMACIONES ─────────────────────────────────────────── */
@keyframes vxFadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* opacity-only variant — used on .tab-content to avoid stacking-context creation */
@keyframes vxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vxModalIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vxPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ── 29. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 767px) {
  #header { margin-left: 0 !important; }
  .vx-stat-card { margin-bottom: 12px; }
  .vx-dashboard-greeting h1 { font-size: 20px; }
  .vx-day-grid { min-width: 600px; }
  .vx-dash-cols { flex-direction: column; }
  .vx-dash-left,
  .vx-dash-right { width: 100% !important; flex: 1 1 100% !important; }
}

/* ── 30. DASHBOARD v2 — Zendenta 2-column layout ─────────────── */
.vx-dashboard { animation: vxFadeInUp .25s ease; }

.vx-dash-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.vx-dash-greeting-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--vx-text-primary);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.vx-dash-greeting-sub {
  font-size: 13px;
  color: var(--vx-text-muted);
  margin: 0;
}
.vx-dash-greeting-sub i { margin-right: 4px; }

.vx-dash-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.vx-dash-left  { flex: 0 0 58%; display: flex; flex-direction: column; gap: 20px; }
.vx-dash-right { flex: 1; display: flex; flex-direction: column; gap: 20px; }

.vx-dash-card {
  background: #FFFFFF;
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vx-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.vx-dash-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vx-text-muted);
}
.vx-dash-card-period { font-size: 11px; color: var(--vx-text-muted); }
.vx-dash-card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--vx-primary);
  text-decoration: none;
}
.vx-dash-card-link:hover { text-decoration: underline; color: var(--vx-primary-dark); }

.vx-big-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--vx-text-primary);
  letter-spacing: -.03em;
  line-height: 1;
}
.vx-dash-stat-sub { font-size: 12px; color: var(--vx-text-muted); margin-top: 2px; }

.vx-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 6px;
}
.vx-period-badge.up   { background: #DCFCE7; color: #166534; }
.vx-period-badge.down { background: #FEE2E2; color: #991B1B; }

.vx-dash-cashflow-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vx-cashflow-sub-stats { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.vx-cashflow-sub-label { display: block; font-size: 11px; color: var(--vx-text-muted); }
.vx-cashflow-sub-val   { display: block; font-size: 14px; font-weight: 700; color: var(--vx-text-primary); }
.vx-dash-chart-wrap canvas { width: 100% !important; }

.vx-patients-split {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0 12px;
}
.vx-patients-split-item { text-align: center; flex: 1; }
.vx-patients-split-count {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.vx-patients-split-label { display: block; font-size: 11px; color: var(--vx-text-muted); margin-top: 3px; }
.vx-patients-split-sep { width: 1px; height: 36px; background: var(--vx-border); }

.vx-progress-wrap { margin-top: 8px; }
.vx-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--vx-text-muted);
  margin-bottom: 4px;
}
.vx-progress-bar  { height: 6px; background: var(--vx-border); border-radius: 99px; overflow: hidden; }
.vx-progress-fill { height: 100%; background: var(--vx-primary); border-radius: 99px; transition: width .5s ease; }

.vx-treatment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vx-treatment-row  { display: flex; align-items: center; gap: 10px; }
.vx-treatment-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vx-treatment-info { flex: 1; min-width: 0; }
.vx-treatment-name { font-size: 13px; font-weight: 600; color: var(--vx-text-primary); }
.vx-treatment-count { font-size: 13px; font-weight: 700; color: var(--vx-text-secondary); flex-shrink: 0; }

.vx-apt-count-badge {
  display: inline-block;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.vx-apt-list { display: flex; flex-direction: column; gap: 8px; }
.vx-apt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--vx-radius-sm);
  background: var(--vx-bg-input);
  transition: background .15s;
}
.vx-apt-row:hover { background: #EFF6FF; }
.vx-apt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vx-apt-info  { flex: 1; min-width: 0; }
.vx-apt-name  { font-size: 13px; font-weight: 600; color: var(--vx-text-primary); }
.vx-apt-meta  { font-size: 11px; color: var(--vx-text-muted); margin-top: 1px; }
.vx-apt-status-dot {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.vx-apt-more { font-size: 12px; color: var(--vx-text-muted); text-align: center; padding: 6px 0 0; }
.vx-apt-more a { color: var(--vx-primary); font-weight: 600; }

/* ── 31. PATIENT PROFILE PHOTO UPLOAD ───────────────────────── */
.vx-profile-photo-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--vx-border);
}
.vx-profile-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vx-profile-photo-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 24px;
  font-weight: 700;
}
.vx-profile-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transition: opacity .18s;
}
.vx-profile-photo-wrap:hover .vx-profile-photo-overlay { opacity: 1; }

/* ── 32. PATIENT PROFILE HEADER (full card) ─────────────────── */
.vx-patient-full-header {
  background: var(--vx-bg-card);
  border-radius: var(--vx-radius-lg);
  border: 1px solid var(--vx-border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  box-shadow: var(--vx-shadow);
}
.vx-patient-full-header .vx-ph-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.vx-patient-full-header .vx-ph-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vx-patient-full-header .vx-ph-info { flex: 1; min-width: 0; }
.vx-patient-full-header .vx-ph-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--vx-text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}
.vx-patient-full-header .vx-ph-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--vx-text-muted);
}
.vx-patient-full-header .vx-ph-meta span { display: flex; align-items: center; gap: 4px; }
.vx-patient-full-header .vx-ph-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .vx-patient-full-header { flex-wrap: wrap; }
  .vx-patient-full-header .vx-ph-actions { width: 100%; }
}

/* ── Patient list — avatar + name cell ──────────────────────── */
.vx-list-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.vx-list-avatar img { width: 100%; height: 100%; object-fit: cover; }

.vx-list-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vx-pt-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vx-text-primary);
  text-decoration: none;
}
.vx-pt-name:hover { color: var(--vx-primary); text-decoration: none; }
.vx-pt-email {
  font-size: 11.5px;
  color: var(--vx-text-muted);
  margin-top: 1px;
  line-height: 1.2;
}

/* ── Document cell ──────────────────────────────────────────── */
.vx-doc-cell { font-size: 13px; color: var(--vx-text-primary); }
.vx-doc-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: var(--vx-primary-xlight);
  color: var(--vx-primary);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ── Actions cell ───────────────────────────────────────────── */
.vx-actions-cell { text-align: center; }
.vx-action-btn {
  border: 1px solid var(--vx-border) !important;
  background: transparent !important;
  color: var(--vx-text-secondary) !important;
  border-radius: var(--vx-radius-sm) !important;
  padding: 3px 8px !important;
}
.vx-action-btn:hover { background: var(--vx-bg-input) !important; }
.vx-col-actions { width: 60px !important; }

/* Legacy doc-badge kept for backwards compat */
.vx-doc-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--vx-text-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   §33 — GALERÍA DE IMÁGENES CLÍNICAS
═══════════════════════════════════════════════════════════════ */
.vx-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.vx-img-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vx-img-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
  transition: border-color .15s, box-shadow .15s;
}
.vx-img-thumb:hover { border-color: var(--vx-primary); box-shadow: 0 0 0 2px var(--vx-primary-xlight); }
.vx-img-thumb img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover overlay */
.vx-img-overlay {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transition: opacity .15s;
}
.vx-img-thumb:hover .vx-img-overlay { opacity: 1; }
.vx-img-overlay span { font-size: 22px; color: #fff; pointer-events: none; }
.vx-img-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: background .12s;
}
.vx-img-del-btn  { background: rgba(239,68,68,.85); color: #fff; }
.vx-img-del-btn:hover  { background: #EF4444; }

/* Type badge */
.vx-img-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  color: #fff; border-radius: 3px; padding: 1px 5px; pointer-events: none;
}
.vx-img-caption {
  font-size: 11px; color: #64748B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0; line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   §34 — VISOR FULLSCREEN DE IMÁGENES
═══════════════════════════════════════════════════════════════ */
#imageViewer {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 999999 !important;
  background: #0F172A;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.viewer-toolbar {
  height: 52px; flex-shrink: 0;
  background: #1E293B;
  border-bottom: 1px solid #334155;
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
}
.viewer-title {
  font-size: 14px; font-weight: 600; color: #F1F5F9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.viewer-type-badge {
  font-size: 10px; font-weight: 700; color: #fff;
  border-radius: 3px; padding: 2px 6px; flex-shrink: 0;
}
.viewer-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.viewer-controls button {
  background: transparent;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94A3B8;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px; font-weight: 600;
  transition: background .12s, color .12s;
}
.viewer-controls button:hover { background: #334155; color: #F1F5F9; }
.viewer-controls button.active { background: #2563EB; border-color: #2563EB; color: #fff; }
#btnClose { color: #F87171; border-color: #7F1D1D; }
#btnClose:hover { background: #7F1D1D; color: #fff; border-color: #7F1D1D; }
.viewer-body  { display: flex; flex: 1; overflow: hidden; }
.viewer-canvas {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #0F172A;
  cursor: grab;
}
.viewer-canvas:active { cursor: grabbing; }
#viewerWrapper {
  position: relative;
  display: inline-block;
  transform-origin: center center;
  line-height: 0;
}
#viewerImage {
  display: block;
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.viewer-panel {
  width: 260px; flex-shrink: 0;
  background: #1E293B;
  border-left: 1px solid #334155;
  display: flex; flex-direction: column;
  padding: 14px;
  overflow-y: auto;
  gap: 0;
}
.viewer-panel h4 {
  font-size: 12px; font-weight: 700; color: #94A3B8;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 6px;
}
.viewer-meta { font-size: 12px; color: #64748B; margin: 0; }
.viewer-panel::-webkit-scrollbar { width: 4px; }
.viewer-panel::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* ── FIX — Bootstrap Select double border ────────────────────── */
/* The .bootstrap-select wrapper must be transparent; only the inner
   button carries the visual border. */
.bootstrap-select.btn-group,
div.bootstrap-select {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* When selectpicker copies .form-control to the wrapper div, kill its border too */
.bootstrap-select.form-control {
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
}
/* Ensure the toggle button exactly matches other .form-control inputs */
.bootstrap-select > .dropdown-toggle.btn-default {
  background: var(--vx-bg-input) !important;
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  color: var(--vx-text-primary) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}
.bootstrap-select.open > .dropdown-toggle.btn-default,
.bootstrap-select > .dropdown-toggle.btn-default:focus {
  background: #FFFFFF !important;
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  outline: none !important;
}
/* Filter search box inside dropdown */
.bootstrap-select .bs-searchbox .form-control {
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
}

/* ── intl-tel-input overrides ────────────────────────────────── */
/* Safety rule — hides the country list even if CDN CSS is slow/blocked */
.iti__hide { display: none !important; }
.iti { width: 100%; }
.iti__flag-container { z-index: 10; }
/* Match our form-control styling */
.iti input[type=tel],
.iti input[type=text] {
  width: 100%;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  background: var(--vx-bg-input) !important;
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  color: var(--vx-text-primary) !important;
  min-height: 38px !important;
  box-shadow: none !important;
  transition: border-color var(--vx-transition), box-shadow var(--vx-transition) !important;
  /* No padding overrides — iti owns padding-left (set dynamically by JS);
     Bootstrap .form-control provides top/right/bottom */
}
.iti input[type=tel]:focus,
.iti input[type=text]:focus {
  border-color: var(--vx-primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  outline: none !important;
}
.iti__selected-flag {
  background: var(--vx-bg-input) !important;
  border-right: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) 0 0 var(--vx-radius) !important;
  padding: 0 8px !important;
}
.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background: var(--vx-sidebar-hover) !important;
}
.iti__country-list {
  border: 1.5px solid var(--vx-border) !important;
  border-radius: var(--vx-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  z-index: 9999 !important;
}
.iti__country.iti__highlight {
  background: var(--vx-sidebar-active-bg) !important;
  color: var(--vx-primary) !important;
}
/* ── 35. FULLCALENDAR — Vortex unified styling ──────────────── */
/* Applied to both #calendar (native schedule) and #dental-calendar
   so both views share identical Vortex design tokens */
.fc .fc-button-primary {
  background: var(--vx-primary) !important;
  border-color: #2563EB !important;
  color: #fff !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--vx-radius-sm) !important;
  box-shadow: none !important;
  text-transform: capitalize !important;
}
.fc .fc-button-primary:hover {
  background: #2563EB !important;
  border-color: #1D4ED8 !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: #1D4ED8 !important;
  border-color: #1E40AF !important;
}
.fc .fc-button-primary:disabled {
  background: var(--vx-border) !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-text-muted) !important;
  opacity: 1 !important;
}
.fc-toolbar-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--vx-text-primary) !important;
}
.fc-col-header-cell-cushion,
.fc-daygrid-day-number,
.fc-timegrid-slot-label-cushion {
  color: var(--vx-text-secondary) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.fc-day-today {
  background: var(--vx-primary-xlight) !important;
}
.fc-day-today .fc-daygrid-day-number {
  color: var(--vx-primary) !important;
  font-weight: 700 !important;
}
.fc-scrollgrid,
.fc-scrollgrid td,
.fc-scrollgrid th {
  border-color: var(--vx-border) !important;
}

/* Age display chip */
.vx-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 2px 10px;
  background: #EFF6FF;
  color: var(--vx-primary);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #BFDBFE;
}

/* ── Email suggestions dropdown ──────────────────────────────── */
.vx-email-wrap { position: relative; }
.vx-email-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--vx-border);
  border-radius: var(--vx-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 1050;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.vx-email-suggestion {
  padding: 9px 14px;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  color: var(--vx-text-primary);
  transition: background 120ms;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vx-email-suggestion:hover,
.vx-email-suggestion:focus {
  background: var(--vx-sidebar-active-bg);
  color: var(--vx-primary);
}
.vx-email-suggestion-domain {
  color: var(--vx-primary);
  font-weight: 600;
}

/* ── Premium input valid-state checkmark ─────────────────────── */
.vx-input-wrap { position: relative; }
.vx-input-wrap .vx-valid-icon {
  display: none;
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #10B981;
  font-size: 14px;
  pointer-events: none;
}
/* City field datalist chrome */
input[list].form-control::-webkit-calendar-picker-indicator { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════
   VORTEX DESIGN SYSTEM — v4.0 (Prototype-aligned components)
   Matches the design prototype exported from Claude Design.
   Primary: #2E5BFF  |  Fonts: Inter (UI) + Space Grotesk (wordmark)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── Token overrides (align with prototype) ──────────────────── */
:root {
  --primary:          #2E5BFF;
  --primary-600:      #2347D6;
  --primary-50:       #EEF2FF;
  --primary-100:      #DCE3FF;
  --bg:               #F4F6FB;
  --surface:          #FFFFFF;
  --surface-muted:    #F8F9FC;
  --border:           #E6E8EE;
  --border-strong:    #D5D9E2;
  --divider:          #EEF0F4;
  --ink:              #0F172A;
  --ink-2:            #334155;
  --muted:            #64748B;
  --label:            #94A3B8;
  --success:          #16A34A;
  --success-bg:       #E7F8EE;
  --warning:          #D97706;
  --warning-bg:       #FEF3E2;
  --danger:           #DC2626;
  --danger-bg:        #FDECEC;
  --info:             #0891B2;
  --info-bg:          #E0F4F8;
  --shadow-card:      0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02);
  --shadow-pop:       0 12px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  --shadow-modal:     0 24px 60px rgba(15,23,42,.18), 0 2px 12px rgba(15,23,42,.08);
  --r-xs:             6px;
  --r-sm:             8px;
  --r-md:             12px;
  --r-lg:             16px;
}

/* ── Wordmark (sidebar brand) ────────────────────────────────── */
.vx-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.vx-wordmark .vx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,91,255,.16);
  flex-shrink: 0;
}
.vx-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.vx-collapse-btn:hover { background: var(--surface-muted); color: var(--ink); }

/* Clinic card */
.vx-clinic-card {
  margin: 10px 14px 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
}
.vx-clinic-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2E5BFF 0%, #6E5CFF 100%);
  display: grid;
  place-items: center;
  color: white;
  flex-shrink: 0;
  font-size: 16px;
}
.vx-clinic-name { font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ink); }
.vx-clinic-addr { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Avatar (gradient initials circle) ───────────────────────── */
.vx-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E5BFF, #6E5CFF);
  color: white;
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}
.vx-avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.vx-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.vx-avatar.xl { width: 48px; height: 48px; font-size: 16px; }

/* ── Page card ───────────────────────────────────────────────── */
.vx-page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.vx-tabs {
  display: flex;
  gap: 28px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
}
.vx-tab {
  position: relative;
  background: transparent;
  border: none;
  padding: 16px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease;
}
.vx-tab:hover { color: var(--ink); }
.vx-tab.active { color: var(--primary); font-weight: 600; }
.vx-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.vx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none !important;
}
.vx-btn:hover { background: var(--surface-muted); border-color: var(--border-strong); color: var(--ink); }
.vx-btn.primary { background: var(--primary); border-color: var(--primary); color: white; }
.vx-btn.primary:hover { background: var(--primary-600); border-color: var(--primary-600); color: white; }
.vx-btn.subtle { background: transparent; border-color: transparent; color: var(--muted); }
.vx-btn.subtle:hover { background: var(--surface-muted); color: var(--ink); }
.vx-btn.ghost-success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.vx-btn.ghost-success:hover { background: #D6F0DF; }
.vx-btn.ghost-primary { background: var(--primary-50); border-color: transparent; color: var(--primary); }
.vx-btn.ghost-primary:hover { background: #E3E9FF; }
.vx-btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.vx-btn.block { width: 100%; justify-content: center; }
.vx-btn:disabled, .vx-btn.disabled { opacity: .55; cursor: not-allowed; }

/* ── Tags / Pills ─────────────────────────────────────────────── */
.vx-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.vx-tag.success { background: var(--success-bg); color: var(--success); }
.vx-tag.warning { background: var(--warning-bg); color: var(--warning); }
.vx-tag.danger  { background: var(--danger-bg);  color: var(--danger); }
.vx-tag.info    { background: var(--info-bg);    color: var(--info); }
.vx-tag.primary { background: var(--primary-50); color: var(--primary); }
.vx-tag.muted   { background: #F1F3F8; color: var(--muted); }

/* ── Filter pill row ──────────────────────────────────────────── */
.vx-pill-row { display: flex; align-items: center; gap: 6px; padding: 14px 22px 0; flex-wrap: wrap; }
.vx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s;
}
.vx-pill:hover { background: #ECEEF4; }
.vx-pill.on { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); }

/* ── Staff table ──────────────────────────────────────────────── */
.vx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.vx-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
.vx-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.vx-table tbody tr { transition: background .12s ease; }
.vx-table tbody tr:hover { background: var(--surface-muted); }
.vx-table tbody tr.selected { background: var(--primary-50); }
.vx-table .vx-name-cell { display: flex; align-items: center; gap: 12px; }
.vx-table .vx-name-cell > div:not(.vx-avatar) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-table .vx-name { font-weight: 600; color: var(--ink); line-height: 1.25; }
.vx-table .vx-role { font-size: 12px; color: var(--muted); line-height: 1.25; }
.vx-table .contact-tel { color: var(--ink-2); }
.vx-table .contact-email { color: var(--primary); font-weight: 500; margin-top: 2px; font-size: 12px; }

.stf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 14px;
}
.stf-count { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.stf-count b { font-size: 18px; font-weight: 600; }
.stf-count .lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
.stf-actions { display: flex; align-items: center; gap: 8px; }

.stf-days { display: flex; gap: 4px; }
.stf-day {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--label);
  background: #F1F3F8;
}
.stf-day.on { background: var(--primary); color: white; }

.stf-foot {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}
.stf-pager { display: flex; gap: 4px; }
.stf-pager button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  cursor: pointer;
}
.stf-pager button.active { background: var(--primary); border-color: var(--primary); color: white; }
.stf-pager button:hover:not(.active) { background: var(--surface-muted); }

/* ── Reservations calendar ────────────────────────────────────── */
.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.rv-header-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-count { font-size: 14px; color: var(--ink-2); }
.rv-count b { color: var(--ink); font-weight: 600; }
.rv-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-date-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.rv-date-pill .lab { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.rv-date-arrow {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.rv-date-arrow:hover { background: var(--surface-muted); color: var(--ink); }

/* Calendar grid */
.rv-cal {
  border-top: 1px solid var(--border);
  min-height: 600px;
  position: relative;
}
.rv-cal-doctors {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 4;
  margin-left: 64px;
}
.rv-cal-doctor-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--border);
  background: var(--surface-muted);
}
.rv-cal-doctor-head:last-child { border-right: none; }
.rv-cal-doctor-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.rv-cal-doctor-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.rv-cal-body {
  display: flex;
}
.rv-cal-times {
  width: 64px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.rv-time-row {
  height: 80px;
  padding: 6px 10px 0 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--divider);
}
.rv-cal-grid {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  position: relative;
}
.rv-cal-col {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
}
.rv-cal-col:last-child { border-right: none; }
.rv-cal-slot {
  height: 80px;
  border-bottom: 1px solid var(--divider);
  position: relative;
  padding: 4px;
}
.rv-cal-slot.now { background: linear-gradient(90deg, rgba(46,91,255,.04), transparent); }

/* Now line */
.rv-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  z-index: 3;
  pointer-events: none;
}
.rv-now-line::before {
  content: "";
  position: absolute;
  left: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
}
.rv-now-label {
  position: absolute;
  left: 8px; top: -8px;
  background: var(--primary);
  color: white;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  transform: translateX(-100%) translateX(-2px);
}

/* Appointment cards */
.rv-appt {
  position: absolute;
  left: 6px; right: 6px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
  background: white;
}
.rv-appt:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); z-index: 5; }
.rv-appt-time {
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; white-space: nowrap; min-width: 0;
}
.rv-appt-name { font-weight: 600; color: var(--ink); margin-top: 2px; line-height: 1.2; }
.rv-appt-treat {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  font-size: 10.5px; font-weight: 500;
  border-radius: 5px;
  background: white;
  border: 1px solid currentColor;
  color: inherit;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4; vertical-align: middle;
}
.rv-appt-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.rv-appt-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Appointment colour themes */
.rv-appt.t-blue   { background: #EEF2FF; border-color: #C8D4FF; color: #2E5BFF; }
.rv-appt.t-green  { background: #E5F6F0; border-color: #B8E5D3; color: #10A37F; }
.rv-appt.t-amber  { background: #FCF1DA; border-color: #ECCF8C; color: #C2841B; }
.rv-appt.t-violet { background: #F1ECFE; border-color: #D6C6F8; color: #7C3AED; }
.rv-appt.t-rose   { background: #FDEAF2; border-color: #F4C2D7; color: #DB2777; }
.rv-appt.t-gray   { background: #F1F3F8; border-color: #D5D9E2; color: #64748B; }

/* Detail drawer */
.rv-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.32);
  backdrop-filter: blur(2px);
  z-index: 1060;
  animation: rvBackdropIn .2s ease forwards;
  opacity: 0;
}
@keyframes rvBackdropIn { to { opacity: 1; } }
.rv-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 96vw;
  background: var(--surface);
  z-index: 1061;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  animation: rvDrawerIn .26s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rvDrawerIn { to { transform: translateX(0); } }
.rv-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.rv-drawer-id { font-size: 13px; font-weight: 600; color: var(--ink); }
.rv-drawer-id .sep { color: var(--label); margin: 0 8px; }
.rv-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 24px; }
.rv-section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--label); margin-bottom: 6px;
}
.rv-patient {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.rv-patient-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.rv-patient-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rv-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--surface); cursor: pointer;
}
.rv-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.rv-status-pill .dot.programada { background: var(--label); }
.rv-status-pill .dot.confirmada { background: var(--primary); }
.rv-status-pill .dot.en_curso   { background: var(--warning); }
.rv-status-pill .dot.completada { background: var(--success); }
.rv-status-pill .dot.cancelada  { background: var(--danger); }
.rv-tripod {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.rv-tripod-cell { padding: 12px 14px; border-right: 1px solid var(--border); }
.rv-tripod-cell:last-child { border-right: none; }
.rv-tripod-lbl {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--label); display: flex; align-items: center; gap: 4px;
}
.rv-tripod-val { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.rv-tripod-sub { font-size: 12px; color: var(--muted); }
.rv-general {
  margin-top: 22px; padding: 18px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-muted);
}
.rv-general h4 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rv-general-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.rv-field-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--label);
}
.rv-field-value { font-size: 13.5px; color: var(--ink); margin-top: 4px; font-weight: 500; }
.rv-drawer-foot {
  padding: 16px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
}
.rv-drawer-foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Checkbox & Switch ────────────────────────────────────────── */
.vx-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  transition: all .12s ease;
  vertical-align: middle;
}
.vx-checkbox.checked { background: var(--primary); border-color: var(--primary); }
.vx-checkbox.checked::after {
  content: "";
  width: 5px; height: 9px;
  border-right: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px,-1px);
}
.vx-switch {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: #D1D6E0;
  position: relative; cursor: pointer;
  transition: background .15s ease;
  flex-shrink: 0;
  display: inline-block;
}
.vx-switch::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%; background: white;
  top: 2px; left: 2px;
  transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.vx-switch.on { background: var(--primary); }
.vx-switch.on::after { left: 18px; }

/* ── Modal ─────────────────────────────────────────────────────── */
.vx-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(3px);
  z-index: 1070;
  display: grid; place-items: center;
  padding: 24px;
  animation: rvBackdropIn .18s ease forwards;
  opacity: 0;
}
.vx-modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  animation: rvModalIn .22s cubic-bezier(.2,.7,.2,1) forwards;
  transform: translateY(8px) scale(.98); opacity: 0;
}
@keyframes rvModalIn { to { transform: translateY(0) scale(1); opacity: 1; } }
.vx-modal.wide { max-width: 640px; }
.vx-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.vx-modal-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.vx-modal-body { padding: 22px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.vx-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--border);
}
.vx-modal-foot .right { display: flex; gap: 10px; }

/* ── Stepper (wizard) ─────────────────────────────────────────── */
.vx-step {
  display: flex; flex-direction: column; align-items: center;
  position: relative; gap: 8px;
}
.vx-step .step-bubble {
  width: 36px; height: 36px;
  border-radius: 50%; background: #F1F3F8;
  display: grid; place-items: center;
  color: var(--label); border: 2px solid #F1F3F8;
  transition: all .2s ease;
}
.vx-step.active .step-bubble { background: var(--primary-50); color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(46,91,255,.14); }
.vx-step.done   .step-bubble { background: var(--success); color: white; border-color: var(--success); }
.vx-step .step-num { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.vx-step.active .step-num { color: var(--primary); }
.vx-step.done   .step-num { color: var(--success); }
.vx-step .step-name { font-size: 13px; font-weight: 500; color: var(--ink-2); text-align: center; }
.vx-step.active .step-name { color: var(--ink); font-weight: 600; }

/* ── Accordion ────────────────────────────────────────────────── */
.vx-accordion {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.vx-accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; background: var(--surface);
}
.vx-accordion-head:hover { background: var(--surface-muted); }
.vx-accordion-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.vx-accordion-count { font-size: 12px; color: var(--muted); margin-left: 8px; }
.vx-accordion-body { border-top: 1px solid var(--border); padding: 4px 0; }
.vx-check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; cursor: pointer; font-size: 13.5px;
  transition: background .12s ease;
}
.vx-check-row:hover { background: var(--surface-muted); }

/* ── Form fields ──────────────────────────────────────────────── */
.vx-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vx-field-lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.vx-field-lbl .req { color: var(--danger); margin-left: 2px; }
.vx-input, .vx-select, .vx-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 13.5px; color: var(--ink); background: var(--surface);
  outline: none; transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.vx-input:focus, .vx-select:focus, .vx-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,91,255,.15);
}
.vx-textarea { min-height: 80px; resize: vertical; }
.vx-day-row {
  display: grid; grid-template-columns: 120px 1fr;
  align-items: center; padding: 12px 4px;
  border-bottom: 1px solid var(--divider); gap: 18px;
}
.vx-day-row:last-child { border-bottom: none; }
.vx-day-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.vx-day-times { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.vx-dayoff-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.vx-dayoff-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vx-dayoff-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.vx-dayoff-repeat { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }

/* ── Placeholder pages ────────────────────────────────────────── */
.vx-placeholder { display: grid; place-items: center; min-height: 480px; text-align: center; }
.vx-placeholder-inner { max-width: 360px; }
.vx-placeholder h3 { margin: 16px 0 6px; font-size: 18px; font-weight: 600; color: var(--ink); }
.vx-placeholder p { margin: 0; color: var(--muted); font-size: 13.5px; }
.vx-placeholder-icon {
  width: 72px; height: 72px; margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-50), #F4F0FF);
  color: var(--primary);
  display: grid; place-items: center;
}

/* ── Icon button (circular) ───────────────────────────────────── */
.vx-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.vx-icon-btn:hover { color: var(--ink); border-color: var(--border-strong); }
.vx-icon-btn.primary { background: var(--primary); border-color: var(--primary); color: white; }
.vx-icon-btn.primary:hover { background: var(--primary-600); }

/* ── DataTable inside vx-page-card ───────────────────────────── */
.vx-page-card .table-responsive { border: none !important; }
.vx-page-card table.dataTable thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--label) !important;
  background: var(--surface-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}
.vx-page-card table.dataTable tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--divider) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}
.vx-page-card table.dataTable tbody tr:hover { background: var(--surface-muted) !important; }
.vx-page-card table.dataTable { border: none !important; }
.vx-page-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.vx-page-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  border-radius: 7px !important;
}
.vx-page-card .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 7px !important;
}
.vx-page-card .dataTables_wrapper {
  padding: 0 !important;
}
.vx-page-card .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 6px 14px 6px 14px !important;
  font-size: 13px !important;
}
.vx-page-card .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}
.vx-page-card .dataTables_wrapper .dataTables_info,
.vx-page-card .dataTables_wrapper .dataTables_filter,
.vx-page-card .dataTables_wrapper .dataTables_length,
.vx-page-card .dataTables_wrapper .dataTables_paginate {
  padding: 14px 22px !important;
}

/* Sidebar nav item active indicator (override for v4 tokens) */
.sidebar > ul.nav > li.active {
  border-left: 3px solid var(--primary) !important;
}
.sidebar > ul.nav > li.active > a:first-child,
.sidebar ul.nav li.active > a {
  background: var(--primary-50) !important;
  color: var(--primary) !important;
}
.sidebar ul.nav li.active > a i.menu-icon,
.sidebar > ul.nav > li.active > a:first-child i.menu-icon {
  color: var(--primary) !important;
}

/* ── intl-tel-input: fix número tapado por bandera+indicativo ── */
.iti {
  width: 100% !important;
  display: block !important;
}
.iti input,
.iti input[type=text],
.iti input[type=tel] {
  padding-left: 90px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.iti__flag-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}
.iti--separate-dial-code .iti__selected-flag {
  background-color: transparent !important;
}
#wizard-step-1 .iti,
.add-patient-form .iti {
  width: 100% !important;
}
#wizard-step-1 .iti input,
.add-patient-form .iti input {
  padding-left: 95px !important;
}

/* ── Consent Signatures Tab ── */
.signatures-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 32px;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .signatures-container { grid-template-columns: 1fr; padding: 16px 8px; }
}
.signature-block {
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color .2s, background .2s;
}
.signature-block.signed {
  border: 1.5px solid #10B981;
  background: #F0FDF4;
}
.signature-block .signer-role {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0;
}
.signature-block .signer-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  margin: 0;
}
.signature-block img {
  max-height: 80px;
  max-width: 180px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  padding: 6px;
  background: #fff;
}
.signature-block .sig-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #EFF6FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93C5FD;
  font-size: 26px;
}
.signature-block .signature-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
.signature-block .signature-status.pending { color: #F59E0B; }
.signature-block .signature-status.signed  { color: #10B981; }
.signature-block .sign-date {
  font-size: 11px;
  color: #64748B;
  margin: 0;
}
.btn-sign {
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s;
  text-decoration: none;
}
.btn-sign:hover { background: #1D4ED8; color: #fff; }
.btn-sign-patient { background: #059669; }
.btn-sign-patient:hover { background: #047857; }

/* ── Consent preview panel ── */
.consent-preview {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #0F172A;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}
.consent-preview p { margin-bottom: 1em; }
.consent-preview h1, .consent-preview h2, .consent-preview h3 {
  color: #1E40AF;
  margin-top: 1.4em;
  margin-bottom: .5em;
}
.consent-preview strong { color: #0F172A; }

/* ── Sidebar z-index — always above page content ── */
aside.sidebar,
#menu.sidebar,
.sidebar {
  z-index: 200 !important;
}

/* ── Dental evolution panel — inside left column only ── */
#dental-evolution-panel {
  margin-top: 0;
}