/* === Mac Pollo Brand Palette (Sprint 12) === */
:root {
    --mp-gold: #C8A14A;
    --mp-gold-light: #DEBF7E;
    --mp-gold-dark: #9C7B30;
    --mp-black: #0A0A0A;
    --mp-charcoal: #1A1A1A;
    --mp-white: #FFFFFF;
    --mp-success: #4CAF50;
    --mp-success-dark: #388E3C;
    --mp-bg-overlay: rgba(10, 10, 10, 0.85);
    --mp-shadow-gold: 0 4px 12px rgba(200, 161, 74, 0.25);
}

/* Mac Pollo button helpers */
.mp-btn-gold {
    background: linear-gradient(135deg, var(--mp-gold) 0%, var(--mp-gold-light) 100%);
    color: var(--mp-black);
    border: 1px solid var(--mp-gold-dark);
    font-weight: 600;
    transition: all 0.2s ease;
}
.mp-btn-gold:hover {
    background: linear-gradient(135deg, var(--mp-gold-light) 0%, var(--mp-gold) 100%);
    box-shadow: var(--mp-shadow-gold);
    transform: translateY(-1px);
}
.mp-btn-gold:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Mac Pollo accent badge */
.mp-badge-gold {
    background: var(--mp-gold);
    color: var(--mp-black);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===========================================================================
 * MASA — estilos enterprise reutilizables
 * ===========================================================================
 * Sidebar dark, topbar, login con gradiente corporativo.
 * Cada proyecto puede sobrescribir variables CSS si lo necesita.
 * =========================================================================== */

:root {
    --masa-sidebar-bg: #0a1929;
    --masa-sidebar-bg-hover: #102a43;
    --masa-sidebar-text: #cbd5e1;
    --masa-sidebar-text-muted: #64748b;
    --masa-sidebar-text-active: #ffffff;
    --masa-sidebar-active-border: #4f46e5;
    --masa-sidebar-section: #475569;
    --masa-sidebar-width: 240px;
    --masa-topbar-bg: #ffffff;
    --masa-topbar-border: #e2e8f0;
    --masa-content-bg: #f8fafc;
}

[x-cloak] { display: none !important; }

/* ---------- LAYOUT ---------- */
body { background: var(--masa-content-bg); }

.masa-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--masa-sidebar-width);
    background: var(--masa-sidebar-bg);
    color: var(--masa-sidebar-text);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 40;
    transition: transform 0.2s ease;
}

.masa-main {
    margin-left: var(--masa-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.masa-topbar {
    background: var(--masa-topbar-bg);
    border-bottom: 1px solid var(--masa-topbar-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.masa-content {
    flex: 1;
    padding: 1.5rem;
}

/* ---------- SIDEBAR INTERNALS ---------- */
.masa-sidebar-logo {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.masa-sidebar-logo-text {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.masa-sidebar-section {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--masa-sidebar-section);
}

.masa-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--masa-sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.masa-nav-item:hover {
    background: var(--masa-sidebar-bg-hover);
    color: var(--masa-sidebar-text-active);
}

.masa-nav-item.active {
    background: var(--masa-sidebar-bg-hover);
    color: var(--masa-sidebar-text-active);
    border-left-color: var(--masa-sidebar-active-border);
}

.masa-nav-item .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- SIDEBAR USER ---------- */
.masa-sidebar-user {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.masa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.masa-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.masa-user-role {
    font-size: 0.75rem;
    color: var(--masa-sidebar-text-muted);
    line-height: 1.2;
}

.masa-logout-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--masa-sidebar-text-muted);
    cursor: pointer;
    transition: color 0.15s;
}

.masa-logout-btn:hover { color: #ef4444; }

/* ---------- RESPONSIVE: SIDEBAR COLAPSABLE EN MÓVIL ---------- */
@media (max-width: 768px) {
    .masa-sidebar {
        transform: translateX(-100%);
    }
    .masa-sidebar.open {
        transform: translateX(0);
    }
    .masa-main {
        margin-left: 0;
    }
}

.masa-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
}
@media (max-width: 768px) {
    .masa-sidebar-overlay.show { display: block; }
}

/* ---------- LOGIN GRADIENT ---------- */
.login-gradient {
    background: linear-gradient(160deg, #0a1929 0%, #102a43 35%, #1a3a54 60%, #0d2137 100%);
    position: relative;
}

.login-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.login-pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #1e293b !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---------- BOTÓN PRIMARIO MASA ---------- */
.masa-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #102a43;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.masa-btn-primary:hover { background: #0a1929; }
.masa-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- LOGIN BODY (S14 · fondo configurable) ---------- */
.masa-login-body {
    min-height: 100vh;
    background-color: #0a1929;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Sin imagen configurada → gradient corporativo */
.masa-login-body:not([style*="background-image"]) {
    background:
        linear-gradient(160deg, #0a1929 0%, #102a43 35%, #1a3a54 60%, #0d2137 100%);
}

/* Mobile toggle flotante (reemplaza al topbar quitado en S14) */
.masa-mobile-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 30;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--masa-topbar-border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: #475569;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background 0.15s;
}
.masa-mobile-toggle:hover { background: #ffffff; }
@media (min-width: 769px) { .masa-mobile-toggle { display: none; } }

/* ============================================================ */
/* S15 BEGIN — Uniformar cards/tablas (2026-04) */
/* ============================================================ */

/* --- Variables estáticas (dinámicas se inyectan en app.blade.php) --- */
:root {
  --masa-text-strong: #0f172a;
  --masa-text-muted: #64748b;
  --masa-text-subtle: #94a3b8;
  --masa-border: #e2e8f0;
  --masa-border-strong: #cbd5e1;
  --masa-border-soft: #f1f5f9;
  --masa-bg-subtle: #f8fafc;
  --masa-success: #16a34a;
  --masa-success-soft-bg: #dcfce7;
  --masa-success-soft-fg: #166534;
  --masa-danger: #dc2626;
  --masa-danger-soft-bg: #fee2e2;
  --masa-danger-soft-fg: #991b1b;
  --masa-warning: #eab308;
  --masa-warning-soft-bg: #fef9c3;
  --masa-warning-soft-fg: #713f12;
  --masa-info: #0ea5e9;
  --masa-info-soft-bg: #dbeafe;
  --masa-info-soft-fg: #1e40af;
  --masa-shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  /* Fallbacks si app.blade.php no inyectó las dinámicas */
  --masa-color-primary: #C8A14A;
  --masa-color-secondary: #0A0A0A;
}

/* --- Card base --- */
.masa-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--masa-shadow-card);
  margin-bottom: 16px;
}
.masa-card h3,
.masa-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--masa-text-strong);
}

/* --- KPI card --- */
.masa-kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--masa-shadow-card);
  border-left: 4px solid var(--masa-text-muted);
}
.masa-kpi-card-primary { border-left-color: var(--masa-color-primary); }
.masa-kpi-card-success { border-left-color: var(--masa-success); }
.masa-kpi-card-warning { border-left-color: var(--masa-warning); }
.masa-kpi-card-info    { border-left-color: var(--masa-info); }
.masa-kpi-card-danger  { border-left-color: var(--masa-danger); }
.masa-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--masa-text-muted);
  letter-spacing: 0.5px;
}
.masa-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--masa-text-strong);
  margin-top: 6px;
}
.masa-kpi-meta {
  font-size: 12px;
  color: var(--masa-text-muted);
}

/* --- Section title (dentro de card) --- */
.masa-section-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--masa-text-strong);
}

/* --- Grid helpers (dashboard) --- */
.masa-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.masa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.masa-cards-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.masa-chart-box { height: 220px; }
.masa-dashboard-meta {
  font-size: 13px;
  color: var(--masa-text-muted);
}

/* --- Eventos ocupación rows --- */
.masa-evento-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--masa-border-soft);
}
.masa-evento-row:last-child { border-bottom: 0; }
.masa-evento-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 10px;
}

/* --- Tabla (con aliases .a-table / .r-table) --- */
.masa-table-wrapper { overflow-x: auto; }

.masa-table,
.a-table,
.r-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.masa-table thead tr,
.a-table thead tr,
.r-table thead tr {
  border-bottom: 2px solid var(--masa-border-strong);
  color: var(--masa-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.masa-table th,
.masa-table td,
.a-table th, .a-table td,
.r-table th, .r-table td {
  padding: 8px 6px;
  text-align: left;
}
.masa-table tbody tr,
.a-table tbody tr,
.r-table tbody tr {
  border-bottom: 1px solid var(--masa-border-soft);
}
.masa-table tbody tr:hover,
.a-table tbody tr:hover,
.r-table tbody tr:hover {
  background: var(--masa-bg-subtle);
}
.masa-table th.right,
.masa-table td.right,
.masa-num,
.r-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.masa-table tr.total-row,
.r-table tr.total-row {
  background: var(--masa-bg-subtle);
  font-weight: 700;
}
.masa-table td.nowrap,
.a-table td.nowrap { white-space: nowrap; }
.masa-table td.mono { font-family: monospace; font-size: 11px; }
.masa-table td.limit { max-width: 280px; }

/* --- Filtros en grid (con aliases .a-filters / .r-filters) --- */
.masa-filters,
.a-filters,
.r-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.masa-filters label,
.a-filters label,
.r-filters label {
  font-size: 11px;
  color: var(--masa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.masa-filters input, .masa-filters select,
.a-filters input, .a-filters select,
.r-filters input, .r-filters select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--masa-border-strong);
  border-radius: 6px;
  font-size: 13px;
}
.masa-filters-counter {
  margin-left: auto;
  font-size: 12px;
  color: var(--masa-text-muted);
}
.masa-form-row-end {
  display: flex;
  align-items: end;
}
.masa-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* --- Acciones (fila de botones) --- */
.masa-actions,
.a-actions,
.r-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Botones (se AGREGAN, no se modifica .masa-btn-primary existente) --- */
.masa-btn-primary-themed {
  background: var(--masa-color-primary);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.masa-btn-primary-themed:hover { filter: brightness(0.9); }

.masa-btn-secondary,
.a-btn, .a-btn-secondary,
.r-btn, .r-btn-secondary {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  background: var(--masa-border);
  color: var(--masa-text-strong);
}
.masa-btn-secondary:hover,
.a-btn:hover, .a-btn-secondary:hover,
.r-btn:hover, .r-btn-secondary:hover {
  background: var(--masa-border-strong);
}

.masa-btn-success,
.a-btn-success,
.r-btn-success {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  background: var(--masa-success);
  color: #fff;
}
.masa-btn-success:hover,
.a-btn-success:hover,
.r-btn-success:hover { filter: brightness(0.9); }

.masa-btn-link {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--masa-color-primary);
  font-size: 13px;
}

/* --- Badges (con aliases .a-pill-* / .r-pill-*) --- */
.masa-badge,
.a-pill,
.r-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.masa-badge-success,
.a-pill-ok,
.r-pill-ok {
  background: var(--masa-success-soft-bg);
  color: var(--masa-success-soft-fg);
}
.masa-badge-danger,
.a-pill-err,
.r-pill-err {
  background: var(--masa-danger-soft-bg);
  color: var(--masa-danger-soft-fg);
}
.masa-badge-warning,
.a-pill-warn,
.r-pill-warn {
  background: var(--masa-warning-soft-bg);
  color: var(--masa-warning-soft-fg);
}
.masa-badge-info,
.a-pill-info {
  background: var(--masa-info-soft-bg);
  color: var(--masa-info-soft-fg);
}
.masa-badge-neutral {
  background: var(--masa-border);
  color: var(--masa-text-strong);
}

/* --- Empty state --- */
.masa-empty-state,
.a-empty,
.r-empty {
  color: var(--masa-text-subtle);
  text-align: center;
  padding: 20px;
}

/* --- Text helpers --- */
.masa-text-strong  { color: var(--masa-text-strong); }
.masa-text-muted   { color: var(--masa-text-muted); }
.masa-text-subtle  { color: var(--masa-text-subtle); }
.masa-trend-up     { color: var(--masa-success); }
.masa-trend-down   { color: var(--masa-danger); }

/* --- Progress bar --- */
.masa-progress {
  background: var(--masa-border);
  height: 6px;
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
.masa-progress-fill {
  background: var(--masa-color-primary);
  height: 100%;
  transition: width .3s ease;
}

/* --- Dividers y bloques auxiliares --- */
.masa-divider { border-bottom: 1px solid var(--masa-border-soft); }

.masa-code-block {
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  font-size: 11px;
  overflow-x: auto;
  max-height: 300px;
  border: 1px solid var(--masa-border);
}
.masa-inline-meta {
  font-size: 11px;
  color: var(--masa-text-muted);
  margin-bottom: 6px;
}
.masa-expanded-row {
  background: var(--masa-bg-subtle);
  padding: 12px;
}
.masa-pagination {
  margin-top: 16px;
}

/* ============================================================ */
/* S15 END */
/* ============================================================ */

/* S16.1 BEGIN · Experiencia asociado mobile-first · Netflix-like */
/* Vars, layout shell, header, bottom-nav, sidebar desktop, hero, rails, cards, detalle */

:root {
    --masa-aso-header-h: 56px;
    --masa-aso-bottomnav-h: 64px;
    --masa-aso-hero-h-mobile: 240px;
    --masa-aso-hero-h-desktop: 380px;
    --masa-aso-card-radius: 12px;
    --masa-aso-sidebar-w: 72px;
    --masa-aso-bg: #0f1419;
    --masa-aso-bg-raised: #151b22;
    --masa-aso-bg-subtle: rgba(255,255,255,0.04);
    --masa-aso-border: rgba(255,255,255,0.08);
    --masa-aso-border-strong: rgba(255,255,255,0.14);
    --masa-aso-text: #e8eaed;
    --masa-aso-text-dim: #9aa0a6;
    --masa-aso-text-muted: #c7cdd5;
}

/* ========== Shell ========== */
.masa-aso-shell {
    min-height: 100vh;
    background: var(--masa-aso-bg);
    color: var(--masa-aso-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: var(--masa-aso-bottomnav-h);
    -webkit-font-smoothing: antialiased;
}

.masa-aso-main {
    padding-top: var(--masa-aso-header-h);
    min-height: 100vh;
}

/* ========== Header ========== */
.masa-aso-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--masa-aso-header-h);
    background: rgba(15, 20, 25, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 50;
    border-bottom: 1px solid var(--masa-aso-border);
}

.masa-aso-header-brand {
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.masa-aso-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.masa-aso-header-cart {
    position: relative;
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--masa-aso-text);
    text-decoration: none;
    transition: background 0.15s ease;
}
.masa-aso-header-cart:hover { background: rgba(255,255,255,0.08); }

.masa-aso-header-cart-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--masa-aso-bg);
}

.masa-aso-header-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--masa-color-secondary, #FFC300);
    color: #0f1419;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* ========== Bottom-nav móvil ========== */
.masa-aso-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--masa-aso-bottomnav-h);
    background: rgba(15, 20, 25, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 50;
    border-top: 1px solid var(--masa-aso-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.masa-aso-bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    color: var(--masa-aso-text-dim);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.15s ease;
    position: relative;
}

.masa-aso-bottomnav-item:hover { color: var(--masa-aso-text); }
.masa-aso-bottomnav-item.active { color: var(--masa-color-secondary, #FFC300); }

.masa-aso-bottomnav-icon {
    width: 22px; height: 22px;
    margin-bottom: 4px;
}

.masa-aso-bottomnav-label {
    font-size: 10.5px;
    letter-spacing: 0.01em;
}

.masa-aso-bottomnav-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--masa-aso-bg);
}

/* ========== Sidebar desktop ========== */
.masa-aso-sidebar { display: none; }

/* ========== Search sticky ========== */
.masa-aso-search-sticky {
    position: sticky;
    top: var(--masa-aso-header-h);
    background: rgba(15, 20, 25, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 16px 8px;
    z-index: 40;
}

.masa-aso-search-wrap { position: relative; }

.masa-aso-search-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: var(--masa-aso-text);
    padding: 10px 16px 10px 40px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
}

.masa-aso-search-input::placeholder { color: var(--masa-aso-text-dim); }

.masa-aso-search-input:focus {
    border-color: var(--masa-color-primary, #005AA5);
    background: rgba(255,255,255,0.12);
}

.masa-aso-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--masa-aso-text-dim);
    pointer-events: none;
}

