/* ═══════════════════════════════════════════════════════════════════════════
   Citeri · Panel — capa de componentes del panel de administración
   Se carga DESPUÉS de citeri.css + citeri-apple.css.
   Redefine superficie, tipografía, navegación y todos los componentes
   interactivos para que coincidan con Apple HIG.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("/lib/citeri-brand.css?v=20260727b");

/* ─── Lienzo ──────────────────────────────────────────────────────────────── */
body,
.dark body,
[data-theme="dark"] body {
  background: var(--fill-1) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}

/* ─── Tipografía — tracking negativo por tamaño ──────────────────────────── */
.page-title, h1 {
  letter-spacing: -0.042em !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
}
h2 { letter-spacing: -0.032em !important; font-weight: 650 !important; }
h3, .section-title { letter-spacing: -0.022em !important; font-weight: 600 !important; }
h4 { letter-spacing: -0.016em !important; font-weight: 600 !important; }

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--glass-sidebar) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-right: 1px solid var(--separator-soft) !important;
  box-shadow: none !important;
}

/* Brand */
.sidebar-brand .brand-icon {
  background: var(--ink) !important;
  border-color: transparent !important;
  border-radius: var(--radius-sm) !important;
}
.sidebar-brand .brand-name {
  font-size: 19px !important;
  font-weight: 760 !important;
  letter-spacing: -0.052em !important;
  color: var(--ink) !important;
  text-transform: lowercase !important;
}

/* Sección labels */
.sidebar-section,
.citeri-shell-section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  padding: 8px 12px 4px !important;
}

/* Nav items */
.nav-item,
a.nav-item {
  height: 36px !important;
  min-height: 36px !important;
  margin: 1px 6px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.014em !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard) !important;
}

/* Hover — solo dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover,
  a.nav-item:hover {
    background: rgba(118,118,128,.09) !important;
    color: var(--ink) !important;
  }
}

/* Estado activo */
.nav-item.active,
a.nav-item.active,
body.citeri-salon-ui .nav-item.active,
body.citeri-salon-ui a.nav-item.active {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.nav-item.active .nav-icon-wrap,
a.nav-item.active .nav-icon-wrap,
body.citeri-salon-ui .nav-item.active .nav-icon-wrap,
body.citeri-salon-ui a.nav-item.active .nav-icon-wrap {
  color: var(--blue) !important;
}

/* Iconos nav */
.nav-icon-wrap {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  opacity: .8;
}
.nav-item.active .nav-icon-wrap,
a.nav-item.active .nav-icon-wrap {
  background: transparent !important;
  color: var(--blue) !important;
  opacity: 1;
}

/* Children nav */
.citeri-nav-child {
  font-size: 12.5px !important;
  letter-spacing: -0.012em !important;
  color: var(--ink-3) !important;
}
.citeri-nav-child:hover { color: var(--ink) !important; }
.citeri-nav-child.active {
  color: var(--blue) !important;
  font-weight: 600 !important;
  background: rgba(0,113,227,.07) !important;
}
.citeri-nav-child.active::before,
.citeri-nav-child::before { background: var(--blue) !important; }

/* Footer */
.sidebar-footer {
  padding: 6px 8px 8px !important;
  border-top: 1px solid var(--separator-soft) !important;
}
.citeri-shell-credit{padding:10px 8px 2px;font-size:10px;line-height:1.45;color:var(--md-sys-color-on-surface-variant);text-align:center;opacity:.82}
.citeri-shell-credit span{display:block}
.citeri-shell-credit a{color:inherit;text-decoration:none;font-weight:650}
.citeri-shell-credit img{width:13px;height:13px;object-fit:contain;vertical-align:-2px}

/* ─── Superficies — blanco puro, borde sutil, sin sombras ────────────────── */
.card,
.card-elevated,
.kpi-card,
.table-wrap,
.onboarding-card,
.public-site-card,
.modal-box,
.drawer,
dialog,
.filters-card,
.calendar-wrapper {
  background: var(--white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--separator-soft) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-standard) !important;
}

/* Cards NO suben al hover — elimina el efecto levitar */
.card:hover,
.card-elevated:hover,
.kpi-card:hover {
  transform: none !important;
  background: var(--white) !important;
}
a.kpi-card:hover { border-color: var(--ink-4) !important; }

/* Modales y drawers SÍ tienen sombra */
.modal-box,
.modal-content,
.drawer,
dialog {
  border-color: var(--separator-soft) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--glass-modal) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Scrim de modales */
