/* Tema de marca del restaurante — paleta basada en localhost:8000 (MP Variedades) */
:root {
  --background: 320 40% 98%;
  --foreground: 320 18% 12%;
  --card: 0 0% 100%;
  --card-foreground: 320 18% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 320 18% 12%;
  --primary: 322 84% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 72% 36%;
  --secondary-foreground: 0 0% 100%;
  --muted: 320 28% 95%;
  --muted-foreground: 320 10% 42%;
  --accent: 288 72% 36%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 320 22% 88%;
  --input: 320 22% 88%;
  --ring: 322 84% 40%;
  --radius: 0.75rem;
  --font-sans: "Inter", system-ui, sans-serif;
}

html.dark-theme {
  color-scheme: dark;
  --background: 320 30% 8%;
  --foreground: 320 20% 96%;
  --card: 320 24% 11%;
  --card-foreground: 320 20% 96%;
  --popover: 320 24% 11%;
  --popover-foreground: 320 20% 96%;
  --primary: 322 84% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 72% 48%;
  --secondary-foreground: 0 0% 100%;
  --muted: 320 18% 16%;
  --muted-foreground: 320 12% 70%;
  --accent: 288 72% 48%;
  --accent-foreground: 0 0% 100%;
  --border: 320 16% 22%;
  --input: 320 16% 22%;
  --ring: 322 84% 52%;
}

/* ---------- Base ---------- */
body,
.main-content {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6,
.text-dark,
.text-body,
.text-black {
  color: hsl(var(--foreground)) !important;
}

.text-muted,
.text-secondary,
.menu-category {
  color: hsl(var(--muted-foreground)) !important;
}

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

a { color: hsl(var(--primary)); }
a:hover { color: hsl(var(--accent)); }

/* ---------- Superficies ---------- */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.offcanvas,
.popover,
.toast {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.card { border-radius: var(--radius); }

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-divider,
hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: hsl(var(--border)) !important;
}

.card-header.bg-white,
.card-header.bg-light,
.bg-white,
.bg-light {
  background-color: hsl(var(--card)) !important;
}

.bg-light,
.table-light,
.user-card,
.bg-body-tertiary {
  background-color: hsl(var(--muted)) !important;
}

.salon-canvas {
  background-color: hsl(var(--card)) !important;
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px) !important;
}

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-bg: hsl(var(--primary));
  --bs-btn-border-color: hsl(var(--primary));
  --bs-btn-color: hsl(var(--primary-foreground));
  --bs-btn-hover-bg: hsl(var(--accent));
  --bs-btn-hover-border-color: hsl(var(--accent));
  --bs-btn-hover-color: hsl(var(--accent-foreground));
  --bs-btn-active-bg: hsl(var(--accent));
  --bs-btn-active-border-color: hsl(var(--accent));
  --bs-btn-active-color: hsl(var(--accent-foreground));
  --bs-btn-disabled-bg: hsl(var(--primary));
  --bs-btn-disabled-border-color: hsl(var(--primary));
  --bs-btn-disabled-color: hsl(var(--primary-foreground));
  --bs-btn-focus-shadow-rgb: 188, 16, 125;
}

.btn-outline-primary {
  --bs-btn-color: hsl(var(--primary));
  --bs-btn-border-color: hsl(var(--primary));
  --bs-btn-hover-bg: hsl(var(--primary));
  --bs-btn-hover-border-color: hsl(var(--primary));
  --bs-btn-hover-color: hsl(var(--primary-foreground));
  --bs-btn-active-bg: hsl(var(--accent));
  --bs-btn-active-border-color: hsl(var(--accent));
  --bs-btn-active-color: hsl(var(--accent-foreground));
}

.btn-link { color: hsl(var(--primary)); }
.btn-link.text-dark { color: hsl(var(--foreground)) !important; }

.btn-light {
  --bs-btn-bg: hsl(var(--muted));
  --bs-btn-border-color: hsl(var(--border));
  --bs-btn-color: hsl(var(--foreground));
  --bs-btn-hover-bg: hsl(var(--border));
  --bs-btn-hover-border-color: hsl(var(--border));
  --bs-btn-hover-color: hsl(var(--foreground));
}

