/**
 * marcas.css — Estilos del módulo Marcas (Fase 28).
 * Todo scoped al container .workspace-marcas para no tocar otros estilos.
 */

/* ── Workspace switcher (dropdown arriba del sidebar) — Fase 73 mejorado ── */
.workspace-switcher {
  position: relative;
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(99,102,241,0.28);
}
.workspace-switcher:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.38); }
.workspace-switcher-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.4px; }
.workspace-switcher-label i.arrow { margin-left: auto; transition: transform .25s; font-size: 11px; opacity: .9; }
.workspace-switcher.open .arrow { transform: rotate(180deg); }

.workspace-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  overflow: hidden;
  z-index: 1000;
  display: none;
  padding: 6px;
}
.workspace-switcher.open .workspace-switcher-menu { display: block; }
.workspace-option {
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  color: #0f172a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  margin-bottom: 4px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.workspace-option:last-child { margin-bottom: 0; }
.workspace-option:hover { background: #f8fafc; }
.workspace-option i { font-size: 16px; color: var(--accent); width: 22px; text-align: center; flex: 0 0 auto; }
.workspace-option > span { flex: 1; min-width: 0; }
.workspace-option.active { background: #eef2ff; color: var(--accent); }
.workspace-option.active::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; color: var(--accent); font-size: 12px; flex: 0 0 auto; }

/* ── Página principal de marcas ── */
.workspace-marcas { padding: 24px; }
.wm-page-header { margin-bottom: 24px; }
.wm-page-title { font-size: 22px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 10px; }
.wm-page-title i { color: var(--accent); }
.wm-page-subtitle { font-size: 13px; color: #64748b; margin-top: 4px; }

/* ── Card registrar marca ── */
.wm-registrar-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all .2s;
}
.wm-registrar-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(99,102,241,.12); border-color: var(--accent); }
.wm-registrar-card .icon { width: 56px; height: 56px; background: var(--accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; }
.wm-registrar-card .text { flex: 1; }
.wm-registrar-card .text b { display: block; font-size: 16px; font-weight: 800; color: #0f172a; }
.wm-registrar-card .text span { font-size: 13px; color: #64748b; }

/* ── Stats + filtros ── */
.wm-stats-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.wm-stats-row input.wm-search { flex: 1; min-width: 260px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 99px; font-size: 13px; background: #fff; font-family: inherit; }
.wm-stats-row input.wm-search:focus { outline: none; border-color: var(--accent); }
.wm-stat-chip { padding: 10px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 99px; font-size: 13px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: #0f172a; }
.wm-stat-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.wm-stat-chip .dot.ok { background: #22c55e; }
.wm-stat-chip .dot.inc { background: #f59e0b; }

/* ── Grid de marcas (Fase 28.8 — rediseño logo grande + iconos glass) ── */
.wm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.wm-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: all .25s ease;
  position: relative;
  cursor: pointer;
  aspect-ratio: 4/5;
}
.wm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(99,102,241,.15);
  border-color: transparent;
}
.wm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--accent);
  z-index: 3;
}

/* Logo MUY prominente — 75% del area */
.wm-card-logo-area {
  position: relative;
  height: 75%;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
.wm-card-logo-area img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
  transition: transform .3s ease;
}
.wm-card:hover .wm-card-logo-area img { transform: scale(1.06); }
.wm-card-logo-placeholder {
  width: 75%;
  aspect-ratio: 1;
  max-width: 180px;
  border-radius: 32px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 14px 40px rgba(99,102,241,.3);
}

/* Info footer — solo nombre grande y centrado */
.wm-card-body {
  height: 25%;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  text-align: center;
}
.wm-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.wm-card .meta {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.wm-card .meta i { margin-right: 4px; color: var(--accent); }
@media (min-width: 1200px) {
  .wm-card h3 { font-size: 22px; }
}
.wm-card .status {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 99px;
  letter-spacing: .5px;
  text-transform: none;
  z-index: 3;
}
.wm-card .status.ok { background: #d1fae5; color: #065f46; }
.wm-card .status.inc { background: #fef3c7; color: #92400e; }

/* Overlay de iconos glass — aparece en hover */
.wm-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  background: rgba(99,102,241,.25);
  backdrop-filter: blur(4px);
}
.wm-card:hover .wm-card-overlay {
  opacity: 1;
  pointer-events: auto;
}
.wm-card-icon-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: all .2s ease;
  transform: scale(.8);
}
.wm-card:hover .wm-card-icon-btn {
  transform: scale(1);
}
.wm-card-icon-btn:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.wm-card-icon-btn.primary {
  background: #10b981;
  color: #fff;
  width: 66px;
  height: 66px;
  font-size: 22px;
}
.wm-card-icon-btn.danger {
  background: rgba(239,68,68,.95);
  color: #fff;
}

/* ── Ficha de trabajo de UNA marca ── */
.wm-ficha-header { background: #fff; border-radius: 16px; padding: 20px 24px; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.wm-ficha-header .back-btn { background: #f1f5f9; border: none; padding: 8px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #334155; font-weight: 600; font-size: 12px; }
.wm-ficha-header .back-btn:hover { background: #e2e8f0; }
.wm-ficha-header .title { font-size: 20px; font-weight: 800; color: #0f172a; flex: 1; }

.wm-modos-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.wm-modo-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; padding: 18px 16px; cursor: pointer; text-align: center; transition: all .2s; }
.wm-modo-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(99,102,241,.15); }
.wm-modo-card .icon { font-size: 28px; color: var(--accent); margin-bottom: 8px; }
.wm-modo-card b { display: block; font-size: 13px; color: #0f172a; margin-bottom: 4px; }
.wm-modo-card span { font-size: 11px; color: #64748b; line-height: 1.4; display: block; }

.wm-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* ── Fase 28.3: Cards pro estilo INTECAP con imagen de fondo ── */
.wm-post-card-pro {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
  transition: all .25s ease;
  min-height: 320px;
}
.wm-post-card-pro:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.wm-post-card-pro .post-bg {
  position: absolute; inset: 0;
  background-color: #0f172a;
}
.wm-post-card-pro .post-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #0f172a;
  z-index: 1;
}
.wm-post-card-pro .post-bg-video-fallback {
  position: absolute; inset: 0;
  background: #1e293b;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #94a3b8;
}
.wm-post-card-pro .post-bg-video-fallback i { font-size: 56px; opacity: .4; }
.wm-post-card-pro .post-bg-video-fallback small { font-size: 11px; opacity: .6; padding: 0 16px; text-align: center; word-break: break-all; }
.wm-post-card-pro .post-video-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0,0,0,.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  z-index: 2;
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: .85;
}
.wm-post-card-pro.has-bg .post-bg-video + .post-glass::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  pointer-events: none;
  z-index: 1;
}
.wm-post-card-pro.has-bg .post-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
}
.wm-post-card-pro .post-glass {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  color: #fff;
}
.wm-post-card-pro:not(.has-bg) .post-glass { color: #0f172a; }
.wm-post-card-pro .post-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wm-post-card-pro .post-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: none;
  letter-spacing: .5px;
  backdrop-filter: blur(10px);
}
.wm-post-card-pro.has-bg .post-badge { background: rgba(255,255,255,.95) !important; }
.wm-post-card-pro .post-badge-chip {
  background: rgba(15,23,42,.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 99px;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wm-post-card-pro .post-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
  word-wrap: break-word;
}
.wm-post-card-pro:not(.has-bg) .post-title { text-shadow: none; }
.wm-post-card-pro .post-meta {
  font-size: 11px;
  opacity: .85;
  margin-bottom: 8px;
}
.wm-post-card-pro .post-actions {
  display: flex;
  gap: 6px;
}
.wm-post-card-pro .post-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform .15s;
}
.wm-post-card-pro .post-btn:hover { transform: scale(1.03); }
.wm-post-card-pro .post-btn-primary {
  background: rgba(255,255,255,.95);
  color: #0f172a;
}
.wm-post-card-pro .post-btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,.85);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.wm-post-card-pro .post-btn-icon:hover { transform: scale(1.1); }
.wm-post-card-pro .post-btn-icon.danger { background: rgba(239,68,68,.9); color: #fff; }

/* ── Fase 28.9: Calendario de publicaciones ── */
.wm-cal-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  flex-wrap: wrap;
}
.wm-cal-label {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  text-transform: capitalize;
  min-width: 180px;
  text-align: center;
}
.wm-cal-view-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
}
.wm-cal-view-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
.wm-cal-view-btn:hover:not(.active) { color: #334155; background: rgba(255,255,255,.6); }
.wm-cal-view-btn.active {
  background: #fff;
  color: var(--accent, #6366f1);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.wm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.wm-cal-weekday {
  background: #f8fafc;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  color: #64748b;
  letter-spacing: .5px;
}
.wm-cal-day {
  background: #fff;
  min-height: 110px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.wm-cal-day:hover { background: #f8fafc; }
.wm-cal-day.fuera-mes { background: #fafbfc; opacity: .4; }
.wm-cal-day.hoy {
  background: #eef2ff;
  box-shadow: inset 0 0 0 2px var(--accent, #6366f1);
}
.wm-cal-day-num {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.wm-cal-day.hoy .wm-cal-day-num { color: var(--accent, #6366f1); }
.wm-cal-post-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(99,102,241,.12);
  color: #4338ca;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all .15s;
}
.wm-cal-post-chip:hover { background: rgba(99,102,241,.22); transform: translateX(2px); }
.wm-cal-post-chip .logo-mini {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 800;
}
.wm-cal-post-chip .logo-mini img { width: 100%; height: 100%; object-fit: cover; }
.wm-cal-post-chip span { overflow: hidden; text-overflow: ellipsis; }
.wm-cal-day-mas {
  font-size: 10px;
  color: #64748b;
  padding: 2px 6px;
  font-weight: 700;
}
.wm-cal-day-crear {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(99,102,241,.15);
  color: #6366f1;
  cursor: pointer;
  font-size: 10px;
  opacity: 0;
  transition: opacity .15s;
}
.wm-cal-day:hover .wm-cal-day-crear { opacity: 1; }
.wm-cal-day-crear:hover { background: var(--accent); color: #fff; transform: scale(1.1); }

/* Vista año: grid 4x3 con mini-calendarios */
.wm-cal-anio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.wm-cal-anio-mes {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all .2s;
}
.wm-cal-anio-mes:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(99,102,241,.1); border-color: #c7d2fe; }
.wm-cal-anio-mes-titulo {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  text-transform: capitalize;
  margin-bottom: 8px;
}
.wm-cal-anio-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10px;
}
.wm-cal-anio-mini-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #64748b;
}
.wm-cal-anio-mini-dia.con-posts {
  background: rgba(99,102,241,.15);
  color: #4338ca;
  font-weight: 800;
}
.wm-cal-anio-mini-dia.hoy {
  background: var(--accent, #6366f1);
  color: #fff;
  font-weight: 800;
}

/* Resumen mes */
.wm-cal-resumen-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e0e7ff;
}
.wm-cal-resumen-item .logo-mini {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}
.wm-cal-resumen-item .logo-mini img { width: 100%; height: 100%; object-fit: cover; }
.wm-cal-resumen-item-nombre { font-size: 13px; font-weight: 700; color: #0f172a; }
.wm-cal-resumen-item-num { font-size: 11px; color: #6366f1; font-weight: 800; }

/* ── Fase 28.7: Botones grandes de marca con logo ── */
.wm-marcas-chips-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.wm-marca-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 99px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  transition: all .2s;
  min-height: 52px;
}
.wm-marca-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99,102,241,.12);
  border-color: #cbd5e1;
}
.wm-marca-chip.active {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(99,102,241,.3);
}
.wm-marca-chip .logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
}
.wm-marca-chip.active .logo { background: rgba(255,255,255,.2); color: #fff; }
.wm-marca-chip .logo img { width: 100%; height: 100%; object-fit: cover; }
.wm-marca-chip .count {
  background: rgba(0,0,0,.08);
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}
.wm-marca-chip.active .count { background: rgba(255,255,255,.25); }
.wm-marca-chip.todas {
  padding: 10px 18px;
}
.wm-marca-chip.todas .logo {
  background: #f1f5f9;
}
.wm-marca-chip.todas.active .logo {
  background: rgba(255,255,255,.25);
}

/* ── Chips de filtro estilo INTECAP ── */
.wm-chips-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}
.wm-chip {
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  color: #334155;
  font-family: inherit;
}
.wm-chip:hover { border-color: #cbd5e1; }
.wm-chip.active { background: var(--accent, #6366f1); color: #fff; border-color: var(--accent, #6366f1); }
.wm-chip .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.wm-post-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; transition: all .2s; }
.wm-post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.wm-post-card .img { aspect-ratio: 1/1; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wm-post-card .img img { width: 100%; height: 100%; object-fit: cover; }
.wm-post-card .body { padding: 12px 14px; }
.wm-post-card h4 { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; margin-bottom: 4px; }
.wm-post-card .meta { font-size: 11px; color: #64748b; margin-bottom: 10px; }
.wm-post-card .estado-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 99px; text-transform: none; letter-spacing: 0; }
.wm-post-card .estado-borrador { background: #f1f5f9; color: #64748b; }
.wm-post-card .estado-revision { background: #fef3c7; color: #92400e; }
.wm-post-card .estado-aprobado { background: #d1fae5; color: #065f46; }
.wm-post-card .actions { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid #f1f5f9; background: #fafbfc; }
.wm-post-card .actions button { flex: 1; padding: 8px 10px; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ── Modal genérico (overlay del módulo marcas) ── */
.wm-modal { position: fixed; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(6px); z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.wm-modal.show { display: flex; }
.wm-modal-content { background: #fff; border-radius: 20px; width: 100%; max-width: 680px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,.3); }
.wm-modal-header { padding: 20px 24px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wm-modal-header .t { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.wm-modal-header .x { background: rgba(255,255,255,.2); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.wm-modal-body { padding: 24px; }
.wm-field { margin-bottom: 16px; }
.wm-field label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.wm-field input, .wm-field textarea, .wm-field select { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; color: #0f172a; }
.wm-field input:focus, .wm-field textarea:focus, .wm-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.wm-field textarea { min-height: 100px; resize: vertical; }
.wm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wm-modal-actions { padding: 16px 24px; background: #fafbfc; border-top: 1px solid #e2e8f0; display: flex; gap: 10px; justify-content: flex-end; }
.wm-btn { padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.wm-btn-primary { background: var(--accent); color: #fff; }
.wm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,.3); }
.wm-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.wm-btn-ghost { background: #f1f5f9; color: #334155; }
.wm-btn-ghost:hover { background: #e2e8f0; }
.wm-btn-success { background: #10b981; color: #fff; }
.wm-btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,.3); }

/* ── Redes checkboxes ── */
.wm-redes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wm-red-check { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; }
.wm-red-check input { width: 16px; height: 16px; }
.wm-red-check.checked { border-color: var(--accent); background: #eef2ff; color: var(--accent); }

/* ── Zona de subida de imágenes ── */
.wm-upload-zone { border: 2px solid #cbd5e1; border-radius: 14px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all .2s; background: #fafbfc; }
.wm-upload-zone:hover { border-color: var(--accent); background: #eef2ff; }
.wm-upload-zone i { font-size: 30px; color: var(--accent); margin-bottom: 8px; }
.wm-upload-zone b { display: block; font-size: 13px; color: #0f172a; margin-bottom: 4px; }
.wm-upload-zone span { font-size: 11px; color: #64748b; }
.wm-upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
.wm-upload-preview .preview { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; position: relative; background: #f1f5f9; border: 1px solid #e2e8f0; }
.wm-upload-preview .preview img, .wm-upload-preview .preview video { width: 100%; height: 100%; object-fit: cover; }
.wm-upload-preview .del { position: absolute; top: 4px; right: 4px; background: rgba(239,68,68,.95); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; }

/* ── Empty states ── */
.wm-empty { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px; text-align: center; color: #64748b; }
.wm-empty i { font-size: 40px; color: #cbd5e1; margin-bottom: 12px; display: block; }
.wm-empty b { display: block; font-size: 16px; color: #0f172a; margin-bottom: 6px; }

/* ── Fase 28.3: Tabs del modal ficha post ── */
.wm-ficha-tab {
  padding: 14px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s;
}
.wm-ficha-tab:hover { color: #334155; background: #eef2ff; }
.wm-ficha-tab.active { color: #6366f1; border-bottom-color: #6366f1; }
.wm-ficha-count {
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 800;
}

/* ── Slider de archivos ── */
.wm-slider-wrap {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wm-slider-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wm-slider-track img, .wm-slider-track video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}
.wm-slider-track .active { display: block; }
.wm-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #0f172a;
  z-index: 3;
  transition: all .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.wm-slider-nav:hover { transform: translateY(-50%) scale(1.1); }
.wm-slider-nav.prev { left: 16px; }
.wm-slider-nav.next { right: 16px; }
.wm-slider-nav:disabled { opacity: .3; cursor: not-allowed; }
.wm-slider-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

/* ── Miniaturas de archivos ── */
.wm-mini {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
}
.wm-mini.active { border-color: #6366f1; transform: scale(1.03); }
.wm-mini img, .wm-mini video { width: 100%; height: 100%; object-fit: cover; }
.wm-mini-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(239,68,68,.9);
  color: #fff;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
  transition: opacity .15s;
}
.wm-mini:hover .wm-mini-delete { opacity: 1; }
/* Fase 65 — botón Reemplazar archivo en miniatura (al lado del eliminar) */
.wm-mini-replace {
  position: absolute;
  top: 4px;
  right: 30px;
  background: rgba(59,130,246,.9);
  color: #fff;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
  transition: opacity .15s;
}
.wm-mini:hover .wm-mini-replace { opacity: 1; }
.wm-mini-type {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 99px;
  text-transform: none;
  font-weight: 700;
}

/* ── Historial timeline ── */
.wm-historial-item {
  background: #f8fafc;
  border-left: 3px solid #6366f1;
  padding: 10px 14px;
  border-radius: 6px;
}
.wm-historial-item .hist-fecha { font-size: 11px; color: #64748b; }
.wm-historial-item .hist-evento { font-size: 13px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.wm-historial-item .hist-detalle { font-size: 12px; color: #334155; margin-top: 4px; }

/* ── Barra de iconos emoji para insertar en texto (Fase 28.2) ── */
.wm-iconos-bar .wm-icon-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
}
.wm-iconos-bar .wm-icon-btn:hover {
  background: #eef2ff;
  border-color: #6366f1;
  transform: scale(1.1);
}

/* ── Tabs de modos de post ── */
.wm-tab-row { display: flex; background: #f1f5f9; border-radius: 12px; padding: 4px; margin-bottom: 16px; gap: 4px; }
.wm-tab { flex: 1; padding: 10px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #64748b; }
.wm-tab:hover { background: rgba(255,255,255,.5); color: #334155; }
.wm-tab.active { background: #fff; color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

@media (max-width: 768px) {
  .wm-modos-row { grid-template-columns: 1fr; }
  .wm-field-row { grid-template-columns: 1fr; }
  .wm-redes-grid { grid-template-columns: repeat(2, 1fr); }
  .wm-grid { grid-template-columns: 1fr; }
}


/* ═══ FASE 28.12 — LIBRERÍA ═══ */
.workspace-marcas .wm-lib-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:2px solid #e2e8f0;padding-bottom:0;margin-top:18px;}
.workspace-marcas .wm-lib-tab{background:none;border:none;padding:10px 16px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;display:inline-flex;align-items:center;gap:8px;transition:.15s;}
.workspace-marcas .wm-lib-tab:hover{color:#334155;}
.workspace-marcas .wm-lib-tab.active{color:#6366f1;border-bottom-color:#6366f1;}
.workspace-marcas .wm-lib-tab .count{background:#eef2ff;color:#6366f1;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;}

.workspace-marcas .wm-lib-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;margin-top:12px;margin-bottom:14px;}
.workspace-marcas .wm-lib-checkall{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#475569;cursor:pointer;}
.workspace-marcas .wm-lib-checkall input{width:18px;height:18px;cursor:pointer;}

.workspace-marcas .wm-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.workspace-marcas .wm-lib-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column;}
.workspace-marcas .wm-lib-card:hover{border-color:#6366f1;box-shadow:0 4px 12px rgba(99,102,241,.12);}
.workspace-marcas .wm-lib-card.selected{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2);}
.workspace-marcas .wm-lib-card.en-uso{border-color:#fecaca;}
.workspace-marcas .wm-lib-card.en-uso.selected{border-color:#dc2626;}

.workspace-marcas .wm-lib-thumb{width:100%;aspect-ratio:1;background:#f1f5f9;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.workspace-marcas .wm-lib-thumb img{width:100%;height:100%;object-fit:cover;}
.workspace-marcas .wm-lib-thumb video{width:100%;height:100%;object-fit:cover;background:#000;}
.workspace-marcas .wm-lib-thumb .icon-placeholder{font-size:38px;color:#cbd5e1;}
.workspace-marcas .wm-lib-card-check{position:absolute;top:8px;left:8px;width:22px;height:22px;cursor:pointer;z-index:2;}

.workspace-marcas .wm-lib-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;text-transform: none;letter-spacing: 0;z-index:2;display:inline-flex;align-items:center;gap:4px;}
.workspace-marcas .wm-lib-badge.activo{background:#fee2e2;color:#dc2626;}
.workspace-marcas .wm-lib-badge.archivado{background:#ddd6fe;color:#6d28d9;}
.workspace-marcas .wm-lib-badge.libre{background:#dcfce7;color:#16a34a;}

.workspace-marcas .wm-lib-body{padding:8px 10px;font-size:11px;color:#475569;background:#fff;}
.workspace-marcas .wm-lib-body .name{font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.workspace-marcas .wm-lib-body .meta{font-size:10px;color:#94a3b8;display:flex;justify-content:space-between;}


/* ═══════════════════════════════════════════════════════════
   FASE 28.15 — Workspace switcher mejorado + Mobile bottom nav
   ═══════════════════════════════════════════════════════════ */

/* Switcher más pulido con ícono separado */
.workspace-switcher {
  margin: 14px 14px 16px;
  padding: 12px 14px;
  background: #6366f1;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(99,102,241,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: visible;
}
.workspace-switcher::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 40%);
  pointer-events: none;
}
.workspace-switcher-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.workspace-switcher-label i:not(.arrow) {
  background: rgba(255,255,255,0.22);
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.workspace-switcher-menu {
  border: 1px solid #e2e8f0;
  padding: 4px;
}
.workspace-option {
  border-radius: 10px;
  border-bottom: none;
  margin-bottom: 2px;
}
.workspace-option:last-child { margin-bottom: 0; }
.workspace-option:hover { background: #f8fafc; }

/* ── MOBILE: bottom nav estilo app (solo workspace marcas) ── */
@media (max-width: 900px) {
  /* Ocultar sidebar completa en móvil cuando marcas está activo */
  body.ws-marcas-active .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  /* Fase 49: aceptar tanto .mobile-open (legacy) como .open (handler global)
     — antes el hamburger en marcas mostraba el overlay sin abrir el sidebar
     porque scripts-init.php toggleaba .open y aquí solo se escuchaba .mobile-open. */
  body.ws-marcas-active .sidebar.mobile-open,
  body.ws-marcas-active .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,0.3);
  }

  /* Fase 49: bottom-nav Marcas — labels cortos en móvil para que no se solapen.
     En desktop se ve el texto largo; en mobile (< 900px) se cambia al span corto. */
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-lbl-d { display: none !important; }
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-lbl-m { display: inline !important; }

  /* Fase 49 — Cuando el sidebar se abre, traer marcas-nav DENTRO del sidebar como
     nav vertical con labels largos. Reemplaza la bottom-nav (es el mismo elemento)
     mientras el menú está abierto. Al cerrar, la bottom-nav vuelve sola. */
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden),
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) {
    position: static !important;
    flex-direction: column !important;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    height: auto !important;
    min-height: auto !important;
    gap: 2px !important;
    z-index: auto !important;
  }
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden) .nav-item,
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) .nav-item {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    gap: 12px !important;
    color: #475569 !important;
    background: transparent !important;
    border-radius: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.3 !important;
  }
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden) .nav-item i,
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) .nav-item i {
    font-size: 16px !important;
    width: 22px;
    text-align: center;
  }
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden) .nav-item.active,
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) .nav-item.active {
    background: #eef2ff !important;
    color: #6366f1 !important;
  }
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden) .nav-lbl-d,
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) .nav-lbl-d { display: inline !important; }
  body.ws-marcas-active .sidebar.open #sidebar-nav-marcas:not(.hidden) .nav-lbl-m,
  body.ws-marcas-active .sidebar.mobile-open #sidebar-nav-marcas:not(.hidden) .nav-lbl-m { display: none !important; }
  body.ws-marcas-active .main-content {
    margin-left: 0 !important;
    padding-bottom: 78px !important; /* espacio para bottom nav */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* El nav-marcas se reubica al bottom de la pantalla */
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 24px rgba(15,23,42,0.08);
    display: flex !important;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0));
    gap: 2px;
    margin: 0;
    z-index: 150;
    height: auto;
    min-height: 66px;
  }
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 8px 2px !important;
    font-size: 10px !important;
    font-weight: 600;
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    border-radius: 10px !important;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
  }
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-item i {
    font-size: 20px !important;
    margin: 0 !important;
    color: #64748b;
  }
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-item.active {
    background: #eef2ff !important;
    color: #6366f1 !important;
  }
  body.ws-marcas-active #sidebar-nav-marcas:not(.hidden) .nav-item.active i {
    color: #6366f1 !important;
  }

  /* Header fijo arriba con gradiente + título + botón hamburguesa */
  body.ws-marcas-active::before {
    content: '🎨  MARCAS';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: #6366f1;
    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-size: 15px;
  }
  body.ws-marcas-active .main-content {
    padding-top: 66px !important;
  }
  body.ws-marcas-active .mobile-toggle {
    display: block !important;
    position: fixed;
    top: 8px; left: 10px;
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 10px !important;
    z-index: 145;
    backdrop-filter: blur(8px);
  }

  /* Ajustes del contenido de marcas en móvil */
  /* Fase 67: gap aumentado de 10 → 14px y mínimo 140 → 160px para que las
     cards no se peguen entre sí y se respiren mejor en pantallas chicas. */
  body.ws-marcas-active .workspace-marcas { padding: 16px 12px !important; }
  body.ws-marcas-active .workspace-marcas .wm-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  body.ws-marcas-active .workspace-marcas .wm-page-title {
    font-size: 18px;
  }
  body.ws-marcas-active .workspace-marcas .wm-stats-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  body.ws-marcas-active .workspace-marcas .wm-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  body.ws-marcas-active .workspace-marcas .wm-modos-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Fase 67: posts-grid también respira más */
  body.ws-marcas-active .workspace-marcas .wm-posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  body.ws-marcas-active .workspace-marcas .wm-modal-content {
    max-width: 96vw !important;
    max-height: 92vh;
    margin: 4vh 2vw;
  }
  body.ws-marcas-active .workspace-marcas .wm-field-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Calendario móvil: cards más pequeñas */
  body.ws-marcas-active .wm-cal-grid {
    gap: 2px;
  }
  body.ws-marcas-active .wm-cal-day {
    min-height: 62px;
    padding: 4px 3px;
    font-size: 10px;
  }
  body.ws-marcas-active .wm-cal-day-num { font-size: 11px; }
  body.ws-marcas-active .wm-cal-post-chip {
    font-size: 9px;
    padding: 1px 3px;
  }
  body.ws-marcas-active .wm-cal-post-chip span { display: none; }
  body.ws-marcas-active .wm-cal-anio-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Librería: grid más compacto */
  body.ws-marcas-active .wm-lib-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }

  /* Botón hamburguesa del sidebar (abre sidebar completo si el usuario lo quiere) */
  body.ws-marcas-active .mobile-toggle {
    display: block !important;
    z-index: 145;
  }
}

/* Tablet / desktop: asegurar que workspace switcher se vea bien */
@media (min-width: 901px) {
  body.ws-marcas-active .sidebar { transform: none; }
}

/* Fase 67: pantallas muy chicas (<420px, ej iPhone SE/mini) — una sola columna
   grande para que las cards de marca y posts se vean bien sin compactarse.
   Override final, después del @media (max-width: 768px) anterior. */
@media (max-width: 420px) {
  body.ws-marcas-active .workspace-marcas .wm-grid,
  body.ws-marcas-active .workspace-marcas .wm-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.ws-marcas-active .workspace-marcas { padding: 14px 10px !important; }
}

/* Fase 49: por defecto (desktop y >900px) el span corto está oculto y el largo visible.
   Las reglas dentro de @media (max-width: 900px) lo invierten para mobile bottom-nav. */
.nav-lbl-m { display: none; }
.nav-lbl-d { display: inline; }


/* ═══════════════════════════════════════════════════════════
   FASE 96 — Mobile Funcional Completo (tabs/chips scroll horizontal)
   ═══════════════════════════════════════════════════════════
   Resuelve: en mobile las tabs (modos de post, librería, calendario) y los
   chips de marcas se envuelven en múltiples filas o se aprietan, dejando
   opciones cortadas o difíciles de tocar. Solución: scroll horizontal con
   scroll-snap (estilo iOS/Android), scrollbar oculto, touch targets ≥44px.
   Patrón unificado aplicado a TODOS los containers que pueden overflow.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Contenedor de tabs/chips con scroll horizontal */
  .workspace-marcas .wm-tab-row,
  .workspace-marcas .wm-lib-tabs,
  .workspace-marcas .wm-cal-view-tabs,
  .workspace-marcas .wm-marcas-chips-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE/Edge legacy */
    padding-bottom: 4px;
    /* Indicador visual sutil de que se puede scrollear */
    background-clip: padding-box;
  }
  .workspace-marcas .wm-tab-row::-webkit-scrollbar,
  .workspace-marcas .wm-lib-tabs::-webkit-scrollbar,
  .workspace-marcas .wm-cal-view-tabs::-webkit-scrollbar,
  .workspace-marcas .wm-marcas-chips-row::-webkit-scrollbar {
    display: none;
  }

  /* Cada tab/chip: ancho según contenido + touch target ≥44px + snap-align */
  .workspace-marcas .wm-tab-row .wm-tab,
  .workspace-marcas .wm-lib-tabs .wm-lib-tab,
  .workspace-marcas .wm-cal-view-tabs .wm-cal-view-btn,
  .workspace-marcas .wm-marcas-chips-row .wm-marca-chip {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-width: max-content;
    min-height: 44px;
    white-space: nowrap;
  }

  /* Tabs de modos de post: padding más cómodo en mobile (eran 10px 14px → 12px 18px) */
  .workspace-marcas .wm-tab-row .wm-tab {
    padding: 12px 18px;
    font-size: 13px;
  }

  /* Tabs de librería: idem */
  .workspace-marcas .wm-lib-tabs .wm-lib-tab {
    padding: 12px 16px;
    font-size: 13px;
  }

  /* Tabs Mes/Semana/Año: con borde redondeado y altura cómoda */
  .workspace-marcas .wm-cal-view-tabs .wm-cal-view-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Chips de marcas: mantienen su altura 52px ya definida pero se aseguran touch */
  .workspace-marcas .wm-marcas-chips-row .wm-marca-chip {
    min-height: 48px;
  }

  /* Search input ocupando todo el ancho disponible */
  .workspace-marcas .wm-stats-row .wm-search {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  /* Page header: tipografía un punto menor para que no overflow */
  .workspace-marcas .wm-page-title { font-size: 18px; }
  .workspace-marcas .wm-page-subtitle { font-size: 12px; }

  /* Botones genéricos: touch target garantizado en mobile */
  .workspace-marcas .wm-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Modal: el body con scroll interno (max-height ya lo cubre el override 96vw/92vh
     en línea 1269, aquí solo aseguramos overflow:auto en wm-modal-body) */
  .workspace-marcas .wm-modal-body {
    max-height: calc(92vh - 130px); /* 92vh modal − header (~70px) − footer actions (~60px) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
  }
  .workspace-marcas .wm-modal-actions {
    padding: 12px 18px;
    flex-wrap: wrap;
  }
  .workspace-marcas .wm-modal-actions .wm-btn {
    flex: 1 1 auto;
    min-width: 100px;
  }
  .workspace-marcas .wm-modal-header {
    padding: 14px 18px;
  }
  .workspace-marcas .wm-modal-header .t {
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workspace-marcas .wm-modal-header .x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }
}

/* Más pequeño aún: mobile chico (iPhone SE etc.) */
@media (max-width: 380px) {
  .workspace-marcas .wm-tab-row .wm-tab {
    padding: 12px 14px;
    font-size: 12px;
  }
  .workspace-marcas .wm-tab-row .wm-tab i {
    margin-right: 4px;
  }
  .workspace-marcas .wm-marcas-chips-row .wm-marca-chip {
    padding: 8px 12px 8px 10px;
    font-size: 12px;
  }
}


/* ═══ Fase 28.16b — Fix dropdown workspace en móvil ═══ */
@media (max-width: 900px) {
  /* En móvil el dropdown empuja el contenido hacia abajo (no se superpone) */
  .workspace-switcher-menu {
    position: static !important;
    margin-top: 6px !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  .workspace-switcher.open .workspace-switcher-menu {
    display: block !important;
  }
  .workspace-option {
    padding: 14px 14px !important;
    font-size: 14px !important;
  }
  /* Sidebar con scroll suave y footer siempre visible */
  .sidebar {
    padding-bottom: 16px !important;
  }
  /* Mejor separación entre items */
  .sidebar-nav .nav-item {
    padding: 12px 14px !important;
    font-size: 14px !important;
    margin-bottom: 2px;
  }
  .nav-section-label {
    padding: 14px 14px 6px !important;
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F102 — Split layout en modal "Crear post" (desktop ≥1024px)
   Izquierda: form + lista archivos. Derecha: preview grande + info.
   Mobile (<1024px): mantiene layout vertical existente.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #wm-modal-post .wm-modal-content { max-width: 1320px !important; }
  #wm-modal-post .wm-modal-body {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(440px, 1.15fr);
    gap: 22px;
    align-items: start;
    max-height: calc(92vh - 130px);
  }
  #wm-modal-post-left { overflow-y: auto; padding-right: 6px; max-height: calc(92vh - 130px); }
  #wm-modal-post-right {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    max-height: calc(92vh - 130px);
    overflow-y: auto;
  }
}
@media (max-width: 1023px) {
  /* En mobile/tablet, el panel derecho va debajo del izquierdo */
  #wm-modal-post-right {
    margin-top: 14px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
  }
}

.wm-preview-large {
  width: 100%;
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  position: relative;
}
.wm-preview-large img,
.wm-preview-large video {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
.wm-preview-empty {
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
}
.wm-preview-empty i { font-size: 44px; opacity: 0.5; display: block; margin-bottom: 12px; }

.wm-preview-info {
  background: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.wm-preview-info .info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}
.wm-preview-info .info-row:last-child { border-bottom: none; }
.wm-preview-info .info-row b { color: #0f172a; font-weight: 600; }
.wm-preview-info .info-row span { color: #64748b; }

/* Pills clicables de archivos (modo manual) */
.wm-upload-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
}
.wm-upload-pill:hover { background: #f1f5f9; border-color: #cbd5e1; }
.wm-upload-pill.active { border-color: #6366f1; background: #eef2ff; box-shadow: 0 2px 6px rgba(99,102,241,0.15); }
.wm-upload-pill-thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8;
}
.wm-upload-pill-thumb img,
.wm-upload-pill-thumb video { width: 100%; height: 100%; object-fit: cover; }
.wm-upload-pill-info { flex: 1; min-width: 0; }
.wm-upload-pill-name {
  font-size: 12px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-upload-pill-meta { font-size: 10px; color: #64748b; margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.wm-upload-pill-meta .estado-tag {
  padding: 1px 6px; border-radius: 99px; font-weight: 700; font-size: 9px; text-transform: none;
}
.wm-upload-pill-meta .estado-tag.subiendo { background: #dbeafe; color: #1e40af; }
.wm-upload-pill-meta .estado-tag.listo    { background: #d1fae5; color: #065f46; }
.wm-upload-pill-meta .estado-tag.error    { background: #fee2e2; color: #991b1b; }
.wm-upload-pill-meta .estado-tag.cancelado{ background: #f1f5f9; color: #64748b; }
.wm-upload-pill-bar {
  height: 3px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-top: 4px;
}
.wm-upload-pill-bar-fill { height: 100%; background: #6366f1; transition: width .2s; }
.wm-upload-pill-quitar {
  border: none; background: transparent; color: #ef4444; cursor: pointer; font-size: 16px; padding: 4px 6px; flex-shrink: 0;
  border-radius: 4px;
}
.wm-upload-pill-quitar:hover { background: #fee2e2; }

/* F102: Marco PNG superpuesto en preview del modal Crear post (modo manual) */
.wm-video-con-marco { position: relative; display: block; width: 100%; line-height: 0; }
.wm-video-con-marco video,
.wm-video-con-marco img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; }
.wm-marco-overlay-preview {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 2 !important;
  object-fit: contain;
  max-height: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   06/08/26 · ELEGIR CÓMO CREAR UN POST — de tarjetones a lista
   ──────────────────────────────────────────────────────────────────────────
   Medido antes de tocar: 5 tarjetas de 121-136px, ícono de 28px al centro y
   texto centrado dentro de un recuadro. En celular eran 1.229px = 1,5 pantallas
   de scroll para elegir entre 5 cosas. Tres anti-patrones a la vez: mega-tiles
   de íconos, todo metido en recuadros y espacio desperdiciado.

   No se quita NADA: mismas 5 opciones, mismos textos, mismos data-modo. Solo
   cambia la forma. El ícono pasa a 17px al servicio del texto, el recuadro se
   va y el orden lo hace la tipografía.

   Va al final de la hoja a propósito: así gana sin tener que pelear con las
   3 reglas que ya redefinían .wm-modos-row en distintos anchos.
   ══════════════════════════════════════════════════════════════════════════ */
body.ws-marcas-active .workspace-marcas .wm-modos-row,
.workspace-marcas .wm-modos-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}

.workspace-marcas .wm-modo-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico titulo" "ico desc";
  column-gap: 11px;
  row-gap: 1px;
  align-items: start;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  box-shadow: none;
  transition: background .18s cubic-bezier(.22,1,.36,1);
}

/* El hover NO mueve el control: solo cambia el fondo. */
.workspace-marcas .wm-modo-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  background: rgba(17, 18, 20, .045);
}
.workspace-marcas .wm-modo-card:active { background: rgba(17, 18, 20, .075); }

.workspace-marcas .wm-modo-card .icon {
  grid-area: ico;
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  width: 20px;
  text-align: center;
}
.workspace-marcas .wm-modo-card b {
  grid-area: titulo;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
.workspace-marcas .wm-modo-card span {
  grid-area: desc;
  font-size: 11.5px;
  line-height: 1.4;
}

/* En pantallas anchas, dos columnas: sigue siendo lista, no tarjetones,
   y no deja media pantalla en blanco. */
@media (min-width: 900px) {
  body.ws-marcas-active .workspace-marcas .wm-modos-row,
  .workspace-marcas .wm-modos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LAS MARCAS SE VEN COMO EN SOCIALGO (launcher de baldosas)
   ──────────────────────────────────────────────────────────────────────────
   Antes: tarjetones de 240px+ en retícula a todo lo ancho, con el logo dentro
   de una caja gris y proporción 4/5. SocialGo usa un LAUNCHER: baldosa de
   110×110 centrada, con el nombre debajo. Medido del original vivo
   (_plantilla/escritorio/marcas.php, que es el que tiene la barrida blanca —
   ⚠ las copias en clientes/ están viejas y todavía se ven moradas).

   Valores calcados del original: baldosa 110×110 r26, borde #e8e8ec, sombra
   0 10px 24px -12px rgba(17,18,20,.14); retícula auto-fit 118-128px,
   gap 26/18, centrada, máx 820px; etiqueta 12.5px, contador 10.5px #6a6c72.
   Los pesos van a 600, no 800/900 como el original: marcas.php de SocialGo
   nunca cargó voz.css y quedó fuera de la regla de "ningún peso pasa de 600".

   NO se quita NADA: los 3 botones (Editar · Medidas · Eliminar) siguen ahí,
   ahora sobre la baldosa; el buscador y los contadores siguen arriba; los
   onclick (wmAbrirFicha / wmEntrarCrearMarca) están intactos.
   Solo repintado por cascada, igual que hizo SocialGo su propia barrida.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas .wm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 128px));
  gap: 26px 18px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}

.workspace-marcas .wm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
  padding: 0;
  box-shadow: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
/* El launcher sí levanta la baldosa al pasar el cursor: es el gesto propio de
   este patrón (no es chrome fijo, que ese nunca se mueve). */
.workspace-marcas .wm-card:hover { transform: translateY(-5px); box-shadow: none; border-color: transparent; }

/* La caja del logo pasa a ser LA BALDOSA */
.workspace-marcas .wm-card-logo-area {
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #e8e8ec;
  box-shadow: 0 10px 24px -12px rgba(17,18,20,.14);
  transition: box-shadow .25s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.workspace-marcas .wm-card:hover .wm-card-logo-area { box-shadow: 0 16px 32px -14px rgba(17,18,20,.22); }

.workspace-marcas .wm-card-logo-area img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 22px;
  filter: none;
}
.workspace-marcas .wm-card:hover .wm-card-logo-area img { transform: none; }

/* Iniciales: el color lo pone el JS por marca (como SocialGo). El fondo del
   degradado viejo se anula con !important porque venía en el atributo style. */
.workspace-marcas .wm-card-logo-placeholder {
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: none !important;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.03em;
}

/* Nombre y contador, debajo de la baldosa */
.workspace-marcas .wm-card-body {
  height: auto;
  padding: 0;
  background: none;
  gap: 3px;
  width: 128px;
}
.workspace-marcas .wm-card-body h3 {
  font-size: 12.5px;
  line-height: 1.2;
  color: #111214;
  margin: 0;
}
.workspace-marcas .wm-card-body .meta {
  font-size: 10.5px;
  color: #6a6c72;
  gap: 5px;
}

/* Las acciones cubren SOLO la baldosa, no el nombre */
.workspace-marcas .wm-card-overlay {
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  border-radius: 26px;
  gap: 6px;
}
.workspace-marcas .wm-card-icon-btn {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

/* La franja de color sobre la tarjeta era decoración del diseño viejo.
   El launcher de SocialGo no la tiene: la baldosa es lo único que se ve. */
.workspace-marcas .wm-card::before { content: none; }

/* ── El launcher también en celular ───────────────────────────────────────
   Una regla vieja ponía la retícula en 1 columna bajo 768px. Con tarjetones
   tenía sentido; con baldosas de 110px dejaba una sola baldosita perdida en
   una fila de 331px. Se mantienen 3 por fila, que es como se ve el launcher
   de SocialGo en un teléfono. */
@media (max-width: 768px) {
  body.ws-marcas-active .workspace-marcas .wm-grid,
  .workspace-marcas .wm-grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 20px 10px;
    max-width: 100%;
  }
  .workspace-marcas .wm-card-body { width: 100%; }
}

/* ── Sin cursor no hay hover: las acciones tienen que verse ───────────────
   Editar · Medidas · Eliminar vivían en una capa que solo aparecía al pasar
   el mouse. En un teléfono eso las dejaba INALCANZABLES — no había forma de
   editar ni borrar una marca desde el celular. En pantallas táctiles la capa
   deja de flotar sobre la baldosa y se acomoda debajo del nombre, siempre a
   la vista. No se quita nada ni se mueve en escritorio. */
@media (hover: none) {
  .workspace-marcas .wm-card-overlay {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    margin-top: 2px;
    gap: 8px;
  }
  .workspace-marcas .wm-card-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
    background: #f3f4f6;
    border: 1px solid #e8e8ec;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LA BARRA DE ABAJO TAMBIÉN EN MARCAS
   ──────────────────────────────────────────────────────────────────────────
   Bug de fondo: en fase30.css TODAS las reglas de la barra móvil están
   escritas `body:not(.ws-marcas-active) …`. En el portal de Marcas la barra
   se sigue dibujando pero sin una sola regla de estilo, así que salían los
   botones grises con `border: 2px outset` — el aspecto por defecto del
   navegador. Se ve exactamente como la reportó el usuario.

   Se le devuelven las MISMAS declaraciones que ya tiene en INTECAP, para que
   sea la misma barra y no una segunda versión que después se desincronice.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.ws-marcas-active .f30-mobile-bottom {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0));
    z-index: 140;
    min-height: 64px;
  }
  body.ws-marcas-active .f30-mobile-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; background: none; border: none;
    color: #64748b; font-size: 10px; font-weight: 600;
    cursor: pointer; transition: color .15s; text-decoration: none; position: relative;
  }
  body.ws-marcas-active .f30-mobile-btn i { font-size: 18px; }
  body.ws-marcas-active .f30-mobile-btn.active { color: var(--accent); }
  body.ws-marcas-active .f30-mobile-btn.fab {
    background: var(--accent); color: #fff; border-radius: 16px;
    margin: -18px 6px 6px; box-shadow: 0 8px 20px rgba(99,102,241,.4); min-width: 56px;
  }
  body.ws-marcas-active .f30-mobile-btn.fab i { font-size: 22px; }
  body.ws-marcas-active .f30-mobile-btn .badge {
    position: absolute; top: 2px; right: 16%;
    background: #ef4444; color: #fff; font-size: 9px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    display: grid; place-items: center; border: 1.5px solid #fff;
  }
  /* La retícula no puede quedar debajo de la barra fija */
  body.ws-marcas-active .workspace-marcas { padding-bottom: 84px; }
}

/* Bajo 420px había una regla con !important que forzaba 1 columna: tenía
   sentido cuando cada marca era un tarjetón de 240px. Con baldosas de 110px
   dejaba una sola perdida en toda la fila. Se necesita !important para
   ganarle (entre dos, gana el más específico; a igual especificidad, el
   último). Misma especificidad y va después. */
@media (max-width: 420px) {
  body.ws-marcas-active .workspace-marcas .wm-grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  }
}

/* En pantallas angostas la columna queda en ~101px: la baldosa se adapta en
   vez de desbordarla. Sigue siendo cuadrada y nunca pasa de los 110px del
   original. */
@media (max-width: 768px) {
  .workspace-marcas .wm-card-logo-area {
    width: 100%;
    max-width: 110px;
    height: auto;
    aspect-ratio: 1;
  }
  .workspace-marcas .wm-card-overlay {
    width: 100%;
    max-width: 110px;
    height: auto;
    aspect-ratio: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · MODAL CENTRADO DE LA MARCA (calcado de SocialGo)
   Medidas del original: modal máx 1040px, alto min(90dvh,700px), radio 24,
   retícula 186px + resto; rail con fondo tinte y borde derecho; avatar 54px
   radio 15; items en columna con ícono arriba y texto abajo.
   Los pesos van a 600 (regla de la casa), no 800/900 como el original.
   ══════════════════════════════════════════════════════════════════════════ */
.wm-ws-backdrop {
  position: fixed; inset: 0; z-index: 160;
  display: none; align-items: center; justify-content: center;
  padding: clamp(10px, 2.5vw, 28px);
  background: rgba(15, 16, 18, .45);
}
.wm-ws-backdrop.abierto { display: flex; }
body.wm-ws-open { overflow: hidden; }

.wm-ws-modal {
  position: relative; width: 100%; max-width: 1040px;
  height: min(90dvh, 700px);
  background: #fff; border-radius: 24px;
  display: grid; grid-template-columns: 186px 1fr;
  overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.5);
  animation: wmWsPop .28s cubic-bezier(.22,1,.36,1);
}
@keyframes wmWsPop { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.wm-rail {
  background: #f7f7f8; border-right: 1px solid #e8e8ec;
  padding: 22px 15px; display: flex; flex-direction: column; min-height: 0;
}
.wm-rail-av {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600; margin: 0 auto 10px;
}
.wm-rail-name { text-align: center; font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; color: #111214; }
.wm-rail-sec { font-size: 10.5px; font-weight: 600; color: #8f9196; margin: 20px 6px 10px; }
.wm-rail-items { display: flex; flex-direction: column; gap: 6px; }

.wm-mitem {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px; border-radius: 14px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 500; color: #6a6c72;
  transition: background .2s cubic-bezier(.22,1,.36,1), color .2s cubic-bezier(.22,1,.36,1);
}
.wm-mitem svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wm-mitem:hover { background: #fff; }
.wm-mitem.act { background: #fff; color: var(--accent); box-shadow: 0 8px 20px -12px rgba(17,18,20,.35); }

.wm-rail-cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 13px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 12px;
  border: none; cursor: pointer;
  transition: filter .18s;
}
.wm-rail-cta:hover { filter: brightness(.93); }
.wm-rail-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.wm-ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wm-ws-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 24px 14px; border-bottom: 1px solid #e8e8ec;
}
.wm-ws-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; color: #111214; margin: 0; }
.wm-ws-sub { font-size: 12.5px; font-weight: 400; color: #6a6c72; margin-top: 2px; }
.wm-ws-x {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: none; color: #6a6c72;
  cursor: pointer; flex-shrink: 0; display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.wm-ws-x:hover { background: #f1f2f4; color: #111214; }
.wm-ws-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.wm-ws-body { padding: 20px 24px; overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.wm-ws-body #wm-crear-paso2 { padding: 0; }
/* Lo que el modal no muestra en cada vista. Se esconde, NO se elimina:
   sigue en el DOM con sus IDs para que nada del resto del JS se rompa. */
.wm-oculto-en-modal { display: none !important; }

/* Celular: el modal ocupa la pantalla y el rail pasa a ser una tira arriba,
   que es como se puede navegar con el pulgar sin perder ninguna opción. */
@media (max-width: 760px) {
  .wm-ws-backdrop { padding: 0; }
  .wm-ws-modal {
    max-width: none; height: 100dvh; border-radius: 0;
    grid-template-columns: 1fr; grid-template-rows: auto auto 1fr;
  }
  .wm-rail {
    flex-direction: row; align-items: center; gap: 10px;
    border-right: 0; border-bottom: 1px solid #e8e8ec;
    padding: 10px 12px; overflow-x: auto;
  }
  .wm-rail-av { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; margin: 0; flex: 0 0 auto; }
  .wm-rail-name { font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
  .wm-rail-sec { display: none; }
  .wm-rail-items { flex-direction: row; gap: 4px; margin-left: auto; }
  .wm-mitem { flex-direction: row; gap: 6px; padding: 8px 10px; font-size: 11.5px; white-space: nowrap; }
  .wm-rail-cta { margin: 0 0 0 4px; height: 34px; padding: 0 12px; flex: 0 0 auto; }
  .wm-ws-body { padding: 16px 14px 28px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LAS MISMAS REGLAS, TAMBIÉN DENTRO DEL MODAL
   ⚠ Al mover #wm-crear-paso2 dentro del modal centrado, deja de estar bajo
   .workspace-marcas y TODAS las reglas escritas con ese ancestro dejan de
   aplicar: los 5 modos volvían a verse como los tarjetones viejos. Se
   repiten acá apuntando a #wm-ws-body. Es la trampa de mover un nodo:
   el markup sobrevive, el CSS que dependía de dónde estaba, no.
   ══════════════════════════════════════════════════════════════════════════ */
06/08/26 · ELEGIR CÓMO CREAR UN POST — de tarjetones a lista ────────────────────────────────────────────────────────────────────────── Medido antes de tocar: 5 tarjetas de 121-136px, ícono de 28px al centro y texto centrado dentro de un recuadro. En celular eran 1.229px = 1, 5 pantallas de scroll para elegir entre 5 cosas. Tres anti-patrones a la vez: mega-tiles de íconos, todo metido en recuadros y espacio desperdiciado. No se quita NADA: mismas 5 opciones, mismos textos, mismos data-modo. Solo cambia la forma. El ícono pasa a 17px al servicio del texto, el recuadro se va y el orden lo hace la tipografía. Va al final de la hoja a propósito: así gana sin tener que pelear con las 3 reglas que ya redefinían .wm-modos-row en distintos anchos. ══════════════════════════════════════════════════════════════════════════ */ #wm-ws-body .wm-modos-row, #wm-ws-body .wm-modos-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}
#wm-ws-body .wm-modo-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico titulo" "ico desc";
  column-gap: 11px;
  row-gap: 1px;
  align-items: start;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  box-shadow: none;
  transition: background .18s cubic-bezier(.22,1,.36,1);
}
/* El hover NO mueve el control: solo cambia el fondo. */ #wm-ws-body .wm-modo-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  background: rgba(17, 18, 20, .045);
}
#wm-ws-body .wm-modo-card:active { background: rgba(17, 18, 20, .075); }
#wm-ws-body .wm-modo-card .icon {
  grid-area: ico;
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  width: 20px;
  text-align: center;
}
#wm-ws-body .wm-modo-card b {
  grid-area: titulo;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
#wm-ws-body .wm-modo-card span {
  grid-area: desc;
  font-size: 11.5px;
  line-height: 1.4;
}
#wm-ws-body .wm-modos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 2px;
  }

/* ── El chrome del portal no puede tapar el modal ──────────────────────────
   El botón de apagar va en z-index 900 y quedaba encima del rail, tapando
   "Posts". Mientras el modal de la marca está abierto, el chrome flotante se
   aparta: no se elimina, vuelve solo al cerrar. La barra de abajo también,
   porque el modal ya ocupa toda la pantalla en celular. */
body.wm-ws-open #gk-logout-btn,
body.wm-ws-open .gk-uni-menu-btn,
body.wm-ws-open .f30-mobile-bottom { display: none !important; }

/* El modal por encima de cualquier chrome que quede */
.wm-ws-backdrop { z-index: 950; }

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LO QUE SE TOMA DEL ESTÁNDAR DE HACIENDA SAN VICENTE
   ──────────────────────────────────────────────────────────────────────────
   Se aplica lo que transfiere a una herramienta de trabajo. NO se traen su
   identidad (terracota, serif Cormorant, botones sin redondear, parallax):
   eso es de un hotel y chocaría con el estándar VIMEDIA que rige acá.

   Lo que sí se trae, y por qué:
   · Nada de valores literales → tokens, para que el tema del cliente mande.
   · Curva y duración únicas de movimiento (180-240ms, cubic-bezier .2 .8 .2 1).
   · Elevación casi imperceptible: sombras suaves, nunca marcadas.
   · Foco SIEMPRE visible: anillo de 2px en el acento con 2px de separación.
     Esto no existía en Marcas — con el teclado no se veía dónde estabas.
   · Respetar prefers-reduced-motion: todo el movimiento se apaga.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas, #wm-ws-backdrop {
  --mk-linea: #e8e8ec;
  --mk-linea2: #d0d1d6;
  --mk-tinta: #111214;
  --mk-tinta2: #6a6c72;
  --mk-tinta3: #8f9196;
  --mk-tinte: #f7f7f8;
  --mk-ease: cubic-bezier(.2,.8,.2,1);
  --mk-dur: 200ms;
  --mk-radio: 12px;
  --mk-elev: 0 10px 24px -12px rgba(17,18,20,.14);
  --mk-elev-alta: 0 16px 32px -14px rgba(17,18,20,.22);
}

/* Una sola curva y una sola duración en todo el módulo */
.workspace-marcas .wm-card,
.workspace-marcas .wm-card-logo-area,
.workspace-marcas .wm-modo-card,
#wm-ws-body .wm-modo-card,
#wm-ws-backdrop .wm-mitem,
#wm-ws-backdrop .wm-rail-cta,
#wm-ws-backdrop .wm-ws-x {
  transition-duration: var(--mk-dur);
  transition-timing-function: var(--mk-ease);
}

/* Foco visible en todo lo que se puede alcanzar con el teclado.
   Se usa :focus-visible para que no aparezca al hacer clic con el mouse. */
.workspace-marcas :is(button, a, input, select, textarea, [tabindex]):focus-visible,
#wm-ws-backdrop :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Las baldosas del launcher son divs con onclick: se les da foco propio */
.workspace-marcas .wm-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--mk-radio);
}

/* Elevación contenida: nunca sombras marcadas */
.workspace-marcas .wm-card-logo-area { box-shadow: var(--mk-elev); }
.workspace-marcas .wm-card:hover .wm-card-logo-area { box-shadow: var(--mk-elev-alta); }

/* Quien pidió menos movimiento, no ve movimiento */
@media (prefers-reduced-motion: reduce) {
  .workspace-marcas *, #wm-ws-backdrop * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .workspace-marcas .wm-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · EL MODAL MANDA: FUERA EL CHROME VIEJO
   ──────────────────────────────────────────────────────────────────────────
   El velo era tenue (.45) y el lateral del portal, la barra de arriba y la
   fecha se TRANSPARENTABAN detrás del modal. SocialGo no tiene lateral: su
   Marcas es una pantalla propia. Mientras el modal de la marca está abierto,
   el chrome se aparta y el velo se cierra. Nada se elimina: vuelve solo al
   cerrar, con su transición.
   ══════════════════════════════════════════════════════════════════════════ */
body.wm-ws-open #sidebar,
body.wm-ws-open #f30-topbar,
body.wm-ws-open #gk-topbar-date,
body.wm-ws-open .f30-notif-btn { opacity: 0; pointer-events: none; }
body.wm-ws-open #sidebar,
body.wm-ws-open #f30-topbar,
body.wm-ws-open #gk-topbar-date,
body.wm-ws-open .f30-notif-btn { transition: opacity .22s cubic-bezier(.2,.8,.2,1); }

.wm-ws-backdrop { background: rgba(12, 13, 15, .82); }

/* ── El botón "Marcas" mide lo que mide su texto ──────────────────────────
   Estaba a todo el ancho del rail (155px). Botón largo = anti-patrón número
   uno del estándar: un botón mide su texto más el respiro. */
#wm-ws-backdrop .wm-rail-cta {
  width: auto;
  min-width: 0;
  align-self: center;
  padding: 0 16px;
  height: 40px;
}
@media (max-width: 760px) {
  #wm-ws-backdrop .wm-rail-cta { align-self: auto; height: 34px; padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · EL LAUNCHER, COMPUESTO COMO EL DE SOCIALGO (pero en blanco)
   ──────────────────────────────────────────────────────────────────────────
   El de SocialGo es una pantalla centrada: hero al medio, baldosas al medio,
   contador al pie. El de NORTE tenía el encabezado y el buscador pegados a la
   izquierda, así que las baldosas quedaban descolgadas.
   ⚠ El fondo se queda BLANCO por orden del usuario — el morado del original
   no se copia.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas #wm-crear-paso1 .wm-page-header,
.workspace-marcas #wm-crear-paso1 > .wm-page-header {
  text-align: center;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}
.workspace-marcas #wm-crear-paso1 .wm-page-title,
.workspace-marcas #wm-crear-paso1 .wm-page-title {
  justify-content: center;
}

/* El buscador y el contador, del mismo ancho que las baldosas */
.workspace-marcas #wm-crear-paso1 .wm-stats-row {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Las dos baldosas del final */
.workspace-marcas .wm-tile-extra { cursor: pointer; }
.workspace-marcas .wm-tile-extra .wm-card-logo-area {
  display: grid;
  place-items: center;
}
.workspace-marcas .wm-tile-extra svg {
  width: 34px; height: 34px;
  stroke: var(--mk-tinta3, #8f9196);
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1));
}
/* "Nueva marca": contorno punteado, como el original */
.workspace-marcas .wm-tile-extra.nueva .wm-card-logo-area {
  border: 2px dashed #c9cbd2;
  box-shadow: none;
}
.workspace-marcas .wm-tile-extra.nueva:hover .wm-card-logo-area { border-color: var(--accent); }
.workspace-marcas .wm-tile-extra:hover svg { stroke: var(--accent); }
/* "Configuración" lleva el acento: es EL sólido del launcher */
.workspace-marcas .wm-tile-extra.config .wm-card-logo-area { background: var(--accent); border-color: transparent; }
.workspace-marcas .wm-tile-extra.config svg { stroke: #fff; }
.workspace-marcas .wm-tile-extra.config:hover svg { stroke: #fff; }

/* Pie con el contador */
.wm-launcher-pie {
  margin: 26px auto 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mk-tinta2, #6a6c72);
}
.wm-launcher-pie b { font-weight: 600; color: var(--mk-tinta, #111214); }
.wm-launcher-pie i {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: #d8d9de; vertical-align: middle; margin: 0 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · MARCAS ES UNA PANTALLA PROPIA (sin lateral ni barra de INTECAP)
   ──────────────────────────────────────────────────────────────────────────
   El lateral y la barra de arriba son del portal de INTECAP: sus 9 íconos
   (Bandeja, Cursos, Registro, Galerías…) no son de Marcas, y el buscador busca
   cursos y solicitudes, no marcas. Encima quedaban DOS barras apiladas más el
   buscador de marcas: tres franjas para llegar a lo mismo.

   Se esconden SOLO dentro de Marcas, y solo después de que todo lo del lateral
   tuvo casa: las 6 secciones son baldosas del launcher y los 3 enlaces del
   portal están en la barra propia. Al volver al escritorio todo reaparece.
   ══════════════════════════════════════════════════════════════════════════ */
body.ws-marcas-active #sidebar,
body.ws-marcas-active #f30-topbar,
body.ws-marcas-active .f30-notif-btn { display: none !important; }
body.ws-marcas-active .main-content,
body.ws-marcas-active #main-content { margin-left: 0 !important; padding-left: 0 !important; }

.wm-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 3vw, 34px) 6px;
  max-width: 1180px; margin: 0 auto;
}
.wm-tb-marca { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--mk-tinta, #111214); }
.wm-tb-marca i { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); display: block; }
.wm-tb-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wm-tb-btn {
  height: 34px; padding: 0 12px; border-radius: 999px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--mk-tinta2, #6a6c72);
  transition: background var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1)), color var(--mk-dur, 200ms) var(--mk-ease);
}
.wm-tb-btn:hover { background: var(--mk-tinte, #f7f7f8); color: var(--mk-tinta, #111214); }

.wm-tb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--mk-linea, #e8e8ec);
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--mk-tinta, #111214);
  cursor: pointer;
  transition: background var(--mk-dur, 200ms) var(--mk-ease), border-color var(--mk-dur, 200ms) var(--mk-ease);
}
.wm-tb-cta:hover { background: var(--mk-tinte, #f7f7f8); border-color: #a2a4aa; }
.wm-tb-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* El buscador de marcas deja de ser una barra larga */
.workspace-marcas #wm-crear-paso1 .wm-search,
.workspace-marcas #wm-crear-paso1 .wm-stats-row .wm-search { max-width: 420px; }

/* Las baldosas de sección se distinguen de las marcas: sin logo, ícono al centro */
.workspace-marcas .wm-tile-extra.seccion .wm-card-logo-area { background: var(--mk-tinte, #f7f7f8); }
.workspace-marcas .wm-tile-extra.seccion svg { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .wm-topbar { padding: 12px 14px 4px; flex-wrap: wrap; }
  .wm-tb-acc { gap: 4px; }
  .wm-tb-btn { padding: 0 9px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LAS MARCAS A TODO EL ANCHO · CONFIGURACIÓN ARRIBA
   ──────────────────────────────────────────────────────────────────────────
   Tres órdenes del usuario: las marcas se reparten a lo ancho (no en una
   columna centrada de 820px), el escritorio muestra SOLO marcas, y todo lo
   demás vive dentro del engranaje de arriba.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas .wm-grid {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 26px 14px;
  justify-content: stretch;
  padding: 0 clamp(16px, 3vw, 34px);
}
@media (min-width: 900px) {
  body.ws-marcas-active .workspace-marcas .wm-grid,
  .workspace-marcas .wm-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}
/* El buscador acompaña el ancho nuevo */
.workspace-marcas #wm-crear-paso1 .wm-stats-row,
.workspace-marcas #wm-crear-paso1 .wm-stats-row {
  max-width: none;
  padding: 0 clamp(16px, 3vw, 34px);
}
.wm-launcher-pie { padding: 0 clamp(16px, 3vw, 34px); }

/* ── El engranaje y su menú ─────────────────────────────────────────────── */
.wm-tb-menu-wrap { position: relative; }
.wm-tb-eng {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--mk-linea, #e8e8ec);
  color: var(--mk-tinta2, #6a6c72); cursor: pointer;
  transition: background var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1)),
              color var(--mk-dur, 200ms) var(--mk-ease);
}
.wm-tb-eng:hover { background: var(--mk-tinte, #f7f7f8); color: var(--mk-tinta, #111214); }
.wm-tb-eng svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.wm-tb-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 208px; padding: 6px;
  background: #fff; border: 1px solid var(--mk-linea, #e8e8ec); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(17,18,20,.28);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1)),
              transform var(--mk-dur, 200ms) var(--mk-ease), visibility var(--mk-dur, 200ms);
}
.wm-tb-menu.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
.wm-tb-menu button {
  text-align: left; height: 36px; padding: 0 12px; border-radius: 9px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--mk-tinta, #111214);
  transition: background var(--mk-dur, 200ms) var(--mk-ease);
}
.wm-tb-menu button:hover { background: var(--mk-tinte, #f7f7f8); }
.wm-tb-sep { height: 1px; background: var(--mk-linea, #e8e8ec); margin: 5px 8px; }

/* 07/08/26 · Todo vive dentro del engranaje: arriba solo la marca y el botón.
   "Cerrar sesión" va al final y separado — es la salida, no una opción más,
   y no debe quedar a un toque de distancia de las de navegar. */
.wm-topbar .wm-tb-cta { display: none; }
.wm-tb-menu .wm-tb-salir { color: #b4231f; }
.wm-tb-menu .wm-tb-salir:hover { background: #fdecec; }

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · EL ENGRANAJE OCUPA EL LUGAR DEL BOTÓN DE APAGAR (solo en Marcas)
   ──────────────────────────────────────────────────────────────────────────
   ⚠ NO se elimina ninguna función. El botón de apagar sigue existiendo, con su
   manejador intacto; dentro de Marcas deja de estar VISIBLE y su acción vive
   en el engranaje, hasta abajo ("Cerrar sesión"). Fuera de Marcas —escritorio
   y portales de centros— todo queda exactamente igual.

   El engranaje toma su sitio y su forma: círculo blanco de 44px, arriba a la
   derecha, con el mismo borde y la misma sombra, para que la esquina no cambie
   de aspecto al entrar a Marcas.
   ══════════════════════════════════════════════════════════════════════════ */
body.ws-marcas-active #gk-logout-btn {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.ws-marcas-active .wm-tb-menu-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 901;
}
body.ws-marcas-active .wm-tb-eng {
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid #e3e4e7;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
body.ws-marcas-active .wm-tb-eng svg { width: 19px; height: 19px; }
body.ws-marcas-active .wm-tb-menu { top: calc(100% + 10px); }

/* Sin el bloque de marca, el encabezado ya no necesita repartir a los lados */
body.ws-marcas-active .wm-topbar { justify-content: flex-end; min-height: 0; padding-top: 0; padding-bottom: 0; }

/* ── "Crear nuevo post" con el estilo del escritorio (VIMEDIA + Buscar) ──
   Medido del original: título 34px/600, espaciado -1.02px; caja del buscador
   680×60, radio 18, blanca con borde #d8dce3 y sombra 0 10px 30px .07.
   Los textos NO se tocan. */
.workspace-marcas #wm-section-crear > .wm-page-header { margin-top: 34px; margin-bottom: 22px; }
.workspace-marcas #wm-section-crear > .wm-page-header .wm-page-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.02px;
  color: var(--mk-tinta, #111214);
  line-height: 1.1;
}
.workspace-marcas #wm-crear-paso1 .wm-page-title i,
.workspace-marcas #wm-crear-paso1 .wm-page-title svg { display: none; }
.workspace-marcas #wm-crear-paso1 .wm-page-subtitle {
  font-size: 13px; font-weight: 400; margin-top: 8px;
}

.workspace-marcas #wm-section-crear .wm-stats-row {
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}
.workspace-marcas #wm-section-crear .wm-stats-row .wm-search {
  width: 680px; max-width: 100%;
  height: 60px;
  padding: 0 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #d8dce3;
  box-shadow: 0 10px 30px rgba(25,27,36,.07);
  font-size: 16px;
  font-weight: 400;
}
.workspace-marcas #wm-crear-paso1 .wm-stats-row .wm-search:focus {
  border-color: #b9bfc9;
  box-shadow: 0 10px 30px rgba(25,27,36,.10);
}
@media (max-width: 760px) {
  .workspace-marcas #wm-crear-paso1 .wm-page-title { font-size: 26px; }
  .workspace-marcas #wm-crear-paso1 .wm-stats-row .wm-search { height: 52px; font-size: 15px; border-radius: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · CORRECCIÓN — el encabezado de Marcas como el del escritorio
   ──────────────────────────────────────────────────────────────────────────
   Tres cosas impedían que entrara, y ninguna era obvia:
   1. El encabezado NO es hijo directo de #wm-section-crear: cuelga de
      #wm-crear-paso1. El selector con ">" no encontraba nada.
   2. El ancho de 680px lo anulaba `flex: 1 1 0%` de `.wm-stats-row
      input.wm-search`: con flex-basis 0 y grow 1, el campo se estira y el
      width no se ve. Hay que apagar el flex.
   3. El radio lo gana `.main-content input[type=text]` con !important desde
      app.css y modern.css. Se necesita !important y más especificidad.
   ══════════════════════════════════════════════════════════════════════════ */
/* Márgenes laterales AUTO: escribir `margin: 34px 0` pisaba el centrado que
   venía de antes y mandaba el título a la izquierda. */
.workspace-marcas #wm-crear-paso1 > .wm-page-header {
  margin: 34px auto 22px;
  text-align: center;
  max-width: 65ch;
}

.workspace-marcas #wm-crear-paso1 .wm-page-header .wm-page-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.02px;
  line-height: 1.1;
  color: var(--mk-tinta, #111214);
}

.workspace-marcas #wm-crear-paso1 .wm-stats-row input.wm-search {
  flex: 0 0 auto;
  width: 400px;
  max-width: 100%;
  height: 50px;
  padding: 0 18px;
  border-radius: 18px !important;
  background: #fff;
  border: 1px solid #d8dce3;
  box-shadow: 0 10px 30px rgba(25,27,36,.07);
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 760px) {
  .workspace-marcas #wm-crear-paso1 .wm-page-header .wm-page-title { font-size: 26px; }
  .workspace-marcas #wm-crear-paso1 .wm-stats-row input.wm-search {
    height: 52px; font-size: 15px; border-radius: 16px !important; width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · EL ESCRITORIO DE MARCAS, IGUAL AL DE INTECAP
   ──────────────────────────────────────────────────────────────────────────
   Referencia medida en vivo (1600px): contenedor centrado, buscador radio 18
   y la fila de accesos debajo. Acá: donde el original dice VIMEDIA va
   "+ Crear nuevo post" (con su ícono), y donde están Bandeja/Calendario/
   Galerías van los logos de las marcas.
   El contador "12 marcas" se quita de la vista — el mismo dato ya está en el
   pie ("12 marcas · 63 posts"), así que no se pierde, deja de repetirse.
   ══════════════════════════════════════════════════════════════════════════ */

/* Todo el escritorio de Marcas en una columna centrada */
.workspace-marcas #wm-crear-paso1 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px);
}

/* Título: centrado, grande, CON su ícono + (vuelve a verse) */
.workspace-marcas #wm-crear-paso1 > .wm-page-header {
  margin: 8vh auto 26px;
  text-align: center;
  max-width: none;
}
.workspace-marcas #wm-crear-paso1 .wm-page-header .wm-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.02px;
  line-height: 1.1;
}
.workspace-marcas #wm-crear-paso1 .wm-page-title i,
.workspace-marcas #wm-crear-paso1 .wm-page-title svg {
  display: inline-flex;
  font-size: 22px;
}

/* Buscador centrado. Se mantiene corto por pedido del usuario: el del
   escritorio mide 680 porque busca en todo el sistema; este filtra marcas. */
.workspace-marcas #wm-crear-paso1 .wm-stats-row {
  justify-content: center;
  margin-bottom: 40px;
  padding: 0;
}
.workspace-marcas #wm-crear-paso1 .wm-stats-row input.wm-search {
  flex: 0 0 auto;
  width: 440px;
  max-width: 100%;
  height: 54px;
  padding: 0 20px;
  border-radius: 18px !important;
  background: #fff;
  border: 1px solid #d8dce3;
  box-shadow: 0 10px 30px rgba(25,27,36,.07);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
}

/* El contador de la fila se va: ya vive en el pie */
.workspace-marcas #wm-crear-paso1 .wm-stats-row .wm-stat-chip { display: none; }

/* Los logos de las marcas ocupan el lugar de los accesos rápidos */
.workspace-marcas #wm-crear-paso1 .wm-grid {
  max-width: none;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 24px 12px;
}
.wm-launcher-pie { padding: 0; }

@media (max-width: 760px) {
  .workspace-marcas #wm-crear-paso1 > .wm-page-header { margin-top: 4vh; }
  .workspace-marcas #wm-crear-paso1 .wm-page-header .wm-page-title { font-size: 26px; gap: 10px; }
  .workspace-marcas #wm-crear-paso1 .wm-stats-row input.wm-search { width: 100%; height: 50px; border-radius: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · BARRIDO: LAS 5 SECCIONES HERMANAS AL MISMO PATRÓN
   ──────────────────────────────────────────────────────────────────────────
   Medido: Configurar, Calendario, Aprobados, Archivados y Librería seguían con
   el estilo viejo — título de 22px pegado a la izquierda y buscadores de
   1020-1520px con radio 9, mientras el escritorio ya usaba título centrado y
   caja de radio 18. El estándar pide barrer el fix en todos los paneles
   hermanos: si dos pantallas del mismo módulo no se parecen, es un error.

   Solo repintado: no se mueve, quita ni renombra ningún control.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas .wm-section > .wm-page-header,
.workspace-marcas .wm-section > div > .wm-page-header {
  text-align: center;
  margin: 30px auto 20px;
}
.workspace-marcas .wm-section .wm-page-title {
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.6px;
  line-height: 1.15;
}
.workspace-marcas .wm-section .wm-page-subtitle {
  font-size: 13px;
  font-weight: 400;
  margin-top: 6px;
}

/* Todos los buscadores del módulo, con la misma caja */
.workspace-marcas .wm-section .wm-stats-row { justify-content: center; }
.workspace-marcas .wm-section input.wm-search {
  flex: 0 0 auto;
  width: 440px;
  max-width: 100%;
  height: 50px;
  padding: 0 20px;
  border-radius: 18px !important;
  background: #fff;
  border: 1px solid #d8dce3;
  box-shadow: 0 10px 30px rgba(25,27,36,.07);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
}

/* ── "Registrar Nueva Marca" dejaba de ser un botón: era una franja de 1520px
   con un mega-ícono azul. Tres anti-patrones juntos (botón largo, mega-tile,
   recuadro innecesario). Pasa a medir lo que mide su texto. ── */
.workspace-marcas .wm-registrar-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 0 18px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent);
  border: 0;
  box-shadow: none;
  cursor: pointer;
}
.workspace-marcas .wm-registrar-card .icon {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-size: 14px;
  color: #fff;
  display: inline-flex;
}
.workspace-marcas .wm-registrar-card .text { display: flex; align-items: baseline; gap: 8px; }
.workspace-marcas .wm-registrar-card .text b {
  font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
}
/* ⚠ La descripción NO va dentro del botón: un botón mide lo que mide su texto,
   y meterle una explicación adentro es lo que lo estiraba a 398px. El texto no
   se borra —sigue en el sitio— pero deja de verse ahí: la propia sección ya
   dice arriba para qué sirve ("Registra marcas clientes, define sus medidas…"),
   así que además dejaba de cumplir la regla de no repetir lo mismo dos veces. */
.workspace-marcas .wm-registrar-card .text span { display: none; }
/* ⚠ `display:flex` en un elemento de bloque lo estira a todo el ancho: era lo
   que dejaba el botón en 1520px. `width: fit-content` lo devuelve a la medida
   de su contenido y los márgenes automáticos lo centran. */
.workspace-marcas .wm-registrar-card {
  display: flex;
  width: fit-content;
}

/* Los chips de contador, centrados y sin repetir el aire de antes */
.workspace-marcas .wm-section .wm-stats-row { flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

@media (max-width: 760px) {
  .workspace-marcas .wm-section .wm-page-title { font-size: 21px; }
  .workspace-marcas .wm-section input.wm-search { width: 100%; height: 46px; border-radius: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · ÍCONOS AL SERVICIO DEL TEXTO (nada de mega-íconos)
   ──────────────────────────────────────────────────────────────────────────
   Medido: círculo de 58px con un "+" de 24px sobre cada marca —y en VERDE,
   que además rompe la regla de un solo acento—, íconos de 26px en los títulos
   de sección y de 34px en las baldosas de acción. El estándar pide 16-20px
   inline, al servicio del texto.
   ⚠ El de 58px trae `style="width:72px..."` en el atributo, así que necesita
   !important: una regla normal no le gana a un estilo en línea.
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-marcas .wm-card-icon-btn.primary {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
  background: var(--accent) !important;
  color: #fff !important;
}
.workspace-marcas .wm-card-icon-btn.primary i { font-size: 13px !important; }

/* Íconos de los títulos de sección: acompañan, no gritan */
.workspace-marcas .wm-page-title i,
.workspace-marcas .wm-page-title svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* Baldosas de acción del launcher */
.workspace-marcas .wm-tile-extra svg { width: 22px; height: 22px; }
.workspace-marcas .wm-tile-extra.seccion svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · LOS 6 MODALES AL ESTILO NUEVO
   ──────────────────────────────────────────────────────────────────────────
   Medido en los 6 (marca, post, medidas, ficha, aprobar, reemplazar):
   · cabecera azul sólida en todos — franja de color, superficie no plana
   · VERDE rgb(16,185,129) como segundo sólido en 5 botones (Guardar post,
     Aprobar directo, Subir y reemplazar, WhatsApp) → rompe el un-acento
   · rosa sólido en "Quitar"

   ⚠ Los modales cuelgan del BODY, no de #workspace-marcas: un selector con ese
   ancestro no los alcanza (ya me pasó con el paso 2 movido al modal). Se usan
   las clases propias `.wm-modal…`, que solo existen en este módulo.
   Solo repintado: ni un control se mueve, renombra ni quita.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera: superficie plana, título en tinta ── */
.wm-modal .wm-modal-header {
  background: #fff;
  color: var(--mk-tinta, #111214);
  border-bottom: 1px solid var(--mk-linea, #e8e8ec);
}
.wm-modal .wm-modal-header,
.wm-modal .wm-modal-header * { color: var(--mk-tinta, #111214); }
.wm-modal .wm-modal-header [id$="-titulo"],
.wm-modal .wm-modal-header h2,
.wm-modal .wm-modal-header h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -.3px;
}
/* Cerrar: círculo fantasma en vez de botón sobre color */
.wm-modal .wm-modal-header button {
  background: transparent;
  border: 0;
  border-radius: 50%;
  width: 36px; height: 36px;
  transition: background var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1));
}
.wm-modal .wm-modal-header button:hover { background: var(--mk-tinte, #f7f7f8); }

/* ── UN acento: guardar / aprobar / subir usan el color del tema ── */
.wm-modal .wm-btn-success,
.wm-btn.wm-btn-success {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wm-modal .wm-btn-success:hover, .wm-btn.wm-btn-success:hover { filter: brightness(.93); }

/* ── Destructivos: fantasma con texto rojo, no un bloque rosa ── */
.wm-modal .wm-btn-danger,
.wm-modal button[onclick*="Quitar"],
.wm-modal button[onclick*="quitar"] {
  background: transparent;
  color: #b4231f;
  border: 1px solid #f0c9c7;
}
.wm-modal .wm-btn-danger:hover,
.wm-modal button[onclick*="Quitar"]:hover,
.wm-modal button[onclick*="quitar"]:hover { background: #fdecec; }

/* ── WhatsApp: su verde SOLO en el ícono, nunca en el botón entero ── */
.wm-modal button[onclick*="whatsapp"], .wm-modal button[onclick*="WhatsApp"],
.wm-modal a[href*="wa.me"] {
  background: #fff;
  color: var(--mk-tinta, #111214);
  border: 1px solid var(--mk-linea, #e8e8ec);
}
.wm-modal button[onclick*="whatsapp"] i, .wm-modal button[onclick*="WhatsApp"] i,
.wm-modal a[href*="wa.me"] i { color: #25d366; }

/* El botón "Quitar" del logo trae el rosa en el atributo style
   (`background:#fee2e2`), así que una regla normal no le gana: necesita
   !important. Queda fantasma con texto rojo, como los demás destructivos. */
#wm-marca-logo-btn-quitar {
  background: transparent !important;
  color: #b4231f !important;
  border: 1px solid #f0c9c7 !important;
}
#wm-marca-logo-btn-quitar:hover { background: #fdecec !important; }

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · EL SELECTOR DE COLOR NO ES UN BOTÓN LARGO
   ──────────────────────────────────────────────────────────────────────────
   Medido: 120×44 con relleno de 10/14 — una caja alargada con una franja de
   color adentro, que se lee como un botón largo. Un color se elige tocando
   el color, no una barra: pasa a ser una muestra cuadrada de 44×44 con el
   color a sangre y esquinas redondeadas.
   Aplica a los inputs de color del módulo y del panel, para que sean iguales.
   ══════════════════════════════════════════════════════════════════════════ */
input[type="color"]#wm-marca-color,
input[type="color"]#wm-post-ft-color,
input[type="color"]#ia-color-picker,
input[type="color"]#cfg-banner-bg,
input[type="color"]#cfg-banner-fg {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--mk-linea, #e8e8ec);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1));
}
input[type="color"]#wm-marca-color:hover,
input[type="color"]#wm-post-ft-color:hover,
input[type="color"]#ia-color-picker:hover,
input[type="color"]#cfg-banner-bg:hover,
input[type="color"]#cfg-banner-fg:hover { border-color: #a2a4aa; }

/* El color llena la muestra: sin marco interno ni relleno del navegador */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 11px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   07/08/26 · NI COLORES LAVADOS NI ÍCONOS ENCERRADOS EN CUADROS
   ──────────────────────────────────────────────────────────────────────────
   Medido: "Medidas y marcos" con fondo lavanda #eef2ff y borde #c7d2fe —un
   tinte lavado—, "Quitar" convertido por mí en una caja rosa, y los 21 emojis
   del picker cada uno dentro de su propio cuadro con borde.

   El estándar: UN sólido por pantalla (el acento), el resto **outline neutro
   con texto**; nada de tintes lavados; y los íconos no van encerrados en
   cajas. El rojo del destructivo vive en la LETRA y el ícono, no en el fondo.
   ══════════════════════════════════════════════════════════════════════════ */

/* Destructivos: outline neutro, el rojo solo en el texto */
.wm-modal .wm-btn-danger,
.wm-modal button[onclick*="Quitar"],
.wm-modal button[onclick*="quitar"],
#wm-marca-logo-btn-quitar {
  background: transparent !important;
  color: #b4231f !important;
  border: 1px solid var(--mk-linea, #e8e8ec) !important;
}
.wm-modal .wm-btn-danger:hover,
.wm-modal button[onclick*="Quitar"]:hover,
.wm-modal button[onclick*="quitar"]:hover,
#wm-marca-logo-btn-quitar:hover {
  background: var(--mk-tinte, #f7f7f8) !important;
  border-color: #d0d1d6 !important;
}

/* Secundarios: fuera el tinte lavanda, outline neutro */
.wm-modal .wm-btn-ghost,
#workspace-marcas .wm-btn-ghost {
  background: #fff;
  color: var(--mk-tinta, #111214);
  border: 1px solid var(--mk-linea, #e8e8ec);
}
.wm-modal .wm-btn-ghost:hover,
#workspace-marcas .wm-btn-ghost:hover {
  background: var(--mk-tinte, #f7f7f8);
  border-color: #a2a4aa;
}

/* El picker de emojis: sin cuadros. El emoji se sostiene solo; el fondo
   aparece únicamente al pasar el cursor, para saber cuál se va a tocar. */
.wm-icon-btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transition: background var(--mk-dur, 200ms) var(--mk-ease, cubic-bezier(.2,.8,.2,1));
}
.wm-icon-btn:hover { background: var(--mk-tinte, #f7f7f8) !important; }