/* ========== Chips filtro ========== */
.masa-aso-chips {
    display: flex;
    gap: 8px;
    padding: 8px 16px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.masa-aso-chips::-webkit-scrollbar { display: none; }

.masa-aso-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--masa-aso-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.masa-aso-chip:hover { background: rgba(255,255,255,0.12); }
.masa-aso-chip.active {
    background: var(--masa-color-primary, #005AA5);
    border-color: var(--masa-color-primary, #005AA5);
    color: #fff;
}

/* ========== Hero evento ========== */
.masa-aso-hero {
    position: relative;
    width: calc(100% - 32px);
    margin: 4px 16px 28px;
    height: var(--masa-aso-hero-h-mobile);
    border-radius: var(--masa-aso-card-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
}

.masa-aso-hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.masa-aso-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.masa-aso-hero-badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--masa-color-secondary, #FFC300);
    color: #0f1419;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.masa-aso-hero-title {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.masa-aso-hero-meta {
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    margin: 0 0 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.masa-aso-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: #fff;
    color: #0f1419;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.masa-aso-hero-cta:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); }

/* ========== Rails (carrusel horizontal) ========== */
.masa-aso-rail {
    margin: 0 0 28px;
    padding: 0 16px;
}

.masa-aso-rail-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.masa-aso-rail-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 16px 6px 0;
    margin: 0 -16px;
    padding-left: 16px;
}
.masa-aso-rail-scroll::-webkit-scrollbar { display: none; }

/* ========== Card producto ========== */
.masa-aso-card {
    flex-shrink: 0;
    width: calc(65vw - 16px);
    max-width: 220px;
    scroll-snap-align: start;
    background: var(--masa-aso-bg-subtle);
    border: 1px solid var(--masa-aso-border);
    border-radius: var(--masa-aso-card-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--masa-aso-text);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    display: block;
}
.masa-aso-card:hover {
    transform: translateY(-2px);
    border-color: var(--masa-aso-border-strong);
    background: rgba(255,255,255,0.07);
}

.masa-aso-card-img-wrap {
    aspect-ratio: 16 / 9;
    background: var(--masa-aso-bg-raised);
    overflow: hidden;
    position: relative;
}

.masa-aso-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.masa-aso-card-empty {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
}

.masa-aso-card-body {
    padding: 10px 12px 12px;
}

.masa-aso-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.masa-aso-card-meta {
    font-size: 11px;
    color: var(--masa-aso-text-dim);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.masa-aso-card-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.01em;
}

.masa-aso-card-badge {
    display: inline-block;
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.masa-aso-card-badge.sold-out {
    background: rgba(220, 38, 38, 0.18);
    color: #f87171;
}

/* ========== Empty state ========== */
.masa-aso-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--masa-aso-text-dim);
}

.masa-aso-empty-state-icon {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    opacity: 0.4;
}

.masa-aso-empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--masa-aso-text);
    margin: 0 0 6px;
}

.masa-aso-empty-state p {
    margin: 0;
    font-size: 13px;
}

/* ========== Flash messages ========== */
.masa-aso-flash {
    margin: 12px 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.masa-aso-flash-success {
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
    border: 1px solid rgba(22, 163, 74, 0.3);
}
.masa-aso-flash-error {
    background: rgba(220, 38, 38, 0.18);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* ========== Detalle producto ========== */
.masa-aso-detalle-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--masa-aso-bg-raised);
    margin-bottom: 20px;
    overflow: hidden;
}
.masa-aso-detalle-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.masa-aso-detalle-body {
    padding: 0 16px 120px;
}

.masa-aso-detalle-title {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.masa-aso-detalle-meta {
    color: var(--masa-aso-text-dim);
    font-size: 13px;
    margin: 0 0 16px;
}

.masa-aso-detalle-precio {
    font-size: 28px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.masa-aso-detalle-descripcion {
    color: var(--masa-aso-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.masa-aso-cantidad {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.masa-aso-cantidad-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--masa-aso-border-strong);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.masa-aso-cantidad-btn:hover { background: rgba(255,255,255,0.14); }

.masa-aso-cantidad-input {
    width: 64px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    -moz-appearance: textfield;
}
.masa-aso-cantidad-input::-webkit-outer-spin-button,
.masa-aso-cantidad-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.masa-aso-sticky-cta {
    position: fixed;
    bottom: var(--masa-aso-bottomnav-h);
    left: 0; right: 0;
    background: rgba(15, 20, 25, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--masa-aso-border);
    z-index: 40;
}

.masa-aso-sticky-cta-btn {
    width: 100%;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: filter 0.15s ease, opacity 0.15s ease;
    font-family: inherit;
    box-shadow: 0 2px 12px rgba(0, 90, 165, 0.25);
}
.masa-aso-sticky-cta-btn:hover:not(:disabled) { filter: brightness(1.08); }
.masa-aso-sticky-cta-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ========== Desktop (>= 768px) ========== */
@media (min-width: 768px) {
    .masa-aso-shell {
        padding-left: var(--masa-aso-sidebar-w);
        padding-bottom: 0;
    }

    .masa-aso-bottomnav { display: none; }

    .masa-aso-sidebar {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--masa-aso-sidebar-w);
        background: #0b0f14;
        padding-top: calc(var(--masa-aso-header-h) + 14px);
        gap: 6px;
        z-index: 45;
        border-right: 1px solid var(--masa-aso-border);
    }

    .masa-aso-sidebar-item {
        width: 52px; height: 52px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--masa-aso-text-dim);
        text-decoration: none;
        font-size: 9.5px;
        font-weight: 600;
        transition: background 0.15s ease, color 0.15s ease;
        padding: 6px;
    }
    .masa-aso-sidebar-item:hover {
        background: rgba(255,255,255,0.08);
        color: var(--masa-aso-text);
    }
    .masa-aso-sidebar-item.active {
        background: rgba(255,255,255,0.1);
        color: var(--masa-color-secondary, #FFC300);
    }
    .masa-aso-sidebar-item svg { width: 20px; height: 20px; }

    .masa-aso-header { left: var(--masa-aso-sidebar-w); }

    .masa-aso-hero {
        height: var(--masa-aso-hero-h-desktop);
        margin: 16px 24px 32px;
        width: calc(100% - 48px);
    }

    .masa-aso-hero-title { font-size: 34px; }
    .masa-aso-hero-meta  { font-size: 15px; }

    .masa-aso-card      { width: 240px; max-width: 240px; }
    .masa-aso-rail      { padding: 0 24px; }
    .masa-aso-rail-scroll { margin: 0 -24px; padding: 2px 24px 6px; }
    .masa-aso-rail-title  { font-size: 20px; }

    .masa-aso-search-sticky { padding: 14px 24px 8px; }
    .masa-aso-chips         { padding: 8px 24px 16px; }

    .masa-aso-detalle-body {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 24px 120px;
    }
    .masa-aso-detalle-title   { font-size: 32px; }
    .masa-aso-detalle-precio  { font-size: 36px; }

    .masa-aso-sticky-cta { left: var(--masa-aso-sidebar-w); }
    .masa-aso-sticky-cta-btn { max-width: 420px; margin: 0 auto; display: block; }
}

/* S16.1 END */

/* S16.2 BEGIN · Experiencia asociado flujo compra · carrito/checkout/mis-boletas */

/* ========== Contenedor de página ========== */
.masa-aso-page {
    padding: 16px;
    max-width: 780px;
    margin: 0 auto;
}
.masa-aso-page-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 18px;
    letter-spacing: -0.02em;
}

/* ========== Carrito · items ========== */
.masa-aso-cart-empty {
    text-align: center;
    padding: 80px 20px;
    color: #9aa0a6;
}
.masa-aso-cart-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    opacity: 0.4;
}
.masa-aso-cart-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #e8eaed;
    margin: 0 0 8px;
}
.masa-aso-cart-empty-cta {
    display: inline-block;
    margin-top: 16px;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.masa-aso-cart-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.masa-aso-cart-item {
    display: flex;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    align-items: stretch;
}

.masa-aso-cart-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1f26;
}
.masa-aso-cart-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.masa-aso-cart-thumb-empty {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
}

