/* ============================================================================
   We Ötzi · Marketplace (flujo clientes) — capa de página sobre el DS Bauhaus
   Requiere ds/tokens.css + ds/components.css. Solo var(--token), cero hex.
   Referencia: Figma "flujo-clientes/06-marketplace" (desktop 1440).
   ========================================================================== */

/* ---------- Página ---------- */
.mk-page{display:flex;flex-direction:column;min-height:100vh}
.mk-main{width:100%;flex:1;padding-top:var(--space-10);padding-bottom:var(--space-12)}
.hidden{display:none !important}

/* ---------- TopBar ---------- */
.mk-topbar-cta{align-self:center}
/* Tile Ö del cliente logueado (marketplace.js lo inyecta si hay sesión) */
.mk-profile-tile{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  background:var(--yellow-300);color:var(--neutral-500);
  font-family:var(--font-display);font-size:16px;text-transform:uppercase;text-decoration:none;
  border:var(--border-strong-width) solid var(--border-strong);
  transition:transform var(--duration-press),box-shadow var(--duration-press)}
.wo-app a.mk-profile-tile:hover{color:var(--neutral-500);text-decoration:none;transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.mk-profile-tile:active{transform:none;box-shadow:none}

/* ---------- Hero ---------- */
.mk-hero{display:flex;flex-direction:column;gap:var(--space-6)}
.mk-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6)}
.mk-hero-heading{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.mk-title{font-family:var(--font-display);font-size:clamp(var(--title-sm-size),5vw,var(--title-xl-size));line-height:1.05;letter-spacing:var(--h1-track);color:var(--ink);margin:0}
.mk-sub{font-size:var(--body-m-size);line-height:var(--body-m-lh);color:var(--text-muted);margin:0}
/* Atajos del hero: corazón (solo favoritos) + botón Filtros (drawer) */
.mk-hero-actions{display:flex;align-items:center;gap:var(--space-3);flex:none}
.mk-hero-actions .wo-btn--s{min-height:var(--control-h-md)} /* misma altura que el iconbtn */
.mk-fav-toggle.is-active{background:var(--neutral-500);color:var(--white)}
.mk-fav-toggle.is-active svg{fill:currentColor}

/* ---------- Búsqueda ---------- */
.mk-search{position:relative}
.mk-search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);display:inline-flex;color:var(--text-faint);pointer-events:none;z-index:1}
.mk-search-input{background:var(--surface-page);border-color:var(--border-strong);padding-left:var(--space-12)}
.mk-search-input:focus{padding-left:calc(var(--space-12) - 1px)}
.mk-suggestions{position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:calc(-1 * var(--border-hairline));background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong);max-height:320px;overflow-y:auto}
.mk-suggestion{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);cursor:pointer;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.mk-suggestion:last-child{border-bottom:0}
.mk-suggestion:hover{background:var(--surface-input-hover)}
.mk-suggestion-label{font-size:var(--body-s-size);color:var(--text-body)}
.mk-suggestion-cat{font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase;color:var(--text-muted);flex:none}

/* ---------- Fila de filtros (6 dropdowns) ---------- */
.mk-filters{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.mk-filter{position:relative}
.mk-filter-btn{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--control-h-sm);
  padding:var(--space-2) var(--space-4);background:var(--surface-page);color:var(--neutral-500);
  border:var(--border-hairline) solid var(--border-strong);border-radius:var(--radius-none);
  font-family:var(--font-body);font-size:var(--button-s-size);font-weight:var(--weight-bold);
  letter-spacing:var(--button-s-track);text-transform:uppercase;cursor:pointer;
  transition:transform var(--duration-press),box-shadow var(--duration-press)}
.mk-filter-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.mk-filter-btn:active{transform:none;box-shadow:none}
.mk-filter-btn [data-wo-icon]{width:14px;height:14px}
.mk-filter-label{white-space:nowrap}
.mk-filter.is-set .mk-filter-btn{background:var(--neutral-500);color:var(--neutral-100)}
.mk-filter-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:50;min-width:220px;max-width:320px;max-height:320px;overflow-y:auto;
  background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong)}
