html, body { max-width: 100%; overflow-x: clip; }
.landing-whatsapp-button { max-width: calc(100vw - 1.5rem); }
.pwa-install-customer { z-index: 120; }
.pwa-install-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(17, 24, 39, .58);
  backdrop-filter: blur(8px);
}
.pwa-install-backdrop .pwa-install-card {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(100%, 430px);
  max-width: 430px;
  border-radius: 24px;
  padding: 1.25rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.pwa-install-actions {
  display: grid;
  gap: .55rem;
  width: 100%;
}
.pwa-install-secondary {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  border-radius: 12px;
  padding: .7rem .9rem;
  font-weight: 700;
}
.pwa-install-ios-step {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .landing-whatsapp-button {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    width: 3.25rem;
    height: 3.25rem;
    padding: .625rem !important;
    justify-content: center;
  }
  .landing-whatsapp-label { display: none; }
  .landing-whatsapp-button > div { width: 2rem; height: 2rem; }
  .pwa-install-card { left: .75rem; right: .75rem; width: auto; max-width: none; }
  .pwa-install-backdrop .pwa-install-card { left: auto; right: auto; width: 100%; max-width: none; }
}

/* Marketia Eats v37.3 - UI hardening for dark theme, mobile and operator panels */
:root[data-marketia-theme="dark"] .panel,
:root[data-marketia-theme="dark"] .data-panel,
:root[data-marketia-theme="dark"] .ticket,
:root[data-marketia-theme="dark"] .welcome-card,
:root[data-marketia-theme="dark"] .join-modal,
:root[data-marketia-theme="dark"] .admin-tabs,
:root[data-marketia-theme="dark"] .inventory-intro,
:root[data-marketia-theme="dark"] .simulator-panel {
  background: rgba(18, 23, 35, .94) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
:root[data-marketia-theme="dark"] .panel [style*="background: #fff"],
:root[data-marketia-theme="dark"] .panel [style*="background:#fff"],
:root[data-marketia-theme="dark"] .panel [style*="background: #f9f9f9"],
:root[data-marketia-theme="dark"] .panel [style*="background:#f9f9f9"],
:root[data-marketia-theme="dark"] .panel [style*="background: #f5f3ff"],
:root[data-marketia-theme="dark"] .panel [style*="background:#f5f3ff"],
:root[data-marketia-theme="dark"] .panel [style*="background: #f0fdf4"],
:root[data-marketia-theme="dark"] .panel [style*="background:#f0fdf4"],
:root[data-marketia-theme="dark"] .settings-grid > div,
:root[data-marketia-theme="dark"] .logo-uploader,
:root[data-marketia-theme="dark"] .recipe-lines,
:root[data-marketia-theme="dark"] .admin-notice {
  background: rgba(15, 23, 42, .82) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .2) !important;
}
:root[data-marketia-theme="dark"] input,
:root[data-marketia-theme="dark"] select,
:root[data-marketia-theme="dark"] textarea,
:root[data-marketia-theme="dark"] .panel input,
:root[data-marketia-theme="dark"] .panel select,
:root[data-marketia-theme="dark"] .panel textarea {
  background: #0b1220 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  caret-color: #f472b6;
}
:root[data-marketia-theme="dark"] input::placeholder,
:root[data-marketia-theme="dark"] textarea::placeholder { color: rgba(226,232,240,.55) !important; }
:root[data-marketia-theme="dark"] .panel p,
:root[data-marketia-theme="dark"] .panel small,
:root[data-marketia-theme="dark"] .panel label,
:root[data-marketia-theme="dark"] .panel span { color: inherit; }
:root[data-marketia-theme="dark"] .responsive-table table,
:root[data-marketia-theme="dark"] .inventory-table,
:root[data-marketia-theme="dark"] .inventory-table-row {
  background: rgba(15, 23, 42, .64) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
:root[data-marketia-theme="dark"] .responsive-table th,
:root[data-marketia-theme="dark"] .responsive-table td,
:root[data-marketia-theme="dark"] .inventory-table-head,
:root[data-marketia-theme="dark"] .inventory-table-row {
  border-color: rgba(148, 163, 184, .14) !important;
}

/* logo preview keeps transparent PNG/SVG visible without forcing a white box */
.logo-uploader,
.dark-logo-uploader,
.employee-mobile-logo,
.employee-real-mobile-logo,
.brand {
  background-color: transparent !important;
}
.logo-preview,
.brand img,
.employee-mobile-logo img,
.employee-real-mobile-logo img,
.restaurant-mark img {
  background: transparent !important;
  object-fit: contain;
}
.logo-uploader .logo-preview {
  display: block;
  max-width: 180px;
  max-height: 92px;
  padding: .35rem;
  border-radius: 14px;
  background-image: linear-gradient(45deg, rgba(148,163,184,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(148,163,184,.18) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(148,163,184,.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.18) 75%) !important;
  background-size: 16px 16px !important;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}

/* customer menu: one big category photo + product list accordion */
.customer-menu-item-card {
  display: block;
  padding: .85rem;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  background: var(--customer-surface, #fff);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.customer-menu-item-card footer > button {
  border-radius: 999px;
  padding: .56rem 1rem;
  font-weight: 800;
  background: var(--brand, #c72f67);
  color: #fff;
}
.customer-menu-item-card.product-card-featured { border-color: rgba(245,158,11,.45); }
@media (max-width: 560px) {
  .customer-shell .menu-section article[style*="border-radius: 22px"] { border-radius: 20px !important; }
  .customer-shell .menu-section article[style*="border-radius: 22px"] img { height: 260px !important; }
  .customer-menu-item-card { padding: .78rem; }
}

/* role simulator and PWA prompt inside phone preview */
.phone-preview {
  width: min(100%, 430px) !important;
  margin: 1rem auto 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}
.phone-preview iframe {
  width: 100% !important;
  min-height: 720px !important;
  background: #111827;
}
.simulator-panel .pwa-install-backdrop,
.phone-preview .pwa-install-backdrop { padding: .65rem !important; }
.pwa-install-customer {
  max-width: min(92vw, 380px) !important;
  color: #f8fafc;
}
.pwa-install-customer p,
.pwa-install-customer small { color: inherit !important; }

/* inventory managed list */
.inventory-bulk-bar {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.inventory-table-managed .inventory-table-head,
.inventory-table-managed .inventory-table-row {
  grid-template-columns: 42px 1.35fr .95fr 1fr 1fr .8fr 110px !important;
}
.inventory-row-actions { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.icon-button.danger,
.secondary-button.danger { color: #ef4444 !important; border-color: rgba(239,68,68,.3) !important; }
.product-availability-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .55rem !important;
}
.product-availability-list button {
  justify-content: space-between !important;
  text-align: left !important;
  min-height: 46px;
}
.inventory-edit-modal { display: grid; gap: .75rem; }
@media (max-width: 760px) {
  .inventory-table-managed .inventory-table-head { display: none !important; }
  .inventory-table-managed .inventory-table-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem;
    padding: .85rem !important;
    border-radius: 16px;
    margin: .6rem;
    border: 1px solid rgba(148,163,184,.18);
  }
  .inventory-table-managed .inventory-table-row > *::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .62;
    margin-bottom: .12rem;
  }
  .inventory-row-actions { justify-content: flex-start; }
  .inventory-bulk-bar { align-items: flex-start; flex-direction: column; }
  .product-availability-list { grid-template-columns: 1fr !important; }
}

/* karaoke continuous controls and mobile history */
.karaoke-continuous-controls {
  display: grid;
  gap: .55rem;
  padding: .85rem 1rem;
  margin: .85rem 0;
  border: 1px solid rgba(124,58,237,.25);
  background: rgba(124,58,237,.08);
  border-radius: 16px;
}
.karaoke-continuous-controls small { opacity: .72; line-height: 1.45; }
@media (max-width: 700px) {
  .karaoke-history-table table,
  .karaoke-history-table thead,
  .karaoke-history-table tbody,
  .karaoke-history-table tr,
  .karaoke-history-table td { display: block !important; width: 100% !important; }
  .karaoke-history-table thead { display: none !important; }
  .karaoke-history-table tr {
    padding: .75rem;
    margin: .7rem 0;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 16px;
    background: rgba(15,23,42,.55);
  }
  .karaoke-history-table td {
    display: grid !important;
    grid-template-columns: 86px 1fr;
    gap: .5rem;
    padding: .25rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .karaoke-history-table td::before {
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 800;
    color: rgba(148,163,184,.95);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .karaoke-queue-row { grid-template-columns: 34px 46px 1fr !important; align-items: start !important; }
  .karaoke-queue-actions { grid-column: 1 / -1; justify-content: flex-start !important; flex-wrap: wrap; }
}

/* v37.4 Karaoke sesiones remotas */
.karaoke-session-control-panel {
  border: 1px solid rgba(124,58,237,.22);
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(14,165,233,.08));
  border-radius: 22px;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.karaoke-session-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.karaoke-session-head small { display:flex; align-items:center; gap:.35rem; font-weight:800; letter-spacing:.08em; color:#7c3aed; }
.karaoke-session-head h2 { margin:.25rem 0; }
.karaoke-session-head p { margin:.25rem 0 0; color:var(--muted,#64748b); max-width:760px; }
.karaoke-session-actions { display:flex; align-items:end; gap:.65rem; flex-wrap:wrap; margin-top:1rem; }
.karaoke-gap-field { min-width:155px; font-size:.85rem; font-weight:700; color:var(--text,#111827); }
.karaoke-gap-field select { display:block; width:100%; margin-top:.35rem; border-radius:12px; padding:.65rem .75rem; border:1px solid rgba(148,163,184,.35); background:var(--surface,#fff); color:var(--text,#111827); }
.karaoke-selected-session { margin-top:.85rem; padding:.75rem .9rem; border-radius:16px; background:rgba(34,197,94,.10); color:#166534; font-size:.9rem; line-height:1.45; }
.secondary-button.danger { color:#b91c1c; border-color:rgba(185,28,28,.25); background:rgba(239,68,68,.08); }
.karaoke-queue-row.selected { outline:2px solid rgba(124,58,237,.45); background:rgba(124,58,237,.08); }
.karaoke-session-check { display:grid; place-items:center; width:32px; }
.karaoke-session-check input { width:18px; height:18px; accent-color:#7c3aed; }
.text-button.mini { font-size:.75rem; padding:0; margin-top:.15rem; display:inline-flex; color:#7c3aed; }
.karaoke-remote-screen .karaoke-player-stage { min-height:360px; background:#020617; }
.karaoke-youtube-host { width:100%; height:100%; min-height:360px; border-radius:14px; overflow:hidden; background:#000; }
.karaoke-youtube-host iframe { width:100%; height:100%; min-height:360px; display:block; border:0; }
.karaoke-activate-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.2rem; background:linear-gradient(135deg, rgba(2,6,23,.92), rgba(49,46,129,.9)); backdrop-filter: blur(8px); }
.karaoke-activate-card { width:min(560px, 100%); border-radius:28px; padding:2rem; text-align:center; color:#fff; background:rgba(15,23,42,.84); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.karaoke-activate-card svg { color:#a78bfa; margin-bottom:.5rem; }
.karaoke-activate-card p { color:#dbeafe; line-height:1.55; }
.karaoke-screen-message { display:flex; align-items:center; gap:.4rem; margin-top:1rem; color:#dbeafe; font-size:.95rem; }
@media (max-width: 760px) {
  .karaoke-session-control-panel { border-radius:18px; padding:.85rem; }
  .karaoke-session-actions { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .karaoke-session-actions .primary-button { grid-column:1 / -1; }
  .karaoke-gap-field { grid-column:1 / -1; }
  .karaoke-queue-row { grid-template-columns:auto auto 42px 1fr !important; align-items:start; }
  .karaoke-queue-row .karaoke-queue-actions { grid-column:1 / -1; justify-content:flex-start; width:100%; }
  .karaoke-activate-card { padding:1.2rem; }
  .karaoke-remote-screen .karaoke-player-stage, .karaoke-youtube-host, .karaoke-youtube-host iframe { min-height:220px; }
}
html.dark .karaoke-session-control-panel, body.dark .karaoke-session-control-panel, [data-theme="dark"] .karaoke-session-control-panel { background:linear-gradient(135deg, rgba(124,58,237,.20), rgba(14,165,233,.12)); border-color:rgba(167,139,250,.28); }
html.dark .karaoke-selected-session, body.dark .karaoke-selected-session, [data-theme="dark"] .karaoke-selected-session { background:rgba(34,197,94,.14); color:#bbf7d0; }
html.dark .karaoke-gap-field, body.dark .karaoke-gap-field, [data-theme="dark"] .karaoke-gap-field { color:#f8fafc; }

/* v37.5 Karaoke local + crossfade */
.karaoke-source-mode-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem;border-radius:16px;border:1px solid rgba(124,58,237,.22);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(14,165,233,.08));margin:.75rem 0}
.karaoke-source-mode-card b{display:block;font-size:.95rem;color:var(--text,#111827)}
.karaoke-source-mode-card span{display:block;font-size:.82rem;color:var(--muted,#6b7280);max-width:620px}.karaoke-source-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.karaoke-local-source-panel{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1rem;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,24,.72);backdrop-filter:blur(14px);color:#fff;border-radius:18px;padding:1rem}.karaoke-local-source-panel>div{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.karaoke-local-source-panel span{opacity:.78;font-size:.86rem}.karaoke-local-source-panel small{opacity:.72}.karaoke-local-file-button{position:relative;overflow:hidden}.karaoke-local-file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.karaoke-local-host{position:absolute;inset:0;display:grid;place-items:center;background:#020617;overflow:hidden}.karaoke-local-host video,.karaoke-local-host audio{position:absolute;inset:0;object-fit:contain;background:#020617;transition:opacity .2s linear}.karaoke-local-host audio{height:72px;top:auto;bottom:2rem;left:2rem;right:2rem;width:calc(100% - 4rem)!important}.karaoke-local-missing{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:2rem;background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,41,59,.92));color:#fff}.karaoke-local-missing b{font-size:1.25rem}.karaoke-local-missing span{font-size:1rem;opacity:.86}.karaoke-local-missing small{opacity:.7}.dark .karaoke-source-mode-card,.theme-dark .karaoke-source-mode-card,[data-theme="dark"] .karaoke-source-mode-card{background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(14,165,233,.12));border-color:rgba(255,255,255,.16)}.dark .karaoke-source-mode-card b,.theme-dark .karaoke-source-mode-card b,[data-theme="dark"] .karaoke-source-mode-card b{color:#f8fafc}.dark .karaoke-source-mode-card span,.theme-dark .karaoke-source-mode-card span,[data-theme="dark"] .karaoke-source-mode-card span{color:#cbd5e1}@media(max-width:760px){.karaoke-source-mode-card{align-items:stretch}.karaoke-source-buttons,.karaoke-source-buttons button{width:100%}.karaoke-local-source-panel{align-items:stretch;margin:.75rem}.karaoke-local-source-panel>*{width:100%}}


/* Marketia Eats v37.6 consolidada: correcciones verificables */
.app-build-version{display:inline-block;margin-top:.25rem;font-size:.68rem;letter-spacing:.06em;color:#f472b6}

/* Tema oscuro: cubre las tres formas usadas por la aplicación */
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .panel,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .data-panel,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .settings-grid > div,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .admin-notice,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .logo-uploader,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .responsive-table,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .inventory-table,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .inventory-table-row,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .inventory-bulk-bar{
  background:#111827!important;color:#f8fafc!important;border-color:#334155!important
}
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) input,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) select,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) textarea{
  background:#0b1220!important;color:#f8fafc!important;border-color:#475569!important
}
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) input::placeholder,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) textarea::placeholder{color:#94a3b8!important}
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .responsive-table th,
:is(html.dark,body.dark,.dark,[data-theme="dark"],[data-marketia-theme="dark"]) .responsive-table td{background:#111827!important;color:#f8fafc!important;border-color:#334155!important}

/* Vista móvil del simulador: sin modal PWA y con teléfono utilizable */
.phone-preview{width:min(100%,430px)!important;min-width:320px!important;margin-inline:auto!important}
.phone-preview iframe{width:100%!important;min-height:720px!important;border:0!important}
@media(max-width:560px){.phone-preview{min-width:0!important;width:100%!important}.phone-preview iframe{min-height:680px!important}}

/* Inventario administrable: lista clara y acciones siempre visibles */
.inventory-table-managed .inventory-bulk-bar{position:sticky;top:0;z-index:2}
.inventory-table-managed .inventory-row-actions .icon-button{min-width:38px;min-height:38px;display:inline-grid;place-items:center}
.product-availability-list{display:flex!important;flex-direction:column!important;gap:.5rem!important}
.product-availability-list button{width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important}

/* Historial de karaoke móvil: tarjetas, nunca columnas comprimidas */
@media(max-width:760px){
  .karaoke-history-table{overflow:visible!important}
  .karaoke-history-table table,.karaoke-history-table tbody{display:block!important;width:100%!important}
  .karaoke-history-table thead{display:none!important}
  .karaoke-history-table tr{display:block!important;width:100%!important;margin:.75rem 0!important;padding:.85rem!important;border:1px solid #334155!important;border-radius:16px!important;background:#111827!important}
  .karaoke-history-table td{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;width:100%!important;padding:.3rem 0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .karaoke-history-table td::before{content:attr(data-label)!important;font-size:.7rem!important;font-weight:800!important;color:#94a3b8!important;text-transform:uppercase!important}
  .karaoke-history-table td>div{min-width:0!important}
}

/* Logos: transparencia real, sin caja blanca impuesta */
.brand,.brand img,.employee-mobile-logo,.employee-mobile-logo img,.employee-real-mobile-logo,.employee-real-mobile-logo img,.restaurant-mark,.restaurant-mark img,.logo-preview{background:transparent!important}
.brand img,.employee-mobile-logo img,.employee-real-mobile-logo img,.restaurant-mark img,.logo-preview{object-fit:contain!important}

/* v37.7: menú móvil legible y tema oscuro definitivo */
.customer-category-card {
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 20px;
  background: var(--customer-surface, #fff);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.customer-category-summary {
  display: grid;
  grid-template-columns: minmax(108px, 33%) 1fr;
  min-height: 150px;
}
.customer-category-image-wrap {
  position: relative;
  min-width: 0;
  background: #f1f5f9;
}
.customer-category-image,
.customer-category-placeholder {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
}
.customer-category-placeholder {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: linear-gradient(135deg,#f8fafc,#ede9fe);
}
.customer-category-eye {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(15,23,42,.78);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}
.customer-category-copy {
  width: 100%;
  min-width: 0;
  border: 0;
  border-left: 1px solid rgba(148,163,184,.22);
  background: transparent;
  color: var(--customer-text, #111827);
  text-align: left;
  padding: 1rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .35rem;
}
.customer-category-copy strong {
  font-size: 1.2rem;
  line-height: 1.15;
  color: inherit;
}
.customer-category-count {
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--brand);
}
.customer-category-price {
  font-size: .9rem;
  font-weight: 800;
  color: var(--customer-muted, #64748b);
}
.customer-category-open-label {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .83rem;
  font-weight: 800;
  color: var(--brand);
}
.customer-category-open-label svg { transition: transform .18s ease; }
.customer-category-products { padding: 0 .85rem .85rem; }
.customer-category-products > div { margin-top: .75rem !important; }

@media (max-width: 430px) {
  .customer-category-summary { grid-template-columns: 34% 66%; min-height: 138px; }
  .customer-category-image,
  .customer-category-placeholder { min-height: 138px; }
  .customer-category-copy { padding: .8rem .8rem .7rem; }
  .customer-category-copy strong { font-size: 1.05rem; }
  .customer-category-count { font-size: .64rem; }
  .customer-category-price { font-size: .82rem; }
  .customer-category-eye { width: 38px; height: 38px; right: 8px; bottom: 8px; }
}

/* El tema real se aplica con .eats-theme-dark, no con data-marketia-theme. */
.eats-theme-dark .panel,
.eats-theme-dark .data-panel,
.eats-theme-dark .ticket,
.eats-theme-dark .welcome-card,
.eats-theme-dark .join-modal,
.eats-theme-dark .admin-tabs,
.eats-theme-dark .inventory-intro,
.eats-theme-dark .simulator-panel,
.eats-theme-dark .settings-grid > div,
.eats-theme-dark .logo-uploader,
.eats-theme-dark .recipe-lines,
.eats-theme-dark .admin-notice,
.eats-theme-dark .responsive-table,
.eats-theme-dark .responsive-table table,
.eats-theme-dark .inventory-table,
.eats-theme-dark .inventory-table-row {
  background: var(--theme-dark-surface) !important;
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
}
.eats-theme-dark input,
.eats-theme-dark select,
.eats-theme-dark textarea,
.eats-theme-dark [contenteditable="true"] {
  background: var(--theme-dark-surface-2) !important;
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
  box-shadow: none !important;
}
.eats-theme-dark input::placeholder,
.eats-theme-dark textarea::placeholder { color: var(--theme-dark-muted) !important; opacity: .78; }
.eats-theme-dark .panel [style*="background: #fff"],
.eats-theme-dark .panel [style*="background:#fff"],
.eats-theme-dark .panel [style*="background: white"],
.eats-theme-dark .panel [style*="background:white"],
.eats-theme-dark .panel [style*="background: #f5f3ff"],
.eats-theme-dark .panel [style*="background:#f5f3ff"],
.eats-theme-dark .panel [style*="background: #f0fdf4"],
.eats-theme-dark .panel [style*="background:#f0fdf4"],
.eats-theme-dark .panel [style*="background: #fafafa"],
.eats-theme-dark .panel [style*="background:#fafafa"],
.eats-theme-dark .content [style*="background: #fff"],
.eats-theme-dark .content [style*="background:#fff"],
.eats-theme-dark .content [style*="background: white"],
.eats-theme-dark .content [style*="background:white"],
.eats-theme-dark .content [style*="background: #f5f3ff"],
.eats-theme-dark .content [style*="background:#f5f3ff"],
.eats-theme-dark .content [style*="background: #f0fdf4"],
.eats-theme-dark .content [style*="background:#f0fdf4"] {
  background: var(--theme-dark-surface) !important;
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
}
.eats-theme-dark .responsive-table th,
.eats-theme-dark .responsive-table td,
.eats-theme-dark .inventory-table-head,
.eats-theme-dark .inventory-table-row {
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
}
.eats-theme-dark .responsive-table thead,
.eats-theme-dark .inventory-table-head { background: #111827 !important; }
.eats-theme-dark .responsive-table tbody tr,
.eats-theme-dark .inventory-table-row { background: var(--theme-dark-surface) !important; }
.eats-theme-dark .responsive-table tbody tr:nth-child(even) { background: var(--theme-dark-surface-2) !important; }
.eats-theme-dark .content p,
.eats-theme-dark .content small,
.eats-theme-dark .content label { color: inherit; }


/* v37.8: bloque de URL sin colores claros incrustados */
.business-url-card {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: #f5f3ff;
  color: #312e81;
}
.business-url-card h3 {
  margin: 0 0 .5rem;
  font-size: .92rem;
  font-weight: 800;
  color: #4c1d95;
}
.business-url-description {
  margin: 0 0 .8rem;
  font-size: .82rem;
  color: #6d28d9;
}
.business-url-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-bottom: .65rem;
}
.business-url-card label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: inherit;
}
.business-url-card input {
  width: 100%;
  margin-top: .28rem;
}
.business-url-alias { margin-bottom: .65rem; }
.business-url-notice {
  margin: 0 0 .55rem;
  padding: .5rem .7rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.business-url-notice-short {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.business-url-notice-full {
  color: #6d28d9;
  background: #fff;
  border-color: #ddd6fe;
}
.eats-theme-dark .business-url-card {
  background: #141827 !important;
  color: #f8fafc !important;
  border-color: #343b52 !important;
}
.eats-theme-dark .business-url-card h3 {
  color: #d8b4fe !important;
}
.eats-theme-dark .business-url-description {
  color: #c4b5fd !important;
}
.eats-theme-dark .business-url-card label {
  color: #e5e7eb !important;
}
.eats-theme-dark .business-url-card input {
  background: #090f1d !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}
.eats-theme-dark .business-url-notice-short {
  background: #0f2a22 !important;
  color: #86efac !important;
  border-color: #166534 !important;
}
.eats-theme-dark .business-url-notice-full {
  background: #211936 !important;
  color: #ddd6fe !important;
  border-color: #5b21b6 !important;
}
@media (max-width: 680px) {
  .business-url-fields { grid-template-columns: 1fr; }
  .business-url-card { padding: 1rem; }
}

/* v37.9: corrección móvil definitiva de panel admin, tarjetas, tema oscuro y desbordes */
@media (max-width: 760px) {
  .eats-app { overflow-x: hidden !important; }
  .eats-app main { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
  .eats-app main > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    min-height: auto !important;
    padding: .8rem .85rem !important;
    gap: .72rem !important;
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  .eats-app main > header > div:first-of-type,
  .eats-app main > header > div:nth-of-type(1) { min-width: 0 !important; }
  .eats-app main > header span {
    font-size: 1.42rem !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
    word-break: normal !important;
  }
  .eats-app main > header small {
    display: block !important;
    font-size: .85rem !important;
    line-height: 1.25 !important;
    margin-top: .22rem !important;
  }
  .eats-app main > header .icon-button,
  .eats-app main > header .avatar {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
  .eats-app .content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 1rem .72rem 2rem !important;
    overflow-x: hidden !important;
  }
  .eats-app .page-title {
    margin-bottom: .85rem !important;
    gap: .6rem !important;
  }
  .eats-app .page-title h1 { font-size: clamp(1.55rem, 7.5vw, 2.05rem) !important; line-height: 1.05 !important; }
  .eats-app .panel,
  .eats-app .data-panel,
  .eats-app .ticket,
  .eats-app .welcome-card,
  .eats-app .inventory-intro,
  .eats-app .banner-hero,
  .eats-app .banner-card,
  .eats-app .empty,
  .eats-app .business-url-card,
  .eats-app .theme-editor-section,
  .eats-app .theme-live-preview,
  .eats-app .theme-menu-names {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
  .eats-app .panel { padding: 1rem !important; border-radius: 16px !important; }
  .eats-app .banners-stack,
  .eats-app .banner-grid { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 1rem !important; overflow: hidden !important; }
  .eats-app .banner-hero { padding: 1.1rem !important; }
  .eats-app .banner-hero h2 { font-size: 1.35rem !important; line-height: 1.1 !important; }
  .eats-app .banner-hero p { font-size: .98rem !important; line-height: 1.42 !important; }
  .eats-app .banner-hero .primary-button { width: 100% !important; justify-content: center !important; }

  /* Configuración / marca blanca: una sola columna, sin desbordes */
  .eats-app .settings-grid,
  .eats-app .theme-color-grid,
  .eats-app .typography-grid,
  .eats-app .banner-editor-grid,
  .eats-app .recipe-builder,
  .eats-app .inventory-new-item {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: .85rem !important;
  }
  .eats-app .settings-grid > *,
  .eats-app .theme-color-grid > *,
  .eats-app .typography-grid > *,
  .eats-app .banner-editor-grid > *,
  .eats-app .recipe-builder > *,
  .eats-app .inventory-new-item > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .eats-app .settings-grid label,
  .eats-app .theme-color-grid label,
  .eats-app .typography-grid label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .eats-app .settings-grid label > div,
  .eats-app .theme-color-grid .color-field,
  .eats-app .typography-grid label > div {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: .55rem !important;
  }
  .eats-app .settings-grid input:not([type="color"]),
  .eats-app .theme-color-grid input:not([type="color"]),
  .eats-app .typography-grid input:not([type="color"]),
  .eats-app .settings-grid select,
  .eats-app .theme-color-grid select,
  .eats-app .typography-grid select {
    flex: 1 1 160px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .eats-app input[type="color"] { flex: 0 0 52px !important; width: 52px !important; min-width: 52px !important; }
  .eats-app .logo-uploader { max-width: 100% !important; overflow: hidden !important; }
  .eats-app .logo-preview { max-width: 100% !important; height: auto !important; object-fit: contain !important; }
  .eats-app .transparent-logo-note { max-width: 100% !important; overflow-wrap: anywhere !important; }

  /* La tarjeta de URL del negocio no debe seguir blanca en tema oscuro ni desbordar */
  .eats-app .business-url-card { padding: 1rem !important; }
  .eats-app .business-url-fields { grid-template-columns: minmax(0,1fr) !important; }
  .eats-app .business-url-card input,
  .eats-app .business-url-notice { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; }

  /* Tablas/listados: no obligar ancho mayor que el teléfono */
  .eats-app .responsive-table,
  .eats-app .responsive-table table,
  .eats-app .data-table,
  .eats-app table { max-width: 100% !important; }
  .eats-app .responsive-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

@media (max-width: 520px) {
  /* Karaoke: tarjetas compactas, legibles y sin columnas perdidas */
  .eats-app .karaoke-ticket {
    display: grid !important;
    grid-template-columns: auto auto minmax(0,1fr) !important;
    gap: .75rem !important;
    align-items: start !important;
    padding: .9rem !important;
    border-radius: 16px !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-media {
    grid-column: 1 / 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    min-width: 0 !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-media img,
  .eats-app .karaoke-ticket .karaoke-ticket-media .karaoke-thumb {
    width: 56px !important;
    height: 42px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-info {
    grid-column: 3 !important;
    min-width: 0 !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-info b,
  .eats-app .karaoke-ticket .karaoke-ticket-info strong {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-info p,
  .eats-app .karaoke-ticket .karaoke-ticket-info small,
  .eats-app .karaoke-ticket .karaoke-ticket-info span {
    font-size: .86rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: .45rem !important;
    width: 100% !important;
    justify-items: stretch !important;
  }
  .eats-app .karaoke-ticket .karaoke-ticket-actions button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    padding: .55rem .4rem !important;
  }

  /* Banners y páginas generales con margen real mínimo */
  .eats-app .content { padding-left: .62rem !important; padding-right: .62rem !important; }
  .eats-app .page-title { padding-inline: 0 !important; }
  .eats-app .panel { padding: .95rem !important; }

  /* Configuración: controles de color apilados si falta ancho */
  .eats-app .settings-grid label > div { align-items: flex-start !important; }
  .eats-app .settings-grid input:not([type="color"]) { flex-basis: 100% !important; width: 100% !important; }
}

/* Tema oscuro: forzar cualquier tarjeta clara remanente dentro de configuración y paneles */
.eats-theme-dark .business-url-card,
.eats-theme-dark .theme-editor-section,
.eats-theme-dark .theme-menu-names,
.eats-theme-dark .theme-color-grid label,
.eats-theme-dark .typography-grid label,
.eats-theme-dark .settings-grid > div,
.eats-theme-dark .banner-hero,
.eats-theme-dark .banner-card {
  background: var(--theme-dark-surface) !important;
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
}
.eats-theme-dark .business-url-card,
.eats-theme-dark .business-url-card *:not(button):not(svg):not(path),
.eats-theme-dark .theme-editor-section,
.eats-theme-dark .theme-editor-section *:not(button):not(svg):not(path),
.eats-theme-dark .settings-grid,
.eats-theme-dark .settings-grid *:not(button):not(svg):not(path) {
  color: var(--theme-dark-text) !important;
}
.eats-theme-dark .business-url-notice-short {
  background: rgba(20,83,45,.35) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34,197,94,.35) !important;
}
.eats-theme-dark .business-url-notice-full {
  background: rgba(88,28,135,.35) !important;
  color: #e9d5ff !important;
  border-color: rgba(168,85,247,.35) !important;
}
.eats-theme-dark .settings-grid input,
.eats-theme-dark .settings-grid select,
.eats-theme-dark .settings-grid textarea,
.eats-theme-dark .theme-editor-section input,
.eats-theme-dark .theme-editor-section select,
.eats-theme-dark .theme-editor-section textarea,
.eats-theme-dark .business-url-card input {
  background: var(--theme-dark-surface-2) !important;
  color: var(--theme-dark-text) !important;
  border: 1px solid var(--theme-dark-border) !important;
}
.eats-theme-dark .logo-uploader,
.eats-theme-dark .dark-logo-uploader,
.eats-theme-dark .favicon-uploader {
  background: #0d1320 !important;
  color: var(--theme-dark-text) !important;
  border-color: var(--theme-dark-border) !important;
}


/* v37.10: aviso PWA compacto. Nunca debe tapar hero, menú ni simulador móvil. */
.pwa-install-backdrop { display: contents !important; background: transparent !important; backdrop-filter: none !important; padding: 0 !important; }
.pwa-install-card,
.pwa-install-backdrop .pwa-install-card,
.pwa-install-customer {
  position: fixed !important;
  left: max(.75rem, env(safe-area-inset-left)) !important;
  right: max(.75rem, env(safe-area-inset-right)) !important;
  bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  z-index: 70 !important;
  width: auto !important;
  max-width: min(540px, calc(100vw - 1.5rem)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: .65rem !important;
  align-items: center !important;
  padding: .72rem .82rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(13, 17, 29, .94) !important;
  color: #f8fafc !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(14px) !important;
}
.pwa-install-icon { width: 2.1rem !important; height: 2.1rem !important; min-width: 2.1rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: rgba(124,58,237,.2) !important; color: #c4b5fd !important; }
.pwa-install-copy { min-width: 0 !important; }
.pwa-install-copy b { display: block !important; color: #fff !important; font-size: .9rem !important; line-height: 1.1 !important; }
.pwa-install-copy p { color: rgba(226,232,240,.82) !important; font-size: .72rem !important; line-height: 1.25 !important; margin: .18rem 0 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.pwa-install-ios-step { display: none !important; }
.pwa-install-actions { display: flex !important; align-items: center !important; gap: .35rem !important; width: auto !important; }
.pwa-install-button,
.pwa-install-secondary { white-space: nowrap !important; border-radius: 999px !important; padding: .48rem .62rem !important; font-size: .72rem !important; font-weight: 800 !important; }
.pwa-install-button { background: linear-gradient(135deg,#7c3aed,#db2777) !important; color: white !important; border: 0 !important; }
.pwa-install-secondary { background: rgba(255,255,255,.09) !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,.12) !important; }
.pwa-install-close { position: absolute !important; top: -.45rem !important; right: -.45rem !important; width: 1.55rem !important; height: 1.55rem !important; border-radius: 999px !important; background: rgba(15,23,42,.96) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
@media (max-width: 520px) {
  .pwa-install-card,
  .pwa-install-backdrop .pwa-install-card,
  .pwa-install-customer {
    left: .65rem !important;
    right: .65rem !important;
    bottom: max(.65rem, env(safe-area-inset-bottom)) !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    padding: .68rem .72rem !important;
  }
  .pwa-install-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; }
  .pwa-install-button,.pwa-install-secondary { width: 100% !important; justify-content: center !important; }
  .pwa-install-copy p { -webkit-line-clamp: 1 !important; }
}
@media (max-width: 380px) {
  .pwa-install-icon { display: none !important; }
  .pwa-install-card,.pwa-install-backdrop .pwa-install-card,.pwa-install-customer { grid-template-columns: minmax(0,1fr) !important; }
}