/* ---------- Fondos de estado ---------- */
.bg-primary { background-color: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; }
.bg-primary.text-white { color: hsl(var(--primary-foreground)) !important; }
.border-primary { border-color: hsl(var(--primary)) !important; }
.bg-accent { background-color: hsl(var(--accent)) !important; color: hsl(var(--accent-foreground)) !important; }
.bg-warning, .bg-warning.text-dark { color: #2b1d00 !important; }
.bg-danger, .bg-success { color: #fff !important; }
.bg-opacity-10.text-primary { color: hsl(var(--primary)) !important; }

/* ---------- Formularios ---------- */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}

.form-control::placeholder { color: hsl(var(--muted-foreground)); opacity: .8; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 .25rem hsl(var(--ring) / .18);
}

.form-check-input:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.input-group-text { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* ---------- Tablas ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: hsl(var(--foreground));
  --bs-table-border-color: hsl(var(--border));
  --bs-table-striped-bg: hsl(var(--muted) / .55);
  --bs-table-striped-color: hsl(var(--foreground));
  --bs-table-hover-bg: hsl(var(--muted));
  --bs-table-hover-color: hsl(var(--foreground));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

.table > :not(caption) > * > * { border-color: hsl(var(--border)); }
.table-light { --bs-table-bg: hsl(var(--muted)); --bs-table-color: hsl(var(--foreground)); }

/* ---------- Navegación / Dropdown ---------- */
.dropdown-item { color: hsl(var(--foreground)); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: hsl(var(--muted)); color: hsl(var(--foreground)); }
.dropdown-menu { box-shadow: 0 12px 32px hsl(var(--foreground) / .12); }

.nav-tabs { border-color: hsl(var(--border)); }
.nav-tabs .nav-link { color: hsl(var(--muted-foreground)); }
.nav-tabs .nav-link.active {
  background-color: hsl(var(--card));
  color: hsl(var(--primary));
  border-color: hsl(var(--border)) hsl(var(--border)) hsl(var(--card));
}

.pagination {
  --bs-pagination-color: hsl(var(--primary));
  --bs-pagination-bg: hsl(var(--card));
  --bs-pagination-border-color: hsl(var(--border));
  --bs-pagination-hover-bg: hsl(var(--muted));
  --bs-pagination-hover-color: hsl(var(--primary));
  --bs-pagination-active-bg: hsl(var(--primary));
  --bs-pagination-active-border-color: hsl(var(--primary));
  --bs-pagination-disabled-bg: hsl(var(--muted));
  --bs-pagination-disabled-color: hsl(var(--muted-foreground));
}

/* ---------- Alertas ---------- */
.alert { border-radius: var(--radius); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: hsl(var(--card)) !important;
  border-right: 1px solid hsl(var(--border)) !important;
}

.sidebar-header { border-color: hsl(var(--border)) !important; }
.logo-box {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.brand-name { color: hsl(var(--primary)) !important; }

.nav-link { color: hsl(var(--foreground)) !important; }
.nav-link i { color: hsl(var(--muted-foreground)) !important; }
.nav-link:hover {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--primary)) !important;
}
.nav-link:hover i { color: hsl(var(--primary)) !important; }
.nav-link.active {
  background-color: hsl(var(--primary) / .12) !important;
  color: hsl(var(--primary)) !important;
  border-right: 3px solid hsl(var(--primary));
}
.nav-link.active i { color: hsl(var(--primary)) !important; }

.sidebar-footer { border-color: hsl(var(--border)) !important; }
.user-card { background: hsl(var(--muted)) !important; }
.user-avatar {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ---------- Selector de tema ---------- */
.theme-switch {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
}

.theme-switch .theme-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.theme-switch .theme-btn:hover { color: hsl(var(--primary)); }
.theme-switch .theme-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.theme-float {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2000;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}

.theme-float .theme-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.theme-float .theme-btn:hover { color: hsl(var(--primary)); }
.theme-float .theme-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ---------- Detalles ---------- */
.badge { font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: hsl(var(--muted-foreground)); }

/* ---------- Selector de estilo de empresa (Configuración) ---------- */
.theme-swatch {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .12s, box-shadow .12s;
}

.theme-swatch:hover { transform: scale(1.06); }

.theme-swatch.active {
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .25);
}

.theme-preview {
  background: hsl(var(--card));
  border-color: hsl(var(--border)) !important;
}

.theme-preview-dot {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: hsl(var(--primary));
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}

/* ---------- Íconos estilo Duolingo (sidebar) ---------- */
.sidebar-menu .nav-link {
  position: relative;
}

.sidebar-menu .nav-link > i {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px !important;
  border-radius: 10px;
  background: var(--nav-color, hsl(var(--primary)));
  color: #fff !important;
  font-size: 1rem !important;
  box-shadow: 0 3px 0 var(--nav-shadow, rgba(0, 0, 0, .25));
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.sidebar-menu .nav-link:hover > i {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.sidebar-menu .nav-link:active > i {
  transform: translateY(3px);
  box-shadow: none;
}

.sidebar-menu .nav-link:hover {
  background: color-mix(in srgb, var(--nav-color, hsl(var(--primary))) 10%, transparent) !important;
  color: var(--nav-color, hsl(var(--primary))) !important;
}

.sidebar-menu .nav-link:hover > i { color: #fff !important; }

.sidebar-menu .nav-link.active {
  background: color-mix(in srgb, var(--nav-color, hsl(var(--primary))) 15%, transparent) !important;
  color: var(--nav-color, hsl(var(--primary))) !important;
  border-right: 3px solid var(--nav-color, hsl(var(--primary))) !important;
}

.sidebar-menu .nav-link.active > i {
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-color, hsl(var(--primary))) 28%, transparent),
              0 3px 0 var(--nav-shadow, rgba(0, 0, 0, .25));
}

/* Paleta Duolingo rotativa: verde, azul, violeta, naranja, rojo, rosa, turquesa, índigo */
.sidebar-menu .nav-link:nth-of-type(8n+1) { --nav-color: #58CC02; --nav-shadow: #46A302; }
.sidebar-menu .nav-link:nth-of-type(8n+2) { --nav-color: #1CB0F6; --nav-shadow: #1899D6; }
.sidebar-menu .nav-link:nth-of-type(8n+3) { --nav-color: #CE82FF; --nav-shadow: #A568CC; }
.sidebar-menu .nav-link:nth-of-type(8n+4) { --nav-color: #FF9600; --nav-shadow: #CC7800; }
.sidebar-menu .nav-link:nth-of-type(8n+5) { --nav-color: #FF4B4B; --nav-shadow: #CC3C3C; }
.sidebar-menu .nav-link:nth-of-type(8n+6) { --nav-color: #FF6F91; --nav-shadow: #CC5974; }
.sidebar-menu .nav-link:nth-of-type(8n+7) { --nav-color: #14B8A6; --nav-shadow: #0F9488; }
.sidebar-menu .nav-link:nth-of-type(8n)   { --nav-color: #7C6BFF; --nav-shadow: #6355CC; }

/* ---------- Responsive: tablets y celulares ---------- */
.mobile-topbar,
.mobile-bottom-nav,
.sidebar-backdrop,
.pos-cart-fab,
.pos-cart-backdrop {
  display: none;
}

/* Tablet y móvil: menú lateral deslizante + barra superior */
@media (max-width: 991.98px) {
  .mobile-topbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    align-items: center;
    gap: 10px;
    background: hsl(var(--card) / .94);
    border-bottom: 1px solid hsl(var(--border));
    backdrop-filter: saturate(140%) blur(10px);
  }

  .mobile-menu-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 1.3rem;
    cursor: pointer;
  }

  .mobile-menu-btn:active { transform: scale(.96); }

  .mobile-brand {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 800;
    color: hsl(var(--foreground));
  }

  .mobile-brand img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .mobile-brand span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sidebar {
    width: 282px;
    z-index: 1050 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  }

  .sidebar.show { transform: translateX(0) !important; }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    margin-left: 0 !important;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 18px 24px;
  }

  /* En tablet la pantalla POS conserva columnas, pero sin doble scroll */
  .pos-screen { height: calc(100dvh - 108px) !important; }
}

/* Celular */
@media (max-width: 767.98px) {
  .main-content {
    padding: calc(68px + env(safe-area-inset-top, 0px)) 12px calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: hsl(var(--card) / .97);
    border-top: 1px solid hsl(var(--border));
    backdrop-filter: blur(10px);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-bottom-nav i { font-size: 1.25rem; }
  .mobile-bottom-nav a.active { color: hsl(var(--primary)); }

  /* Encabezados y acciones más compactos */
  .main-content .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
  .main-content h2 { font-size: 1.25rem; }

  /* Tablas con desplazamiento horizontal */
  .main-content .card-body:has(table),
  .main-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-content .card-body:has(table) > .table { min-width: 640px; }
  .main-content .table { --bs-table-cell-padding-x: .5rem; }

  /* Modales a ancho completo */
  .modal-dialog { margin: .5rem; }
  .modal-dialog.modal-sm { max-width: calc(100% - 1rem); }

  /* Evita el zoom automático de iOS en formularios */
  .form-control,
  .form-select { font-size: 16px; }

  /* POS: mapa de mesas y pestañas */
  .pos-canvas { height: 72vh !important; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .nav-tabs .nav-item { flex: 0 0 auto; }

  /* POS: pantalla de pedido en una sola columna + carrito deslizante */
  .pos-screen {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  .pos-topbar {
    padding: .5rem .75rem !important;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .pos-topbar .btn { padding: .35rem .6rem; font-size: .8rem; }
  .pos-topbar .badge { font-size: .65rem; }

  .pos-body { display: block !important; overflow: visible !important; }

  .pos-categories {
    width: 100%;
    max-height: none;
    border-right: 0 !important;
    border-bottom: 1px solid hsl(var(--border));
    padding: .25rem;
  }
  .pos-categories .list-group {
    flex-direction: row;
    overflow-x: auto;
    gap: .35rem;
    padding-bottom: .25rem;
  }
  .pos-categories .list-group-item {
    min-width: 84px;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 12px !important;
    padding: .5rem .35rem;
  }

  .pos-products {
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }
  .pos-products .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .pos-products .card-img-top,
  .pos-products .card .bg-light { height: 92px !important; }

  .pos-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    width: 100%;
    height: 88vh;
    max-height: 88vh;
    border-left: 0 !important;
    border-top: 1px solid hsl(var(--border));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .25);
    transform: translateY(105%);
    transition: transform .25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pos-cart.open { transform: translateY(0); }
  .pos-cart #cart-container { overflow-y: auto; }
  .pos-cart #cart-container > .overflow-auto {
    max-height: none !important;
    overflow: visible !important;
  }

  .pos-cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .pos-cart-backdrop.show { opacity: 1; pointer-events: auto; }

  .pos-cart-fab {
    display: inline-flex;
    position: fixed;
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    box-shadow: 0 10px 25px hsl(var(--primary) / .40);
  }
}

/* Objetivos táctiles cómodos */
@media (pointer: coarse) {
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .nav-link { min-height: 44px; }
}

/* Impresión: sin navegación */
@media print {
  .mobile-topbar,
  .mobile-bottom-nav,
  .sidebar,
  .sidebar-backdrop,
  .pos-cart-fab,
  .pos-cart-backdrop { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
}

/* Ajustes finos POS móvil */
@media (max-width: 767.98px) {
  .pos-categories .list-group-item { padding: .4rem .3rem !important; }
  .pos-categories .list-group-item i {
    font-size: 1.05rem !important;
    margin-bottom: .1rem !important;
  }
  .pos-categories .list-group-item img { width: 30px; height: 30px; }
  .pos-categories .list-group-item span { font-size: .72rem; line-height: 1.1; }
  .pos-products { padding-bottom: 7rem !important; }
}

/* Tarjetas con fondos contextuales de Bootstrap (deben ganar a .card) */
.card.bg-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.card.bg-success { background-color: var(--bs-success) !important; color: #fff !important; }
.card.bg-danger { background-color: var(--bs-danger) !important; color: #fff !important; }
.card.bg-warning { background-color: var(--bs-warning) !important; color: #2b1d00 !important; }
.card.bg-info { background-color: var(--bs-info) !important; color: #083b45 !important; }
.card.bg-dark { background-color: #1f2937 !important; color: #fff !important; }
.card.bg-primary { background-color: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; }
.card.bg-primary .text-white,
.card.bg-success .text-white,
.card.bg-danger .text-white,
.card.bg-dark .text-white { color: #fff !important; }

@media (max-width: 767.98px) {
  /* Los grupos de filtros/acciones deben envolver en pantallas pequeñas */
  .main-content .d-flex.gap-2,
  .main-content form.d-flex { flex-wrap: wrap; }

  .main-content form.d-flex .form-control,
  .main-content form.d-flex .form-select {
    flex: 1 1 130px;
    min-width: 0;
  }
}

/* Contraste de títulos sobre fondos de color */
.text-white,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff !important;
}

.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
  color: #fff !important;
}

.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6 {
  color: #2b1d00 !important;
}

/* Últimos ajustes responsivos */
@media (max-width: 767.98px) {
  /* Lienzo del salón: permite desplazarse por el plano */
  .salon-canvas {
    height: 70vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}