.modal-overlay,
.drawer-backdrop,
#confirmModal,
#fieldModal {
  background: rgba(15,15,18,.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ─── KPIs ────────────────────────────────────────────────────────────────── */
.kpi-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.kpi-label svg, .kpi-label i { width: 14px; height: 14px; opacity: .7; }

.kpi-value {
  font-size: clamp(1.85rem, 3.2vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.kpi-delta {
  font-size: 12.5px !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.kpi-delta.positive { color: var(--success) !important; }
.kpi-delta.negative { color: var(--danger) !important; }
.kpi-delta.neutral  { color: var(--ink-4) !important; }

/* ─── Botones ─────────────────────────────────────────────────────────────── */
.btn,
.copy-btn,
.chip,
.filter-tab {
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  letter-spacing: -0.016em !important;
  transition:
    background var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out) !important;
}

/* Press feedback */
.btn:active,
.copy-btn:active {
  transform: scale(0.97) !important;
}

/* Primary — tinta pura (Apple.com style) */
.btn-primary,
.copy-btn,
.cta-primary,
.btn-submit {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.copy-btn:hover,
.cta-primary:hover,
.btn-submit:hover {
  background: var(--ink) !important;
  opacity: .84 !important;
}

/* Secondary */
.btn-secondary,
.btn-ghost,
.btn-text,
.cta-secondary,
.chip,
.filter-tab {
  background: rgba(118,118,128,.10) !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn-text:hover {
  background: rgba(118,118,128,.16) !important;
  color: var(--ink) !important;
}

/* Danger */
.btn-danger,
.btn-danger-filled {
  background: var(--danger) !important;
  color: #fff !important;
}

/* Blue accent buttons */
.btn-blue,
.btn-accent {
  background: var(--blue) !important;
  color: #fff !important;
}
.btn-blue:hover,
.btn-accent:hover {
  background: var(--blue-hover) !important;
  opacity: 1 !important;
}

/* Filter tabs */
.filter-tab.active {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}

/* ─── Campos de texto ─────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea,
.input,
.search-input,
.field-input,
.date-input,
.time-input,
.week-picker,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select,
textarea {
  /* 44px es el mínimo con el que un dedo acierta a la primera, y el cuerpo a
     15px se lee sin acercarse a la pantalla. Antes 38px/13.5px: se pedía
     expresamente (11-08-2026) que los desplegables y campos del panel se
     vieran más grandes. */
  min-height: 44px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--fill-1) !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  letter-spacing: -0.012em !important;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.input:focus,
.search-input:focus,
.field-input:focus,
.date-input:focus,
.time-input:focus,
.week-picker:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  background: var(--white) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-focus) !important;
  outline: none !important;
}

.form-label,
.field-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.01em !important;
}

/* ─── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-pill) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 3px 9px !important;
}
.badge-booked, .badge-blue    { color: var(--blue) !important;    background: var(--blue-light) !important; }
.badge-done,   .badge-green   { color: var(--success) !important; background: var(--success-bg) !important; }
.badge-cancelled, .badge-red  { color: var(--danger) !important;  background: var(--danger-bg) !important; }
.badge-yellow, .badge-amber   { color: var(--warning) !important; background: var(--warning-bg) !important; }
.badge-gray                   { color: var(--ink-3) !important;   background: var(--fill-2) !important; }

/* ─── Tablas ──────────────────────────────────────────────────────────────── */
.table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  background: var(--fill-1) !important;
  padding: 10px 16px !important;
}
.table td {
  font-size: 13.5px !important;
  letter-spacing: -0.012em !important;
  color: var(--ink-2) !important;
  padding: 13px 16px !important;
}
.table tr { border-color: var(--separator-soft) !important; }
.table tr:hover td { background: rgba(0,0,0,.017) !important; }

/* ─── Misc ────────────────────────────────────────────────────────────────── */
.text-muted, .text-faint { color: var(--ink-3) !important; }
a { color: var(--blue); }

