:root {
  --mat-app-bg: #f8fafc;
  --mat-surface: #ffffff;
  --mat-card: #ffffff;
  --mat-map-bg: #f1f5f9;
  --mat-accent: #1ca9cf;
  --mat-accent-hover: #1589aa;
  --mat-text: #1f2937;
  --mat-muted: #6b7280;
  --mat-border: #e5e7eb;
  --mat-pending: #fef3c7;
  --mat-reserved: #dcfce7;
  --mat-seated: #dbeafe;
  --mat-completed: #e5e7eb;
  --mat-cancelled: #fee2e2;
  --mat-table-free: #ffffff;
  --mat-client-bg: #f8fafc;
  --mat-client-surface: #ffffff;
  --mat-client-accent: #1ca9cf;
  --mat-client-text: #1f2937;
  --mat-readable-text: #1f2937;
  --mat-readable-muted: #4b5563;
  --mat-accent-text: #ffffff;
  --mat-client-readable-text: #1f2937;
  --mat-client-accent-text: #ffffff;
  --mat-pending-text: #1f2937;
  --mat-reserved-text: #1f2937;
  --mat-seated-text: #1f2937;
  --mat-completed-text: #1f2937;
  --mat-cancelled-text: #1f2937;
  --mat-table-free-text: #1f2937;
}

html,
body,
main,
#section-admin,
#section-tablet,
#section-mobile {
  background-color: var(--mat-app-bg) !important;
  color: var(--mat-text);
}

body > header,
.tablet-topbar,
.tablet-panel,
.mobile-topbar,
.mobile-bottom-nav,
.mobile-card,
.tablet-extra-panel,
.tablet-extra-setting-row,
.mobile-setting-row,
#modal-config-matilde > div,
#modal-gestion-salas > div {
  background-color: var(--mat-surface) !important;
  color: var(--mat-text) !important;
  border-color: var(--mat-border) !important;
}

.bg-white,
.mobile-res-item,
.tablet-res-card,
[data-reserva-card="true"] {
  background-color: var(--mat-card) !important;
  border-color: var(--mat-border) !important;
}

#sala-canvas-container,
#tablet-map-viewport,
.tablet-map-canvas,
#mobile-map-stage,
#mobile-map-base,
.mobile-map-stage {
  background-color: var(--mat-map-bg) !important;
}

.bg-blueAccent,
.mobile-action-btn:not(.light):not(.secondary),
.mobile-map-tool,
.tablet-mini-btn.primary,
.mobile-mini:not(.warn):not(.green):not(.danger) {
  background-color: var(--mat-accent) !important;
}

.hover\:bg-blueHover:hover,
.hover\:bg-blueAccent:hover,
.mobile-action-btn:not(.light):not(.secondary):hover,
.mobile-map-tool:hover {
  background-color: var(--mat-accent-hover) !important;
}

.text-blueAccent,
.focus\:text-blueAccent:focus,
.mobile-nav-btn.active,
.mobile-tab.active,
.tablet-tab.active {
  color: var(--mat-accent) !important;
}

.border-blueAccent,
.focus\:border-blueAccent:focus {
  border-color: var(--mat-accent) !important;
}

.text-textDark,
.mobile-section-title strong,
.tablet-extra-title strong,
.mobile-setting-row strong,
.tablet-extra-setting-row strong {
  color: var(--mat-text) !important;
}

.text-textMuted,
.mobile-section-title span,
.tablet-extra-title span,
.mobile-setting-row span,
.tablet-extra-setting-row span {
  color: var(--mat-muted) !important;
}

.border-borderDark,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--mat-border) !important;
}

[data-reserva-card="true"].is-pending,
.tablet-res-card.is-pending,
.mobile-res-item.is-pending {
  background-color: var(--mat-pending) !important;
  border-color: var(--mat-pending) !important;
}

[data-reserva-card="true"].is-reserved,
.tablet-res-card.is-reserved,
.mobile-res-item.is-reserved,
.tablet-table.is-reserved,
.mobile-table.is-reserved,
.mobile-table.reserved {
  background-color: var(--mat-reserved) !important;
  border-color: var(--mat-reserved) !important;
}

