/*
  Fase 1 responsive visual layer.
  CSS-only: no business logic, no Supabase, no PDF behavior.
*/

:root {
  --st7-page-max: 1320px;
  --st7-page-pad: clamp(16px, 3vw, 32px);
  --st7-soft-bg: #f4f7fb;
  --st7-soft-card: rgba(255, 255, 255, 0.92);
  --st7-soft-border: #d9e3f2;
  --st7-soft-ink: #111827;
  --st7-soft-muted: #637083;
  --st7-soft-blue: #2563eb;
  --st7-soft-red: #b70f2e;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  background: var(--st7-soft-bg);
  color: var(--st7-soft-ink);
}

body::before,
body::after {
  pointer-events: none;
}

/* Main public navigation: one centered Apple-style capsule. */
.st7-nav-host {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 900;
  margin: 14px auto 10px;
  width: fit-content;
  max-width: calc(100vw - 24px);
  justify-content: center;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.st7-nav-host a,
.st7-nav-host button {
  color: #172033;
  font-weight: 850;
}

.st7-nav-host .active,
.st7-nav-host [aria-current="page"] {
  color: #0f172a;
  background: #eef4ff;
}

main,
.catalog-hero,
.stock-hero,
.filter-bar,
.stock-tools,
.style-grid,
.stock-grid,
.shared-request-section,
.view-panel.active,
.galeria-shell,
.app-shell {
  max-width: var(--st7-page-max);
  margin-left: auto;
  margin-right: auto;
}

.catalog-hero,
.stock-hero {
  padding-inline: var(--st7-page-pad);
}

/* Filters: stable layer and no overlap between open menus. */
.filter-bar,
.stock-tools,
.view-panel .filters {
  position: relative;
  z-index: 120;
  overflow: visible;
  border: 1px solid var(--st7-soft-border);
  background: var(--st7-soft-card);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.filter-bar label,
.stock-tools label,
.view-panel .filters label {
  position: relative;
  min-width: 0;
}

.catalog-check-filter-button,
.stock-check-filter-button,
.clear-filters,
.catalog-link-action,
.catalog-pdf-action,
.stock-share-button,
.stock-pdf-button,
#stockUnlockImport,
#catalogUnlockImport,
.gallery-import-unlock button {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0;
  color: #101827;
}

.catalog-check-filter-panel,
.stock-check-filter-panel {
  z-index: 2000;
  width: min(320px, calc(100vw - 28px));
  max-height: min(420px, 62vh);
  overflow: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.filter-bar label:has(.catalog-check-filter-panel:not([hidden])),
.stock-tools label:has(.stock-check-filter-panel:not([hidden])) {
  z-index: 2010;
}

.filter-bar:has(.catalog-check-filter-panel:not([hidden])),
.stock-tools:has(.stock-check-filter-panel:not([hidden])) {
  z-index: 1800;
}

.catalog-check-filter-button[aria-expanded="true"],
.stock-check-filter-button[aria-expanded="true"] {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* Fixed-size grids: filtering must not inflate cards. */
.style-grid,
.stock-grid,
.library-grid {
  display: grid;
  align-items: start;
  justify-content: center;
}

.style-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 240px));
  gap: 22px;
  padding-inline: var(--st7-page-pad);
}

.stock-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 270px));
  gap: 22px;
  padding-inline: var(--st7-page-pad);
}

.library-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 230px));
  gap: 22px;
}

