/* Salovix v22: apariencia compartida entre /web, /tablet y /mobile. */
body.salovix-web-mode {
  --sv-bg: var(--mat-app-bg);
  --sv-surface: var(--mat-surface);
  --sv-card: var(--mat-card);
  --sv-map: var(--mat-map-bg);
  --sv-text: var(--mat-readable-text, var(--mat-text));
  --sv-muted: var(--mat-readable-muted, var(--mat-muted));
  --sv-border: var(--mat-border);
  --sv-accent: var(--mat-accent);
  --sv-accent-hover: var(--mat-accent-hover);
  --sv-accent-text: var(--mat-accent-text, #fff);
  --sv-pending: var(--mat-pending);
  --sv-reserved: var(--mat-reserved);
  --sv-seated: var(--mat-seated);
  --sv-completed: var(--mat-completed);
  --sv-cancelled: var(--mat-cancelled);
  --sv-table-free: var(--mat-table-free);
}
body.salovix-web-mode.matilde-cover-dark-mode,
body.salovix-web-mode.salovix-web-dark-mode {
  --sv-bg: var(--mat-cover-bg);
  --sv-surface: var(--mat-cover-panel);
  --sv-card: var(--mat-cover-panel-2);
  --sv-map: var(--mat-cover-map);
  --sv-text: var(--mat-cover-text);
  --sv-muted: var(--mat-cover-muted);
  --sv-border: var(--mat-cover-border);
  --sv-accent: var(--mat-cover-yellow);
  --sv-accent-hover: var(--mat-cover-yellow-hover);
  --sv-accent-text: #202a31;
  --sv-pending: var(--mat-cover-pending);
  --sv-reserved: var(--mat-cover-lime);
  --sv-seated: var(--mat-cover-pink);
  --sv-completed: var(--mat-cover-blue);
  --sv-cancelled: var(--mat-cover-danger);
  --sv-table-free: var(--mat-cover-table-free);
}

body.salovix-web-mode,
body.salovix-web-mode > main,
body.salovix-web-mode #section-admin,
body.salovix-web-mode #salovix-web-custom-view {
  background: var(--sv-bg) !important;
  color: var(--sv-text) !important;
}
body.salovix-web-mode #salovix-web-sidebar {
  background: var(--sv-surface) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
  box-shadow: 16px 0 42px color-mix(in srgb, var(--sv-text) 12%, transparent) !important;
}
body.salovix-web-mode :is(.salovix-web-sidebar-head,.salovix-web-sidebar-foot,.salovix-web-submenu) { border-color: var(--sv-border) !important; }
body.salovix-web-mode :is(.salovix-web-brand strong,.salovix-web-side-btn,.salovix-web-side-btn strong,.salovix-web-sub-btn,.salovix-web-readonly-note) { color: var(--sv-text) !important; }
body.salovix-web-mode :is(.salovix-web-brand span,.salovix-web-group-title,.salovix-web-side-btn small,.salovix-web-side-btn > i:last-child,.salovix-web-sub-btn i) { color: var(--sv-muted) !important; }
body.salovix-web-mode .salovix-web-side-btn .salovix-web-icon {
  color: var(--sv-accent) !important;
  background: color-mix(in srgb, var(--sv-accent) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--sv-accent) 28%, transparent) !important;
}
body.salovix-web-mode :is(.salovix-web-side-btn:hover,.salovix-web-side-btn:focus-visible,.salovix-web-side-btn.is-active,.salovix-web-sub-btn:hover,.salovix-web-sub-btn.is-active) {
  background: color-mix(in srgb, var(--sv-accent) 12%, var(--sv-surface)) !important;
  border-color: color-mix(in srgb, var(--sv-accent) 45%, var(--sv-border)) !important;
  color: var(--sv-text) !important;
}
body.salovix-web-mode .salovix-web-side-btn.is-active { box-shadow: inset 3px 0 0 var(--sv-accent) !important; }
body.salovix-web-mode .salovix-web-side-btn.is-primary,
body.salovix-web-mode :is(.salovix-web-action-btn.is-primary,.salovix-web-theme-toggle.is-active) {
  background: var(--sv-accent) !important;
  border-color: var(--sv-accent) !important;
  color: var(--sv-accent-text) !important;
}
body.salovix-web-mode .salovix-web-side-btn.is-primary :is(strong,small,i,.salovix-web-icon) { color: var(--sv-accent-text) !important; }

