/* ==========================================================================
   MADLAB CUPONHUB - DESIGN SYSTEM & DASHBOARDS
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS & BASE SETTINGS
   ========================================================================== */
.mcp-wrapper {
  --mcp-bg: #f4f5f0;
  --mcp-surface: #ffffff;
  --mcp-surface-2: #fafaf6;
  --mcp-ink: #0e0f0c;
  --mcp-ink-2: #3a3d36;
  --mcp-muted: #8a8f84;
  --mcp-line: #e7e8e0;
  --mcp-accent: #d6ff3a; /* lime pop */
  --mcp-accent-ink: #0e0f0c;
  --mcp-primary: #0e0f0c;
  --mcp-primary-ink: #ffffff;
  --mcp-good: #22a06b;
  --mcp-warn: #e8a13a;
  --mcp-radius: 20px;
  --mcp-radius-sm: 12px;
  --mcp-shadow-sm: 0 1px 2px rgba(20,20,20,.04), 0 1px 1px rgba(20,20,20,.03);
  --mcp-shadow: 0 10px 30px -18px rgba(20,20,20,.25);

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--mcp-bg);
  color: var(--mcp-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

.mcp-wrapper h1, 
.mcp-wrapper h2, 
.mcp-wrapper h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif; 
  margin: 0; 
  letter-spacing: -.02em;
}

.mcp-wrapper button {
  font-family: inherit; 
  cursor: pointer; 
  border: 0; 
  background: none; 
  color: inherit;
}

/* ==========================================================================
   2. GLOBAL LAYOUT (Top Navigation & Header)
   ========================================================================== */
   .mcp-topbar {
    display: flex; 
    align-items: center; 
    gap: 16px; /* Reducido un poco para dar respiro */
    padding: 12px 18px;
    background: var(--mcp-surface);
    border: 1px solid var(--mcp-line);
    border-radius: 999px; 
    box-shadow: var(--mcp-shadow-sm);
    margin-bottom: 28px;
    flex-wrap: wrap; /* Permite que los elementos bajen si no caben */
}

.mcp-topbar-spacer {
    flex: 1;
}

.mcp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcp-brand { display: flex; align-items: center; gap: 10px; padding-right: 18px; border-right: 1px solid var(--mcp-line); }
.mcp-brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--mcp-primary); color: var(--mcp-accent);
  display: grid; place-items: center; font-size: 18px;
}
.mcp-brand-name { font-family: 'Space Grotesk'; font-weight: 700; font-size: 16px; }

.mcp-topnav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.mcp-topnav-btn {
  padding: 9px 16px; border-radius: 999px; color: var(--mcp-ink-2);
  font-weight: 500; font-size: 13.5px; transition: .2s;
}
.mcp-topnav-btn:hover { background: var(--mcp-surface-2); }
.mcp-topnav-btn.active { background: var(--mcp-primary); color: var(--mcp-primary-ink); }

.mcp-top-actions { display: flex; align-items: center; gap: 12px; }
.mcp-icon-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--mcp-surface-2); border: 1px solid var(--mcp-line);
  display: grid; place-items: center; color: var(--mcp-ink-2);
}
.mcp-icon-btn svg { width: 18px; height: 18px; }
.mcp-icon-btn .mcp-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--mcp-accent); border: 2px solid var(--mcp-surface); }

.mcp-user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; background: var(--mcp-surface-2); border: 1px solid var(--mcp-line); border-radius: 999px; }