.avatar,
.avatar-sm { color: #fff !important; }

input[type="checkbox"]:checked,
input[type="radio"]:checked { accent-color: var(--blue); }

.setup-progress-fill,
.progress-linear-fill { background: var(--blue) !important; }

.step-icon,
.section-icon,
.onboarding-step .step-num {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.skip-link {
  position: absolute; top: -100%; left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; outline: none; box-shadow: 0 0 0 3px var(--blue-focus); }

/* ─── Booking link card — fondo oscuro ───────────────────────────────────── */
.booking-link-card {
  background: var(--ink) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
}
.booking-link-card p,
.booking-link-card .card-title { color: #fff !important; }
.booking-link-card code {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}
.booking-link-card .copy-btn {
  background: var(--blue) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ─── Loyalty card ───────────────────────────────────────────────────────── */
.loyalty-card-preview {
  background: linear-gradient(135deg, #111827, var(--blue)) !important;
  border: none !important;
  color: #fff !important;
}
.loyalty-card-preview * { color: #fff !important; }

/* ─── Right panel ────────────────────────────────────────────────────────── */
.right-panel {
  background: var(--fill-1) !important;
  color: var(--ink) !important;
  border-left: 1px solid var(--separator-soft) !important;
}
.right-panel * { color: inherit !important; }
.right-panel .text-muted,
.right-panel small,
.right-panel .muted { color: var(--ink-3) !important; }
.right-panel .icon-chip {
  background: var(--white) !important;
  border: 1px solid var(--separator-soft) !important;
}

/* ─── AI box ─────────────────────────────────────────────────────────────── */
.ai-box {
  background: var(--blue-light) !important;
  border-color: rgba(0,113,227,.20) !important;
}
.ai-box h3 { color: var(--blue) !important; }

/* ─── Summary chips ──────────────────────────────────────────────────────── */
.summary-chip.chip-total {
  background: var(--blue-light) !important;
  border-color: rgba(0,113,227,.20) !important;
  color: var(--blue) !important;
}
.summary-chip.chip-done,
.badge-active {
  background: var(--success-bg) !important;
  border-color: rgba(52,199,89,.22) !important;
  color: var(--success) !important;
}
.summary-chip.chip-revenue {
  background: rgba(175,82,222,.10) !important;
  border-color: rgba(175,82,222,.20) !important;
  color: #7e22ce !important;
}

/* ─── Plan card ──────────────────────────────────────────────────────────── */
.plan-card .current-pill,
.current-pill {
  background: var(--blue-light) !important;
  border-color: rgba(0,113,227,.20) !important;
  color: var(--blue) !important;
}

/* ─── Stats mini ─────────────────────────────────────────────────────────── */
.stat-mini.green {
  background: var(--blue-light) !important;
}
.stat-mini.green .stat-val   { color: var(--blue) !important; }
.stat-mini.green .stat-label { color: var(--ink-3) !important; }
.stat-mini.green .stat-sub   { color: var(--ink-4) !important; }

/* ─── Day column today ───────────────────────────────────────────────────── */
.day-column.today { background: rgba(0,113,227,.04) !important; }

/* ─── Wallet bar ─────────────────────────────────────────────────────────── */
.wallet-bar .dot { background: var(--blue) !important; }

/* ─── Upsell ─────────────────────────────────────────────────────────────── */
.upsell-price { color: var(--blue) !important; border-color: transparent !important; }
.news-icon    { color: var(--blue) !important; border-color: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SHELL 2026 — Citeri Salon UI
   Selector body.citeri-salon-ui para máxima especificidad sin !important
   en todo. Los !important solo se usan donde citeri.css pisa sin selector.
   ══════════════════════════════════════════════════════════════════════════ */
body.citeri-salon-ui {
  --sidebar-w: 252px;
  background: var(--fill-1) !important;
}

/* Layout principal */
body.citeri-salon-ui .main-content {
  padding: 32px clamp(20px,3vw,44px) 72px !important;
  background: var(--fill-1) !important;
}

/* ── Sidebar ── */
body.citeri-salon-ui .sidebar,
body.citeri-salon-ui .app-layout > .sidebar {
  background: var(--glass-sidebar) !important;
  border-right: 1px solid var(--separator-soft) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: none !important;
}

/* Brand row */
body.citeri-salon-ui .citeri-sidebar-brand-row {
  min-height: 56px !important;
  padding: 0 12px 0 16px !important;
  border-bottom: 1px solid var(--separator-soft) !important;
}
body.citeri-salon-ui .sidebar-brand {
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.citeri-salon-ui .sidebar-brand .brand-name {
  color: var(--ink) !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  letter-spacing: -0.052em !important;
  text-transform: lowercase;
}
body.citeri-salon-ui .sidebar-brand .brand-icon {
  background: var(--ink) !important;
  border-color: transparent !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

/* Sidebar action buttons (search, notif…) */
body.citeri-salon-ui .citeri-sidebar-actions { gap: 3px; }
body.citeri-salon-ui .citeri-sidebar-actions button,
body.citeri-salon-ui .citeri-command-close,
body.citeri-salon-ui .citeri-notification-panel header button {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: var(--radius-xs) !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard) !important;
}
body.citeri-salon-ui .citeri-sidebar-actions button:hover {
  background: rgba(118,118,128,.10) !important;
  color: var(--ink) !important;
}

/* Org selector */
body.citeri-salon-ui .citeri-shell-org { padding: 10px 10px 3px !important; }
body.citeri-salon-ui .citeri-org-card {
  padding: 8px !important;
  border-color: var(--separator-soft) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.72) !important;
}
body.citeri-salon-ui .citeri-org-label {
  margin: 1px 3px 4px !important;
  color: var(--ink-4) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.065em !important;
}
body.citeri-salon-ui .citeri-org-card select {
  height: 29px !important;
  min-height: 29px !important;
  border: 0 !important;
  background-color: transparent !important;
  font-size: 12px !important;
}

/* Search bar */
body.citeri-salon-ui .citeri-shell-search {
  min-height: 32px !important;
  margin: 8px 10px 4px !important;
  padding: 0 9px !important;
  border: 1px solid var(--separator-soft) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(118,118,128,.075) !important;
  color: var(--ink-3) !important;
  box-shadow: none !important;
}
body.citeri-salon-ui .citeri-shell-search kbd {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-4) !important;
  box-shadow: none !important;
}

/* Nav tree */
body.citeri-salon-ui .citeri-shell-nav { padding: 3px 8px 12px !important; }
body.citeri-salon-ui .citeri-shell-section + .citeri-shell-section { margin-top: 8px !important; }
body.citeri-salon-ui .citeri-shell-section-label {
  padding: 8px 9px 5px !important;
  color: var(--ink-4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}

/* Nav items */
body.citeri-salon-ui .nav-item,
body.citeri-salon-ui a.nav-item {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  letter-spacing: -0.013em !important;
  font-weight: 500 !important;
}
body.citeri-salon-ui .nav-item.active,
body.citeri-salon-ui a.nav-item.active {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}
body.citeri-salon-ui .nav-item.active .nav-icon-wrap,
body.citeri-salon-ui a.nav-item.active .nav-icon-wrap {
  color: var(--blue) !important;
}

/* Nav children */
body.citeri-salon-ui .citeri-nav-children { overflow: hidden; }
body.citeri-salon-ui .citeri-nav-children-inner {
  margin: 2px 0 4px 18px;
  padding: 2px 0 2px 13px;
  display: grid;
  gap: 1px;
  border-left: 1px solid var(--separator);
}
body.citeri-salon-ui .citeri-nav-child {
  min-height: 30px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  font-weight: 500;
  text-decoration: none;
}
body.citeri-salon-ui .citeri-nav-child.active {
  background: rgba(0,113,227,.07);
  color: var(--blue) !important;
  font-weight: 650;
}
body.citeri-salon-ui .citeri-nav-child::before { display: none !important; }

/* Summary */
body.citeri-salon-ui .citeri-shell-summary {
  margin: 0 8px;
  overflow: hidden;
  border: 1px solid var(--separator-soft) !important;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}

/* Footer */
body.citeri-salon-ui .sidebar-footer { padding: 6px 8px 8px !important; }

/* ── Page header ── */
body.citeri-salon-ui .page-header,
body.citeri-salon-ui citeri-page-header {
  min-height: 48px !important;
  margin-bottom: 28px !important;
}
body.citeri-salon-ui .page-title,
body.citeri-salon-ui h1 {
  font-size: clamp(22px,3vw,30px) !important;
  font-weight: 730 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

/* ── Cards / surfaces ── */
body.citeri-salon-ui .card,
body.citeri-salon-ui .card-elevated,
body.citeri-salon-ui .kpi-card,
body.citeri-salon-ui .table-wrap,
body.citeri-salon-ui .onboarding-card,
body.citeri-salon-ui .public-site-card,
body.citeri-salon-ui .filters-card,
body.citeri-salon-ui .calendar-wrapper {
  border-color: var(--separator-soft) !important;
  border-radius: var(--radius-md) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

/* Modales / drawers */
body.citeri-salon-ui .modal-box,
body.citeri-salon-ui .modal-content,
body.citeri-salon-ui .drawer,
body.citeri-salon-ui dialog {
  border-color: var(--separator-soft) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--glass-modal) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--shadow-xl) !important;
}
body.citeri-salon-ui .modal-overlay,
body.citeri-salon-ui .drawer-backdrop,
body.citeri-salon-ui #confirmModal,
body.citeri-salon-ui #fieldModal {
  background: rgba(15,15,18,.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Table headers */
body.citeri-salon-ui .table th { background: var(--fill-1) !important; }

/* ── Agenda (Citas) ── */
body.citeri-salon-ui .emp-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px,340px)) !important;
  align-items: start;
  gap: 14px !important;
}
body.citeri-salon-ui .emp-col {
  overflow: hidden;
  border: 1px solid var(--separator-soft) !important;
  border-radius: var(--radius-md) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}
body.citeri-salon-ui .emp-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--separator-soft) !important;
}
body.citeri-salon-ui .appt-list { padding: 2px 16px 6px !important; }
body.citeri-salon-ui .appt-item,
body.citeri-salon-ui .appt-item.status-done,
body.citeri-salon-ui .appt-item.status-cancelled,
body.citeri-salon-ui .appt-item.status-no_show,
body.citeri-salon-ui .appt-item.status-confirmed {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1;
}
body.citeri-salon-ui .appt-item + .appt-item {
  border-top: 1px solid var(--separator-soft) !important;
}
body.citeri-salon-ui .appt-item::after { display: none !important; }
body.citeri-salon-ui .appt-time {
  color: var(--ink-3) !important;
  font-variant-numeric: tabular-nums;
}
body.citeri-salon-ui .appt-client { margin-top: 3px !important; font-size: 14px !important; }
body.citeri-salon-ui .appt-actions { margin-top: 9px !important; }
body.citeri-salon-ui .appt-actions .act-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11.5px !important;
}

/* ── Command palette ── */
body.citeri-salon-ui .citeri-command {
  border: 1px solid var(--separator) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--shadow-xl) !important;
  transform-origin: 50% 12%;
}

/* ── Notification panel ── */
body.citeri-salon-ui .citeri-notification-panel {
  border-left: 1px solid var(--separator-soft) !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
.citeri-mobile-tabbar { display: none; }

@media (max-width: 900px) {
  body.citeri-salon-ui .main-content {
    padding: 68px 16px calc(94px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.citeri-salon-ui .sidebar,
  body.citeri-salon-ui .app-layout > .sidebar {
    width: min(310px,88vw) !important;
    background: rgba(255,255,255,.97) !important;
  }

  /* Tab bar iOS style */
  .citeri-mobile-tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 999;
    min-height: 56px;
    padding: 4px 8px max(8px, env(safe-area-inset-bottom,0px));
    display: grid;
    grid-template-columns: repeat(5,1fr);
    border-top: 1px solid var(--separator-soft);
    background: rgba(255,255,255,.90);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  .citeri-mobile-tabbar a,
  .citeri-mobile-tabbar button {
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-4);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition:
      color var(--dur-fast) var(--ease-standard),
      transform var(--dur-fast) var(--ease-out);
  }
  .citeri-mobile-tabbar a:active,
  .citeri-mobile-tabbar button:active { transform: scale(0.92); }
  .citeri-mobile-tabbar a.active { color: var(--blue); }
  .citeri-mobile-tabbar svg { width: 19px; height: 19px; }
}

/* ─── Hover hover (solo puntero fino) ────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.citeri-salon-ui .nav-item:hover,
  body.citeri-salon-ui a.nav-item:hover,
  body.citeri-salon-ui .citeri-nav-child:hover {
    background: rgba(118,118,128,.09) !important;
    color: var(--ink) !important;
  }
}

/* ─── Accesibilidad ──────────────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  body.citeri-salon-ui .sidebar,
  body.citeri-salon-ui .app-layout > .sidebar,
  body.citeri-salon-ui .citeri-command,
  body.citeri-salon-ui .citeri-notification-panel,
  .citeri-mobile-tabbar {
    background: var(--white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .modal-box, .drawer, dialog {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--white) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.citeri-salon-ui .nav-item:active,
  body.citeri-salon-ui a.nav-item:active,
  .citeri-mobile-tabbar a:active,
  .citeri-mobile-tabbar button:active {
    transform: none !important;
  }
  .btn:active, .copy-btn:active { transform: none !important; }
}