.masa-aso-cart-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.masa-aso-cart-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}
.masa-aso-cart-meta {
    font-size: 11px;
    color: #9aa0a6;
    margin: 0 0 6px;
}
.masa-aso-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.masa-aso-cart-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.01em;
}
.masa-aso-cart-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
.masa-aso-cart-qty-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.masa-aso-cart-qty-btn:hover { background: rgba(255,255,255,0.14); }
.masa-aso-cart-qty-value {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.masa-aso-cart-remove {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 12px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.masa-aso-cart-remove:hover { color: #fca5a5; }

/* ========== Totales carrito / checkout ========== */
.masa-aso-totales {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.masa-aso-totales-linea {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #c7cdd5;
    padding: 5px 0;
}
.masa-aso-totales-linea.total {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 12px;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}
.masa-aso-totales-linea.total .masa-aso-totales-valor {
    color: var(--masa-color-secondary, #FFC300);
    font-size: 20px;
    letter-spacing: -0.02em;
}

/* ========== Checkout · secciones form ========== */
.masa-aso-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.masa-aso-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.masa-aso-section-title-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.masa-aso-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.masa-aso-form-row:last-child { margin-bottom: 0; }
.masa-aso-label {
    font-size: 12px;
    color: #9aa0a6;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.masa-aso-input,
.masa-aso-select,
.masa-aso-textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: #e8eaed;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.masa-aso-input:focus,
.masa-aso-select:focus,
.masa-aso-textarea:focus {
    border-color: var(--masa-color-primary, #005AA5);
    background: rgba(255,255,255,0.1);
}
.masa-aso-input[readonly] {
    background: rgba(255,255,255,0.03);
    color: #9aa0a6;
}
.masa-aso-input-helper {
    font-size: 11px;
    color: #9aa0a6;
    margin-top: 2px;
}
.masa-aso-input-error {
    font-size: 12px;
    color: #f87171;
    margin-top: 4px;
}

/* ========== Resumen mini (checkout) ========== */
.masa-aso-resumen-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.masa-aso-resumen-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #c7cdd5;
}
.masa-aso-resumen-item-qty {
    color: #9aa0a6;
    margin-right: 6px;
}

/* ========== Mis boletas · timeline ========== */
.masa-aso-boletas-empty {
    text-align: center;
    padding: 80px 20px;
    color: #9aa0a6;
}
.masa-aso-boletas-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    opacity: 0.4;
}

.masa-aso-boleta-card {
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    color: #e8eaed;
    transition: background 0.15s, border-color 0.15s;
}
.masa-aso-boleta-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
}

.masa-aso-boleta-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.masa-aso-boleta-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}
.masa-aso-boleta-fecha {
    font-size: 11px;
    color: #9aa0a6;
    white-space: nowrap;
}
.masa-aso-boleta-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.masa-aso-boleta-info {
    font-size: 12px;
    color: #9aa0a6;
}
.masa-aso-boleta-total {
    font-size: 15px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.01em;
}

.masa-aso-boleta-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}
.masa-aso-boleta-estado.activa  { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
.masa-aso-boleta-estado.pagada  { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
.masa-aso-boleta-estado.pendiente { background: rgba(234, 179, 8, 0.18); color: #fbbf24; }
.masa-aso-boleta-estado.usada   { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.masa-aso-boleta-estado.vencida { background: rgba(220, 38, 38, 0.18); color: #f87171; }
.masa-aso-boleta-estado.anulada { background: rgba(220, 38, 38, 0.18); color: #f87171; }

/* ========== Detalle boleta ========== */
.masa-aso-boleta-hero {
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
    padding: 22px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    color: #fff;
}
.masa-aso-boleta-hero-titulo {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.masa-aso-boleta-hero-fecha {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 12px;
}
.masa-aso-boleta-hero-total {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.masa-aso-boleta-hero-id {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    margin-top: 6px;
}

.masa-aso-detalle-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.masa-aso-detalle-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px;
}
.masa-aso-detalle-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.masa-aso-detalle-item-nombre {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.masa-aso-detalle-item-meta {
    font-size: 12px;
    color: #9aa0a6;
    margin: 2px 0 0;
}
.masa-aso-detalle-item-precio {
    font-size: 14px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    white-space: nowrap;
}
.masa-aso-detalle-item-serial {
    display: inline-block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #c7cdd5;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 3px 10px;
    border-radius: 4px;
    margin-top: 6px;
}

.masa-aso-detalle-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.masa-aso-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e8eaed;
    cursor: pointer;
}
.masa-aso-btn-download:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}
.masa-aso-btn-download.primary {
    background: var(--masa-color-primary, #005AA5);
    border-color: var(--masa-color-primary, #005AA5);
    color: #fff;
}
.masa-aso-btn-download.primary:hover { filter: brightness(1.1); }
.masa-aso-btn-download svg { width: 14px; height: 14px; }

/* ========== Botón CTA secundario (vaciar carrito, volver) ========== */
.masa-aso-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    color: #c7cdd5;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.masa-aso-btn-ghost:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

/* ========== Back link ========== */
.masa-aso-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9aa0a6;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 10px;
    padding: 4px 0;
}
.masa-aso-back:hover { color: #e8eaed; }
.masa-aso-back svg { width: 14px; height: 14px; }

/* ========== Desktop refinos ========== */
@media (min-width: 768px) {
    .masa-aso-page { padding: 24px; }
    .masa-aso-page-title { font-size: 28px; }

    .masa-aso-cart-item { padding: 14px; }
    .masa-aso-cart-thumb { width: 90px; height: 90px; }
    .masa-aso-cart-title { font-size: 15px; }

    .masa-aso-section { padding: 18px 20px; }
    .masa-aso-section-title { font-size: 15px; }

    .masa-aso-boleta-hero { padding: 28px 24px; }
    .masa-aso-boleta-hero-titulo { font-size: 26px; }
    .masa-aso-boleta-hero-total  { font-size: 34px; }
}

/* S16.2 END */

/* S17.1 BEGIN · Catálogo v2 · dropdown avatar · precios + ahorro · chips proveedor */

[x-cloak] { display: none !important; }

/* ========== Header avatar · menu dropdown ========== */
.masa-aso-header-menu {
    position: relative;
}

.masa-aso-header-avatar {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
}

.masa-aso-header-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #151b22;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 60;
}

.masa-aso-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    color: #e8eaed;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}
.masa-aso-header-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.masa-aso-header-dropdown-item svg {
    width: 15px; height: 15px;
    color: #9aa0a6;
    flex-shrink: 0;
}
.masa-aso-header-dropdown-item.danger {
    color: #fca5a5;
}
.masa-aso-header-dropdown-item.danger svg {
    color: #fca5a5;
}
.masa-aso-header-dropdown-item.danger:hover {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

.masa-aso-header-dropdown-form {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.masa-aso-header-dropdown-email {
    padding: 10px 14px;
    font-size: 11px;
    color: #9aa0a6;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    word-break: break-all;
}

/* ========== Precios · tachado + ahorro (card + detalle) ========== */
.masa-aso-card-precios {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}

.masa-aso-precio-tachado {
    font-size: 11px;
    color: #9aa0a6;
    text-decoration: line-through;
    letter-spacing: -0.01em;
}

.masa-aso-precio-asociado {
    font-size: 15px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.01em;
}

.masa-aso-ahorro-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    background: rgba(22, 163, 74, 0.16);
    border: 1px solid rgba(22, 163, 74, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 3px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    align-self: flex-start;
}

/* Detalle · precios destacados */
.masa-aso-detalle-precios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 22px;
}

.masa-aso-detalle-precio-tachado {
    font-size: 15px;
    color: #9aa0a6;
    text-decoration: line-through;
    letter-spacing: -0.01em;
}

.masa-aso-detalle-precio-asociado {
    font-size: 30px;
    font-weight: 800;
    color: var(--masa-color-secondary, #FFC300);
    letter-spacing: -0.02em;
    line-height: 1;
}

.masa-aso-detalle-ahorro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 163, 74, 0.16);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 6px;
    align-self: flex-start;
    letter-spacing: 0.02em;
}
.masa-aso-detalle-ahorro svg {
    width: 14px; height: 14px;
}

@media (min-width: 768px) {
    .masa-aso-detalle-precio-asociado { font-size: 36px; }
    .masa-aso-detalle-precio-tachado  { font-size: 17px; }
}

/* S17.1 END */

/* S17.2a BEGIN · Perfil oscuro + Mi actividad stats */

/* ========== Botón primario oscuro ========== */
.masa-aso-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--masa-color-primary, #005AA5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: filter 0.15s ease;
}
.masa-aso-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.masa-aso-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== Form field auxiliares ========== */
.masa-aso-form-group {
    margin-bottom: 16px;
}
.masa-aso-form-row-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.masa-aso-action-msg {
    color: #4ade80;
    font-size: 13px;
    font-weight: 500;
}
.masa-aso-form-note {
    color: #c7cdd5;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
}
.masa-aso-form-link {
    color: var(--masa-color-secondary, #FFC300);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.masa-aso-form-link:hover { filter: brightness(1.1); }

/* ========== Perfil header ========== */
.masa-aso-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.masa-aso-profile-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--masa-color-secondary, #FFC300);
    color: #0f1419;
    font-weight: 800;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.masa-aso-profile-meta h2 {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.masa-aso-profile-meta p {
    font-size: 13px;
    color: #9aa0a6;
    margin: 0;
}

/* ========== Mi actividad · tarjetas stats ========== */
.masa-aso-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.masa-aso-stat-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.masa-aso-stat-card.highlight {
    background: linear-gradient(135deg, rgba(0, 90, 165, 0.28) 0%, rgba(26, 58, 92, 0.18) 100%);
    border-color: rgba(0, 90, 165, 0.4);
}
.masa-aso-stat-card.secondary {
    background: linear-gradient(135deg, rgba(255, 195, 0, 0.18) 0%, rgba(255, 195, 0, 0.06) 100%);
    border-color: rgba(255, 195, 0, 0.3);
}

.masa-aso-stat-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px; height: 20px;
    color: rgba(255,255,255,0.25);
}
.masa-aso-stat-card.highlight .masa-aso-stat-icon { color: rgba(0, 180, 255, 0.45); }
.masa-aso-stat-card.secondary .masa-aso-stat-icon { color: rgba(255, 195, 0, 0.6); }

.masa-aso-stat-label {
    font-size: 10.5px;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0 0 6px;
    padding-right: 22px;
}

.masa-aso-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 4px;
}
.masa-aso-stat-card.secondary .masa-aso-stat-value {
    color: var(--masa-color-secondary, #FFC300);
}

.masa-aso-stat-sub {
    font-size: 11px;
    color: #9aa0a6;
    line-height: 1.3;
    margin: 0;
}

/* Stat card full width (para las importantes) */
.masa-aso-stat-card.full {
    grid-column: 1 / -1;
}

/* ========== Resumen actividad (dato destacado) ========== */
.masa-aso-hero-stat {
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
    color: #fff;
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.masa-aso-hero-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin: 0 0 6px;
}
.masa-aso-hero-stat-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 6px;
}
.masa-aso-hero-stat-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* ========== Desktop refinos ========== */
@media (min-width: 768px) {
    .masa-aso-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .masa-aso-stat-card {
        padding: 18px 20px;
    }

    .masa-aso-stat-value { font-size: 26px; }
    .masa-aso-hero-stat { padding: 28px 24px; }
    .masa-aso-hero-stat-value { font-size: 40px; }
    .masa-aso-hero-stat-sub { font-size: 14px; }
}

/* S17.2a END */

/* S17.3 BEGIN · Hero carousel eventos · Alpine auto-slide + dots */

.masa-aso-hero-carousel {
    position: relative;
    width: calc(100% - 32px);
    margin: 4px 16px 28px;
    height: var(--masa-aso-hero-h-mobile);
    border-radius: var(--masa-aso-card-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5) 0%, #1a3a5c 100%);
}

.masa-aso-hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.masa-aso-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
}
.masa-aso-hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.masa-aso-hero-slide-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.masa-aso-hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.masa-aso-hero-slide-badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--masa-color-secondary, #FFC300);
    color: #0f1419;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.masa-aso-hero-slide-principal {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.masa-aso-hero-slide-secundario {
    font-size: 13px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    line-height: 1.35;
    max-width: 90%;
}

/* ========== Dots (indicadores) ========== */
.masa-aso-hero-dots {
    position: absolute;
    bottom: 12px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 3;
}

.masa-aso-hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.masa-aso-hero-dot:hover { background: rgba(255,255,255,0.75); }
.masa-aso-hero-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* ========== Desktop ========== */
@media (min-width: 768px) {
    .masa-aso-hero-carousel {
        height: var(--masa-aso-hero-h-desktop);
        margin: 16px 24px 32px;
        width: calc(100% - 48px);
    }

    .masa-aso-hero-slide-principal { font-size: 34px; }
    .masa-aso-hero-slide-secundario { font-size: 15px; max-width: 60%; }

    .masa-aso-hero-dots {
        bottom: 18px;
        right: 24px;
    }
    .masa-aso-hero-dot {
        width: 10px; height: 10px;
    }
}

/* ========== Admin eventos · slots de imágenes ========== */
.admin-evt-img-slot {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
    margin-bottom: 10px;
}
.admin-evt-img-slot.has-image {
    border-style: solid;
    border-color: #94a3b8;
    background: #fff;
}
.admin-evt-img-slot-preview {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
    display: block;
}
.admin-evt-img-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.admin-evt-img-slot-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-evt-img-slot-remove {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
}

/* S17.3 END */

/* S18-DEMO BEGIN · Admin dark theme · sidebar + shell + tabs + overrides */
/* ========================================================================== */
/*  DESIGN TOKENS · paleta admin dark                                         */
/* ========================================================================== */
:root {
    --masa-adm-bg:         #0b0f14;
    --masa-adm-surface:    #141b24;
    --masa-adm-surface-2:  #1a222d;
    --masa-adm-surface-3:  #232d3b;
    --masa-adm-border:     #263142;
    --masa-adm-border-2:   #1f2833;
    --masa-adm-fg:         #e2e8f0;
    --masa-adm-fg-strong:  #f8fafc;
    --masa-adm-fg-muted:   #94a3b8;
    --masa-adm-fg-dim:     #64748b;
    --masa-adm-success:    #10b981;
    --masa-adm-warning:    #f59e0b;
    --masa-adm-danger:     #ef4444;
    --masa-adm-info:       #38bdf8;

    --masa-adm-sidebar-w:  260px;
    --masa-adm-radius:     10px;
    --masa-adm-radius-lg:  14px;
}

/* ========================================================================== */
/*  SHELL · body base                                                          */
/* ========================================================================== */
.masa-adm-shell {
    background: var(--masa-adm-bg);
    color: var(--masa-adm-fg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================== */
/*  SIDEBAR                                                                    */
/* ========================================================================== */
.masa-adm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--masa-adm-sidebar-w);
    height: 100vh;
    background: linear-gradient(180deg, #0c1218 0%, #0b0f14 100%);
    border-right: 1px solid var(--masa-adm-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform 0.25s ease;
}

.masa-adm-sidebar-brand {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--masa-adm-border-2);
    flex-shrink: 0;
}

.masa-adm-sidebar-brand-link {
    display: inline-block;
    color: var(--masa-adm-fg-strong);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.15s;
}
.masa-adm-sidebar-brand-link:hover { opacity: 0.85; }

.masa-adm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--masa-adm-border) transparent;
}
.masa-adm-sidebar-nav::-webkit-scrollbar { width: 6px; }
.masa-adm-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.masa-adm-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--masa-adm-border);
    border-radius: 3px;
}

.masa-adm-nav-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--masa-adm-fg-dim);
    padding: 14px 14px 6px;
    margin-top: 8px;
}
.masa-adm-nav-section:first-of-type { margin-top: 0; }

.masa-adm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 1px 0;
    border-radius: var(--masa-adm-radius);
    color: var(--masa-adm-fg-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    border: 1px solid transparent;
}
.masa-adm-nav-item:hover {
    background: var(--masa-adm-surface-2);
    color: var(--masa-adm-fg-strong);
}
.masa-adm-nav-item.active {
    background: var(--masa-adm-surface);
    color: var(--masa-adm-fg-strong);
    border-color: var(--masa-adm-border);
    box-shadow: inset 3px 0 0 var(--masa-color-primary, #005AA5);
}

.masa-adm-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2;
}

/* ----- user block abajo ----- */
.masa-adm-sidebar-user {
    position: relative;
    padding: 14px 12px;
    border-top: 1px solid var(--masa-adm-border-2);
    flex-shrink: 0;
}

.masa-adm-sidebar-user-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--masa-adm-radius);
    color: var(--masa-adm-fg);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-family: inherit;
    text-align: left;
}
.masa-adm-sidebar-user-btn:hover {
    background: var(--masa-adm-surface-2);
    border-color: var(--masa-adm-border);
}

.masa-adm-sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--masa-color-primary, #005AA5), #1e40af);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.masa-adm-sidebar-user-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.masa-adm-sidebar-user-name {
    color: var(--masa-adm-fg-strong);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.masa-adm-sidebar-user-role {
    color: var(--masa-adm-fg-dim);
    font-size: 11px;
    text-transform: capitalize;
}
.masa-adm-sidebar-user-caret {
    width: 14px;
    height: 14px;
    color: var(--masa-adm-fg-dim);
    flex-shrink: 0;
}

/* ----- dropdown del user ----- */
[x-cloak] { display: none !important; }

.masa-adm-sidebar-user-dropdown {
    position: absolute;
    bottom: calc(100% - 4px);
    left: 12px;
    right: 12px;
    background: var(--masa-adm-surface);
    border: 1px solid var(--masa-adm-border);
    border-radius: var(--masa-adm-radius);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    padding: 6px;
    overflow: hidden;
}
.masa-adm-sidebar-user-email {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--masa-adm-border-2);
    color: var(--masa-adm-fg-dim);
    font-size: 12px;
    word-break: break-all;
    margin-bottom: 4px;
}
.masa-adm-sidebar-user-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--masa-adm-fg);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.masa-adm-sidebar-user-item:hover {
    background: var(--masa-adm-surface-2);
}
.masa-adm-sidebar-user-item svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--masa-adm-fg-muted);
}
.masa-adm-sidebar-user-item.danger {
    color: #fca5a5;
}
.masa-adm-sidebar-user-item.danger svg { color: #fca5a5; }
.masa-adm-sidebar-user-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}
.masa-adm-sidebar-user-form { margin: 0; }