.mk-filter-menu[hidden]{display:none}
.mk-filter-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;
  padding:var(--space-3) var(--space-4);background:transparent;border:0;border-bottom:var(--border-hairline) solid var(--border-subtle);
  font-family:var(--font-body);font-size:var(--body-s-size);color:var(--text-body);text-align:left;cursor:pointer}
.mk-filter-opt:last-child{border-bottom:0}
.mk-filter-opt:hover{background:var(--surface-input-hover)}
.mk-filter-opt.is-selected{background:var(--neutral-500);color:var(--neutral-100)}
.mk-filter-opt-count{font-family:var(--font-mono);font-size:var(--meta-s-size);color:inherit;opacity:var(--opacity-muted);flex:none}
/* Separador + chip "Todos los filtros" al final de la fila (Figma 286:12041) */
.mk-filters-sep{width:var(--border-hairline);align-self:stretch;background:var(--border-muted);flex:none}
.mk-allfilters-btn [data-wo-icon]{width:14px;height:14px}
.mk-allfilters-btn[aria-expanded="true"]{background:var(--neutral-500);color:var(--neutral-100)}

/* ---------- Drawer "Todos los filtros" (patrón de /explore) ---------- */
.mk-filter-drawer{background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong);padding:var(--space-6)}
.mk-filter-drawer[hidden]{display:none}
.mk-drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.mk-drawer-actions{display:flex;justify-content:flex-end;margin-top:var(--space-5)}

/* ---------- Filtros activos ---------- */
.mk-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding:var(--space-3) 0;border-top:var(--border-hairline) solid var(--border-subtle)}
.mk-active-label{color:var(--text-muted)}
.mk-active-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.mk-filter-tag [data-wo-icon]{width:14px;height:14px}
.mk-clear-btn{margin-left:auto}

/* ---------- Barra de resultados ---------- */
.mk-results{margin-top:var(--space-8)}
.mk-results-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-top:var(--border-hairline) solid var(--border-strong);border-bottom:var(--border-hairline) solid var(--border-strong)}
.mk-count{color:var(--neutral-400)}
.mk-results-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
/* Grupos segmentados: ARTISTAS/ESTUDIOS y LISTA/MAPA */
.mk-seg{display:inline-flex;border:var(--border-hairline) solid var(--border-strong)}
.mk-seg-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);
  background:transparent;border:0;font-family:var(--font-body);font-size:var(--button-s-size);font-weight:var(--weight-bold);
  letter-spacing:var(--button-s-track);text-transform:uppercase;color:var(--neutral-500);text-decoration:none;cursor:pointer}
.wo-app a.mk-seg-btn:hover{color:var(--neutral-500);text-decoration:none;background:var(--surface-input-hover)}
.mk-seg-btn:hover{background:var(--surface-input-hover)}
.mk-seg-btn.is-active{background:var(--neutral-500);color:var(--neutral-100);cursor:default}
.mk-seg-btn.is-active:hover{background:var(--neutral-500)}
.mk-seg-btn [data-wo-icon]{width:14px;height:14px}

/* ---------- Artistas destacados (Figma 286:12580, panel neutro del 286) ---------- */
.mk-featured{margin-top:var(--space-6);padding:var(--space-8);background:var(--surface-media);border:var(--border-hairline) solid var(--border-muted)}
.mk-featured-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}
.mk-featured-heading{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
/* Eyebrow "■ Destacados / Patrocinados": el cuadrado va por CSS (regla DS 9:
   glifos Unicode solo ★ ♡ ♥ → ← ·) */
.mk-featured-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;
  font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase;color:var(--blue-400)}
.mk-featured-eyebrow::before{content:"";width:8px;height:8px;flex:none;background:var(--blue-400)}
.mk-featured-eyebrow-alt{color:var(--blue-200)}
.mk-featured-title{font-family:var(--font-display);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);color:var(--ink);margin:0}
.mk-featured-sub{font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--text-muted);margin:0}
.mk-featured-link{flex:none;font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:var(--meta-m-track);text-transform:uppercase}

/* ---------- Artistas para vos (Figma 286:12794) ---------- */
.mk-foryou{margin-top:var(--space-12)}
.mk-foryou-title{font-family:var(--font-display);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);color:var(--ink);margin:0}
.mk-foryou-sub{font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase;color:var(--text-faint);margin:var(--space-2) 0 0}