.style-card,
.stock-card,
.model-card,
.library-card {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.style-card img,
.stock-card img,
.library-card img,
.model-card img {
  max-width: 100%;
  height: auto;
}

.stock-card .stock-card-runs,
.stock-card .stock-run-grid,
.style-card .run-pills,
.style-card .variant-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stock-card .stock-total,
.style-card .variant-count,
.style-card .total-pairs {
  justify-self: stretch;
}

/* Gallery app shell keeps bottom tabbar fixed, not floating over content. */
.tabbar {
  z-index: 850;
}

.app-viewbar {
  position: sticky;
  top: calc(max(10px, env(safe-area-inset-top)) + 62px);
  z-index: 760;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}

.view-panel .filters {
  z-index: 740;
  overflow: visible;
}

.view-panel .filters select,
.view-panel .filters input {
  min-height: 44px;
}

@media (min-width: 1181px) {
  .filter-bar,
  .stock-tools {
    display: grid;
    grid-template-columns: auto repeat(5, minmax(130px, 1fr)) auto auto auto;
    gap: 12px;
    align-items: end;
    width: min(var(--st7-page-max), calc(100vw - 64px));
    padding: 18px;
    border-radius: 28px;
  }

  .stock-tools {
    grid-template-columns: auto repeat(5, minmax(120px, 1fr)) minmax(190px, 1.2fr);
  }

  .stock-catalog-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }

  .catalog-check-filter-panel,
  .stock-check-filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
  }

  .view-panel .filters {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(135px, 1fr)) minmax(180px, 1.15fr);
    gap: 12px;
    align-items: end;
  }

  #stockView .filters {
    grid-template-columns: auto repeat(5, minmax(120px, 1fr)) minmax(180px, 1.15fr);
  }
}

/* Regla final: centrado real de filtros en movil/iPad.
   Debe permanecer al final para ganar contra reglas heredadas de filtros. */
@media (max-width: 1180px), (pointer: coarse) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal:not([hidden]) {
    position: fixed !important;
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(76dvh, calc(100dvh - 72px)) !important;
    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    overflow: auto !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal:not([hidden]) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(74dvh, calc(100dvh - 84px)) !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 1180px) {
  .st7-nav-host {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    overflow-x: auto;
    justify-content: flex-start;
    padding: 7px;
  }

  .st7-nav-host a,
  .st7-nav-host button {
    white-space: nowrap;
  }

  .filter-bar,
  .stock-tools,
  .view-panel .filters {
    width: min(100% - 24px, 760px);
    margin-inline: auto;
    padding: 14px;
    border-radius: 24px;
  }

  .filter-bar,
  .stock-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .filter-bar .import-unlock,
  .stock-tools .import-unlock,
  .stock-search-filter,
  .stock-catalog-actions,
  .clear-filters,
  .catalog-link-action,
  .catalog-pdf-action {
    grid-column: 1 / -1;
  }

  .catalog-check-filter-panel,
  .stock-check-filter-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 62vh;
  }

  .style-grid,
  .stock-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 240px));
  }

  .library-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    padding-inline: 12px;
  }
}

@media (max-width: 680px) {
  .filter-bar,
  .stock-tools,
  .view-panel .filters {
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
    padding: 12px;
  }

  .style-grid,
  .stock-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 12px;
  }

  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-check-filter-button,
  .stock-check-filter-button,
  .clear-filters,
  .catalog-link-action,
  .catalog-pdf-action,
  .stock-share-button,
  .stock-pdf-button,
  #stockUnlockImport,
  #catalogUnlockImport,
  .gallery-import-unlock button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .library-grid {
    grid-template-columns: 1fr;
  }
}

/* Fase 2: visual polish for photo viewers. */
.image-viewer,
.stock-image-modal,
.detail-dialog[open] {
  z-index: 2200;
}

.image-viewer .viewer-stage {
  display: grid;
  place-items: center;
  gap: 14px;
  max-width: min(1180px, calc(100vw - 32px));
  margin-inline: auto;
}

.image-viewer #viewerImage {
  max-width: min(100%, 1120px);
  max-height: min(68vh, 720px);
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.image-viewer .viewer-caption {
  width: min(760px, calc(100vw - 32px));
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  color: #111827;
  text-align: center;
  backdrop-filter: blur(18px);
}

.image-viewer .viewer-caption h2 {
  margin: 2px 0 6px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
}

.image-viewer .viewer-meta,
.detail-bottom-bar .chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.image-viewer .viewer-meta span,
.detail-bottom-bar .chip-row > *,
.detail-bottom-bar .chip-row .chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #101827;
  font-weight: 900;
  line-height: 1.1;
}