body.salovix-web-mode :is(
  .salovix-web-workspace-head,.salovix-web-view-card,.salovix-web-view-card-head,.salovix-web-view-card-body,
  .salovix-web-data-row,.salovix-web-crm-list,.salovix-web-crm-detail,.salovix-web-danger-card,
  .salovix-web-order-row,.salovix-web-schedule-card,.salovix-web-theme-card,.salovix-web-security-note,
  .salovix-web-table-card,.salovix-web-object-toolbar,.matilde-v63-appearance-card,.matilde-v95-dark-card
) {
  background: var(--sv-surface) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode :is(.salovix-web-data-row,.salovix-web-order-row,.salovix-web-schedule-card,.salovix-web-danger-card) { background: var(--sv-card) !important; }
body.salovix-web-mode :is(#salovix-web-page-head h1,.salovix-web-view-card h2,.salovix-web-view-card h3,.salovix-web-view-card h4,.salovix-web-view-card strong,.salovix-web-theme-card strong) { color: var(--sv-text) !important; }
body.salovix-web-mode :is(#salovix-web-page-head p,.salovix-web-view-card p,.salovix-web-view-card small,.salovix-web-theme-card small,.salovix-web-data-row small,.salovix-web-empty) { color: var(--sv-muted) !important; }
body.salovix-web-mode :is(input,select,textarea,.salovix-web-input,.salovix-web-order-control,.salovix-web-position-select select) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode :is(.salovix-web-action-btn:not(.is-primary):not(.is-danger),.salovix-web-order-text-btn,.salovix-web-theme-toggle) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode :is(.salovix-web-action-btn:not(.is-primary):not(.is-danger),.salovix-web-order-text-btn):hover {
  background: color-mix(in srgb, var(--sv-accent) 10%, var(--sv-card)) !important;
  border-color: var(--sv-accent) !important;
  color: var(--sv-text) !important;
}
body.salovix-web-mode :is(#sala-canvas-container,.salovix-web-plan-stage,.salovix-web-plan-canvas) { background: var(--sv-map) !important; }
body.salovix-web-mode .salovix-web-theme-icon { background: color-mix(in srgb, var(--sv-accent) 16%, var(--sv-surface)) !important; color: var(--sv-accent) !important; }
body.salovix-web-mode .salovix-web-theme-toggle.is-active span { background: var(--sv-accent) !important; }
body.salovix-web-mode .salovix-web-tag { background: color-mix(in srgb, var(--sv-accent) 13%, var(--sv-card)) !important; color: var(--sv-text) !important; border-color: color-mix(in srgb, var(--sv-accent) 35%, var(--sv-border)) !important; }

body.salovix-web-mode [data-reserva-card="true"].is-pending { background: var(--sv-pending) !important; }
body.salovix-web-mode [data-reserva-card="true"].is-reserved { background: var(--sv-reserved) !important; }
body.salovix-web-mode [data-reserva-card="true"].is-seated { background: var(--sv-seated) !important; }
body.salovix-web-mode [data-reserva-card="true"].is-completed { background: var(--sv-completed) !important; }
body.salovix-web-mode [data-reserva-card="true"].is-cancelled { background: var(--sv-cancelled) !important; }

/* Refuerzo para que la paleta normal alcance las vistas táctiles incluso si
   existen reglas antiguas posteriores con colores fijos. */
body:not(.matilde-cover-dark-mode) :is(#section-tablet,#section-mobile) { background: var(--mat-app-bg) !important; color: var(--mat-readable-text) !important; }
body:not(.matilde-cover-dark-mode) :is(.tablet-topbar,.tablet-maitre-topbar,.tablet-controlbar,.tablet-panel,.tablet-extra-panel,.tablet-extra-setting-row,.mobile-topbar,.mobile-bottom-nav,.mobile-card,.mobile-setting-row) {
  background: var(--mat-surface) !important;
  color: var(--mat-readable-text) !important;
  border-color: var(--mat-border) !important;
}
body:not(.matilde-cover-dark-mode) :is(.tablet-res-card,.mobile-res-item,.mobile-table-row,.mobile-customer-item,.mobile-notification-row,.mobile-customer-booking) {
  background: var(--mat-card) !important;
  color: var(--mat-readable-text) !important;
  border-color: var(--mat-border) !important;
}
body:not(.matilde-cover-dark-mode) :is(#tablet-map-viewport,.tablet-map-canvas,.tablet-map-base,#mobile-map-stage,#mobile-map-base,.mobile-map-stage) { background: var(--mat-map-bg) !important; }
body:not(.matilde-cover-dark-mode) :is(.tablet-section-title span,.tablet-brand-subtitle,.mobile-section-title span,.mobile-res-meta,.mobile-customer-item span,.tablet-extra-title span,.tablet-extra-setting-row span,.mobile-setting-row span) { color: var(--mat-readable-muted) !important; }
body:not(.matilde-cover-dark-mode) :is(.tablet-tab.active,.tablet-icon-btn.is-active,.mobile-nav-btn.active,.mobile-tab.active,.mobile-area-tab.is-active,.mobile-tool-btn.is-active) {
  background: var(--mat-accent) !important;
  border-color: var(--mat-accent) !important;
  color: var(--mat-accent-text) !important;
}

/* La forma elegida también alcanza la administración web. */
body.matilde-shape-straight.salovix-web-mode :is(#salovix-web-sidebar,.salovix-web-side-btn,.salovix-web-sub-btn,.salovix-web-view-card,.salovix-web-data-row,.salovix-web-action-btn,.salovix-web-theme-card,.salovix-web-theme-toggle) { border-radius: 0 !important; }
body.matilde-cover-dark-mode.matilde-dark-shape-straight.salovix-web-mode :is(#salovix-web-sidebar,.salovix-web-side-btn,.salovix-web-sub-btn,.salovix-web-view-card,.salovix-web-data-row,.salovix-web-action-btn,.salovix-web-theme-card,.salovix-web-theme-toggle) { border-radius: 0 !important; }

/* Prioridad final sobre las reglas oscuras antiguas de /web. */
body.salovix-web-mode.matilde-cover-dark-mode,
body.salovix-web-mode.salovix-web-dark-mode,
body.salovix-web-mode.matilde-cover-dark-mode > main,
body.salovix-web-mode.salovix-web-dark-mode > main,
body.salovix-web-mode.matilde-cover-dark-mode #section-admin,
body.salovix-web-mode.salovix-web-dark-mode #section-admin,
body.salovix-web-mode.matilde-cover-dark-mode #salovix-web-custom-view,
body.salovix-web-mode.salovix-web-dark-mode #salovix-web-custom-view {
  background: var(--sv-bg) !important;
  color: var(--sv-text) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(
  .salovix-web-workspace-head,.salovix-web-view-card,.salovix-web-view-card-head,.salovix-web-view-card-body,
  .salovix-web-crm-list,.salovix-web-crm-detail,.salovix-web-theme-card,.salovix-web-security-note,
  .salovix-web-table-card,.salovix-web-object-toolbar,.matilde-v63-appearance-card,.matilde-v95-dark-card,
  .bg-white,.bg-slate-50,.bg-gray-50
),
body.salovix-web-mode.salovix-web-dark-mode :is(
  .salovix-web-workspace-head,.salovix-web-view-card,.salovix-web-view-card-head,.salovix-web-view-card-body,
  .salovix-web-crm-list,.salovix-web-crm-detail,.salovix-web-theme-card,.salovix-web-security-note,
  .salovix-web-table-card,.salovix-web-object-toolbar,.matilde-v63-appearance-card,.matilde-v95-dark-card,
  .bg-white,.bg-slate-50,.bg-gray-50
) {
  background: var(--sv-surface) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(.salovix-web-data-row,.salovix-web-danger-card,.salovix-web-order-row,.salovix-web-schedule-card),
body.salovix-web-mode.salovix-web-dark-mode :is(.salovix-web-data-row,.salovix-web-danger-card,.salovix-web-order-row,.salovix-web-schedule-card) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(h1,h2,h3,h4,strong,.text-gray-900,.text-slate-900),
body.salovix-web-mode.salovix-web-dark-mode :is(h1,h2,h3,h4,strong,.text-gray-900,.text-slate-900) { color: var(--sv-text) !important; }
body.salovix-web-mode.matilde-cover-dark-mode :is(p,small,.text-gray-500,.text-gray-600,.text-slate-500,.text-slate-600),
body.salovix-web-mode.salovix-web-dark-mode :is(p,small,.text-gray-500,.text-gray-600,.text-slate-500,.text-slate-600) { color: var(--sv-muted) !important; }
body.salovix-web-mode.matilde-cover-dark-mode :is(input,select,textarea,.salovix-web-input,.salovix-web-order-control,.salovix-web-position-select select),
body.salovix-web-mode.salovix-web-dark-mode :is(input,select,textarea,.salovix-web-input,.salovix-web-order-control,.salovix-web-position-select select) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(.salovix-web-action-btn:not(.is-primary):not(.is-danger),.salovix-web-order-text-btn,.salovix-web-theme-toggle,button.bg-white),
body.salovix-web-mode.salovix-web-dark-mode :is(.salovix-web-action-btn:not(.is-primary):not(.is-danger),.salovix-web-order-text-btn,.salovix-web-theme-toggle,button.bg-white) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(#sala-canvas-container,.salovix-web-plan-stage,.salovix-web-plan-canvas),
body.salovix-web-mode.salovix-web-dark-mode :is(#sala-canvas-container,.salovix-web-plan-stage,.salovix-web-plan-canvas) { background: var(--sv-map) !important; }


/* Salovix v24: pulido final del editor de apariencia. */
body.salovix-web-mode #matilde-v63-appearance-modal {
  /* En /web el editor siempre se integra en la página. El overlay antiguo no
     puede aparecer ni durante el intervalo previo al traslado de la tarjeta. */
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.salovix-web-mode #salovix-web-appearance-host .matilde-v63-appearance-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* El interruptor conserva siempre una sola línea y el carril nunca recibe texto. */
body.salovix-web-mode .salovix-web-theme-card { min-width: 0; }
body.salovix-web-mode .salovix-web-theme-toggle {
  flex: 0 0 164px !important;
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  height: 44px !important;
  padding: 0 13px !important;
  gap: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  line-height: 1 !important;
}
body.salovix-web-mode .salovix-web-theme-toggle-track {
  position: relative !important;
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 23px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
}
body.salovix-web-mode .salovix-web-theme-toggle-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

/* Una sola familia cromática en modo oscuro. Las reglas antiguas de /web
   ya no pueden imponer azules marino distintos a la paleta seleccionada. */
body.salovix-web-mode.matilde-cover-dark-mode,
body.salovix-web-mode.salovix-web-dark-mode {
  --mat-app-bg: var(--mat-cover-bg) !important;
  --mat-surface: var(--mat-cover-panel) !important;
  --mat-card: var(--mat-cover-panel-2) !important;
  --mat-map-bg: var(--mat-cover-map) !important;
  --mat-text: var(--mat-cover-text) !important;
  --mat-muted: var(--mat-cover-muted) !important;
  --mat-readable-text: var(--mat-cover-text) !important;
  --mat-readable-muted: var(--mat-cover-muted) !important;
  --mat-border: var(--mat-cover-border) !important;
  --mat-accent: var(--mat-cover-yellow) !important;
  --mat-accent-hover: var(--mat-cover-yellow-hover) !important;
  --mat-pending: var(--mat-cover-pending) !important;
  --mat-reserved: var(--mat-cover-lime) !important;
  --mat-seated: var(--mat-cover-pink) !important;
  --mat-completed: var(--mat-cover-blue) !important;
  --mat-cancelled: var(--mat-cover-danger) !important;
  --mat-table-free: var(--mat-cover-table-free) !important;
}
body.salovix-web-mode.matilde-cover-dark-mode :is(
  .matilde-v63-color-row,.matilde-v63-color-row input[type="text"],
  .matilde-v63-shape button,.matilde-v63-appearance-actions button,
  .matilde-v95-dark-row,.matilde-v95-dark-row input[type="text"],
  .matilde-v95-dark-shape button,.matilde-v95-dark-actions button
),
body.salovix-web-mode.salovix-web-dark-mode :is(
  .matilde-v63-color-row,.matilde-v63-color-row input[type="text"],
  .matilde-v63-shape button,.matilde-v63-appearance-actions button,
  .matilde-v95-dark-row,.matilde-v95-dark-row input[type="text"],
  .matilde-v95-dark-shape button,.matilde-v95-dark-actions button
) {
  background: var(--sv-card) !important;
  color: var(--sv-text) !important;
  border-color: var(--sv-border) !important;
}

@media (max-width: 760px) {
  body.salovix-web-mode .salovix-web-theme-card { align-items: flex-start; flex-direction: column; gap: 14px; }
  body.salovix-web-mode .salovix-web-theme-toggle { align-self: flex-start; }
}