[data-reserva-card="true"].is-seated,
.tablet-res-card.is-seated,
.mobile-res-item.is-seated,
.tablet-table.is-seated,
.mobile-table.is-seated,
.mobile-table.seated {
  background-color: var(--mat-seated) !important;
  border-color: var(--mat-seated) !important;
}

[data-reserva-card="true"].is-completed,
.tablet-res-card.is-completed,
.mobile-res-item.is-completed,
.matilde-v37-card-muted {
  background-color: var(--mat-completed) !important;
  border-color: var(--mat-completed) !important;
}

[data-reserva-card="true"].is-cancelled,
[data-reserva-card="true"].is-canceled,
.tablet-res-card.is-cancelled,
.mobile-res-item.is-cancelled {
  background-color: var(--mat-cancelled) !important;
  border-color: var(--mat-cancelled) !important;
}

.tablet-table.is-free,
.mobile-table.is-free,
.mobile-table.free {
  background-color: var(--mat-table-free) !important;
  border-color: var(--mat-border) !important;
}

.mobile-area-tab.is-active,
.mobile-nav-btn.active,
.mobile-tool-btn.is-active,
.tablet-icon-btn.is-active,
#banner-configuracion-activo {
  background-color: var(--mat-accent) !important;
  border-color: var(--mat-accent) !important;
  color: #ffffff !important;
}

#section-cliente,
body:not(.tablet-admin-active):not(.mobile-admin-active) #section-cliente {
  background-color: var(--mat-client-bg) !important;
  color: var(--mat-client-text) !important;
}

#section-cliente .bg-white,
#section-cliente form,
#section-cliente .rounded-2xl,
#section-cliente .rounded-xl {
  background-color: var(--mat-client-surface) !important;
  color: var(--mat-client-text) !important;
  border-color: var(--mat-border) !important;
}

#section-cliente .bg-blueAccent,
#section-cliente button[type="submit"] {
  background-color: var(--mat-client-accent) !important;
}

#section-cliente .text-blueAccent {
  color: var(--mat-client-accent) !important;
}

body.matilde-shape-straight button,
body.matilde-shape-straight input,
body.matilde-shape-straight select,
body.matilde-shape-straight textarea,
body.matilde-shape-straight [class*="rounded"],
body.matilde-shape-straight .mobile-card,
body.matilde-shape-straight .mobile-res-item,
body.matilde-shape-straight .tablet-res-card,
body.matilde-shape-straight [data-reserva-card="true"],
body.matilde-shape-straight .tablet-table,
body.matilde-shape-straight .mobile-table,
body.matilde-shape-straight .tablet-panel,
body.matilde-shape-straight .tablet-extra-panel,
body.matilde-shape-straight .mobile-bottom-nav,
body.matilde-shape-straight .mobile-setting-row,
body.matilde-shape-straight .tablet-extra-setting-row {
  border-radius: 0 !important;
}

body.matilde-shape-straight .rounded-full,
body.matilde-shape-straight [class*="rounded-full"] {
  border-radius: 0 !important;
}

#matilde-v63-appearance-modal {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(5px);
}

#matilde-v63-appearance-modal.is-open {
  display: flex;
}

.matilde-v63-appearance-card {
  width: min(760px, 100%);
  max-height: 94dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  border: 1px solid var(--mat-border);
  border-radius: 20px;
  background: var(--mat-surface);
  color: var(--mat-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.matilde-v63-appearance-header,
.matilde-v63-appearance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.matilde-v63-appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.matilde-v63-color-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 104px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--mat-border);
  border-radius: 12px;
  background: var(--mat-card);
}