/* ========================================================================== */
/*  SIDEBAR MOBILE OVERLAY + TOGGLE                                            */
/* ========================================================================== */
.masa-adm-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.masa-adm-sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.masa-adm-mobile-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 60;
    width: 42px;
    height: 42px;
    background: var(--masa-adm-surface);
    border: 1px solid var(--masa-adm-border);
    border-radius: var(--masa-adm-radius);
    color: var(--masa-adm-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.masa-adm-mobile-toggle svg { width: 20px; height: 20px; }
.masa-adm-mobile-toggle:hover { background: var(--masa-adm-surface-2); }

@media (max-width: 768px) {
    .masa-adm-sidebar {
        transform: translateX(-100%);
    }
    .masa-adm-sidebar.open {
        transform: translateX(0);
    }
}
@media (min-width: 769px) {
    .masa-adm-mobile-toggle { display: none; }
    .masa-adm-sidebar-overlay { display: none; }
}

/* ========================================================================== */
/*  MAIN + PAGE CONTAINER                                                      */
/* ========================================================================== */
.masa-adm-main {
    margin-left: var(--masa-adm-sidebar-w);
    min-height: 100vh;
    background: var(--masa-adm-bg);
}
@media (max-width: 768px) {
    .masa-adm-main { margin-left: 0; padding-top: 68px; }
}

.masa-adm-page {
    padding: 32px 36px;
    max-width: 1600px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .masa-adm-page { padding: 20px 16px; }
}

.masa-adm-page-slot-header {
    padding: 20px 36px 0;
    max-width: 1600px;
    margin: 0 auto;
    color: var(--masa-adm-fg-strong);
}
.masa-adm-page-slot-header h2 { color: var(--masa-adm-fg-strong) !important; }

/* ========================================================================== */
/*  TABS (admin-tabs.blade.php)                                                */
/* ========================================================================== */
.masa-adm-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--masa-adm-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.masa-adm-tabs::-webkit-scrollbar { display: none; }

.masa-adm-tab {
    padding: 11px 20px;
    color: var(--masa-adm-fg-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.masa-adm-tab:hover { color: var(--masa-adm-fg-strong); }
.masa-adm-tab.active {
    color: var(--masa-adm-fg-strong);
    border-bottom-color: var(--masa-color-primary, #005AA5);
    font-weight: 600;
}

/* ========================================================================== */
/*  OVERRIDES · cascade sobre Tailwind claro dentro del shell admin           */
/* ========================================================================== */
.masa-adm-shell .bg-white,
.masa-adm-shell .bg-gray-50,
.masa-adm-shell .bg-gray-100 {
    background-color: var(--masa-adm-surface) !important;
    color: var(--masa-adm-fg);
}
.masa-adm-shell .bg-gray-200 { background-color: var(--masa-adm-surface-2) !important; }

.masa-adm-shell .text-gray-900,
.masa-adm-shell .text-gray-800,
.masa-adm-shell .text-gray-700,
.masa-adm-shell .text-corp-800,
.masa-adm-shell .text-corp-700,
.masa-adm-shell .text-corp-900 {
    color: var(--masa-adm-fg-strong) !important;
}
.masa-adm-shell .text-gray-600,
.masa-adm-shell .text-gray-500,
.masa-adm-shell .text-corp-600,
.masa-adm-shell .text-corp-500 {
    color: var(--masa-adm-fg-muted) !important;
}
.masa-adm-shell .text-gray-400 {
    color: var(--masa-adm-fg-dim) !important;
}

.masa-adm-shell .border-gray-100,
.masa-adm-shell .border-gray-200,
.masa-adm-shell .border-gray-300,
.masa-adm-shell .border-corp-100,
.masa-adm-shell .border-corp-200 {
    border-color: var(--masa-adm-border) !important;
}

.masa-adm-shell .shadow,
.masa-adm-shell .shadow-sm,
.masa-adm-shell .shadow-md,
.masa-adm-shell .shadow-lg,
.masa-adm-shell .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Inputs / textareas / selects */
.masa-adm-shell input[type="text"],
.masa-adm-shell input[type="email"],
.masa-adm-shell input[type="password"],
.masa-adm-shell input[type="number"],
.masa-adm-shell input[type="date"],
.masa-adm-shell input[type="search"],
.masa-adm-shell input[type="tel"],
.masa-adm-shell input[type="url"],
.masa-adm-shell textarea,
.masa-adm-shell select {
    background-color: var(--masa-adm-surface-2) !important;
    color: var(--masa-adm-fg) !important;
    border-color: var(--masa-adm-border) !important;
}
.masa-adm-shell input::placeholder,
.masa-adm-shell textarea::placeholder {
    color: var(--masa-adm-fg-dim) !important;
}
.masa-adm-shell input:focus,
.masa-adm-shell textarea:focus,
.masa-adm-shell select:focus {
    border-color: var(--masa-color-primary, #005AA5) !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 165, 0.2) !important;
    outline: none;
}
.masa-adm-shell input[type="checkbox"],
.masa-adm-shell input[type="radio"] {
    background-color: var(--masa-adm-surface-2) !important;
    border-color: var(--masa-adm-border) !important;
}

/* Tablas */
.masa-adm-shell table { color: var(--masa-adm-fg); }
.masa-adm-shell thead.bg-gray-50,
.masa-adm-shell thead .bg-gray-50 {
    background-color: var(--masa-adm-surface-2) !important;
}
.masa-adm-shell thead th { color: var(--masa-adm-fg-muted) !important; }
.masa-adm-shell tr.border-t,
.masa-adm-shell .border-t {
    border-top-color: var(--masa-adm-border) !important;
}
.masa-adm-shell tbody tr:hover { background: var(--masa-adm-surface-2); }

/* Botones corp */
.masa-adm-shell .bg-corp-700,
.masa-adm-shell .bg-corp-600,
.masa-adm-shell .bg-corp-800 {
    background-color: var(--masa-color-primary, #005AA5) !important;
    color: #fff !important;
    border: 0;
}
.masa-adm-shell .bg-corp-700:hover,
.masa-adm-shell .bg-corp-600:hover,
.masa-adm-shell .bg-corp-800:hover,
.masa-adm-shell .hover\:bg-corp-800:hover,
.masa-adm-shell .hover\:bg-corp-700:hover {
    filter: brightness(1.1);
}
.masa-adm-shell .text-corp-700 { color: var(--masa-color-primary, #005AA5) !important; }

/* Badges de estado (ok/warn/danger) con más contraste en dark */
.masa-adm-shell .bg-green-100 { background-color: rgba(16, 185, 129, 0.15) !important; }
.masa-adm-shell .text-green-800,
.masa-adm-shell .text-green-700 { color: #6ee7b7 !important; }
.masa-adm-shell .border-green-300,
.masa-adm-shell .border-green-200 { border-color: rgba(16, 185, 129, 0.3) !important; }

.masa-adm-shell .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; }
.masa-adm-shell .text-red-800,
.masa-adm-shell .text-red-600,
.masa-adm-shell .text-red-700 { color: #fca5a5 !important; }

.masa-adm-shell .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
.masa-adm-shell .text-yellow-800 { color: #fcd34d !important; }

.masa-adm-shell .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; }
.masa-adm-shell .text-blue-800 { color: #93c5fd !important; }

.masa-adm-shell .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.masa-adm-shell .text-emerald-800 { color: #6ee7b7 !important; }
.masa-adm-shell .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3) !important; }

/* Modals (fixed inset overlays) */
.masa-adm-shell .fixed.inset-0.bg-black\/40 { background-color: rgba(0, 0, 0, 0.65) !important; }
.masa-adm-shell .bg-white.rounded-lg.shadow-xl {
    background-color: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border);
}

/* Links genéricos */
.masa-adm-shell a.text-corp-700:hover { text-decoration: underline; }

/* File inputs (Configuración) */
.masa-adm-shell input[type="file"] {
    color: var(--masa-adm-fg-muted) !important;
}
.masa-adm-shell .file\:bg-corp-100::file-selector-button,
.masa-adm-shell input[type="file"]::file-selector-button {
    background: var(--masa-adm-surface-2) !important;
    color: var(--masa-adm-fg) !important;
    border: 1px solid var(--masa-adm-border) !important;
}

/* Container paddings homogéneos · si alguna vista trae su propio p-6 */
.masa-adm-shell .p-6 { padding: 0; }
.masa-adm-shell .p-4 { padding: 0; }

/* Headings del slot-header (x-slot name="header") */
.masa-adm-shell .font-heading { font-weight: 600; }

/* S18-DEMO END */

/* S18-DEMO-HF01 BEGIN · Matizar dark + dashboard coherente + escáner armonizado + ancho homogéneo */
/* ========================================================================== */
/*  TOKENS · matizar negro (pisa S18-DEMO por cascade)                         */
/* ========================================================================== */
:root {
    --masa-adm-bg:         #0f1521;
    --masa-adm-surface:    #18202d;
    --masa-adm-surface-2:  #1e2836;
    --masa-adm-surface-3:  #27323f;
    --masa-adm-border:     #2a3547;
    --masa-adm-border-2:   #222c3a;
    --masa-adm-fg:         #e5ebf3;
    --masa-adm-fg-strong:  #f5f8fc;
    --masa-adm-fg-muted:   #9aa6b7;
    --masa-adm-fg-dim:     #6b7790;
}

/* Body con gradient sutil para dar aire (fixed para no scrollear) */
body.masa-adm-shell {
    background:
        radial-gradient(ellipse 100% 60% at 0% 0%, rgba(20, 30, 48, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(15, 30, 55, 0.4) 0%, transparent 60%),
        #0f1521 !important;
    background-attachment: fixed !important;
}

/* ========================================================================== */
/*  FIX-6 · ANCHO HOMOGENEO · .masa-adm-page sin max-width cap                */
/* ========================================================================== */
.masa-adm-page {
    max-width: none !important;
    margin: 0 !important;
}

/* Reset de max-widths heredados dentro del dashboard legacy */
.masa-adm-shell .masa-dashboard-header,
.masa-adm-shell .masa-kpi-grid,
.masa-adm-shell .masa-cards-grid-2 {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================================================== */
/*  FIX-1 · DASHBOARD · overrides de clases .masa-* legacy (S15) en dark       */
/* ========================================================================== */

/* Header del dashboard */
.masa-adm-shell .masa-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    flex-wrap: wrap;
    gap: 12px;
}
.masa-adm-shell .masa-dashboard-meta {
    color: var(--masa-adm-fg-muted) !important;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicador de auto-update */
.masa-adm-shell .masa-dashboard-autorefresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 999px;
    color: #6ee7b7;
    font-size: 12px;
    font-weight: 500;
}
.masa-adm-shell .masa-dashboard-autorefresh::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: masa-pulse-dot 2s ease-in-out infinite;
}
@keyframes masa-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* KPIs grid */
.masa-adm-shell .masa-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) {
    .masa-adm-shell .masa-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .masa-adm-shell .masa-kpi-grid { grid-template-columns: 1fr; }
}

.masa-adm-shell .masa-kpi-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-left: 4px solid var(--masa-color-primary, #005AA5) !important;
    border-radius: var(--masa-adm-radius-lg, 14px);
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.masa-adm-shell .masa-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.masa-adm-shell .masa-kpi-card-success { border-left-color: #10b981 !important; }
.masa-adm-shell .masa-kpi-card-primary { border-left-color: var(--masa-color-primary, #005AA5) !important; }
.masa-adm-shell .masa-kpi-card-warning { border-left-color: var(--masa-color-secondary, #FFC300) !important; }
.masa-adm-shell .masa-kpi-card-info    { border-left-color: #38bdf8 !important; }

.masa-adm-shell .masa-kpi-label {
    color: var(--masa-adm-fg-dim) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.masa-adm-shell .masa-kpi-value {
    color: var(--masa-adm-fg-strong) !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 8px;
}
.masa-adm-shell .masa-kpi-meta {
    color: var(--masa-adm-fg-muted) !important;
    font-size: 12px;
}

.masa-adm-shell .masa-trend-up   { color: #6ee7b7 !important; font-weight: 600; }
.masa-adm-shell .masa-trend-down { color: #fca5a5 !important; font-weight: 600; }
.masa-adm-shell .masa-text-muted { color: var(--masa-adm-fg-muted) !important; }
.masa-adm-shell .masa-text-subtle{ color: var(--masa-adm-fg-dim) !important; }

/* Card genérica (.masa-card) */
.masa-adm-shell .masa-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: var(--masa-adm-radius-lg, 14px);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.masa-adm-shell .masa-section-title {
    color: var(--masa-adm-fg-strong) !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.masa-adm-shell .masa-section-title svg {
    width: 18px;
    height: 18px;
    color: var(--masa-color-primary, #005AA5);
    stroke-width: 2;
}

/* Grid de cards 2 columnas (top productos + top asociados) */
.masa-adm-shell .masa-cards-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .masa-adm-shell .masa-cards-grid-2 { grid-template-columns: 1fr; }
}

/* Chart box */
.masa-adm-shell .masa-chart-box {
    position: relative;
    height: 260px;
    width: 100%;
}
.masa-adm-shell .masa-chart-box canvas {
    max-width: 100%;
}

/* Tablas dashboard */
.masa-adm-shell .masa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.masa-adm-shell .masa-table thead th {
    background: var(--masa-adm-surface-2) !important;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-table tbody td {
    color: var(--masa-adm-fg) !important;
    padding: 12px 14px;
    border-bottom: 1px solid var(--masa-adm-border-2);
}
.masa-adm-shell .masa-table tbody tr:last-child td { border-bottom: 0; }
.masa-adm-shell .masa-table tbody tr:hover {
    background: var(--masa-adm-surface-2) !important;
}
.masa-adm-shell .masa-table th.right,
.masa-adm-shell .masa-table td.right { text-align: right; }

.masa-adm-shell .masa-table-wrapper {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--masa-adm-border) transparent;
}

/* Empty state */
.masa-adm-shell .masa-empty-state {
    color: var(--masa-adm-fg-dim) !important;
    text-align: center;
    padding: 32px 16px;
    font-size: 14px;
    font-style: italic;
}

/* Evento rows (ocupación) */
.masa-adm-shell .masa-evento-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--masa-adm-border-2);
}
.masa-adm-shell .masa-evento-row:last-child { border-bottom: 0; }
.masa-adm-shell .masa-evento-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--masa-adm-fg) !important;
    margin-bottom: 8px;
    font-size: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.masa-adm-shell .masa-evento-row-head strong {
    color: var(--masa-adm-fg-strong) !important;
}

.masa-adm-shell .masa-progress {
    height: 8px;
    background: var(--masa-adm-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.masa-adm-shell .masa-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--masa-color-primary, #005AA5) 0%,
        var(--masa-color-secondary, #FFC300) 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Botón primary themed (legacy) · lo neutralizo por si vuelve */
.masa-adm-shell .masa-btn-primary-themed,
.masa-adm-shell .masa-btn-primary {
    background: var(--masa-color-primary, #005AA5) !important;
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 8px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.masa-adm-shell .masa-btn-primary-themed:hover,
.masa-adm-shell .masa-btn-primary:hover { filter: brightness(1.1); }

/* ========================================================================== */
/*  FIX-7 · CONFIGURACION WIDENING                                            */
/* ========================================================================== */
.masa-adm-shell .max-w-3xl {
    max-width: none !important;
}
/* Forzar que el grid de colores (primario/secundario) mantenga 2 cols */
.masa-adm-shell .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 800px) {
    .masa-adm-shell .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/*  FIX-4 · ESCANER DARK · sin sidebar pero mismo look                        */
/* ========================================================================== */
body.masa-scan-shell {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at top, rgba(20, 30, 48, 0.6) 0%, transparent 50%),
        #0f1521;
    color: #e5ebf3;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.masa-scan-topbar {
    background: linear-gradient(180deg, #1a2233 0%, #141c2b 100%);
    border-bottom: 1px solid #2a3547;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.masa-scan-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.masa-scan-brand-name {
    color: #f5f8fc;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.masa-scan-brand-sub {
    color: #9aa6b7;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.masa-scan-topbar-actions { display: flex; gap: 8px; }
.masa-scan-topbar-btn {
    color: #e5ebf3;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.masa-scan-topbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.masa-scan-topbar-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.masa-scan-topbar-btn.danger { color: #fca5a5; }
.masa-scan-topbar-btn.danger:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }

.masa-scan-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* Overrides legacy card/alert/btn DENTRO del scan-shell (no pisan admin shell) */
.masa-scan-shell .card {
    background: #18202d !important;
    border: 1px solid #2a3547 !important;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 16px;
    color: #e5ebf3;
}
.masa-scan-shell .card h2 {
    color: #f5f8fc;
    margin-top: 0;
}

/* Color de texto de párrafos del escáner */
.masa-scan-shell p,
.masa-scan-shell ol,
.masa-scan-shell ul { color: #c5cddb; }

/* Botones del escáner (táctil · grandes) */
.masa-scan-shell .btn {
    display: inline-block;
    padding: 14px 20px;
    border-radius: 10px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}
.masa-scan-shell .btn:hover { filter: brightness(1.1); }
.masa-scan-shell .btn:active { transform: scale(0.98); }
.masa-scan-shell .btn-block { display: block; width: 100%; text-align: center; }
.masa-scan-shell .btn-primary {
    background: var(--color-primario, #005AA5);
    color: #fff;
}
.masa-scan-shell .btn-secondary {
    background: #27323f;
    color: #e5ebf3;
    border: 1px solid #2a3547;
}
.masa-scan-shell .btn-success {
    background: #10b981;
    color: #fff;
}
.masa-scan-shell .btn-danger {
    background: #ef4444;
    color: #fff;
}

/* Alerts con borde izquierdo fuerte + fondo con transparencia de color */
.masa-scan-shell .alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    border-left: 4px solid;
}
.masa-scan-shell .alert-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
    color: #6ee7b7;
}
.masa-scan-shell .alert-info {
    background: rgba(59, 130, 246, 0.12);
    border-color: #3b82f6;
    color: #93c5fd;
}
.masa-scan-shell .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: #f59e0b;
    color: #fcd34d;
}
.masa-scan-shell .alert-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #fca5a5;
}

/* Texto secundario de la selección (colores grises en claro) · pisar a dark */
.masa-scan-shell small { color: #9aa6b7; }

/* Variables del escáner legacy para compatibilidad con inline styles del blade */
.masa-scan-shell {
    --color-primario: var(--masa-color-primary, #005AA5);
    --color-secundario: var(--masa-color-secondary, #FFC300);
    --color-ok: #10b981;
    --color-warn: #f59e0b;
    --color-error: #ef4444;
    --color-gris: #9aa6b7;
    --color-bg: #0f1521;
    --color-card: #18202d;
    --color-text: #e5ebf3;
}

/* S18-DEMO-HF01 END */


/* ========================================================================== */
/*  BEGIN S18-DEMO-HF02A · ESTÁNDAR TÍTULO + ANCHO HOMOGÉNEO SLOT-HEADER       */
/*  - Reset de ancho en .masa-adm-page-slot-header (matchea FIX-6)             */
/*  - Clase estándar .masa-adm-page-title reutilizable en todas las ventanas   */
/*  - Padding-top 36px · baja el título respetando la línea del sidebar brand  */
/* ========================================================================== */

.masa-adm-page-slot-header {
    max-width: none !important;
    margin: 0 !important;
    padding: 36px 36px 0 !important;
}
@media (max-width: 768px) {
    .masa-adm-page-slot-header {
        padding: 24px 16px 0 !important;
    }
}

.masa-adm-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--masa-adm-fg-strong);
    line-height: 1.3;
}

/* Hardening · anula estilos Tailwind legacy dentro del slot-header */
.masa-adm-page-slot-header h1,
.masa-adm-page-slot-header h2 {
    color: var(--masa-adm-fg-strong) !important;
}

/* ========================================================================== */
/*  END S18-DEMO-HF02A                                                          */
/* ========================================================================== */


/* ========================================================================== */
/*  BEGIN S18-DEMO-HF02B · PRODUCTOS · grid 3-cols + card dark + chip buttons  */
/*  - Grid forzado a 3 cols desktop (>900px · cascade Tailwind roto en shell)  */
/*  - Card dark con hover lift suave                                           */
/*  - Chip buttons filled suave (primary + danger)                             */
/* ========================================================================== */

.masa-adm-shell .masa-adm-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
@media (max-width: 900px) {
    .masa-adm-shell .masa-adm-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .masa-adm-shell .masa-adm-products-grid {
        grid-template-columns: 1fr !important;
    }
}

.masa-adm-shell .masa-adm-product-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.masa-adm-shell .masa-adm-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border-color: var(--masa-adm-border-2, #35435a) !important;
}

/* Chip buttons · filled suave (12% alpha fondo, 35% alpha border) */
.masa-adm-shell .masa-adm-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.masa-adm-shell .masa-adm-chip-primary {
    background: rgba(0, 90, 165, 0.14);
    border-color: rgba(0, 90, 165, 0.40);
    color: #8fc0e8 !important;
}
.masa-adm-shell .masa-adm-chip-primary:hover {
    background: rgba(0, 90, 165, 0.24);
    border-color: rgba(0, 90, 165, 0.60);
    color: #b4d4ee !important;
}

.masa-adm-shell .masa-adm-chip-danger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.40);
    color: #fca5a5 !important;
}
.masa-adm-shell .masa-adm-chip-danger:hover {
    background: rgba(239, 68, 68, 0.24);
    border-color: rgba(239, 68, 68, 0.60);
    color: #fecaca !important;
}

/* ========================================================================== */
/*  END S18-DEMO-HF02B                                                          */
/* ========================================================================== */


/* ========================================================================== */
/*  BEGIN S18-DEMO-HF02C · EVENTOS · dark + miniaturas + UX upload             */
/*  Cascade adicional · slate/rose/emerald/blue                                */
/*  Clases propias · header-row · btn-primary/ghost · input · modal · evt-*    */
/* ========================================================================== */

/* -------- Cascade Tailwind faltante en HF01 -------- */
.masa-adm-shell .text-slate-300 { color: var(--masa-adm-fg) !important; }
.masa-adm-shell .text-slate-400 { color: var(--masa-adm-fg-dim) !important; }
.masa-adm-shell .text-slate-500 { color: var(--masa-adm-fg-muted) !important; }
.masa-adm-shell .text-slate-600 { color: var(--masa-adm-fg-muted) !important; }
.masa-adm-shell .text-slate-700 { color: var(--masa-adm-fg) !important; }
.masa-adm-shell .text-slate-800 { color: var(--masa-adm-fg-strong) !important; }
.masa-adm-shell .bg-slate-50 { background: var(--masa-adm-surface) !important; }
.masa-adm-shell .bg-slate-100 { background: var(--masa-adm-surface-2) !important; }
.masa-adm-shell .bg-slate-900 { background: var(--masa-color-primary, #005AA5) !important; }
.masa-adm-shell .border-slate-100 { border-color: var(--masa-adm-border-2, #2a3547) !important; }
.masa-adm-shell .border-slate-200 { border-color: var(--masa-adm-border) !important; }
.masa-adm-shell .border-slate-300 { border-color: var(--masa-adm-border) !important; }

.masa-adm-shell .text-rose-600,
.masa-adm-shell .text-rose-700 { color: #fca5a5 !important; }
.masa-adm-shell .bg-rose-50 { background: rgba(239, 68, 68, 0.12) !important; }
.masa-adm-shell .border-rose-200 { border-color: rgba(239, 68, 68, 0.3) !important; }

.masa-adm-shell .text-emerald-700 { color: #6ee7b7 !important; }
.masa-adm-shell .bg-blue-50 { background: rgba(59, 130, 246, 0.12) !important; }
.masa-adm-shell .text-blue-600,
.masa-adm-shell .text-blue-700 { color: #7fb3de !important; }
.masa-adm-shell .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }

/* -------- Header row (título + CTA en línea) -------- */
.masa-adm-shell .masa-adm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}
.masa-adm-shell .masa-adm-page-subtitle {
    margin: 4px 0 0 0;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 13px;
}

/* -------- Botones primarios y ghost -------- */
.masa-adm-shell .masa-adm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--masa-color-primary, #005AA5) !important;
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.masa-adm-shell .masa-adm-btn-primary:hover { opacity: 0.92; }
.masa-adm-shell .masa-adm-btn-primary:active { transform: translateY(1px); }
.masa-adm-shell .masa-adm-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.masa-adm-shell .masa-adm-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent !important;
    color: var(--masa-adm-fg) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.masa-adm-shell .masa-adm-btn-ghost:hover {
    background: var(--masa-adm-surface-2) !important;
    border-color: var(--masa-adm-border-2, #35435a) !important;
}

/* -------- Inputs dark estandarizados -------- */
.masa-adm-shell .masa-adm-input {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    color: var(--masa-adm-fg) !important;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.masa-adm-shell .masa-adm-input:focus {
    outline: none;
    border-color: var(--masa-color-primary, #005AA5) !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 165, 0.28);
}
.masa-adm-shell .masa-adm-input::placeholder { color: var(--masa-adm-fg-dim) !important; }
.masa-adm-shell .masa-adm-input-sm { padding: 6px 10px; font-size: 12px; }

/* -------- Labels -------- */
.masa-adm-shell .masa-adm-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--masa-adm-fg) !important;
    margin-bottom: 4px;
}
.masa-adm-shell .masa-adm-label-sm {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--masa-adm-fg-muted) !important;
    margin-bottom: 4px;
}
.masa-adm-shell .masa-adm-form-err {
    font-size: 11px;
    color: #fca5a5 !important;
    display: block;
    margin-top: 3px;
}

/* -------- Checkbox -------- */
.masa-adm-shell .masa-adm-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--masa-adm-fg) !important;
    font-size: 13px;
    cursor: pointer;
}
.masa-adm-shell .masa-adm-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--masa-color-primary, #005AA5);
}

/* -------- Flash OK -------- */
.masa-adm-shell .masa-adm-flash-ok {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

/* -------- Table card dark -------- */
.masa-adm-shell .masa-adm-table-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* -------- Tabla eventos -------- */
.masa-adm-shell .masa-adm-evt-table { border-collapse: collapse; }
.masa-adm-shell .masa-adm-evt-table thead tr {
    background: var(--masa-adm-surface-2) !important;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-adm-evt-table thead th {
    text-align: left;
    padding: 13px 14px;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.masa-adm-shell .masa-adm-evt-table tbody tr {
    border-top: 1px solid var(--masa-adm-border-2, #2a3547);
    transition: background 0.12s;
}
.masa-adm-shell .masa-adm-evt-table tbody tr:first-child { border-top: 0; }
.masa-adm-shell .masa-adm-evt-table tbody tr:hover {
    background: var(--masa-adm-surface-2) !important;
}
.masa-adm-shell .masa-adm-evt-table tbody td {
    padding: 14px 14px;
    color: var(--masa-adm-fg) !important;
    vertical-align: middle;
}
.masa-adm-shell .masa-adm-evt-name {
    font-weight: 600;
    color: var(--masa-adm-fg-strong) !important;
}
.masa-adm-shell .masa-adm-evt-desc {
    font-size: 11px;
    color: var(--masa-adm-fg-muted) !important;
    margin-top: 2px;
}
.masa-adm-shell .masa-adm-evt-cell { color: var(--masa-adm-fg) !important; }
.masa-adm-shell .masa-adm-evt-cell-sub {
    font-size: 11px;
    color: var(--masa-adm-fg-dim) !important;
    margin-top: 2px;
}
.masa-adm-shell .masa-adm-evt-noimg {
    font-size: 11px;
    color: var(--masa-adm-fg-dim) !important;
    font-style: italic;
}
.masa-adm-shell .masa-adm-evt-empty {
    padding: 40px 14px !important;
    text-align: center;
    color: var(--masa-adm-fg-dim) !important;
}

/* -------- Miniaturas del listado -------- */
.masa-adm-shell .masa-adm-evt-thumbs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.masa-adm-shell .masa-adm-evt-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--masa-adm-border);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s, box-shadow 0.18s;
    cursor: zoom-in;
}
.masa-adm-shell .masa-adm-evt-thumb:hover {
    transform: scale(2.4);
    border-color: var(--masa-color-primary, #005AA5);
    z-index: 10;
    position: relative;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
}
.masa-adm-shell .masa-adm-evt-thumbs-more {
    font-size: 10px;
    font-weight: 700;
    color: var(--masa-adm-fg-muted);
    background: var(--masa-adm-surface-2);
    padding: 3px 7px;
    border-radius: 5px;
    margin-left: 2px;
}

/* -------- Chip neutral (para Desactivar / Activar) -------- */
.masa-adm-shell .masa-adm-chip-neutral {
    background: rgba(154, 166, 183, 0.10);
    border-color: rgba(154, 166, 183, 0.35);
    color: var(--masa-adm-fg-muted) !important;
}
.masa-adm-shell .masa-adm-chip-neutral:hover {
    background: rgba(154, 166, 183, 0.22);
    border-color: rgba(154, 166, 183, 0.55);
    color: var(--masa-adm-fg) !important;
}
.masa-adm-shell .masa-adm-chip-sm { padding: 4px 10px; font-size: 11px; }

/* -------- Badges -------- */
.masa-adm-shell .masa-adm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.masa-adm-shell .masa-adm-badge-success {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.40);
    color: #6ee7b7 !important;
}
.masa-adm-shell .masa-adm-badge-danger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.40);
    color: #fca5a5 !important;
}
.masa-adm-shell .masa-adm-badge-muted {
    background: rgba(154, 166, 183, 0.10);
    border-color: rgba(154, 166, 183, 0.30);
    color: var(--masa-adm-fg-muted) !important;
}

/* -------- Modal -------- */
.masa-adm-shell .masa-adm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.70);
    padding: 16px;
    backdrop-filter: blur(4px);
}
.masa-adm-shell .masa-adm-modal-panel {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.masa-adm-shell .masa-adm-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--masa-adm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.masa-adm-shell .masa-adm-modal-header h3 {
    margin: 0;
    color: var(--masa-adm-fg-strong) !important;
    font-size: 16px;
    font-weight: 600;
}
.masa-adm-shell .masa-adm-modal-close {
    background: transparent;
    border: 0;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.15s;
}
.masa-adm-shell .masa-adm-modal-close:hover { color: var(--masa-adm-fg-strong) !important; }

.masa-adm-shell .masa-adm-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}
.masa-adm-shell .masa-adm-modal-footer {
    padding: 14px 20px;
    background: var(--masa-adm-surface-2) !important;
    border-top: 1px solid var(--masa-adm-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.masa-adm-shell .masa-adm-modal-section {
    padding-top: 14px;
    border-top: 1px solid var(--masa-adm-border);
    margin-top: 8px;
}
.masa-adm-shell .masa-adm-modal-section-title {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--masa-adm-fg-strong) !important;
}
.masa-adm-shell .masa-adm-modal-section-sub {
    margin: 0 0 12px 0;
    font-size: 11px;
    color: var(--masa-adm-fg-muted) !important;
    line-height: 1.4;
}

/* -------- Upload slot (imágenes del hero) -------- */
.masa-adm-shell .masa-adm-evt-upload-slot {
    background: var(--masa-adm-surface-2) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.masa-adm-shell .masa-adm-evt-upload-slot.has-image { border-color: rgba(16, 185, 129, 0.40) !important; }
.masa-adm-shell .masa-adm-evt-upload-slot.marked-delete { border-color: rgba(239, 68, 68, 0.55) !important; }

.masa-adm-shell .masa-adm-evt-upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.masa-adm-shell .masa-adm-evt-upload-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--masa-adm-fg-muted) !important;
}
.masa-adm-shell .masa-adm-evt-upload-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.masa-adm-shell .masa-adm-evt-upload-spinner {
    font-size: 11px;
    color: #fcd34d !important;
    font-style: italic;
    animation: masa-pulse-subtle 1.4s ease-in-out infinite;
}
@keyframes masa-pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.masa-adm-shell .masa-adm-evt-upload-preview {
    width: 100%;
    aspect-ratio: 21/9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #000;
    transition: opacity 0.15s;
}
.masa-adm-shell .masa-adm-evt-upload-preview.dimmed { opacity: 0.35; }
.masa-adm-shell .masa-adm-evt-upload-marked {
    font-size: 11px;
    color: #fca5a5 !important;
    margin: 0 0 8px 0;
}

.masa-adm-shell .masa-adm-evt-upload-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.masa-adm-shell .masa-adm-file-input {
    font-size: 11px;
    color: var(--masa-adm-fg-muted) !important;
    width: 100%;
}
.masa-adm-shell .masa-adm-file-input::file-selector-button {
    background: var(--masa-adm-surface);
    border: 1px solid var(--masa-adm-border);
    color: var(--masa-adm-fg);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    margin-right: 8px;
    transition: background 0.15s;
}
.masa-adm-shell .masa-adm-file-input::file-selector-button:hover {
    background: var(--masa-adm-surface-2);
}

/* ========================================================================== */
/*  END S18-DEMO-HF02C                                                          */
/* ========================================================================== */


/* ========================================================================== */
/*  BEGIN S18-DEMO-HF02D · COMERCIAL + CONFIG (ventas + BI + asociados + conf) */
/* ========================================================================== */

/* -------- Cascade adicional para clases Tailwind usadas por ventas ------- */
.masa-adm-shell .bg-green-100 { background: rgba(16, 185, 129, 0.14) !important; }
.masa-adm-shell .bg-green-700 { background: #059669 !important; }
.masa-adm-shell .bg-green-800:hover { background: #047857 !important; }
.masa-adm-shell .text-green-800 { color: #6ee7b7 !important; }
.masa-adm-shell .bg-red-100 { background: rgba(239, 68, 68, 0.14) !important; }
.masa-adm-shell .text-red-800 { color: #fca5a5 !important; }
.masa-adm-shell .text-red-700 { color: #fca5a5 !important; }
.masa-adm-shell .bg-yellow-100 { background: rgba(245, 158, 11, 0.14) !important; }
.masa-adm-shell .text-yellow-800 { color: #fcd34d !important; }
.masa-adm-shell .bg-gray-50 { background: var(--masa-adm-surface-2) !important; }
.masa-adm-shell .bg-gray-100 { background: var(--masa-adm-surface-2) !important; }
.masa-adm-shell .text-gray-500 { color: var(--masa-adm-fg-muted) !important; }
.masa-adm-shell .text-gray-800 { color: var(--masa-adm-fg) !important; }
.masa-adm-shell .text-blue-600 { color: #7fb3de !important; }
.masa-adm-shell .hover\:bg-gray-50:hover { background: var(--masa-adm-surface-2) !important; }
.masa-adm-shell .divide-y > * + * { border-top-color: var(--masa-adm-border-2, #2a3547) !important; }
.masa-adm-shell .border-b { border-bottom-color: var(--masa-adm-border) !important; }

/* -------- Tabs bar (Listado / Reporte BI / Anulaciones) ------- */
.masa-adm-shell .tabs-admin,
.masa-adm-shell .admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--masa-adm-border);
    margin-bottom: 20px;
    padding-bottom: 0;
    background: transparent !important;
}
.masa-adm-shell .tabs-admin a,
.masa-adm-shell .admin-tabs a {
    padding: 10px 18px;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    background: transparent !important;
}
.masa-adm-shell .tabs-admin a:hover,
.masa-adm-shell .admin-tabs a:hover {
    color: var(--masa-adm-fg) !important;
    background: transparent !important;
}
.masa-adm-shell .tabs-admin a.active,
.masa-adm-shell .admin-tabs a.active,
.masa-adm-shell .tabs-admin a.is-active,
.masa-adm-shell .admin-tabs a.is-active {
    color: var(--masa-color-primary, #005AA5) !important;
    border-bottom-color: var(--masa-color-primary, #005AA5) !important;
    background: transparent !important;
}

/* -------- Page container (ventas · BI) -------- */
.masa-adm-shell .masa-adm-venta-page,
.masa-adm-shell .masa-adm-bi-page {
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -------- Select dark global (con flecha SVG) -------- */
.masa-adm-shell .masa-adm-select {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    color: var(--masa-adm-fg) !important;
    padding: 9px 36px 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239AA6B7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 6 8 10 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.masa-adm-shell .masa-adm-select:focus {
    outline: none;
    border-color: var(--masa-color-primary, #005AA5) !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 165, 0.25);
}
.masa-adm-shell .masa-adm-select option {
    background: var(--masa-adm-surface);
    color: var(--masa-adm-fg);
}

/* =========================================================================
   VENTAS (listado)
   ========================================================================= */

.masa-adm-shell .masa-adm-venta-filter-bar {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr auto;
    gap: 10px;
    align-items: end;
}
@media (max-width: 900px) {
    .masa-adm-shell .masa-adm-venta-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

.masa-adm-shell .masa-adm-venta-table { border-collapse: collapse; }
.masa-adm-shell .masa-adm-venta-table thead tr {
    background: var(--masa-adm-surface-2) !important;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-adm-venta-table thead th {
    text-align: left;
    padding: 13px 14px;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.masa-adm-shell .masa-adm-venta-table tbody tr {
    border-top: 1px solid var(--masa-adm-border-2, #2a3547);
    transition: background 0.12s;
}
.masa-adm-shell .masa-adm-venta-table tbody tr:first-child { border-top: 0; }
.masa-adm-shell .masa-adm-venta-table tbody tr:hover {
    background: var(--masa-adm-surface-2) !important;
}
.masa-adm-shell .masa-adm-venta-table tbody td {
    padding: 14px 14px;
    color: var(--masa-adm-fg) !important;
    vertical-align: middle;
}
.masa-adm-shell .masa-adm-venta-ref { color: var(--masa-adm-fg-strong) !important; }
.masa-adm-shell .masa-adm-venta-cell { color: var(--masa-adm-fg) !important; }
.masa-adm-shell .masa-adm-venta-asoc-name {
    font-weight: 500;
    color: var(--masa-adm-fg-strong) !important;
}
.masa-adm-shell .masa-adm-venta-asoc-id {
    font-size: 11px;
    color: var(--masa-adm-fg-dim) !important;
    margin-top: 1px;
}
.masa-adm-shell .masa-adm-venta-money {
    font-variant-numeric: tabular-nums;
    color: var(--masa-adm-fg-strong) !important;
}
.masa-adm-shell .masa-adm-venta-money-danger {
    color: #fca5a5 !important;
    font-variant-numeric: tabular-nums;
}
.masa-adm-shell .masa-adm-venta-dim { color: var(--masa-adm-fg-dim) !important; }
.masa-adm-shell .masa-adm-venta-empty {
    padding: 48px 16px !important;
    text-align: center;
    color: var(--masa-adm-fg-dim) !important;
}
.masa-adm-shell .masa-adm-venta-pagination {
    color: var(--masa-adm-fg-muted);
}
.masa-adm-shell .masa-adm-venta-pagination a,
.masa-adm-shell .masa-adm-venta-pagination button {
    background: var(--masa-adm-surface) !important;
    color: var(--masa-adm-fg) !important;
    border-color: var(--masa-adm-border) !important;
}

/* Badges de ventas */
.masa-adm-shell .masa-adm-venta-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    text-transform: capitalize;
}
.masa-adm-shell .masa-adm-venta-badge-ok {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.40);
    color: #6ee7b7 !important;
}
.masa-adm-shell .masa-adm-venta-badge-danger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.40);
    color: #fca5a5 !important;
}
.masa-adm-shell .masa-adm-venta-badge-warn {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.40);
    color: #fcd34d !important;
}
.masa-adm-shell .masa-adm-venta-badge-muted {
    background: rgba(154, 166, 183, 0.10);
    border-color: rgba(154, 166, 183, 0.30);
    color: var(--masa-adm-fg-muted) !important;
}

/* =========================================================================
   REPORTE BI (reporte-ventas)
   ========================================================================= */

/* Override de clases legacy r-* (pre-HF02D) */
.masa-adm-shell .r-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    color: var(--masa-adm-fg) !important;
}
.masa-adm-shell .r-card h3 {
    margin: 0 0 12px 0;
    color: var(--masa-adm-fg-strong) !important;
    font-size: 15px;
    font-weight: 600;
}
.masa-adm-shell .r-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    text-decoration: none !important;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.masa-adm-shell .r-btn-secondary {
    background: transparent !important;
    color: var(--masa-adm-fg) !important;
    border-color: var(--masa-adm-border) !important;
}
.masa-adm-shell .r-btn-secondary:hover {
    background: var(--masa-adm-surface-2) !important;
}
.masa-adm-shell .r-btn-success {
    background: var(--masa-color-primary, #005AA5) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.masa-adm-shell .r-btn-success:hover { opacity: 0.92; }
.masa-adm-shell .r-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.masa-adm-shell .r-filters label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--masa-adm-fg-muted) !important;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.masa-adm-shell .r-filters input[type="date"],
.masa-adm-shell .r-filters select {
    background: var(--masa-adm-surface-2) !important;
    border: 1px solid var(--masa-adm-border) !important;
    color: var(--masa-adm-fg) !important;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    width: 100%;
}
.masa-adm-shell .r-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* KPI Cards del BI (nuevas clases masa-adm-bi-*) */
.masa-adm-shell .masa-adm-bi-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 1200px) {
    .masa-adm-shell .masa-adm-bi-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .masa-adm-shell .masa-adm-bi-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.masa-adm-shell .masa-adm-bi-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 18px 20px;
    min-height: 110px;
    transition: border-color 0.15s, transform 0.15s;
}
.masa-adm-shell .masa-adm-bi-card:hover {
    border-color: var(--masa-color-primary, #005AA5) !important;
    transform: translateY(-1px);
}
.masa-adm-shell .masa-adm-bi-card.alert { border-color: rgba(239, 68, 68, 0.4) !important; }
.masa-adm-shell .masa-adm-bi-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--masa-adm-fg-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.masa-adm-shell .masa-adm-bi-card-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--masa-adm-fg-strong) !important;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.masa-adm-shell .masa-adm-bi-card-value-money {
    font-size: 22px;
    font-weight: 700;
    color: var(--masa-adm-fg-strong) !important;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.masa-adm-shell .masa-adm-bi-card-sub {
    font-size: 11px;
    color: var(--masa-adm-fg-dim) !important;
    margin-top: 6px;
}

/* Filter card del BI */
.masa-adm-shell .masa-adm-bi-filter-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.masa-adm-shell .masa-adm-bi-filter-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--masa-adm-fg-strong) !important;
    margin-bottom: 12px;
}
.masa-adm-shell .masa-adm-bi-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.masa-adm-shell .masa-adm-bi-filter-item label { margin-bottom: 4px; }
.masa-adm-shell .masa-adm-bi-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--masa-adm-border);
    flex-wrap: wrap;
}

/* Demo grid (4 cards con segment bars) */
.masa-adm-shell .masa-adm-bi-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .masa-adm-shell .masa-adm-bi-demo-grid { grid-template-columns: 1fr; }
}
.masa-adm-shell .masa-adm-bi-demo-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 18px 20px;
}
.masa-adm-shell .masa-adm-bi-demo-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--masa-adm-fg-strong) !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-adm-bi-demo-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--masa-adm-fg-dim) !important;
    font-size: 12px;
    font-style: italic;
}

/* Segment bars animadas */
.masa-adm-shell .masa-adm-bi-segment-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
}
.masa-adm-shell .masa-adm-bi-segment-row + .masa-adm-bi-segment-row {
    border-top: 1px solid var(--masa-adm-border-2, #2a3547);
}
.masa-adm-shell .masa-adm-bi-segment-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--masa-adm-fg) !important;
}
.masa-adm-shell .masa-adm-bi-segment-bar-wrapper {
    height: 8px;
    background: var(--masa-adm-surface-2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.masa-adm-shell .masa-adm-bi-segment-bar-fill {
    height: 100%;
    background: var(--masa-color-primary, #005AA5);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: 2px;
}
.masa-adm-shell .masa-adm-bi-segment-bar-fill.accent  { background: #6ee7b7; }
.masa-adm-shell .masa-adm-bi-segment-bar-fill.warn    { background: #fcd34d; }
.masa-adm-shell .masa-adm-bi-segment-bar-fill.success { background: #34d399; }
.masa-adm-shell .masa-adm-bi-segment-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--masa-adm-fg-strong) !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 100px;
}
.masa-adm-shell .masa-adm-bi-segment-money {
    font-weight: 400;
    color: var(--masa-adm-fg-muted) !important;
    margin-left: 4px;
}

/* Tabla agregada/detalle del BI */
.masa-adm-shell .masa-adm-bi-table { border-collapse: collapse; }
.masa-adm-shell .masa-adm-bi-table thead tr {
    background: var(--masa-adm-surface-2) !important;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-adm-bi-table thead th {
    text-align: left;
    padding: 12px 14px;
    color: var(--masa-adm-fg-muted) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.masa-adm-shell .masa-adm-bi-table tbody tr {
    border-top: 1px solid var(--masa-adm-border-2, #2a3547);
}
.masa-adm-shell .masa-adm-bi-table tbody td {
    padding: 12px 14px;
    color: var(--masa-adm-fg) !important;
    font-variant-numeric: tabular-nums;
}
.masa-adm-shell .masa-adm-bi-table-header {
    padding: 14px 20px;
    background: var(--masa-adm-surface-2);
    border-bottom: 1px solid var(--masa-adm-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--masa-adm-fg-strong);
}
.masa-adm-shell .masa-adm-bi-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--masa-adm-fg-dim) !important;
    font-size: 13px;
    font-style: italic;
}
.masa-adm-shell .masa-adm-bi-error-banner {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5 !important;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 12px;
}

/* =========================================================================
   ASOCIADOS (cards KPI con padding tweak + demo grid)
   ========================================================================= */

.masa-adm-shell .masa-adm-asoc-kpi-grid > div {
    padding: 20px 22px !important;
    border-radius: 12px !important;
}

.masa-adm-shell .masa-adm-asoc-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .masa-adm-shell .masa-adm-asoc-demo-grid { grid-template-columns: 1fr; }
}

/* Padding extra en el contenedor de filtros de asociados */
.masa-adm-shell .masa-adm-shell > div > .bg-white.rounded-lg.border.border-corp-100.p-4 {
    padding: 18px 20px !important;
}

/* =========================================================================
   CONFIGURACIÓN · bloque colores dark
   ========================================================================= */

.masa-adm-shell .masa-adm-config-color-card {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.masa-adm-shell .masa-adm-config-color-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--masa-adm-fg-strong) !important;
    margin-bottom: 4px;
}
.masa-adm-shell .masa-adm-config-color-card-sub {
    font-size: 12px;
    color: var(--masa-adm-fg-muted) !important;
    margin-bottom: 8px;
}
.masa-adm-shell .masa-adm-config-color-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.masa-adm-shell .masa-adm-config-color-swatch {
    width: 48px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 8px;
    background: var(--masa-adm-surface-2);
    cursor: pointer;
    overflow: hidden;
}
.masa-adm-shell .masa-adm-config-color-hex {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-transform: uppercase;
}
.masa-adm-shell .masa-adm-config-color-preview {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--masa-adm-border);
    transition: background 0.3s;
}
.masa-adm-shell .masa-adm-config-color-preview-label {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
}
.masa-adm-shell .masa-adm-config-color-preview-chip {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.3s;
}

/* ========================================================================== */
/*  END S18-DEMO-HF02D                                                          */
/* ========================================================================== */


/* ========================================================================== */
/*  BEGIN S18-DEMO-HF02D2 · CONFIG LAYOUT HOMOGÉNEO                            */
/* ========================================================================== */

/* -------- Section wrappers · los 3 livewire components del /configuracion -------- */
.masa-adm-shell .masa-adm-config-section,
.masa-adm-shell .masa-adm-config-section-wrapper {
    max-width: none !important;
    width: 100%;
    margin-top: 0 !important;
}

/* Espacio entre los 3 sections apilados */
.masa-adm-shell .masa-adm-config-section + .masa-adm-config-section,
.masa-adm-shell .masa-adm-config-section + .masa-adm-config-section-wrapper,
.masa-adm-shell .masa-adm-config-section-wrapper + .masa-adm-config-section,
.masa-adm-shell .masa-adm-config-section-wrapper + .masa-adm-config-section-wrapper {
    margin-top: 20px !important;
}

/* Wrapper raíz del boleteria (root card) · dark card consistente */
.masa-adm-shell .masa-adm-config-section-wrapper {
    background: var(--masa-adm-surface) !important;
    border: 1px solid var(--masa-adm-border) !important;
    border-radius: 12px;
    padding: 24px 28px;
}

/* Header estándar del section wrapper */
.masa-adm-shell .masa-adm-config-section-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--masa-adm-border);
}
.masa-adm-shell .masa-adm-config-section-header .masa-adm-page-title {
    margin: 0;
}
.masa-adm-shell .masa-adm-config-section-header .masa-adm-page-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--masa-adm-fg-muted) !important;
}

/* Tabs bar (Colores / Correos / Texto de boleta) · dark */
.masa-adm-shell .masa-adm-config-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--masa-adm-border);
    margin-bottom: 20px;
    font-size: 13px;
}
.masa-adm-shell .masa-adm-config-tabs button {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important;
    color: var(--masa-adm-fg-muted) !important;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.masa-adm-shell .masa-adm-config-tabs button:hover {
    color: var(--masa-adm-fg) !important;
}
.masa-adm-shell .masa-adm-config-tabs button.font-semibold,
.masa-adm-shell .masa-adm-config-tabs button[class*="border-gray-900"] {
    color: var(--masa-color-primary, #005AA5) !important;
    border-bottom-color: var(--masa-color-primary, #005AA5) !important;
    font-weight: 600;
}

/* -------- Cards internos con 'bg-white rounded-lg shadow-sm border-corp-100 p-6'
   (manager + extras tienen muchos de estos · cascade para dark) -------- */
.masa-adm-shell .masa-adm-config-section .bg-white.rounded-lg.shadow-sm,
.masa-adm-shell .masa-adm-config-section .bg-white.rounded-lg,
.masa-adm-shell .masa-adm-config-section-wrapper .bg-white.rounded-lg {
    background: var(--masa-adm-surface) !important;
    border-color: var(--masa-adm-border) !important;
    box-shadow: none !important;
}

/* Heading h3 interno "Identidad", "Personalización del login", etc */
.masa-adm-shell .masa-adm-config-section h3,
.masa-adm-shell .masa-adm-config-section-wrapper h3 {
    color: var(--masa-adm-fg-strong) !important;
}

/* Inputs y textareas dentro del config · dark */
.masa-adm-shell .masa-adm-config-section input[type="text"],
.masa-adm-shell .masa-adm-config-section input[type="email"],
.masa-adm-shell .masa-adm-config-section input[type="number"],
.masa-adm-shell .masa-adm-config-section input[type="url"],
.masa-adm-shell .masa-adm-config-section textarea,
.masa-adm-shell .masa-adm-config-section-wrapper input[type="text"],
.masa-adm-shell .masa-adm-config-section-wrapper input[type="email"],
.masa-adm-shell .masa-adm-config-section-wrapper input[type="number"],
.masa-adm-shell .masa-adm-config-section-wrapper input[type="url"],
.masa-adm-shell .masa-adm-config-section-wrapper textarea {
    background: var(--masa-adm-surface-2) !important;
    border-color: var(--masa-adm-border) !important;
    color: var(--masa-adm-fg) !important;
}
.masa-adm-shell .masa-adm-config-section input:focus,
.masa-adm-shell .masa-adm-config-section textarea:focus,
.masa-adm-shell .masa-adm-config-section-wrapper input:focus,
.masa-adm-shell .masa-adm-config-section-wrapper textarea:focus {
    border-color: var(--masa-color-primary, #005AA5) !important;
    box-shadow: 0 0 0 3px rgba(0, 90, 165, 0.25) !important;
}

/* Labels dentro de config · dark */
.masa-adm-shell .masa-adm-config-section label.block,
.masa-adm-shell .masa-adm-config-section-wrapper label.block {
    color: var(--masa-adm-fg) !important;
}

/* Flash success dentro de config */
.masa-adm-shell .masa-adm-config-section .bg-emerald-50,
.masa-adm-shell .masa-adm-config-section-wrapper .bg-emerald-50,
.masa-adm-shell .masa-adm-config-section-wrapper .bg-green-50 {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
.masa-adm-shell .masa-adm-config-section .text-emerald-800,
.masa-adm-shell .masa-adm-config-section-wrapper .text-green-800 {
    color: #6ee7b7 !important;
}

/* Preview de logo / imagen · placeholder dark */
.masa-adm-shell .masa-adm-config-section .bg-corp-50,
.masa-adm-shell .masa-adm-config-section-wrapper .bg-corp-50 {
    background: var(--masa-adm-surface-2) !important;
}

/* Button "Guardar" del form al fondo · full-width azul → ancho ajustado a derecha */
.masa-adm-shell .masa-adm-config-section form > .flex.items-center.justify-end,
.masa-adm-shell .masa-adm-config-section-wrapper form > .flex.items-center.justify-end {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 16px;
}

/* Variables chip box (la del screenshot con {{variables}}) dark */
.masa-adm-shell .masa-adm-config-section .bg-corp-50.border.border-corp-100 {
    background: var(--masa-adm-surface-2) !important;
    color: var(--masa-adm-fg) !important;
}

/* ========================================================================== */
/*  END S18-DEMO-HF02D2                                                         */
/* ========================================================================== */

/* ========================================================== */
/* === Sprint 15c Enterprise overrides (Mac Pollo)           */
/* ========================================================== */

:root {
    --mp-bg: #0A0A0A;
    --mp-bg-elev: #14140F;
    --mp-bg-card: #1A1A1A;
    --mp-bg-card-hover: #20201A;
    --mp-border: #2A2A22;
    --mp-text: #F5F2E8;
    --mp-text-dim: #9A9588;
    --mp-text-muted: #6A655A;
}

/* === Reset global app === */
.mp-app-body, .mp-user-body {
    margin: 0;
    background: var(--mp-bg);
    color: var(--mp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ========================================================== */
/*  LOGIN                                                     */
/* ========================================================== */
.mp-login-wrap { min-height: 100vh; display: flex; }
.mp-login-hero {
    flex: 1.3;
    background: #0A0A0A center/cover no-repeat;
    position: relative;
    min-height: 100vh;
}
.mp-login-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%);
}
.mp-login-form {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; color: #0A0A0A;
    padding: 40px 24px;
}
.mp-login-form__inner { width: 100%; max-width: 380px; }
.mp-login-form__brand { text-align: center; margin-bottom: 28px; }
.mp-login-form__logo { max-width: 180px; max-height: 90px; object-fit: contain; }
.mp-login-form__title { font-size: 26px; font-weight: 700; color: #0A0A0A; margin: 0 0 6px; text-align: center; }
.mp-login-form__subtitle { color: #6A655A; font-size: 13px; text-align: center; margin: 0 0 26px; }
.mp-login-form__fields { display: flex; flex-direction: column; gap: 14px; }
.mp-login-form__copyright {
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid #E8E5DD;
    text-align: center; color: #9A9588; font-size: 11px; letter-spacing: 0.3px;
}
.mp-login-form__copyright strong { color: #C8A14A; }

/* === Form fields === */
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field__label-row { display: flex; align-items: baseline; justify-content: space-between; }
.mp-field__label { font-size: 12px; font-weight: 600; color: #4A4A40; letter-spacing: 0.3px; }
.mp-field__forgot { font-size: 12px; color: #C8A14A; text-decoration: none; font-weight: 600; }
.mp-field__forgot:hover { color: #9C7B30; }
.mp-field__input {
    width: 100%; padding: 11px 14px;
    background: #F8F6F0;
    border: 1px solid #DDD8CC;
    border-radius: 8px;
    font-size: 14px; color: #0A0A0A;
    transition: all 0.15s;
    font-family: inherit;
}
.mp-field__input:focus {
    outline: none; border-color: #C8A14A;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(200,161,74,0.12);
}
.mp-field__pwd-wrap { position: relative; }
.mp-field__pwd-wrap .mp-field__input { padding-right: 40px; }
.mp-field__pwd-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    color: #9A9588; padding: 4px;
}
.mp-field__pwd-toggle:hover { color: #C8A14A; }
.mp-field__error { font-size: 12px; color: #D32F2F; margin-top: 2px; }
.mp-field__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4A4A40; cursor: pointer; }
.mp-field__remember input { accent-color: #C8A14A; }

/* === Botones primarios === */
.mp-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: 1px solid #0A0A0A;
    border-radius: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}
.mp-btn-primary:hover {
    background: #C8A14A; border-color: #C8A14A; color: #0A0A0A;
}
.mp-btn-primary--full { width: 100%; padding: 13px 20px; font-size: 15px; }
.mp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========================================================== */
/*  ADMIN SHELL (sidebar + main)                              */
/* ========================================================== */
.mp-app-shell { display: flex; min-height: 100vh; }
.mp-sidebar {
    width: 240px;
    background: #0F0F0B;
    border-right: 1px solid var(--mp-border);
    display: flex; flex-direction: column;
    flex-shrink: 0;
}
.mp-sidebar__brand {
    padding: 22px 18px;
    border-bottom: 1px solid var(--mp-border);
    text-align: center;
}
.mp-sidebar__logo {
    max-width: 140px; max-height: 48px; object-fit: contain;
}
.mp-sidebar__nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
.mp-sidebar__group-label {
    font-size: 10px; font-weight: 700; color: var(--mp-text-muted);
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 14px 12px 6px;
}
.mp-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    color: var(--mp-text-dim);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s;
}
.mp-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-nav-link:hover { background: var(--mp-bg-card); color: var(--mp-text); }
.mp-nav-link--active { background: var(--mp-bg-card); color: #C8A14A; box-shadow: inset 3px 0 0 #C8A14A; }
.mp-nav-link--disabled { opacity: 0.45; cursor: not-allowed; }
.mp-nav-link--disabled:hover { background: transparent; color: var(--mp-text-dim); }
.mp-tag-soon {
    margin-left: auto;
    background: var(--mp-border); color: var(--mp-text-muted);
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}

.mp-sidebar__footer {
    padding: 14px;
    border-top: 1px solid var(--mp-border);
    display: flex; align-items: center; gap: 8px;
}
.mp-sidebar__user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mp-sidebar__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #C8A14A, #9C7B30);
    color: #0A0A0A;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.mp-sidebar__user-info { min-width: 0; }
.mp-sidebar__user-name { color: var(--mp-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sidebar__user-role { color: var(--mp-text-muted); font-size: 11px; }
.mp-sidebar__logout-form { margin: 0; }
.mp-sidebar__logout {
    background: transparent; border: 1px solid var(--mp-border);
    color: var(--mp-text-dim); padding: 7px;
    border-radius: 6px; cursor: pointer; display: flex;
}
.mp-sidebar__logout svg { width: 16px; height: 16px; }
.mp-sidebar__logout:hover { color: #D32F2F; border-color: #D32F2F; }

.mp-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-topbar {
    height: 56px;
    background: var(--mp-bg-elev);
    border-bottom: 1px solid var(--mp-border);
    display: flex; align-items: center; padding: 0 20px;
    gap: 14px;
}
.mp-topbar__menu-btn {
    display: none;
    background: transparent; border: none; color: var(--mp-text);
    cursor: pointer; padding: 6px;
}
.mp-topbar__menu-btn svg { width: 22px; height: 22px; }
.mp-topbar__title { font-size: 14px; font-weight: 600; color: var(--mp-text-dim); letter-spacing: 0.3px; }

.mp-app-content { padding: 24px 28px; flex: 1; max-width: 1400px; width: 100%; }

/* === Responsive admin === */
@media (max-width: 900px) {
    .mp-sidebar {
        position: fixed; left: -260px; top: 0; bottom: 0; z-index: 50;
        transition: left 0.25s ease;
    }
    .mp-sidebar--open { left: 0; box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
    .mp-topbar__menu-btn { display: flex; }
    .mp-app-content { padding: 16px; }
}

/* ========================================================== */
/*  USER SHELL (header + bottom nav)                          */
/* ========================================================== */
.mp-user-shell { min-height: 100vh; display: flex; flex-direction: column; }
.mp-user-header {
    background: var(--mp-bg-elev);
    border-bottom: 1px solid var(--mp-border);
    position: sticky; top: 0; z-index: 30;
}
.mp-user-header__inner {
    max-width: 1200px; margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.mp-user-header__brand { display: flex; align-items: center; }
.mp-user-header__logo { max-height: 40px; object-fit: contain; }
.mp-user-header__right { display: flex; align-items: center; gap: 12px; }

.mp-avatar-btn {
    background: transparent; border: none; cursor: pointer; padding: 0;
}
.mp-avatar-btn__circle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #C8A14A, #DEBF7E);
    color: #0A0A0A; font-weight: 700; font-size: 14px;
    border: 2px solid var(--mp-border);
    transition: all 0.2s;
}
.mp-avatar-btn:hover .mp-avatar-btn__circle {
    border-color: #C8A14A; transform: scale(1.05);
}
.mp-avatar-menu {
    position: absolute; right: 24px; top: 60px;
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    min-width: 220px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 50;
}
.mp-avatar-menu__name { padding: 8px 12px 2px; color: var(--mp-text); font-weight: 600; font-size: 14px; }
.mp-avatar-menu__email { padding: 0 12px 8px; color: var(--mp-text-muted); font-size: 12px; }
.mp-avatar-menu__sep { border: none; border-top: 1px solid var(--mp-border); margin: 4px 0; }
.mp-avatar-menu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px; background: transparent; border: none;
    color: var(--mp-text-dim); font-size: 13px; cursor: pointer;
    border-radius: 6px; text-decoration: none;
    font-family: inherit;
}
.mp-avatar-menu__item:hover { background: var(--mp-bg-card-hover); color: var(--mp-text); }
.mp-avatar-menu__item--danger { color: #E57373; }
.mp-avatar-menu__item--danger:hover { color: #D32F2F; }

.mp-user-content {
    flex: 1;
    max-width: 1200px; width: 100%; margin: 0 auto;
    padding: 24px;
    padding-bottom: 96px;
}

.mp-user-bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--mp-bg-elev);
    border-top: 1px solid var(--mp-border);
    display: flex;
    z-index: 40;
}
.mp-bnav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px;
    color: var(--mp-text-dim); text-decoration: none;
    font-size: 10px; font-weight: 500;
    transition: color 0.15s;
}
.mp-bnav-item svg { width: 22px; height: 22px; }
.mp-bnav-item:hover, .mp-bnav-item--active { color: #C8A14A; }
.mp-bnav-item--active { font-weight: 600; }

/* ========================================================== */
/*  PAGES (titulares y secciones)                             */
/* ========================================================== */
.mp-page__header { margin-bottom: 24px; }
.mp-page__title {
    font-size: 24px; font-weight: 700; color: var(--mp-text);
    margin: 0 0 4px; letter-spacing: -0.3px;
}
.mp-page__subtitle { color: var(--mp-text-dim); font-size: 14px; margin: 0; }

.mp-empty-state {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 60px 24px;
    text-align: center;
    color: var(--mp-text-dim);
}
.mp-empty-state svg { color: var(--mp-text-muted); margin-bottom: 12px; }
.mp-empty-state h3 { color: var(--mp-text); font-size: 18px; margin: 0 0 8px; }
.mp-empty-state p { color: var(--mp-text-muted); font-size: 13px; max-width: 420px; margin: 0 auto; }

/* ========================================================== */
/*  CUPONES                                                   */
/* ========================================================== */
.mp-coupons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.mp-coupon {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 18px;
    display: flex; flex-direction: column;
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
}
.mp-coupon:hover { border-color: #C8A14A; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,161,74,0.12); }
.mp-coupon::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: #C8A14A;
}
.mp-coupon--redeemed { opacity: 0.55; filter: saturate(0.5); }
.mp-coupon--redeemed:hover { transform: none; box-shadow: none; border-color: var(--mp-border); }
.mp-coupon--redeemed::before { background: #4CAF50; }

.mp-coupon__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.mp-coupon__icon-wrap {
    width: 44px; height: 44px;
    background: rgba(200,161,74,0.1);
    color: #C8A14A;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.mp-coupon--redeemed .mp-coupon__icon-wrap { background: rgba(76,175,80,0.1); color: #4CAF50; }

.mp-coupon__badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    padding: 4px 10px; border-radius: 12px; text-transform: uppercase;
}
.mp-coupon__badge--active { background: rgba(200,161,74,0.18); color: #DEBF7E; }
.mp-coupon__badge--redeemed { background: rgba(76,175,80,0.18); color: #66BB6A; }
.mp-coupon__badge--redeemed svg { width: 12px; height: 12px; }

.mp-coupon__body { flex: 1; margin-bottom: 14px; }
.mp-coupon__title {
    font-size: 16px; font-weight: 700; color: var(--mp-text);
    margin: 0 0 6px; line-height: 1.3;
}
.mp-coupon__desc {
    font-size: 13px; color: var(--mp-text-dim);
    margin: 0; line-height: 1.5;
}

.mp-coupon__redeemed-info {
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(76,175,80,0.08);
    border: 1px solid rgba(76,175,80,0.2);
    border-radius: 8px;
    padding: 10px 12px;
}
.mp-coupon__redeemed-label {
    font-size: 10px; font-weight: 700; color: #66BB6A; letter-spacing: 0.6px;
    text-transform: uppercase;
}
.mp-coupon__redeemed-loc { font-size: 13px; color: var(--mp-text); font-weight: 600; }
.mp-coupon__redeemed-date { font-size: 11px; color: var(--mp-text-muted); }

/* ========================================================== */
/*  RANKING                                                   */
/* ========================================================== */
.mp-page--ranking { padding: 0; }
.mp-rank-header {
    background: linear-gradient(135deg, #C8A14A 0%, #0A0A0A 100%);
    padding: 36px 24px 60px;
    text-align: center;
    margin: -24px -24px 0;
    border-radius: 0 0 0 0;
}
.mp-rank-header__title {
    color: #FFFFFF; font-size: 24px; font-weight: 700;
    margin: 0 0 4px; letter-spacing: -0.3px;
}
.mp-rank-header__subtitle { color: rgba(255,255,255,0.7); font-size: 13px; margin: 0; }

.mp-podium {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; padding: 0 16px;
    margin: -50px auto 30px;
    max-width: 540px;
}
.mp-podium__place {
    flex: 1; max-width: 160px;
    display: flex; flex-direction: column; align-items: center;
}
.mp-podium__avatar {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    border: 3px solid var(--mp-bg);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    margin-bottom: 8px;
    color: #0A0A0A;
}
.mp-podium__avatar--gold   { background: linear-gradient(135deg, #FFD700, #FFA500); }
.mp-podium__avatar--silver { background: linear-gradient(135deg, #E8E8E8, #B8B8B8); }
.mp-podium__avatar--bronze { background: linear-gradient(135deg, #CD7F32, #A0602A); }

.mp-podium__name { font-size: 12px; font-weight: 600; color: var(--mp-text); text-align: center; margin-bottom: 2px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-podium__name--big { font-size: 14px; font-weight: 700; }
.mp-podium__pts { font-weight: 800; font-size: 14px; color: #C8A14A; margin-bottom: 6px; }
.mp-podium__pts--big { font-size: 16px; }

.mp-podium__block {
    width: 100%;
    border-radius: 6px 6px 0 0;
    display: flex; align-items: center; justify-content: center;
    color: #0A0A0A; font-weight: 800; font-size: 16px;
}
.mp-podium__block--gold   { background: linear-gradient(180deg, #FFD700, #DAA520); height: 90px; }
.mp-podium__block--silver { background: linear-gradient(180deg, #D8D8D8, #A0A0A0); height: 65px; }
.mp-podium__block--bronze { background: linear-gradient(180deg, #CD7F32, #8B5A1F); height: 45px; color: #FFFFFF; }

.mp-rank-card {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 24px 24px;
}
.mp-rank-table { width: 100%; border-collapse: collapse; }
.mp-rank-table thead {
    background: var(--mp-bg-elev);
    border-bottom: 1px solid var(--mp-border);
}
.mp-rank-table th {
    color: #C8A14A; font-size: 11px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 12px 16px; text-align: left;
}
.mp-rank-table__pos { width: 60px; text-align: center !important; }
.mp-rank-table__num { text-align: center !important; }
.mp-rank-table td {
    padding: 12px 16px; color: var(--mp-text);
    border-bottom: 1px solid var(--mp-border);
    font-size: 14px;
}
.mp-rank-table tbody tr:last-child td { border-bottom: 0; }
.mp-rank-table__name { color: var(--mp-text); font-weight: 600; }
.mp-rank-table__you {
    background: #C8A14A; color: #0A0A0A;
    font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
    padding: 2px 6px; border-radius: 4px; margin-left: 8px;
    vertical-align: middle;
}
.mp-rank-table__leader {
    background: rgba(255,215,0,0.18); color: #FFD700;
    font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
    padding: 2px 6px; border-radius: 4px; margin-left: 6px;
    text-transform: uppercase;
}
.mp-rank-table__row--me { background: rgba(200,161,74,0.08); box-shadow: inset 3px 0 0 #C8A14A; }
.mp-rank-table__row--gold td:first-child   { color: #FFD700; }
.mp-rank-table__row--silver td:first-child { color: #C0C0C0; }
.mp-rank-table__row--bronze td:first-child { color: #CD7F32; }
.mp-rank-table__sep td {
    text-align: center; color: var(--mp-text-muted);
    padding: 6px; font-size: 14px; letter-spacing: 4px;
}
.mp-rank-table__empty { text-align: center; color: var(--mp-text-muted); padding: 30px; }

.mp-rank-position-note {
    background: rgba(200,161,74,0.08);
    border-left: 3px solid #C8A14A;
    padding: 12px 16px;
    margin: 0 24px 24px;
    border-radius: 6px;
    color: var(--mp-text-dim); font-size: 13px;
}

/* === Utilities === */
.mp-d-md { display: none; }
@media (min-width: 768px) {
    .mp-d-md { display: table-cell; }
}

/* === Sobreescribir h1/header inline en pantallas como "Realismo Futbolero — Mac Pollo" === */
/* Si quedan textos placeholders en algún view legacy, atenuarlos */
.realismo-mac-pollo-header { display: none !important; }

/* ========================================================== */
/* === Mac Pollo · Acentos dorados en login (Hotfix v9)      */
/* ========================================================== */
.mp-login-gold-accents form input[type="email"]:focus,
.mp-login-gold-accents form input[type="password"]:focus,
.mp-login-gold-accents form input[type="text"]:focus {
    border-color: #C8A14A !important;
    box-shadow: 0 0 0 3px rgba(200, 161, 74, 0.15) !important;
    background-color: #FFFFFF !important;
}
.mp-login-gold-accents form button[type="submit"] {
    background-color: #0A0A0A !important;
    transition: all 0.2s ease !important;
}
.mp-login-gold-accents form button[type="submit"]:hover {
    background-color: #C8A14A !important;
    color: #0A0A0A !important;
    box-shadow: 0 6px 20px rgba(200, 161, 74, 0.3) !important;
}
.mp-login-gold-accents form a {
    color: #9C7B30 !important;
    font-weight: 600 !important;
}
.mp-login-gold-accents form a:hover {
    color: #C8A14A !important;
}
.mp-login-gold-accents form input[type="checkbox"] {
    accent-color: #C8A14A !important;
}
.mp-login-gold-accents form button[type="button"]:hover {
    color: #C8A14A !important;
}

/* =========================================================================== */
/* === Sprint 18 · Layout user enterprise responsive ========================= */
/* === Mobile (<768px): bottom-nav fixed + header sticky                       */
/* === Desktop (≥768px): sidebar fixed left + header sticky (sin bottom-nav)   */
/* =========================================================================== */

:root {
    --mp-s18-sidebar-w: 240px;
    --mp-s18-header-h: 64px;
    --mp-s18-bottomnav-h: 64px;
    --mp-s18-content-max: 1280px;
    --mp-s18-bg: #0F0F0F;
    --mp-s18-bg-chrome: #0A0A0A;
    --mp-s18-bg-elev: #161616;
    --mp-s18-border: rgba(200, 161, 74, 0.18);
    --mp-s18-border-strong: rgba(200, 161, 74, 0.32);
    --mp-s18-text: #E7E3DA;
    --mp-s18-text-muted: #94908A;
    --mp-s18-active: #C8A14A;
    --mp-s18-active-soft: rgba(200, 161, 74, 0.12);
    --mp-s18-danger: #f87171;
}

/* === Body shell === */
body.mp-user-body.s18 {
    background: var(--mp-s18-bg);
    color: var(--mp-s18-text);
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mp-user-body.s18 * {
    box-sizing: border-box;
}

.mp-user-body.s18 .mp-user-shell {
    min-height: 100vh;
    width: 100%;
}

/* === Header (sticky top) === */
.mp-user-body.s18 .mp-user-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--mp-s18-header-h);
    background: var(--mp-s18-bg-chrome);
    border-bottom: 1px solid var(--mp-s18-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    backdrop-filter: blur(8px);
}

.mp-user-body.s18 .mp-user-header__inner {
    width: 100%;
    max-width: var(--mp-s18-content-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-user-body.s18 .mp-user-header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.mp-user-body.s18 .mp-user-header__logo {
    height: 38px;
    width: auto;
    border-radius: 4px;
}

.mp-user-body.s18 .mp-user-header__spacer {
    flex: 1;
}

.mp-user-body.s18 .mp-user-header__avatar {
    position: relative;
}

/* === Avatar button === */
.mp-user-body.s18 .mp-avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-user-body.s18 .mp-avatar-btn__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C8A14A 0%, #DEBF7E 100%);
    color: #0A0A0A;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 0 2px rgba(200, 161, 74, 0.20), 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-user-body.s18 .mp-avatar-btn:hover .mp-avatar-btn__circle,
.mp-user-body.s18 .mp-avatar-btn:focus-visible .mp-avatar-btn__circle {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(200, 161, 74, 0.32), 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* === Avatar dropdown menu === */
.mp-user-body.s18 .mp-avatar-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background: var(--mp-s18-bg-elev);
    border: 1px solid var(--mp-s18-border);
    border-radius: 12px;
    padding: 14px 0 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 200;
}

.mp-user-body.s18 .mp-avatar-menu__name {
    font-weight: 600;
    color: var(--mp-s18-text);
    padding: 0 16px 2px;
    font-size: 14px;
}

.mp-user-body.s18 .mp-avatar-menu__email {
    font-size: 12px;
    color: var(--mp-s18-text-muted);
    padding: 0 16px 10px;
}

.mp-user-body.s18 .mp-avatar-menu__sep {
    border: 0;
    border-top: 1px solid var(--mp-s18-border);
    margin: 6px 0;
}

.mp-user-body.s18 .mp-avatar-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    color: var(--mp-s18-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mp-user-body.s18 .mp-avatar-menu__item:hover {
    background: var(--mp-s18-active-soft);
    color: var(--mp-s18-active);
}

.mp-user-body.s18 .mp-avatar-menu__item--danger {
    color: var(--mp-s18-danger);
}

.mp-user-body.s18 .mp-avatar-menu__item--danger:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.mp-user-body.s18 .mp-avatar-menu__item form,
.mp-user-body.s18 .mp-avatar-menu form {
    margin: 0;
}

/* === Main content === */
.mp-user-body.s18 .mp-user-content {
    width: 100%;
    padding: 24px 16px;
}

.mp-user-body.s18 .mp-user-content__inner {
    max-width: var(--mp-s18-content-max);
    margin: 0 auto;
}

/* === Bottom-nav (mobile fixed) === */
.mp-user-body.s18 .mp-user-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--mp-s18-bottomnav-h);
    background: var(--mp-s18-bg-chrome);
    border-top: 1px solid var(--mp-s18-border);
    display: flex;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: blur(8px);
}

.mp-user-body.s18 .mp-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mp-s18-text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.15s ease;
    min-height: 44px;
}

.mp-user-body.s18 .mp-bnav-item svg {
    width: 22px;
    height: 22px;
}

.mp-user-body.s18 .mp-bnav-item:hover,
.mp-user-body.s18 .mp-bnav-item--active {
    color: var(--mp-s18-active);
}

/* === Sidebar (desktop only) === */
.mp-user-body.s18 .mp-user-sidebar {
    display: none;
}

/* === MOBILE (< 768px) === */
@media (max-width: 767.98px) {
    .mp-user-body.s18 .mp-user-content {
        padding-bottom: calc(var(--mp-s18-bottomnav-h) + 24px + env(safe-area-inset-bottom, 0));
    }
}

/* === DESKTOP (≥ 768px) === */
@media (min-width: 768px) {
    .mp-user-body.s18 .mp-user-shell {
        padding-left: var(--mp-s18-sidebar-w);
    }
    
    .mp-user-body.s18 .mp-user-bottomnav {
        display: none;
    }
    
    .mp-user-body.s18 .mp-user-header__brand--mobile {
        display: none;
    }
    
    .mp-user-body.s18 .mp-user-header {
        padding: 0 24px;
    }
    
    .mp-user-body.s18 .mp-user-content {
        padding: 28px 32px 40px;
    }
    
    .mp-user-body.s18 .mp-user-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 110;
        width: var(--mp-s18-sidebar-w);
        background: var(--mp-s18-bg-chrome);
        border-right: 1px solid var(--mp-s18-border);
        padding: 18px 12px;
    }
    
    .mp-user-body.s18 .mp-user-sidebar__brand {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0 20px;
        border-bottom: 1px solid var(--mp-s18-border);
        margin-bottom: 14px;
        text-decoration: none;
    }
    
    .mp-user-body.s18 .mp-user-sidebar__logo {
        height: 56px;
        width: auto;
        border-radius: 6px;
        max-width: 160px;
        object-fit: contain;
    }
    
    .mp-user-body.s18 .mp-user-sidebar__nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .mp-user-body.s18 .mp-snav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 14px;
        color: var(--mp-s18-text-muted);
        text-decoration: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }
    
    .mp-user-body.s18 .mp-snav-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .mp-user-body.s18 .mp-snav-item:hover {
        background: rgba(200, 161, 74, 0.06);
        color: var(--mp-s18-text);
    }
    
    .mp-user-body.s18 .mp-snav-item--active {
        background: var(--mp-s18-active-soft);
        color: var(--mp-s18-active);
        font-weight: 600;
    }
}

/* === DESKTOP LARGO (≥ 1280px) — más aire === */
@media (min-width: 1280px) {
    .mp-user-body.s18 .mp-user-content {
        padding: 32px 40px 48px;
    }
}

/* === END Sprint 18 ========================================================= */

/* =========================================================================== */
/* === Sprint 19 · Save button con logo Mac Pollo real ====================== */
/* === Logo real (icono-gallo.png) + micro-interacciones (pulse, glow, scale)  */
/* =========================================================================== */

:root {
    --mp-s19-gold: #C8A14A;
    --mp-s19-gold-light: #DEBF7E;
    --mp-s19-gold-dark: #9C7A2D;
    --mp-s19-black: #0A0A0A;
    --mp-s19-success: #4CAF50;
    --mp-s19-success-dark: #16a34a;
    --mp-s19-btn-size: 48px;
    --mp-s19-logo-size: 30px;
}

/* Reset del .mp-save-wrap (override del style inline anterior si existe) */
.mp-save-wrap {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* === Botón base === */
.mp-save-btn {
    position: relative;
    width: var(--mp-s19-btn-size);
    height: var(--mp-s19-btn-size);
    border-radius: 50%;
    border: 2px solid var(--mp-s19-gold);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

.mp-save-btn:focus-visible {
    outline: 2px solid var(--mp-s19-gold);
    outline-offset: 3px;
}

/* === Estado IDLE (no guardado) === */
.mp-save-btn--idle {
    background: var(--mp-s19-black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(200, 161, 74, 0.15);
}

.mp-save-btn--idle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(200, 161, 74, 0.35),
                inset 0 1px 0 rgba(200, 161, 74, 0.25),
                0 0 0 4px rgba(200, 161, 74, 0.1);
}

.mp-save-btn--idle:active {
    transform: scale(0.96);
    transition-duration: 0.12s;
}

/* === Estado SAVED (guardado) === */
.mp-save-btn--saved {
    background: linear-gradient(135deg, var(--mp-s19-gold) 0%, var(--mp-s19-gold-light) 100%);
    border-color: var(--mp-s19-gold-light);
    box-shadow: 0 0 0 4px rgba(200, 161, 74, 0.20),
                0 6px 18px rgba(200, 161, 74, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mp-save-btn--saved:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 5px rgba(200, 161, 74, 0.28),
                0 8px 22px rgba(200, 161, 74, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* === Animación PULSE al transicionar idle → saved === */
.mp-save-btn--justsaved {
    animation: mpS19PulseScale 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.mp-save-btn--justsaved::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 2px solid var(--mp-s19-gold);
    pointer-events: none;
    animation: mpS19PulseRing 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes mpS19PulseScale {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.10); }
    55%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

@keyframes mpS19PulseRing {
    0%   { transform: scale(0.85); opacity: 0.85; border-width: 3px; }
    60%  { transform: scale(1.5);  opacity: 0;    border-width: 1px; }
    100% { transform: scale(1.7);  opacity: 0;    border-width: 0;   }
}

/* === Logo Mac Pollo real (img tag) === */
.mp-save-btn__logo {
    width: var(--mp-s19-logo-size);
    height: var(--mp-s19-logo-size);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: filter 0.35s ease, transform 0.35s ease;
    /* Idle: el logo se ve natural (gallo dorado sobre fondo negro del PNG) */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* En estado saved: invertir el logo a NEGRO sobre el fondo dorado del botón */
.mp-save-btn--saved .mp-save-btn__logo {
    /* invert(1) hace negro lo dorado, brightness(0) lo fuerza a negro puro */
    /* Combinamos para que la silueta del gallo quede negra crisp */
    filter: brightness(0) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* === Chulito chico dorado (idle) === */
.mp-save-btn__check--idle {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    background: var(--mp-s19-gold);
    border: 2px solid var(--mp-s19-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* === Chulito grande verde (saved) === */
.mp-save-btn__check--saved {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background: var(--mp-s19-success);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.55),
                0 0 0 3px rgba(76, 175, 80, 0.18);
    animation: mpS19CheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mpS19CheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.20); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* === Label de texto con transición === */
.mp-save-label-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 130px;
    height: 20px;
}

.mp-save-label {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: color 0.25s ease;
}

.mp-save-label--idle {
    color: var(--mp-s19-gold-dark);
}

.mp-save-label--saved {
    color: var(--mp-s19-success-dark);
}

/* === Mobile: ajustar tamaño del botón si el contenedor es chico === */
@media (max-width: 480px) {
    :root {
        --mp-s19-btn-size: 44px;
        --mp-s19-logo-size: 26px;
    }
    .mp-save-label {
        font-size: 13px;
    }
}

/* === Soporte reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .mp-save-btn,
    .mp-save-btn__logo,
    .mp-save-btn__check--saved,
    .mp-save-btn--justsaved {
        transition: none;
        animation: none;
    }
    .mp-save-btn--justsaved::before {
        display: none;
    }
}

/* === END Sprint 19 ========================================================= */