.mcp-avatar { 
  width: 34px; 
  height: 34px; 
  border-radius: 50%; 
  background: linear-gradient(135deg,#0e0f0c,#3a3d36); 
  color: var(--mcp-accent); 
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700; 
  font-size: 12px; 
}

.mcp-user-meta { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.15; 
}

.mcp-user-name { font-weight: 600; font-size: 13px; }
.mcp-user-role { color: var(--mcp-muted); font-size: 11px; }

.mcp-logout-btn {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  text-decoration: none; 
  color: var(--mcp-muted-text); 
  font-size: 14px;
  transition: color 0.3s ease;
}

.mcp-logout-btn:hover {
  color: var(--danger, #ff4d4d);
}

.mcp-logout-btn svg { 
  flex-shrink: 0; 
}

/* ==========================================================================
   3. UI COMPONENTS (Reusable Elements)
   ========================================================================== */

/* Buttons */
.mcp-btn { white-space: nowrap; flex: 1; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 12.5px; text-align: center; transition: .2s; border: 1px solid transparent; }
.mcp-btn-primary { background: var(--mcp-primary) !important; color: var(--mcp-primary-ink) !important; border-radius: 8px !important; }
.mcp-btn-primary:hover { background: #222 !important; color: #d6ff3a !important}
.mcp-btn-ghost { white-space: nowrap; background: transparent; border-color: var(--mcp-line); color: var(--mcp-ink); }
.mcp-btn-ghost:hover { background: var(--mcp-surface-2); }

.mcp-btn-ghost-event { display:flex; justify-content: center; align-items: center; white-space: nowrap; border-color: var(--mcp-line); color: var(--mcp-ink); }
.mcp-btn-ghost-event:hover { background: var(--mcp-primary) !important;  color: var(--mcp-accent) !important;  }

/* Tags & Chips */
.mcp-tag { padding: 6px 12px; border-radius: 999px; background: var(--mcp-surface-2); border: 1px solid var(--mcp-line); font-size: 12px; color: var(--mcp-ink-2); }
.mcp-tag-accent { background: var(--mcp-accent); border-color: var(--mcp-accent); color: var(--mcp-accent-ink); font-weight: 600; }

.mcp-chip { padding: 8px 14px; border-radius: 999px; background: var(--mcp-surface); border: 1px solid var(--mcp-line); font-size: 12.5px; color: var(--mcp-ink-2); font-weight: 500; }
.mcp-chip.active { background: var(--mcp-primary); color: var(--mcp-primary-ink); border-color: var(--mcp-primary); }

/* Panels */
.mcp-panel { background: var(--mcp-surface); border: 1px solid var(--mcp-line); border-radius: var(--mcp-radius); padding: 22px; box-shadow: var(--mcp-shadow-sm); margin-bottom:20px;}
.mcp-panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; }
.mcp-panel-head h2 { font-size: 18px; }
.mcp-muted-text { color: var(--mcp-muted); margin: 4px 0 0; font-size: 12.5px; }

/* Segment Controls */
.mcp-seg { display: flex; background: var(--mcp-surface-2); border: 1px solid var(--mcp-line); border-radius: 999px; padding: 3px; }
.mcp-seg-btn { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--mcp-ink-2); font-weight: 500; }
.mcp-seg-btn.active { background: var(--mcp-primary); color: var(--mcp-primary-ink); }

/* Base Metrics Container */
.mcp-metrics {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.mcp-metric {
  background: var(--mcp-surface); border: 1px solid var(--mcp-line);
  border-radius: var(--mcp-radius); padding: 20px; box-shadow: var(--mcp-shadow-sm);
  position: relative; overflow: hidden; min-height: 140px; display: flex; flex-direction: column;
}
.mcp-metric-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mcp-metric-label { color: var(--mcp-muted); font-size: 12.5px; font-weight: 500; }

.mcp-metric-value-bk { font-family: 'Space Grotesk'; font-size: 36px; font-weight: 700; line-height: 1; color: #fff !important; }
.star-coupn-metric {  color: #fff !important; }
.mcp-metric-foot { margin-top: auto; color: var(--mcp-muted); font-size: 12px; padding-top: 10px; }
.mcp-metric-pill { padding: 4px 9px; border-radius: 999px; background: var(--mcp-surface-2); color: var(--mcp-ink-2); font-size: 11px; font-weight: 600; border: 1px solid var(--mcp-line); }
.mcp-metric-pill.mcp-up { background: #e7f8ee; color: var(--mcp-good); border-color: transparent; }

/* Section Headers */
.mcp-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.mcp-section-head h2 { font-size: 22px; }

/* Grid Layouts */
.mcp-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-bottom: 28px; margin-top: 20px !important; }

/* Tarjeta de evento horizontal */
/* Estilo base */
.mcp-event-card {
    display: flex; 
    gap: 20px; 
    padding: 16px; 
    border: 1px solid var(--mcp-line);
    border-radius: var(--mcp-radius); 
    background: var(--mcp-surface);
    transition: background 0.2s;
    align-items: center; /* Centra verticalmente */
    margin-top:20px;
}

.mcp-event-card:hover {
    background: var(--mcp-surface-2);
}

.mcp-event-content {
    flex: 1;
}

/* Tipografía consistente */
.mcp-event-content h4 { margin: 0 0 4px 0; color: var(--mcp-ink); }
.mcp-event-meta strong { color: var(--mcp-primary); }
.mcp-event-details { font-size: 0.85rem; margin: 5px 0; color: var(--mcp-ink-2); }
.mcp-event-count { font-size: 0.8rem; color: var(--mcp-muted); margin: 0; }

/* Events Thumb */
.mcp-event-thumb {
    /* Estas 3 líneas son obligatorias para que una imagen de fondo se vea */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Asegúrate de darle dimensiones explícitas */
    width: 140px !important; 
    height: 200px !important;
    display: block;
    
    /* Un color de fondo por si la imagen falla */
    background-color: var(--mcp-line); 
}

/* Acciones */
.mcp-event-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- MAGIA RESPONSIVE --- */
@media (max-width: 600px) {
    .mcp-event-card {
        flex-direction: column; /* Apila todo verticalmente */
        text-align: center;
        align-items: center;
    }

    .mcp-event-thumb {
        width: 100% !important; /* Thumb ocupa todo el ancho */
        height: 150px !important;
    }

    .mcp-event-actions {
        width: 100%; /* Botones ocupan todo el ancho */
        flex-direction: row; /* Botones en fila */
    }

    .mcp-event-actions .mcp-btn {
        flex: 1; /* Botones de igual tamaño */
    }
}

/* Cabecera con acciones (Estilo apilado) */
.mcp-panel-head-actions {
  display: flex;
  justify-content: space-between; 
  align-items: center;           
  margin-bottom: 20px;
}

/* Grupo del texto */
.mcp-panel-head-info {
    display: flex;
    flex-direction: column;
}

.mcp-section-title {
    margin: 0;
    font-size: 1.25rem; /* Ajustado para caber bien en el header */
    color: var(--mcp-ink);
}

/* Botón compacto */
.mcp-btn-small {
    width: auto;
    max-width: 150px;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    white-space: nowrap; 
    flex-shrink: 0;      
}

/* ==========================================================================
   4. DATA VISUALIZATION (Charts & Lists)
   ========================================================================== */

/* Bar Charts */
.mcp-chart { height: 220px; display: flex; align-items: flex-end; gap: 14px; padding-top: 10px; }
#mcp-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 150px; padding: 10px 0; }

/* Prueba de rayos X */
.mcp-bars {
    height: 100px !important;      
    background: #eee;        /* Color de fondo para ver el contenedor */
    display: flex;
    align-items: flex-end !important;   /* Esto hace que la barra crezca desde abajo */
    border-radius: 4px;
    overflow: hidden;
    justify-content: center;
}

/* Forzar color a la barra */
.mcp-bars i {
  width: 100%;
  display: block;
  border-radius: 4px;
  transition: height 1s ease-out; /* Para que la animación funcione */
}

.mcp-chart .mcp-bar-group,
.mcp-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 14%; }
.mcp-chart .mcp-bars,

.mcp-chart .mcp-bars i { display: block; width: 14px; border-radius: 6px 6px 2px 2px; background: var(--mcp-primary); }
.mcp-chart .mcp-bars i.mcp-alt { background: var(--mcp-accent); }
.mcp-chart .mcp-bar-label { font-size: 11px; color: var(--mcp-muted); }

/* Category Lists */
.mcp-cat-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}

.mcp-cat-list li { 
    display: grid; 
    grid-template-columns: 14px 1fr 140px 28px; 
    align-items: center; 
    gap: 10px; 
    font-size: 13px; 
}

/* Puntos de Categoría */
.mcp-cat-dot { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    display: inline-block;
}

.mcp-cat-name { 
    color: var(--mcp-ink); 
}

/* Contenedor de la Barra (Fondo) */
.mcp-cat-bar { 
    height: 8px; 
    background: var(--mcp-surface-2); 
    border-radius: 999px; 
    overflow: hidden; 
    border: 1px solid var(--mcp-line); 
}

/* Barra interna animada (Relleno general) */
.mcp-cat-bar > span { 
    display: block; 
    height: 100%; 
    border-radius: 999px; 
    transition: width 0.4s ease-in-out; /* Animación fluida de carga */
}

/* MAPEO DE LA NUEVA PALETA LUDIC PREMIUM (Aplica a Puntos y Barras) */
.mcp-c1 { background: #7c5cff !important; box-shadow: 0 2px 6px rgba(124, 92, 255, 0.2); } /* Violeta Ref */
.mcp-c2 { background: #ff5c7c !important; box-shadow: 0 2px 6px rgba(255, 92, 124, 0.2); } /* Coral */
.mcp-c3 { background: #00e5a3 !important; box-shadow: 0 2px 6px rgba(0, 229, 163, 0.2); }  /* Esmeralda Mint */
.mcp-c4 { background: #ffbe1a !important; box-shadow: 0 2px 6px rgba(255, 190, 26, 0.2); }  /* Oro Eléctrico */
.mcp-c5 { background: #00cdff !important; box-shadow: 0 2px 6px rgba(0, 205, 255, 0.2); }  /* Cian Neón */
.mcp-c6 { background: #f93df7 !important; box-shadow: 0 2px 6px rgba(249, 61, 247, 0.2); }  /* Rosa Neón */

.mcp-cat-val { 
    text-align: right; 
    font-weight: 600; 
    color: var(--mcp-ink); 
}

/* Sparklines */
.mcp-spark { margin-top: 12px; height: 36px; display: flex; align-items: flex-end; gap: 4px; }
.mcp-spark span { flex: 1; background: var(--mcp-accent); border-radius: 3px; opacity: .85; }

/* ==========================================================================
   5. SPECIFIC VIEWS: CLIENT DASHBOARD
   ========================================================================== */

/* Hero Section */
.mcp-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
.mcp-hero-left, .mcp-hero-right { background: var(--mcp-surface); border: 1px solid var(--mcp-line); border-radius: var(--mcp-radius); padding: 28px 30px; box-shadow: var(--mcp-shadow-sm); }
.mcp-hero-left { background: radial-gradient(700px 240px at 110% -20%, rgba(214,255,58,.35), transparent 60%), var(--mcp-surface); }
.mcp-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mcp-muted); font-weight: 600; }
.mcp-hero-title { font-size: 40px; margin: 8px 0 6px; font-weight: 700; }
.mcp-hero-sub { color: #fff !important; margin: 0 0 18px; max-width: 520px; }
.mcp-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Level Card */
.mcp-level-card { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.mcp-level-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mcp-level-head span { color: var(--mcp-muted); font-size: 13px; }
.mcp-level-head strong { font-family: 'Space Grotesk'; font-size: 34px; }
.mcp-level-bar { height: 10px; background: var(--mcp-surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--mcp-line); }
.mcp-level-bar-fill { height: 100%; width: 78%; background: linear-gradient(90deg, var(--mcp-primary), #2a2d25); border-radius: 999px; position: relative; }
.mcp-level-bar-fill::after { content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 16px; border-radius: 999px; background: var(--mcp-accent); box-shadow: 0 0 0 3px rgba(214,255,58,.25); }
.mcp-level-foot { color: var(--mcp-muted); margin: 14px 0 0; font-size: 13px; }

/* Specialized Metrics */
.mcp-metric-lg { grid-column: span 1; background: var(--mcp-primary); color: #fff; border-color: var(--mcp-primary); padding: 20px; border-radius: 16px; }
.mcp-metric-lg .mcp-metric-label { color: rgba(255,255,255,.7); }
.mcp-metric-lg .mcp-metric-foot { color: rgba(255,255,255,.6); }
.mcp-metric-lg .mcp-metric-pill { background: var(--mcp-accent); color: var(--mcp-accent-ink); border-color: transparent;}

.mcp-metric-fav .mcp-fav-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mcp-fav-logo { width: 46px; height: 46px; border-radius: 14px; background: var(--mcp-accent); display: grid; place-items: center; font-size: 22px; }
.mcp-fav-name { font-weight: 700; font-size: 15px; }
.mcp-fav-sub { color: var(--mcp-muted); font-size: 12px; }

/* Business Cards & Grid */
.mcp-biz-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.mcp-biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mcp-biz-card {
  background: var(--mcp-surface); border: 1px solid var(--mcp-line);
  border-radius: var(--mcp-radius); overflow: hidden; box-shadow: var(--mcp-shadow-sm);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.mcp-biz-card:hover { transform: translateY(-3px); box-shadow: var(--mcp-shadow); }

.mcp-biz-cover { height: 120px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; }
.mcp-biz-cover .mcp-biz-badge { background: var(--mcp-accent); color: var(--mcp-accent-ink); padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.mcp-biz-cover .mcp-biz-fav { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; border:none; }

/* Favorite Animation */
.mcp-biz-fav.active-fav svg { fill: #ff4757; stroke: #ff4757; transform: scale(1.1); transition: all 0.2s ease-in-out; }

.mcp-biz-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mcp-biz-top { display: flex; align-items: center; gap: 10px; }
.mcp-biz-emoji { width: 38px; height: 38px; border-radius: 10px; background: var(--mcp-surface-2); border: 1px solid var(--mcp-line); display: grid; place-items: center; font-size: 18px; }
.mcp-biz-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.mcp-biz-cat { color: var(--mcp-muted); font-size: 12px; }
.mcp-biz-desc { color: var(--mcp-ink-2); font-size: 12.5px; margin: 2px 0 6px; min-height: 34px; }
.mcp-biz-meta { display: flex; gap: 14px; font-size: 12px; color: var(--mcp-muted); margin-bottom: 10px; }
.mcp-biz-meta strong { color: var(--mcp-ink); font-weight: 600; }
.mcp-biz-actions { display: flex; gap: 8px; margin-top: auto; }

/* Cover Color Variants (Fallbacks) */
.mcp-cover-0 { background: linear-gradient(135deg,#fff4c2,#ffd84d); }
.mcp-cover-1 { background: linear-gradient(135deg,#d2f0ff,#7cc6ff); }
.mcp-cover-2 { background: linear-gradient(135deg,#ffd6e0,#ff89a3); }
.mcp-cover-3 { background: linear-gradient(135deg,#e1ffd0,#8fe06a); }
.mcp-cover-4 { background: linear-gradient(135deg,#ede0ff,#b89bff); }
.mcp-cover-5 { background: linear-gradient(135deg,#ffe1c2,#ffaa57); }

/* ==========================================================================
   6. SPECIFIC VIEWS: BUSINESS OWNER (Placeholder for future)
   ========================================================================== */
/* ... Nuevas clases para dueños de negocio irán aquí ... */

/* ==========================================================================
   7. SPECIFIC VIEWS: EVENT MANAGER (Placeholder for future)
   ========================================================================== */
/* ... Nuevas clases para eventos irán aquí ... */

/* ==========================================================================
   8. RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */
@media (max-width: 1100px){
  .mcp-metrics { grid-template-columns: repeat(3,1fr); }
  .mcp-biz-grid { grid-template-columns: repeat(2,1fr); }
  .mcp-split { grid-template-columns: 1fr; }
  .mcp-hero { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .mcp-topbar {
      /* Pasa de píldora a una tarjeta "Modern Organic" */
      border-radius: 24px; 
      padding: 16px;
  }
  
  .mcp-topbar-spacer {
      display: none; /* Se oculta para que las acciones usen todo el ancho abajo */
  }

  .mcp-topbar-actions {
      width: 100%;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--mcp-line);
  }
}

@media (max-width: 720px){
  .mcp-wrapper { padding: 14px; }
  .mcp-topbar { flex-wrap: wrap; border-radius: 20px; padding: 10px; }
  .mcp-topnav { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; }
  .mcp-brand { border-right: 0; }
  .mcp-metrics { grid-template-columns: repeat(2,1fr); }
  .mcp-biz-grid { grid-template-columns: 1fr; }
  .mcp-hero-title { font-size: 30px; }
  .mcp-user-meta { display: none; }
}

/* =========================================
   MÓVILES PEQUEÑOS (< 576px)
   ========================================= */
@media (max-width: 576px) {
    /* Ocultamos los textos para dejar una interfaz 100% de iconos */
    .mcp-btn-text,
    .mcp-logout-text,
    .mcp-user-meta {
      white-space: nowrap; 
        display: none;
    }

    /* Ajustamos el botón para que se vea bien solo con el icono (estilo pastilla compacta o círculo) */
    .mcp-btn {
        padding: 8px 12px;
        justify-content: center;
    }

    /* Quitamos el gap gigante para que entren todos los iconos cómodamente */
    .mcp-topbar-actions {
        gap: 8px;
    }
    
    /* El chip de usuario se vuelve solo el avatar */
    .mcp-user-chip {
        padding: 4px;
        background: transparent;
        border: none;
    }

    /* Escondemos el separador en móvil porque ya está muy apretado */
    .mcp-topbar-divider {
        display: none;
    }
}

/* Estilos para el Muro de Leales */
.mcp-loyalty-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mcp-loyalty-list li { 
    display: flex; align-items: center; gap: 12px; 
    padding: 10px; background: var(--mcp-surface-2); 
    border-radius: var(--mcp-radius-sm); 
}
.mcp-streak-pill { 
    margin-left: auto; font-size: 12px; font-weight: 600; 
    padding: 4px 8px; background: var(--mcp-accent); 
    border-radius: 6px; 
}

/* Botón de Escáner */
.mcp-btn-scan {
  display: inline-flex;
  flex-shrink: 0;         
    white-space: nowrap;    
    min-width: 160px;       
    padding-left: 20px;     
    padding-right: 20px;
    justify-content: center;
    background: var(--mcp-accent) !important;
    color: var(--mcp-accent-ink) !important;
    font-weight: 700;
    border-radius: 8px !important;
}

/* Ajuste para pantallas pequeñas (opcional, por si el botón se sale de la pantalla) */
@media (max-width: 900px) {
    .mcp-btn-scan {
        min-width: 120px;   
        padding-left: 12px;
        padding-right: 12px;
    }
}

.mcp-btn-scan:hover { background: #c0e62e !important; }

/* Tooltip del gráfico */
.mcp-chart-tooltip {
    position: absolute;
    background: var(--mcp-primary);
    color: var(--mcp-primary-ink);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: var(--mcp-shadow);
    text-align: center;
}
.mcp-chart-tooltip strong { display: block; font-size: 16px; }

/* =========================================
   MODAL DE ESCÁNER (Estilos "Modern Organic")
   ========================================= */
.mcp-modal-overlay {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(8px); /* Glassmorphism */
    z-index: 99999; 
    align-items: center; 
    justify-content: center;
    padding: 20px;
}

.mcp-modal-card {
    background: #ffffff !important;
    border: 1px solid var(--mcp-line);
    padding: 32px;
    border-radius: 28px; /* Radio suave y orgánico */
    width: 100%;
    max-width: 450px;
    text-align: center;
    box-shadow: var(--mcp-shadow-lg);
}

.mcp-modal-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--mcp-ink);
    font-size: 1.25rem;
    font-weight: 600;
}

/* El área de la cámara */
.mcp-scanner-area {
    width: 100%;
    min-height: 300px;
    background: var(--mcp-surface-2);
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden; /* Importante para que el video no se salga */
    border: 1px dashed var(--mcp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px !important;
}

/* Ajuste del botón para que no pierda tu estilo de botón original */
#btn-close-scanner {
    width: 100%;
    margin-top: 8px;
    color: var(--danger, #ff4d4d); /* Usamos tu variable de peligro si existe */
}

/* --- Ajustes específicos para Móviles --- */
@media (max-width: 600px) {
    .mcp-modal-card {
        padding: 20px; /* Reducimos padding para ganar espacio */
        border-radius: 24px;
        max-width: 95%; /* Ocupa casi todo el ancho */
        max-height: 85vh; /* Evita que el modal sea más grande que la pantalla */
        overflow-y: auto; /* Permite scroll si el contenido es largo */
    }

    .mcp-modal-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .mcp-scanner-area {
        min-height: 250px; /* Un poco menos alto en móvil */
        max-height: 50vh;  /* Limitamos la altura del video para dejar espacio al botón */
        margin-bottom: 20px;
    }

    #btn-close-scanner {
        padding: 16px; /* Botones más grandes para dedos (Touch Target) */
        font-size: 16px;
    }

    /* Mejora el botón de la librería QR en móvil */
    #html5-qrcode-button-camera-permission {
        padding: 12px 20px;
        font-size: 14px;
    }
}

#mcp-reader video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* =========================================
   ESTILOS PARA EL BOTÓN DE LA LIBRERÍA QR
   ========================================= */
#html5-qrcode-button-camera-permission {
    background-color: var(--mcp-primary);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 12px; /* Alineado con tus inputs y botones */
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 10px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efecto hover consistente con tus botones */
#html5-qrcode-button-camera-permission:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--mcp-primary-dark, #333); /* Usa un color ligeramente más oscuro si tienes variable */
}

/* Si la librería pone estilos inline muy agresivos, usa !important solo aquí */
#html5-qrcode-button-camera-permission {
    appearance: none !important;
    outline: none !important;
}

/* =========================================
   EDIT BUSINESS PAGE STYLES
   ========================================= */
.mcp-edit-page { max-width: 100%; margin: 0 auto; }
.mcp-edit-page-hg { height:90vh !important; }
.mcp-header-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.mcp-btn-back { color: var(--mcp-muted); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.mcp-btn-back:hover { color: var(--mcp-primary); }

.mcp-form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
@media (max-width: 768px) { .mcp-form-grid { grid-template-columns: 1fr; } }

.mcp-form-group { margin-bottom: 20px; }
.mcp-form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; color: var(--mcp-ink); }
.mcp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Inputs y Selects */
.mcp-input, .mcp-select {
    width: 100%; padding: 12px 16px; border-radius: 12px !important;
    border: 1px solid var(--mcp-line); background: var(--mcp-surface-2);
    color: var(--mcp-ink); font-family: inherit; transition: all 0.2s;
}

.mcp-field {
  width: 100%; padding: 12px 16px; border-radius: 12px !important;
    border: 1px solid var(--mcp-line); background: var(--mcp-surface-2);
    color: var(--mcp-ink); font-family: inherit; transition: all 0.2s;
}
.mcp-input:focus, .mcp-select:focus { border-color: var(--mcp-primary); outline: none; background: var(--mcp-surface); }
.mcp-hint { display: block; font-size: 0.8rem; color: var(--mcp-muted); margin-top: 5px; }

/* Toggle Switch (Activo/Inactivo) */
.mcp-toggle-container { display: flex; align-items: center; gap: 12px; height: 45px; }
.mcp-toggle-label { font-size: 0.9rem; color: var(--mcp-ink-2); font-weight: 500; }
.mcp-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.mcp-switch input { opacity: 0; width: 0; height: 0; }
.mcp-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--mcp-line); transition: .3s; }
.mcp-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.mcp-switch input:checked + .mcp-slider { background-color: var(--mcp-primary); }
.mcp-switch input:focus + .mcp-slider { box-shadow: 0 0 1px var(--mcp-primary); }
.mcp-switch input:checked + .mcp-slider:before { transform: translateX(24px); }
.mcp-slider.round { border-radius: 26px; }

/* Horarios */
.mcp-schedule-grid { background: var(--mcp-surface-2); border-radius: 16px; padding: 20px; border: 1px solid var(--mcp-line); }
.mcp-schedule-header { display: grid; grid-template-columns: 120px 1fr 1fr; padding-bottom: 15px; border-bottom: 1px solid var(--mcp-line); font-weight: 600; color: var(--mcp-muted); font-size: 0.85rem; margin-bottom: 15px; }
.mcp-schedule-row { display: grid; grid-template-columns: 120px 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.mcp-day-label { font-weight: 500; }
.mcp-time-input { padding: 8px 12px; }
.mcp-time-sep { color: var(--mcp-muted); }

/* Uploader de Imagen */
.mcp-image-uploader { 
    width: 100%; 
    aspect-ratio: 4/3; 
    border: 2px dashed var(--mcp-line); 
    border-radius: 16px; 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    background: var(--mcp-surface-2); 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    transition: all 0.2s;
}
.mcp-image-uploader:hover { border-color: var(--mcp-primary); }

.mcp-image-uploader img { 
    width: 100%; height: 100%; object-fit: cover; object-position: center; 
    position: absolute; top: 0; left: 0; z-index: 1; 
    margin: 0; padding: 0; border: none; border-radius: inherit; 
}

.mcp-uploader-placeholder { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: var(--mcp-muted); 
    gap: 10px; z-index: 2; 
    text-align: 
    center !important;
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    pointer-events: none; margin: 0 !important; padding: 0 !important;
}

.mcp-uploader-placeholder span {
    margin: 0 !important; padding: 0 !important; display: block !important;
}

.mcp-uploader-placeholder .mcp-icon { font-size: 2rem; line-height: 1 !important; }

.mcp-uploader-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center !important; 
    justify-content: center !important; opacity: 0; z-index: 3; transition: opacity 0.2s; font-weight: 500;
}
.mcp-image-uploader:hover .mcp-uploader-overlay { opacity: 1; }
.mcp-text-danger { color: #ff4d4d; background: transparent; border: none; cursor: pointer; font-size: 0.9rem; }
.mcp-text-danger:hover { text-decoration: underline; }

.mcp-save-panel { position: sticky; top: 20px; }
.mcp-btn-block { width: 100%; padding: 16px; font-size: 1.1rem; background: var(--mcp-primary) !important; color: var(--mcp-primary-ink) !important; border-radius: 8px !important; }

.mcp-btn-block:hover {
  color: var(--mcp-scan);

}


.mcp-event-actions {
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  flex-shrink: 0; 
  min-width: 100px;
}

/* =========================================
   GESTIÓN DE CUPONES (Business Coupons)
   ========================================= */

/* Cabecera de Página */
.mcp-page-header { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center; 
    margin-bottom: 30px; 
    flex-wrap: wrap; 
    gap: 15px; 
}
.mcp-header-title h2 { margin: 10px 0 0 0; }
.mcp-btn-back { color: var(--mcp-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s; }
.mcp-btn-back:hover { color: var(--mcp-primary); }

/* Grid de Métricas */
.mcp-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.mcp-metric-card { background: var(--mcp-surface); border: 1px solid var(--mcp-line); border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.mcp-metric-value { font-family: 'Space Grotesk'; font-size: 36px; font-weight: 700; line-height: 1; font-weight: 700; color: var(--mcp-ink); margin-bottom: 4px; }
.mcp-metric-value-wh { font-weight: 700; color: #fff; margin-bottom: 4px; font-family: 'Space Grotesk'; font-size: 36px; font-weight: 700; line-height: 1;}
.mcp-metric-label { color: var(--mcp-muted); font-size: 0.9rem; font-weight: 500; }

/* Tabla de Datos Modern Organic */
.mcp-panel-flush { padding: 0; overflow: hidden; } /* Quita el padding para que la tabla toque los bordes */
.mcp-table-responsive { overflow-x: auto; width: 100%; }
.mcp-table { width: 100%; border-collapse: collapse; text-align: left; }
.mcp-table th { padding: 16px 24px; color: var(--mcp-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; border-bottom: 1px solid var(--mcp-line); background: var(--mcp-sur face-2); }
.mcp-table td { padding: 16px 24px; border-bottom: 1px solid var(--mcp-line); transition: background 0.2s ease; }
.mcp-table tbody tr:hover td { background: var(--mcp-surface-2); }
.mcp-table tbody tr:last-child td { border-bottom: none; }

/* Badges (Etiquetas de estado) */
.mcp-badge { padding: 0 8px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; display: inline-block; }
.mcp-badge-success { background: #e6fffa; color: #234e52; }
.mcp-badge-neutral { background: var(--mcp-line); color: var(--mcp-ink-2); }

.mcp-event-thumb{
  width: 140px; height: auto; background: #eee; border-radius: 8px; background-size: cover;
}

/* Utilidades de texto */
.mcp-text-right { text-align: right; }
.mcp-text-primary { color: var(--mcp-primary) !important; }
.mcp-font-medium { font-weight: 500; }
.mcp-text-ink { color: var(--mcp-ink); }
.mcp-text-ink-2 { color: var(--mcp-ink-2); }

/* Empty State Moderno */
.mcp-empty-state { padding: 60px 20px; text-align: center; }
.mcp-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.mcp-empty-state h3 { margin-bottom: 12px; color: var(--mcp-ink); }
.mcp-empty-state p { color: var(--mcp-muted); margin: 0 auto 24px auto; max-width: 450px; line-height: 1.6; }

/* =========================================
   GRID DE TARJETAS DE CUPONES
   ========================================= */
.mcp-coupons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

.mcp-coupon-card {
    background: var(--mcp-surface);
    border: 1px solid var(--mcp-line);
    border-radius: 20px; /* Bordes suaves estilo app */
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.mcp-coupon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mcp-shadow-lg);
    border-color: var(--mcp-primary);
}

/* Cabecera de la tarjeta (Estado y Acciones) */
.mcp-coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mcp-coupon-actions {
    display: flex;
    gap: 12px;
}

.mcp-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.mcp-icon-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Cuerpo de la tarjeta */
.mcp-coupon-body {
    flex-grow: 1;
    text-align: center;
    margin-bottom: 24px;
}

.mcp-coupon-title {
    font-size: 1.2rem;
    color: var(--mcp-ink);
    margin: 0 0 16px 0;
    font-weight: 600;
    line-height: 1.3;
}

/* Caja del valor destacada */
.mcp-coupon-value-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--mcp-surface-2);
    padding: 16px 24px;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed var(--mcp-line);
}

.mcp-coupon-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--mcp-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.mcp-coupon-type {
    font-size: 0.85rem;
    color: var(--mcp-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Pie de la tarjeta */
.mcp-coupon-footer {
    border-top: 1px solid var(--mcp-line);
    padding-top: 16px;
    margin-top: auto;
}



/* =========================================
   FORMULARIOS Y ALERTAS (Componentes Base)
   ========================================= */

/* Estructura de dos columnas (usada en editar negocio y crear cupón) */
.mcp-col-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mcp-col-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Alertas del Sistema */
.mcp-alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeIn 0.3s ease;
}

.mcp-alert-success {
    background-color: #e6fffa;
    color: #234e52;
    border: 1px solid #b2f5ea;
}

.mcp-alert-danger {
    background-color: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.mcp-delete-event-btn {
  padding: 8px 8px; 
  font-size: 0.85rem; 
  background: #fee2e2 !important; 
  color: #991b1b !important; 
  border: none; 
  text-align: center; 
  justify-content: center; 
  white-space: nowrap;
}

.mcp-delete-event-btn:hover {
  color: #1a1a1a !important;
}

.mcp-grid-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mcp-input-group { margin-bottom: 15px; }
.mcp-input-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.mcp-input-group input, .mcp-input-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; }
.mcp-uploader { text-align: center; margin: 20px 0; }
#mcp-image-preview {  border-radius: 8px; margin-bottom: 10px; }


/* ==========================================================================
   EDICIÓN DE EVENTOS (FRONTEND)
   ========================================================================== */

/* Cabecera */

.mcp-btn-back {
    padding: 5px 10px;
    margin-bottom: 10px;
    display: inline-flex;
}
.mcp-header-title {
    margin: 0;
}

/* Grilla del Formulario */
.mcp-grid-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mcp-grid-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Paneles y Títulos */
.mcp-panel-title {
    margin-top: 0;
    border-bottom: 1px solid var(--mcp-line);
    padding-bottom: 10px;
}

/* Grupos de Input y Controles */
.mcp-input-group {
    margin-bottom: 15px;
}
.mcp-input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}
.mcp-form-control {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid var(--mcp-line) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    background: var(--mcp-surface) !important;
    color: var(--mcp-ink) !important;
}
.mcp-form-control:focus {
    outline: none;
    border-color: var(--mcp-primary) !important;
}

/* Área de Checkboxes (Bandas) */
.mcp-checkbox-scroll-area {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--mcp-line);
    padding: 10px;
    border-radius: 8px;
    background: var(--mcp-surface);
}
.mcp-checkbox-item {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

/* Área de Subida de Flyer */
.mcp-uploader-area {
    text-align: center;
    margin: 20px 0;
    border: 2px dashed var(--mcp-line);
    padding: 20px;
    border-radius: 12px;
    background: var(--mcp-surface-2);
}
.mcp-preview-img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mcp-uploader-placeholder {
    color: var(--mcp-muted);
    margin-bottom: 10px;
}

/* Caja de Estado del Evento */
.mcp-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--mcp-surface-2);
    border-radius: 8px;
    margin-bottom: 20px;
}
.mcp-status-box strong {
    color: var(--mcp-ink);
}
.mcp-status-box label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.mcp-status-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    accent-color: var(--mcp-primary);
    cursor: pointer;
}

/* Utilidades para Botones */

.mcp-btn-lg {
    padding: 15px;
    font-size: 16px;
}
.mcp-btn-danger-light {
    background: #fee2e2;
    color: #991b1b;
    border: none;
}
.mcp-btn-danger-light:hover {
    background: #fca5a5;
}
.mcp-mt-2 {
    margin-top: 10px;
}

/* Alertas */
.mcp-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}
.mcp-alert-success {
    background: #10b981;
    color: white;
}

/* ==========================================================================
   WIDGET: TOP BANDAS (DASHBOARD DUEÑO)
   ========================================================================== */

.mcp-panel-bands {
    display: flex;
    flex-direction: column;
}

.mcp-top-bands-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.mcp-band-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    background: var(--mcp-surface-2);
    border: 1px solid var(--mcp-line);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.mcp-band-card:hover {
    transform: translateY(-2px);
    border-color: var(--mcp-primary);
}

.mcp-band-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--mcp-line);
    flex-shrink: 0;
}

/* Fallback para cuando la banda no tiene foto */
.mcp-band-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(79, 172, 254, 0.2));
    border: 1px solid rgba(0, 242, 254, 0.2);
}

.mcp-band-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mcp-band-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mcp-ink);
}

.mcp-band-meta {
    font-size: 0.8rem;
    color: var(--mcp-primary);
    font-weight: 500;
    background: rgba(0, 242, 254, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    align-self: flex-start;
}

/* Estado Vacío */
.mcp-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--mcp-muted);
}

.mcp-empty-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* ==========================================================================
   EXTENSIONES GESTIÓN DEL MÁNAGER (DASHBOARD EXCLUSIVOS)
   ========================================================================== */

.mcp-main-container {
    padding: 20px;
}

.mcp-star-headline {
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #FFF !important;
}

.mcp-avatar-band {
    width: 32px;
    height: 32px;
    font-size: 11px;
    font-weight: 700;
    background: var(--mcp-surface-2);
    border: 1px solid var(--mcp-line);
    color: var(--mcp-primary);
}

.mcp-events-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.mcp-event-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mcp-event-details h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--mcp-ink);
}

.mcp-event-time-loc {
    font-size: 0.85rem;
    margin: 4px 0;
    color: var(--mcp-ink);
    opacity: 0.9;
    line-height: 1.4;
}

.mcp-event-band-count {
    font-size: 0.8rem;
    color: var(--mcp-muted);
    font-weight: 500;
}

.mcp-event-thumb-fallback {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--mcp-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 1px solid var(--mcp-line);
}

.mcp-empty-state-full {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--mcp-muted);
}

.mcp-mt-4 {
    margin-top: 30px;
}

/* Área con scroll dedicada al catálogo completo de bandas */
.mcp-scrollable-bands-panel {
    max-height: 680px; /* Limita la altura del panel al promedio de 10 tarjetas de eventos */
    overflow-y: auto;
    padding-right: 5px;
}

/* Modificador para hacer que las tarjetas de bandas actúen como botones de navegación */
.mcp-band-card-clickable {
    text-decoration: none !important;
    cursor: pointer;
}

.mcp-band-card-clickable:hover .mcp-band-arrow {
    transform: translateX(4px);
    color: var(--mcp-primary);
}

.mcp-band-arrow {
    font-size: 0.9rem;
    color: var(--mcp-muted);
    transition: transform 0.2s ease, color 0.2s ease;
    padding-right: 5px;
}

/* Scrollbar premium personalizado para el catálogo */
.mcp-scrollable-bands-panel::-webkit-scrollbar {
    width: 6px;
}
.mcp-scrollable-bands-panel::-webkit-scrollbar-track {
    background: transparent;
}
.mcp-scrollable-bands-panel::-webkit-scrollbar-thumb {
    background: var(--mcp-line);
    border-radius: 10px;
}
.mcp-scrollable-bands-panel::-webkit-scrollbar-thumb:hover {
    background: var(--mcp-primary);
}


/* ======================================================
   TICKET SYSTEM: LUDIC PREMIUM INTEGRATION (MCP Variables)
   ====================================================== */

.madlab-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Más aire entre tickets */
    margin-top: 24px;
}

.madlab-ticket {
    display: flex;
    flex-direction: row;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.madlab-ticket:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.madlab-ticket-used {
    opacity: 0.55;
    background: rgba(0, 0, 0, 0.2);
    filter: grayscale(100%);
    pointer-events: none; /* Deshabilita clics e interacciones */
    box-shadow: none;
}

.madlab-ticket-title {
    margin: 0 0 4px 0;
    color: var(--mcp-ink);
    font-weight: 700;
    font-size: 1.1rem;
}

.madlab-ticket-subtitle {
    margin: 0;
    color: var(--mcp-ink-2);
    font-size: 0.9rem;
    font-weight: 400;
}

/* Lado Izquierdo: Info del Ticket */
.madlab-ticket-left {
    flex: 1; /* Ocupa todo el espacio disponible */
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Efecto "troquelado" separador típico de un boleto */
    border-right: 2px dashed rgba(255, 255, 255, 0.15); 
}

/* Lado Derecho: Zona del QR / Estado */
.madlab-ticket-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.15); /* Contraste sutil para el área del código */
}

.madlab-qr-img {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    padding: 8px;
    background: #ffffff; /* Fondo blanco obligatorio para que el escáner lo lea siempre */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.madlab-ticket:hover .madlab-qr-img {
    transform: scale(1.05); /* Pequeña micro-interacción al pasar el mouse */
}

.madlab-status-used {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Botón Auto-Canjear */
.btn-auto-redimir {
    align-self: flex-start; /* Evita que el botón se estire al 100% en desktop */
    margin-top: 10px;
    background: linear-gradient(135deg, #10b981, #059669); /* Tono esmeralda vibrante */
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-auto-redimir:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}



/* El botón al estilo Ludic Premium */
.madlab-btn-dark {
    background: var(--mcp-primary) !important;
    color: var(--mcp-primary-ink) !important;
    border: none;
    padding: 10px 20px;
    border-radius: var(--mcp-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 12px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.madlab-btn-dark:hover {
    background: var(--mcp-accent) !important; /* Cambia al color de acento (lime pop) al pasar el mouse */
    color: var(--mcp-accent-ink) !important;
}

.madlab-ticket-date {
    font-size: 12px; font-weight: 500; color: #e63946; margin-bottom: 12px; display: flex; align-items: center; gap: 4px;
}

/* ==========================================================================
   📱 RESPONSIVE DESIGN (Móviles y Tablets pequeñas)
   ========================================================================== */
@media (max-width: 600px) {
    .madlab-ticket {
        flex-direction: column; /* Apila el contenido verticalmente */
        border-radius: 16px;
    }

    .madlab-ticket-left {
        border-right: none;
        border-bottom: 2px dashed rgba(255, 255, 255, 0.15); /* Troquelado pasa a horizontal */
        padding: 20px;
        align-items: center; /* Centra el texto en móvil */
        text-align: center;
    }

    .madlab-ticket-right {
        width: 100%;
        padding: 24px;
    }

    .madlab-ticket-date {
        justify-content: center; /* Centra el ícono y la fecha en móvil */
    }

    .btn-auto-redimir {
        width: 100%; /* Área de tap mucho más cómoda (Touch-friendly) */
        margin-top: 15px;
    }
}

/* Estilo base para el botón circular */
.mcp-toggle-fav {
    /* 1. Centrado absoluto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 2. Definición de tamaño (Círculo perfecto) */
    width: 40px; 
    height: 40px;
    padding: 0; /* ¡CRUCIAL! Esto elimina el margen interno que causa el descentrado */
    border-radius: 50%;
    
    /* 3. Estilos de tu Design System */
    background: var(--mcp-surface);
    border: 1px solid var(--mcp-line);
    color: var(--mcp-ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Ajuste para el SVG interno */
.mcp-toggle-fav svg {
    display: block; /* Evita espacios extra por debajo del icono */
    width: 18px;    /* Un poquito más grande para que se vea mejor */
    height: 18px;
}

/* Estado activo (cuando es favorito) */
.mcp-toggle-fav.active {
    background: var(--mcp-accent);
    border-color: var(--mcp-accent);
    color: var(--mcp-accent-ink);
}

/* Efecto hover */
.mcp-toggle-fav:hover {
    border-color: var(--mcp-ink);
    background: var(--mcp-accent-ink);
}

a.mcp-user-chip {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Efecto hover sutil para indicar que es cliqueable */
a.mcp-user-chip:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.mcp-panel-profile {
  max-width: 800px;
  margin: 0 auto; /* Lo centra en la pantalla si el contenedor padre es más ancho */
}

/* ==========================================================================
   🎟️ BANNER PROMOCIONAL DE EVENTOS (DASHBOARD CLIENTE)
   ========================================================================== */

.mcp-promo-banner {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 24px;
    margin-bottom: 30px; /* Separación con las métricas */
    display: flex;
    align-items: center;
    padding: 40px 50px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    /* Transición suave para un efecto premium al pasar el mouse */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.mcp-promo-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

/* La imagen de fondo inyectada dinámicamente desde PHP */
.mcp-promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--promo-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Ligero zoom in inicial que crece en el hover */
    transform: scale(1.02);
    transition: transform 0.8s ease;
}

.mcp-promo-banner:hover::before {
    transform: scale(1.05);
}

/* Capa oscura (Gradient Overlay) para legibilidad del texto */
.mcp-promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0) 100%);
    z-index: 2;
}

/* Contenedor del Texto */
.mcp-promo-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcp-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mcp-promo-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.mcp-promo-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 5px;
}

.mcp-promo-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
}

/* Botón Exclusivo para el Banner */
.mcp-btn-promo {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    width: fit-content;
}

.mcp-btn-promo:hover {
    background: var(--primary); /* Asumo que tienes tu variable primaria de WP */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   📱 RESPONSIVE DESIGN (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 900px) {
    /* Modificamos el gradiente para que cubra todo en móviles, ya que la imagen se encoge */
    .mcp-promo-overlay {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%);
    }
    
    .mcp-promo-banner {
        align-items: flex-end; /* Bajamos el texto al fondo oscuro del gradiente */
        padding: 30px 20px;
        min-height: 320px; /* Más alto en móvil para que luzca la foto arriba */
    }

    .mcp-promo-content {
        gap: 10px;
        text-align: center;
        align-items: center;
    }

    .mcp-promo-title {
        font-size: 26px;
    }

    .mcp-promo-details {
        justify-content: center;
    }
}