.matilde-v63-color-row label {
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.matilde-v64-colour-picker {
  position: relative;
  display: grid;
  grid-template-rows: 38px auto;
  gap: 2px;
  width: 76px;
  cursor: pointer;
  text-align: center;
}

.matilde-v64-colour-picker input[type="color"] {
  width: 76px;
  height: 38px;
  padding: 2px;
  border: 2px solid var(--mat-border);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.matilde-v64-colour-picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.matilde-v64-colour-picker input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}

.matilde-v64-colour-picker span {
  color: var(--mat-readable-muted) !important;
  font-size: 9px;
  font-weight: 900;
}

.matilde-v63-color-row input[type="text"] {
  width: 104px;
  padding: 9px 7px;
  border: 1px solid var(--mat-border);
  border-radius: 8px;
  background: var(--mat-surface);
  color: var(--mat-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matilde-v63-shape {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.matilde-v63-shape button,
.matilde-v63-appearance-actions button,
.matilde-v63-close {
  padding: 11px 13px;
  border: 1px solid var(--mat-border);
  border-radius: 11px;
  background: var(--mat-card);
  color: var(--mat-text);
  font-size: 12px;
  font-weight: 800;
}

.matilde-v63-shape button.is-active,
.matilde-v63-appearance-actions .is-primary {
  border-color: var(--mat-accent);
  background: var(--mat-accent);
  color: #ffffff;
}

.matilde-v63-appearance-status {
  min-height: 18px;
  margin: 10px 0 2px;
  color: var(--mat-muted);
  font-size: 11px;
  font-weight: 700;
}

body.matilde-shape-straight .matilde-v63-appearance-card,
body.matilde-shape-straight .matilde-v63-color-row,
body.matilde-shape-straight .matilde-v63-color-row input,
body.matilde-shape-straight .matilde-v63-shape button,
body.matilde-shape-straight .matilde-v63-appearance-actions button,
body.matilde-shape-straight .matilde-v63-close {
  border-radius: 0 !important;
}

/* El navegador no debe ampliar toda la PWA cuando el gesto empieza en el plano. */
#mobile-map-stage,
#tablet-map-viewport {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 640px) {
  .matilde-v63-appearance-card {
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .matilde-v63-appearance-grid {
    grid-template-columns: 1fr;
  }

  .matilde-v63-color-row {
    grid-template-columns: minmax(0, 1fr) 68px 96px;
  }

  .matilde-v64-colour-picker,
  .matilde-v64-colour-picker input[type="color"] {
    width: 68px;
  }

  .matilde-v63-color-row input[type="text"] {
    width: 96px;
  }

  .matilde-v63-appearance-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* v64: contraste automático. Los textos nunca pueden fundirse con su fondo. */
html,
body,
main,
#section-admin,
#section-tablet,
#section-mobile,
body > header,
.tablet-topbar,
.tablet-panel,
.mobile-topbar,
.mobile-bottom-nav,
.mobile-card,
.tablet-extra-panel,
.tablet-extra-setting-row,
.mobile-setting-row,
#modal-config-matilde > div,
#modal-gestion-salas > div,
.bg-white,
.mobile-res-item,
.tablet-res-card,
[data-reserva-card="true"] {
  color: var(--mat-readable-text) !important;
  -webkit-text-fill-color: currentColor;
}

.text-textDark,
.mobile-section-title strong,
.tablet-extra-title strong,
.mobile-setting-row strong,
.tablet-extra-setting-row strong,
input,
select,
textarea {
  color: var(--mat-readable-text) !important;
  -webkit-text-fill-color: var(--mat-readable-text) !important;
  caret-color: var(--mat-readable-text);
}

input::placeholder,
textarea::placeholder,
.text-textMuted,
.mobile-section-title span,
.tablet-extra-title span,
.mobile-setting-row span,
.tablet-extra-setting-row span {
  color: var(--mat-readable-muted) !important;
  -webkit-text-fill-color: var(--mat-readable-muted) !important;
  opacity: 1 !important;
}

.bg-blueAccent,
.mobile-action-btn:not(.light):not(.secondary),
.mobile-map-tool,
.tablet-mini-btn.primary,
.mobile-mini:not(.warn):not(.green):not(.danger),
.mobile-area-tab.is-active,
.mobile-nav-btn.active,
.mobile-tool-btn.is-active,
.tablet-icon-btn.is-active,
#banner-configuracion-activo {
  color: var(--mat-accent-text) !important;
  -webkit-text-fill-color: var(--mat-accent-text) !important;
}

#section-cliente,
#section-cliente .bg-white,
#section-cliente form,
#section-cliente .rounded-2xl,
#section-cliente .rounded-xl {
  color: var(--mat-client-readable-text) !important;
  -webkit-text-fill-color: var(--mat-client-readable-text) !important;
}

#section-cliente input,
#section-cliente select,
#section-cliente textarea,
#section-cliente .text-textDark {
  color: var(--mat-client-readable-text) !important;
  -webkit-text-fill-color: var(--mat-client-readable-text) !important;
  caret-color: var(--mat-client-readable-text);
}

#section-cliente .bg-blueAccent,
#section-cliente button[type="submit"] {
  color: var(--mat-client-accent-text) !important;
  -webkit-text-fill-color: var(--mat-client-accent-text) !important;
}

[data-reserva-card="true"].is-pending,
.tablet-res-card.is-pending,
.mobile-res-item.is-pending {
  color: var(--mat-pending-text) !important;
}

[data-reserva-card="true"].is-reserved,
.tablet-res-card.is-reserved,
.mobile-res-item.is-reserved {
  color: var(--mat-reserved-text) !important;
}

[data-reserva-card="true"].is-seated,
.tablet-res-card.is-seated,
.mobile-res-item.is-seated {
  color: var(--mat-seated-text) !important;
}

[data-reserva-card="true"].is-completed,
.tablet-res-card.is-completed,
.mobile-res-item.is-completed,
.matilde-v37-card-muted {
  color: var(--mat-completed-text) !important;
}

[data-reserva-card="true"].is-cancelled,
.tablet-res-card.is-cancelled,
.mobile-res-item.is-cancelled {
  color: var(--mat-cancelled-text) !important;
}

.tablet-table.is-free,
.mobile-table.is-free,
.mobile-table.free {
  color: var(--mat-table-free-text) !important;
}

.is-pending :is(span, strong, p, div),
.is-reserved :is(span, strong, p, div),
.is-seated :is(span, strong, p, div),
.is-completed :is(span, strong, p, div),
.is-cancelled :is(span, strong, p, div) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.matilde-v63-appearance-card,
.matilde-v63-color-row,
.matilde-v63-appearance-card label,
.matilde-v63-appearance-card strong,
.matilde-v63-appearance-card h3 {
  color: var(--mat-readable-text) !important;
  -webkit-text-fill-color: var(--mat-readable-text) !important;
}

.matilde-v63-appearance-card button.is-primary,
.matilde-v63-shape button.is-active {
  color: var(--mat-accent-text) !important;
  -webkit-text-fill-color: var(--mat-accent-text) !important;
}


/* SALOVIX_APARIENCIA_SIN_COLOR_TEXTO_R1_2
   El color de texto sigue existiendo y guardandose internamente.
   Solo se retira su edicion de la interfaz para evitar conflictos. */
.matilde-v63-color-row:has(#matilde-v63-color-text),
.matilde-v95-dark-row:has([data-dark-color="text"]),
.matilde-v95-dark-row:has([data-dark-hex="text"]){
  display:none!important;
}

/* SALOVIX_COLORES_ESTABLES_R1_1_CORRECCION */

/* MOBILE CLARO: la hora deja de ser un bloque negro. */
#section-mobile:not(.covermanager-dark-mode) .mobile-res-item .mobile-res-time {
  background:#F1F5F9 !important;
  background-color:#F1F5F9 !important;
  color:#0F172A !important;
  -webkit-text-fill-color:#0F172A !important;
  border:1px solid #E2E8F0 !important;
}

/* AGENDA: los títulos de grupos (incluido Canceladas) no calculan contraste.
   Claro = negro/oscuro. Oscuro = blanco. */
.matilde-v95-agenda-group-title,
.matilde-v95-agenda-group-title :is(span,strong) {
  color:#0F172A !important;
  -webkit-text-fill-color:#0F172A !important;
}
body.matilde-cover-dark-mode .matilde-v95-agenda-group-title,
body.matilde-cover-dark-mode .matilde-v95-agenda-group-title :is(span,strong),
#section-admin.covermanager-dark-mode .matilde-v95-agenda-group-title,
#section-admin.covermanager-dark-mode .matilde-v95-agenda-group-title :is(span,strong),
#section-tablet.covermanager-dark-mode .matilde-v95-agenda-group-title,
#section-tablet.covermanager-dark-mode .matilde-v95-agenda-group-title :is(span,strong) {
  color:#F8FAFC !important;
  -webkit-text-fill-color:#F8FAFC !important;
}