/* ---------- Grid de artistas ---------- */
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.mk-card{display:flex;flex-direction:column;cursor:pointer}

/* Media full-bleed con protección inferior (gradiente permitido sobre imagen) */
.mk-card-media{position:relative;aspect-ratio:4 / 5;background:var(--surface-media)}
.mk-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-media-ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;color:var(--text-faint)}
.mk-card-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-4) var(--space-4);background:var(--protection-bottom)}
.mk-card-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--radius-pill);background:var(--yellow-300);color:var(--neutral-500);font-family:var(--font-display);font-size:15px;text-transform:uppercase;overflow:hidden}
.mk-card-id{min-width:0;flex:1}
.mk-card-name{font-family:var(--font-display);font-size:18px;line-height:1.15;color:var(--white);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-card-metarow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  position:absolute;left:0;right:0;bottom:0;padding:0 var(--space-4) var(--space-4)}
.mk-card-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--white);opacity:var(--opacity-subtle);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-card-rating{display:inline-flex;align-items:center;gap:var(--space-2);flex:none;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--white);opacity:var(--opacity-subtle)}
.mk-card-rating [data-wo-icon]{width:10px;height:10px}
/* La meta line vive dentro del gradiente: el overlay reserva su alto */
.mk-card-overlay{padding-bottom:var(--space-10)}

/* Esquina superior de la card: badge Patrocinado + chip de estado apilados
   a la izquierda (sobre el gradiente superior) y corazón a la derecha */
/* Protección superior: mismo gradiente permitido (--protection-bottom) volteado
   con scaleY(-1) — regla DS 12: solo los 2 gradientes de protección, sin rgba sueltos */
.mk-card-topfade{position:absolute;top:0;left:0;right:0;height:60px;background:var(--protection-bottom);transform:scaleY(-1);pointer-events:none}
.mk-card-top{position:absolute;top:var(--space-3);left:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.mk-card-status{display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase;color:var(--white)}
.mk-card-status::before{content:"";width:6px;height:6px;flex:none;border-radius:var(--radius-pill);background:currentColor}
.mk-card-status--available::before{background:var(--system-success)}
.mk-card-status--guest::before{background:var(--blue-400)}
.mk-card-status--booked::before{background:var(--system-error)}
.mk-card-status--travelling::before{background:var(--yellow-300)}
/* Badge "Patrocinado" (cards destacadas, Figma 286:12580) */
.mk-card-sponsored{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);
  background:var(--neutral-500);color:var(--white);
  font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase}
.mk-card-sponsored [data-wo-icon]{width:12px;height:12px}
/* Corazón de favoritos de la card */
.mk-card-fav{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:var(--space-8);height:var(--space-8);padding:0;background:transparent;border:0;border-radius:var(--radius-none);
  color:var(--white);cursor:pointer}
.mk-card-fav [data-wo-icon]{width:18px;height:18px}
.mk-card-fav.is-fav svg{fill:currentColor}

/* ---------- Estado vacío ---------- */
.mk-empty-icon{width:48px;height:48px;color:var(--text-faint)}

/* ---------- Loading overlay ---------- */
.mk-loading-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-10);background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong)}
.mk-loading-box p{margin:0;color:var(--text-body)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .mk-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .mk-drawer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .mk-main{padding-top:var(--space-6)}
  .mk-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .mk-results-bar{align-items:flex-start;flex-direction:column}
  .mk-results-tools{width:100%;justify-content:space-between}
  .mk-clear-btn{margin-left:0}
  .mk-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:thin}
  .mk-filter{flex:none}
  .mk-allfilters-btn{flex:none}
  .mk-hero-top{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .mk-featured{padding:var(--space-5)}
  .mk-featured-head{flex-direction:column;gap:var(--space-3)}
  .mk-drawer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .mk-grid{grid-template-columns:1fr}
  .mk-results-tools{gap:var(--space-3)}
  .mk-seg-btn{padding:var(--space-2) var(--space-3)}
  .mk-filter-menu{min-width:200px;max-width:calc(100vw - var(--space-10))}
}