.image-viewer .viewer-cart,
.stock-image-open-separate {
  min-width: min(360px, calc(100vw - 48px));
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #059669);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 18px 40px rgba(5, 150, 105, 0.26);
}

.image-viewer .viewer-nav,
.stock-image-modal .stock-image-nav,
.gallery-arrow {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #101827;
  font-size: 34px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.image-viewer .viewer-close,
.stock-image-modal > #closeStockImageModal,
.detail-dialog .dialog-close {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #101827;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.stock-image-modal .stock-image-shell {
  align-items: center;
  gap: 22px;
  max-width: min(1280px, calc(100vw - 32px));
}

.stock-image-modal .stock-image-stage {
  display: grid;
  place-items: center;
}

.stock-image-modal #stockImageModalImg {
  width: min(760px, 58vw);
  max-height: min(72vh, 720px);
  object-fit: contain;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.stock-image-modal .stock-image-controls {
  width: min(430px, 92vw);
  border-radius: 28px;
  border: 1px solid #d7e0ed;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.stock-image-modal .stock-image-separate,
.stock-primary {
  background: linear-gradient(135deg, #16a34a, #059669);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 950;
}

.detail-dialog[open] {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border: 0;
  background: #05070b;
  color: #fff;
}

.detail-dialog .detail-layout {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.detail-dialog .detail-copy {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(420px, calc(100vw - 92px));
  padding: 10px 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  color: #101827;
  text-align: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.detail-dialog .detail-copy h2 {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 0.96;
}

.detail-dialog .detail-copy p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 900;
}

.detail-dialog .detail-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.detail-dialog #detailImage {
  width: 100%;
  max-height: calc(100vh - 230px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  touch-action: manipulation;
}

.detail-dialog .thumb-row {
  min-height: 76px;
  max-height: 92px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 72px;
  border-radius: 0;
  background: rgba(241, 245, 249, 0.96);
}

.detail-bottom-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  width: min(720px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #101827;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.detail-bottom-bar .share-photo-button,
.detail-bottom-bar .favorite-photo-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #101827;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.detail-bottom-bar .share-photo-button {
  order: 3;
}

.detail-bottom-bar .favorite-photo-button {
  order: 1;
}

.detail-bottom-bar .chip-row {
  order: 2;
  min-width: 0;
  overflow: hidden;
}

.detail-bottom-bar .chip-row > * {
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .image-viewer #viewerImage {
    max-height: 56vh;
  }

  .stock-image-modal .stock-image-shell {
    grid-template-columns: 1fr;
  }

  .stock-image-modal #stockImageModalImg {
    width: min(100%, 720px);
    max-height: 54vh;
  }

  .stock-image-modal .stock-image-controls {
    width: min(100%, 520px);
  }

  .detail-dialog #detailImage {
    max-height: calc(100vh - 250px);
  }

  .detail-bottom-bar {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    width: min(620px, calc(100vw - 18px));
  }

  .detail-bottom-bar .share-photo-button,
  .detail-bottom-bar .favorite-photo-button {
    width: 48px;
    height: 48px;
  }

  .detail-bottom-bar .chip-row {
    gap: 5px;
    justify-content: center;
  }

  .detail-bottom-bar .chip-row > * {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* Fase 3: capa visual segura para modulos internos */
:is(.admin-layout, .accounting-layout, .tracking-shell, .backup-shell, .notice-page, .task-page, .directory-page) {
  width: min(var(--st7-page-max), calc(100vw - clamp(18px, 4vw, 56px)));
  margin-inline: auto;
}

:is(.admin-page-title, .accounting-page-title, .tracking-titlebar, .backup-hero, .notice-hero, .directory-hero) {
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

:is(.admin-page-title, .accounting-page-title, .tracking-titlebar, .notice-hero, .directory-hero) h1,
:is(.backup-hero) h1 {
  color: var(--st7-ink);
  letter-spacing: 0;
  line-height: 1;
  text-wrap: balance;
}

:is(.admin-flow-card, .admin-form, .admin-list, .accounting-card, .model-sidebar, .model-editor, .variants-panel, .backup-summary, .backup-log, .backup-preview, .danger-zone, .notice-section, .notice-tools, .modal-panel, .contact-card, .date-card, .progress-card, .clock-card) {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--st7-radius-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--st7-shadow-soft);
}

:is(.admin-flow-card, .accounting-card, .model-sidebar, .model-editor, .variants-panel, .backup-hero, .notice-section, .contact-card) {
  overflow: clip;
}

:is(.admin-layout, .accounting-layout, .tracking-workspace, .notice-page, .directory-page, .backup-shell) :is(input, select, textarea) {
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--st7-ink);
  font-size: 15px;
  letter-spacing: 0;
}

:is(.admin-layout, .accounting-layout, .tracking-workspace, .notice-page, .directory-page, .backup-shell) :is(input, select, textarea):focus {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  outline: none;
}

:is(.admin-layout, .accounting-layout, .tracking-workspace, .notice-page, .directory-page, .backup-shell) :is(label, .field, .panel-kicker, .eyebrow, small) {
  letter-spacing: 0;
}

:is(.admin-layout, .accounting-layout, .tracking-workspace, .notice-page, .directory-page, .backup-shell) :is(.primary-action, .primary-button, .save-button, .publish-button, .workspace-new-button) {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

:is(.admin-layout, .accounting-layout, .tracking-workspace, .notice-page, .directory-page, .backup-shell) :is(.soft-action, .secondary-button, .secondary, .outline-button, .icon-button) {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(255, 255, 255, 0.94);
  color: var(--st7-ink);
}

.internal-module-nav,
.admin-primary-tabs,
.accounting-view-tabs {
  width: fit-content;
  max-width: min(100%, var(--st7-page-max));
  margin-inline: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--st7-shadow-soft);
}

.admin-flow-nav,
.accounting-flow,
.phase-track {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.accounting-history-card .movement-list,
.notice-wall,
.directory-grid,
.tracking-stats,
.admin-flow-stats {
  gap: clamp(12px, 1.6vw, 22px);
}

.accounting-history-card .movement-list > *,
.notice-wall > *,
.directory-grid > * {
  min-width: 0;
}

.notice-modal,
.modal {
  z-index: 2600;
}

.notice-modal .modal-panel,
.modal .modal-card {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.directory-page .contact-card {
  text-align: center;
}

.directory-page .contact-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.directory-page .contact-actions {
  align-items: stretch;
}

.directory-page .contact-actions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
}

.task-page .task-list,
.accounting-history-card .movement-list {
  display: grid;
  grid-template-columns: 1fr;
}

@media (max-width: 980px) {
  :is(.admin-layout, .accounting-layout, .tracking-shell, .backup-shell, .notice-page, .task-page, .directory-page) {
    width: min(100%, calc(100vw - 18px));
  }

  .tracking-workspace,
  .admin-layout,
  .accounting-layout {
    grid-template-columns: 1fr;
  }

  .internal-module-nav,
  .admin-primary-tabs,
  .accounting-view-tabs {
    width: min(100%, calc(100vw - 18px));
    overflow-x: auto;
    justify-content: flex-start;
  }
}

/* Fase 4: base centralizada para temas visuales por linea comercial */
:root {
  --st7-theme-bg: #f3f6fb;
  --st7-theme-surface: #ffffff;
  --st7-theme-ink: #101827;
  --st7-theme-accent: #1d4ed8;
  --st7-theme-accent-2: #e11d48;
}

:is(:root[data-business-mode="sport_time"], body.business-mode-sport_time, body[data-business-mode="sport-time"], body[data-brand-mode="sport-time"], body.theme-sport-time) {
  --st7-theme-accent: #1947b8;
  --st7-theme-accent-2: #ef233c;
}

:is(:root[data-business-mode="importados"], body.business-mode-importados, body[data-business-mode="importados"], body[data-brand-mode="importados"], body.theme-amazing-shoes) {
  --st7-theme-accent: #0891b2;
  --st7-theme-accent-2: #f97316;
}

:is(:root[data-business-mode="catalogos"], body.business-mode-catalogos, body[data-business-mode="catalogos"], body[data-brand-mode="catalogos"], body.theme-catalogos) {
  --st7-theme-accent: #c026d3;
  --st7-theme-accent-2: #06b6d4;
}

:is(:root[data-business-mode="all"], body.business-mode-all, :root[data-business-mode="todo"], body[data-business-mode="todo"], body[data-brand-mode="todo"], body.theme-mostrar-todo) {
  --st7-theme-accent: #0f766e;
  --st7-theme-accent-2: #f59e0b;
}

:is(.brand-mode-pill, .business-mode-pill, .mode-badge) {
  border-color: color-mix(in srgb, var(--st7-theme-accent) 28%, transparent);
  background: color-mix(in srgb, var(--st7-theme-accent) 10%, white);
  color: var(--st7-theme-ink);
}

/* 2026-08-13: filtros tactiles/verticales.
   En celular y tablet los filtros se apilan; esta capa evita que un desplegable
   quede atrapado debajo del filtro siguiente o debajo de las tarjetas. */
@media (max-width: 1180px), (pointer: coarse) {
  :is(
    .filter-bar,
    .stock-tools,
    #catalogView .filters,
    #stockView .filters,
    .filters
  ) {
    position: relative !important;
    z-index: 900 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  :is(.filter-bar, .stock-tools, #catalogView .filters, #stockView .filters) {
    gap: 12px !important;
  }

  :is(
    .filter-bar > label,
    .filter-bar > .catalog-check-filter,
    .stock-tools > label,
    .stock-tools > select,
    .stock-tools > .stock-check-filter,
    .stock-tools > .stock-search-filter,
    #catalogView .filters > label,
    #catalogView .filters > .gallery-check-filter,
    #stockView .filters > label,
    #stockView .filters > .gallery-check-filter
  ) {
    position: relative !important;
    z-index: 10 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  :is(
    .filter-bar > label:focus-within,
    .filter-bar > .catalog-check-filter:focus-within,
    .filter-bar > .catalog-check-filter.is-open,
    .filter-bar > .catalog-check-filter:has(.catalog-check-filter-panel:not([hidden])),
    .filter-bar > .catalog-check-filter:has(.catalog-check-filter-button[aria-expanded="true"]),
    .stock-tools > label:focus-within,
    .stock-tools > .stock-check-filter:focus-within,
    .stock-tools > .stock-check-filter.is-open,
    .stock-tools > .stock-check-filter:has(.stock-check-filter-panel:not([hidden])),
    .stock-tools > .stock-check-filter:has(.stock-check-filter-button[aria-expanded="true"]),
    #catalogView .filters > label:focus-within,
    #catalogView .filters > .gallery-check-filter:focus-within,
    #catalogView .filters > .gallery-check-filter.is-open,
    #catalogView .filters > .gallery-check-filter:has(.gallery-check-filter-panel:not([hidden])),
    #catalogView .filters > .gallery-check-filter:has(.gallery-check-filter-button[aria-expanded="true"]),
    #stockView .filters > label:focus-within,
    #stockView .filters > .gallery-check-filter:focus-within,
    #stockView .filters > .gallery-check-filter.is-open,
    #stockView .filters > .gallery-check-filter:has(.gallery-check-filter-panel:not([hidden])),
    #stockView .filters > .gallery-check-filter:has(.gallery-check-filter-button[aria-expanded="true"])
  ) {
    z-index: 50000 !important;
  }

  :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ) {
    position: fixed !important;
    left: var(--st7-filter-left, max(12px, env(safe-area-inset-left))) !important;
    right: auto !important;
    top: var(--st7-filter-top, max(72px, env(safe-area-inset-top))) !important;
    bottom: auto !important;
    width: var(--st7-filter-width, min(360px, calc(100vw - 24px))) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: var(--st7-filter-max-height, min(62vh, 430px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 2147483000 !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32) !important;
    padding: 14px !important;
  }

  :is(
    .catalog-check-filter-panel[hidden],
    .stock-check-filter-panel[hidden],
    .gallery-check-filter-panel[hidden]
  ) {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :is(.filter-bar, .stock-tools, #catalogView .filters, #stockView .filters) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, calc(100vw - 22px)) !important;
    margin-inline: auto !important;
  }

  :is(
    .filter-bar select,
    .filter-bar input,
    .catalog-check-filter-button,
    .stock-tools select,
    .stock-tools input,
    .stock-check-filter-button,
    #catalogView .filters select,
    #catalogView .filters input,
    #stockView .filters select,
    #stockView .filters input,
    .gallery-check-filter-button
  ) {
    width: 100% !important;
  }
}

/* 2026-08-13: en movil/iPad los filtros abren como modal.
   Esto evita que las listas queden debajo de otros filtros en vertical u horizontal. */
@media (max-width: 1180px), (pointer: coarse) {
  html.st7-filter-sheet-open {
    overflow: hidden !important;
  }

  html.st7-filter-sheet-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: rgba(15, 23, 42, 0.22) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal {
    position: fixed !important;
    display: block !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(76dvh, calc(100dvh - 72px)) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483647 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    padding: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal label {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    width: 100% !important;
    color: #111827 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal :is(span, strong, button, li) {
    color: #111827 !important;
    text-align: left !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal {
    max-height: calc(100dvh - 32px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal label {
    min-height: 38px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ) {
    left: var(--st7-filter-left, 50%) !important;
    right: auto !important;
    top: var(--st7-filter-top, max(80px, env(safe-area-inset-top))) !important;
    bottom: auto !important;
    width: var(--st7-filter-width, min(560px, calc(100vw - 40px))) !important;
    transform: none !important;
  }
}

@media (max-width: 1180px), (pointer: coarse) {
  body > .st7-mobile-filter-sheet {
    position: fixed !important;
    left: var(--st7-filter-left, max(12px, env(safe-area-inset-left))) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: var(--st7-filter-top, auto) !important;
    bottom: auto !important;
    width: var(--st7-filter-width, auto) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: var(--st7-filter-max-height, min(64vh, 460px)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    z-index: 2147483646 !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 30px 95px rgba(15, 23, 42, 0.34) !important;
    padding: 14px !important;
    transform: none !important;
  }

  body > .st7-mobile-filter-sheet[hidden] {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  body > .st7-mobile-filter-sheet {
    right: auto !important;
  }
}

/* 2026-08-13: cierre final para filtros desplegables.
   Esta regla gana sobre estilos viejos de catalogo/stock/galeria y evita que
   las listas queden invisibles o atrapadas debajo de otros filtros. */
@media (max-width: 1180px), (pointer: coarse) {
  :is(.catalog-check-filter, .stock-check-filter, .gallery-check-filter) {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  :is(.catalog-check-filter.is-open, .stock-check-filter.is-open, .gallery-check-filter.is-open) {
    z-index: 2147483000 !important;
  }

  :is(
    .catalog-check-filter-panel.st7-mobile-filter-sheet,
    .stock-check-filter-panel.st7-mobile-filter-sheet,
    .gallery-check-filter-panel.st7-mobile-filter-sheet
  ) {
    position: fixed !important;
    display: block !important;
    left: var(--st7-filter-left, max(12px, env(safe-area-inset-left))) !important;
    top: var(--st7-filter-top, max(88px, env(safe-area-inset-top))) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--st7-filter-width, min(360px, calc(100vw - 24px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--st7-filter-max-height, min(58vh, 430px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2147483646 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 30px 95px rgba(15, 23, 42, 0.34) !important;
    padding: 14px !important;
  }

  :is(
    .catalog-check-filter-panel.st7-mobile-filter-sheet[hidden],
    .stock-check-filter-panel.st7-mobile-filter-sheet[hidden],
    .gallery-check-filter-panel.st7-mobile-filter-sheet[hidden]
  ) {
    display: none !important;
  }
}

/* 2026-08-13: paneles de filtro moviles sin empalmes.
   Mantiene el filtro en una capa superior, separado del flujo vertical. */
@media (max-width: 1180px), (pointer: coarse) {
  html.st7-filter-sheet-open :is(.filter-bar, .stock-tools, #catalogView .filters, #stockView .filters) {
    overflow: visible !important;
    transform: none !important;
  }

  html.st7-filter-sheet-open :is(
    .catalog-check-filter-panel.st7-mobile-filter-sheet,
    .stock-check-filter-panel.st7-mobile-filter-sheet,
    .gallery-check-filter-panel.st7-mobile-filter-sheet
  ) {
    position: fixed !important;
    display: block !important;
    inset: auto auto auto auto !important;
    left: var(--st7-filter-left, 12px) !important;
    top: var(--st7-filter-top, 88px) !important;
    width: var(--st7-filter-width, min(360px, calc(100vw - 24px))) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--st7-filter-max-height, min(58vh, 430px)) !important;
    z-index: 2147483647 !important;
  }
}

@media (max-width: 760px), (max-width: 1180px) and (orientation: portrait) and (pointer: coarse) {
  html.st7-filter-sheet-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  html.st7-filter-sheet-open :is(
    .catalog-check-filter-panel.st7-mobile-filter-sheet,
    .stock-check-filter-panel.st7-mobile-filter-sheet,
    .gallery-check-filter-panel.st7-mobile-filter-sheet
  ) {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(58vh, 430px) !important;
    border-radius: 28px !important;
  }
}

/* 2026-08-13: capa definitiva para filtros en vertical.
   El JS mueve el panel al body; estas reglas evitan que se empalme con
   otros filtros, fotos o barras. */
@media (max-width: 1180px), (pointer: coarse) {
  html.st7-filter-sheet-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet {
    position: fixed !important;
    display: block !important;
    inset: auto auto auto auto !important;
    left: var(--st7-filter-left, max(12px, env(safe-area-inset-left))) !important;
    top: var(--st7-filter-top, max(84px, env(safe-area-inset-top))) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--st7-filter-width, min(380px, calc(100vw - 24px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--st7-filter-max-height, min(58vh, 430px)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
    border-radius: 26px !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 30px 95px rgba(15, 23, 42, 0.34) !important;
    padding: 14px !important;
    color: #111827 !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet[hidden] {
    display: none !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet :is(label, li, button, span, strong) {
    color: #111827 !important;
    text-align: left !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet label {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    white-space: normal !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet :is(label span, label strong) {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 760px), (max-width: 1180px) and (orientation: portrait) and (pointer: coarse) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62vh, 470px) !important;
    border-radius: 28px !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-sheet-landscape {
    left: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(420px, 44vw) !important;
    max-width: min(420px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 24px !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-sheet-landscape label {
    min-height: 40px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-sheet-landscape input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 760px) {
  [data-role-nav],
  .site-return-nav {
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  [data-role-nav]::-webkit-scrollbar,
  .site-return-nav::-webkit-scrollbar {
    display: none;
  }

  [data-role-nav] > *,
  .site-return-nav > * {
    flex: 0 0 auto !important;
  }

  :is(.brand-mode-pill, .business-mode-pill, .mode-badge) {
    position: static !important;
    transform: none !important;
    margin: 8px auto !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 4 !important;
  }

  :is(.brand-mode-pill, .business-mode-pill, .mode-badge) img {
    position: static !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* Ultima regla: modal de filtros centrado en movil/iPad.
   Debe quedar al final para ganar contra reglas heredadas de filtros. */
@media (max-width: 1180px), (pointer: coarse) {
  html.st7-filter-sheet-open {
    overflow: hidden !important;
  }

  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal:not([hidden]) {
    position: fixed !important;
    display: block !important;
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(76dvh, calc(100dvh - 72px)) !important;
    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  body > :is(
    .catalog-check-filter-panel,
    .stock-check-filter-panel,
    .gallery-check-filter-panel
  ).st7-mobile-filter-sheet.st7-mobile-filter-modal:not([hidden]) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(74dvh, calc(100dvh - 84px)) !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
}