/* SALOVIX_WEB_RESERVAS_FLASH_R1_4_EARLY_AUTHORITY
 * La auditoría final confirmó que las etiquetas Web estáticas de Reservas
 * pueden ser alcanzadas por varias capas de apariencia/contraste durante boot.
 * Su color base se define aquí, en appearance-v100.css, que Web carga en HEAD
 * antes de parsear #section-admin. Así no existe una ventana de primer paint
 * en la que una autoridad tardía pueda mostrarlas con un color transitorio.
 * Scope: SOLO #section-admin Web. No afecta tarjetas/estados ni Tablet/Mobile.
 */
#section-admin .salovix-web-reservas-accent-r14 {
  color:#1CA9CF !important;
  -webkit-text-fill-color:#1CA9CF !important;
  animation:none !important;
  transition:none !important;
}
#section-admin .salovix-web-reservas-muted-r14 {
  color:var(--mat-readable-muted,#6B7280) !important;
  -webkit-text-fill-color:currentColor !important;
  animation:none !important;
  transition:none !important;
}
body.matilde-cover-dark-mode #section-admin .salovix-web-reservas-muted-r14,
#section-admin.covermanager-dark-mode .salovix-web-reservas-muted-r14 {
  color:var(--mat-cover-muted,#CBD5E1) !important;
  -webkit-text-fill-color:currentColor !important;
}

/* SALOVIX_APARIENCIA_BOTONES_ACCION_R1
 * Variables exclusivas de BOTONES de acción.
 * No reutilizan pending/reserved/seated/completed/cancelled.
 */
:root{
  --mat-action-seat:#2563EB;
  --mat-action-move:#F59E0B;
  --mat-action-cancel:#DC2626;
  --mat-action-seat-text:#FFFFFF;
  --mat-action-move-text:#111827;
  --mat-action-cancel-text:#FFFFFF;
}

button[onclick*="sentarCliente("]{
  background:var(--mat-action-seat)!important;
  background-color:var(--mat-action-seat)!important;
  border-color:var(--mat-action-seat)!important;
  color:var(--mat-action-seat-text)!important;
  -webkit-text-fill-color:var(--mat-action-seat-text)!important;
  background-image:none!important;
}
button[onclick*="iniciarReubicacionMesa("],
#btn-detalle-reubicar,
[data-v43-move],[data-v385-move]{
  background:var(--mat-action-move)!important;
  background-color:var(--mat-action-move)!important;
  border-color:var(--mat-action-move)!important;
  color:var(--mat-action-move-text)!important;
  -webkit-text-fill-color:var(--mat-action-move-text)!important;
  background-image:none!important;
}
button[onclick*="cancelarReserva("],
[data-v43-cancel],[data-v385-cancel],[data-v62-cancel],[data-v168-cancel],[data-v142-cancel]{
  background:var(--mat-action-cancel)!important;
  background-color:var(--mat-action-cancel)!important;
  border-color:var(--mat-action-cancel)!important;
  color:var(--mat-action-cancel-text)!important;
  -webkit-text-fill-color:var(--mat-action-cancel-text)!important;
  background-image:none!important;
}