/* SMB Product Manager — Portal de afiliados (Rhode x Farmasi: editorial, de lujo) */

.smb-public-app, .smb-public-app * {
	box-sizing: border-box;
}

.smb-public-app {
	/* ============================================================
	 * IDENTIDAD OFICIAL SMB — la misma de la pantalla de acceso VIP,
	 * aplicada a toda la plataforma. Fondo blanco cálido, verde SMB
	 * suave (nunca oliva oscuro ni militar), tipografía editorial
	 * (Playfair Display en títulos + Poppins en texto/botones),
	 * tarjetas delicadas (blancas y verde-SMB-suave), mucho aire.
	 *
	 * Estas mismas variables se sobrescriben por tema en las clases
	 * .smb-theme-crema / .smb-theme-rosa / .smb-theme-azul de más
	 * abajo. Cada usuario elige su tema desde "Tema" (dentro de
	 * "Más" en mobile) y esa elección se guarda de forma individual
	 * por usuario. Si nunca eligió ninguno, se ve siempre Verde SMB.
	 * ============================================================ */

	/* Verde SMB — paleta oficial. -soft es el verde principal (tinte
	   de tarjeta), base es el verde secundario (botones/activos),
	   -dark es el mismo tono más oscuro solo para hover/énfasis. */
	--smb-green: #B8C97C;
	--smb-green-dark: #7C8C52;
	--smb-green-soft: #D2DDA4;

	/* Fondo de la página: blanco cálido oficial */
	--smb-stone: #F6F6F4;
	--smb-ivory: #FFFFFF;

	/* Texto: oficial */
	--smb-black: #202020;

	/* Cifras y precios: siguen el mismo acento único del tema */
	--smb-brown: var(--smb-green-dark);

	/* Ya no hay un segundo color de marca (chocolate): se alinea al
	   mismo acento único del tema para que nunca se mezclen colores. */
	--smb-cocoa: var(--smb-green-dark);
	--smb-cocoa-soft: var(--smb-green-soft);

	/* Dorado — únicamente para el detalle puntual del Bono Sponsor y
	   el 1er puesto del ranking; no es un color de tema. */
	--smb-gold: #B08D46;
	--smb-gold-soft: rgba(176, 141, 70, 0.14);

	/* Gris cálido para textos secundarios */
	--smb-muted: rgba(32, 32, 32, 0.5);

	/* --- Alias internos: mantienen todo el CSS existente
	   funcionando sin tocar cada selector uno por uno --- */
	--smb-chocolate:      var(--smb-green-dark);
	--smb-chocolate-soft: var(--smb-green-soft);
	--smb-cacao:          var(--smb-brown);
	--smb-sand:            var(--smb-stone);
	--smb-white:          var(--smb-ivory);
	--smb-title:          var(--smb-black);
	--smb-text-soft:      var(--smb-muted);
	--smb-border: #E8E8E4;

	--smb-radius: 18px;
	--smb-radius-lg: 22px;
	--smb-radius-sm: 12px;
	--smb-shadow: 0 1px 2px rgba(32, 32, 32, 0.02);
	--smb-shadow-lift: 0 8px 26px rgba(32, 32, 32, 0.05);
	--font-serif: 'Playfair Display', 'Times New Roman', serif;
	--font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

	font-family: var(--font-sans);
	background: var(--smb-sand);
	color: var(--smb-black);
	width: 100%;
	max-width: 100%;
	padding-bottom: 76px;
}

.smb-icon { width: 18px; height: 18px; flex-shrink: 0; }
.smb-only-mobile { display: none; }

/* ---------------- Variantes de Tema ----------------
 * El fondo permanece blanco en TODOS los temas: solo cambia el
 * color de acento (--smb-green / --smb-green-dark / --smb-green-soft,
 * y sus alias --smb-chocolate / --smb-chocolate-soft / --smb-cacao)
 * que se usa en botones, navegación activa, iconos activos,
 * indicadores y badges. El dorado se mantiene igual en todos los
 * temas: es un detalle premium, no un color de tema. */

/* ---------------- Variantes de Tema ----------------
 * El fondo permanece blanco en TODOS los temas: cada tema tiene UN
 * SOLO color de acento (--smb-green y su versión más oscura para
 * hover, --smb-green-dark, que es el mismo tono, no otro color) que
 * se usa en botones, navegación activa, iconos activos, bordes,
 * indicadores y en el tinte de las tarjetas (--smb-green-soft). El
 * dorado del Bono Sponsor se mantiene igual en todos los temas: es
 * un detalle funcional, no un color de tema. */

.smb-public-app.smb-theme-crema {
	--smb-green: #B69C63;
	--smb-green-dark: #8C7645;
	--smb-green-soft: #F2ECDA;
}

.smb-public-app.smb-theme-rosa {
	--smb-green: #C98A9A;
	--smb-green-dark: #A66475;
	--smb-green-soft: #F7E7EA;
}

.smb-public-app.smb-theme-azul {
	--smb-green: #7FA7C2;
	--smb-green-dark: #56819F;
	--smb-green-soft: #E6EFF5;
}

/* ---------------- Pantalla de bienvenida (intro) ---------------- */

.smb-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 48px 8px;
	transition: opacity 0.4s ease;
}
.smb-intro-text {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(28px, 7vw, 46px);
	letter-spacing: 0.08em;
	color: var(--smb-title);
	white-space: nowrap;
}
.smb-intro-hidden { display: none !important; }
.smb-auth-content {
	opacity: 0;
	transition: opacity 0.4s ease;
}
.smb-auth-content.smb-auth-content-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.smb-intro { display: none; }
	.smb-auth-content { opacity: 1; transform: none; }
}

/* Auth (registro / login) — pantalla de acceso privada y premium */
.smb-auth-wrap { display: flex; justify-content: center; padding: 8px; }
.smb-auth-shell { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.smb-auth-shell.smb-auth-shell-invite { max-width: 980px; }
.smb-auth-wrap-split { justify-content: stretch; padding: 0; flex: 1 1 auto; min-width: 0; }
.smb-auth-wrap-split .smb-auth-card { width: 100%; }

@media (min-width: 900px) {
	.smb-auth-shell.smb-auth-shell-invite { flex-direction: row; align-items: flex-start; }
	.smb-auth-visual { flex: 1 1 48%; min-width: 0; position: sticky; top: 24px; }
	.smb-auth-wrap-split { flex: 1 1 52%; }
}

.smb-auth-card {
	background: var(--smb-white);
	border: 1px solid var(--smb-border);
	border-radius: var(--smb-radius);
	box-shadow: var(--smb-shadow-lift);
	padding: 40px 32px;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}
.smb-pending-card { text-align: center; }

.smb-auth-tabs { display: flex; background: var(--smb-chocolate-soft); border-radius: 999px; padding: 4px; margin-bottom: 28px; }
.smb-auth-tab { flex: 1; border: none; background: transparent; padding: 11px; font-family: inherit; font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; border-radius: 999px; cursor: pointer; color: var(--smb-text-soft); }
.smb-auth-tab-active { background: var(--smb-green); color: var(--smb-white); }
.smb-auth-panel { display: none; }
.smb-auth-panel-active { display: block; }

.smb-auth-card h2 { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 30px; margin: 0 0 8px; letter-spacing: -0.005em; color: var(--smb-title); }
.smb-auth-fineprint { margin: 16px 0 0; font-size: 11px; color: var(--smb-text-soft); text-align: center; line-height: 1.5; }
.smb-subtitle { color: var(--smb-text-soft); font-size: 13.5px; font-weight: 300; margin: 0 0 26px; }

form label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 18px; color: var(--smb-text-soft); }
form input, form select, form textarea {
	width: 100%; margin-top: 8px; padding: 12px 2px; border: none; border-bottom: 1px solid var(--smb-border);
	border-radius: 0; font-size: 16px; font-family: var(--font-sans); background: transparent; color: var(--smb-black);
	transition: border-color .15s ease;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-bottom-color: var(--smb-green); }
form textarea { resize: vertical; }

.smb-form-message { font-size: 13px; margin-bottom: 12px; min-height: 0; }
.smb-form-message.smb-msg-error { color: #7A2E24; }
.smb-form-message.smb-msg-success { color: var(--smb-green-dark); }

/* Buscador con autocompletado (Registrar pedido: productos + kits) */
.smb-autocomplete-label { position: relative; }
.smb-autocomplete { position: relative; }
.smb-autocomplete-results {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	background: var(--smb-white);
	border: 1px solid var(--smb-border);
	border-radius: var(--smb-radius-sm);
	box-shadow: var(--smb-shadow-lift);
	max-height: 260px;
	overflow-y: auto;
	z-index: 40;
	padding: 6px;
}
.smb-autocomplete-results.smb-autocomplete-open { display: block; }
.smb-autocomplete-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 10px;
	border: none;
	background: transparent;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-sans);
}
.smb-autocomplete-item:hover, .smb-autocomplete-item:focus { background: var(--smb-chocolate-soft); outline: none; }
.smb-autocomplete-badge {
	flex-shrink: 0;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--smb-green-soft);
	color: var(--smb-green-dark);
}
.smb-autocomplete-item-kit .smb-autocomplete-badge { background: var(--smb-chocolate-soft); color: var(--smb-cacao); }
.smb-autocomplete-name { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--smb-title); }
.smb-autocomplete-meta { font-size: 12px; font-weight: 600; color: var(--smb-cacao); flex-shrink: 0; }
.smb-autocomplete-empty { padding: 14px 10px; font-size: 12.5px; color: var(--smb-text-soft); text-align: center; }

/* Registrar pedido — identificar comprador: cliente común vs Partner */
.smb-buyer-toggle { display: flex; background: var(--smb-chocolate-soft); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.smb-buyer-toggle-btn { flex: 1; border: none; background: transparent; padding: 11px; font-family: inherit; font-weight: 600; font-size: 12px; letter-spacing: 0.01em; border-radius: 999px; cursor: pointer; color: var(--smb-text-soft); }
.smb-buyer-toggle-active { background: var(--smb-green); color: var(--smb-white); }
.smb-partner-lookup-hint { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--smb-green-dark); }
#smb-partner-lookup { margin-bottom: 20px; }

/* Botones */
.smb-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .18s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.smb-btn-primary { background: var(--smb-green); color: var(--smb-white); }
.smb-btn-primary:hover { background: var(--smb-green-dark); }
.smb-btn-ghost { background: transparent; color: var(--smb-black); border-color: var(--smb-border); }
.smb-btn-ghost:hover { border-color: var(--smb-chocolate); }
.smb-btn-block { width: 100%; }

/* Botón de producto — slim, rectangular, una sola línea (no más píldora básica) */
.smb-shop-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 15px 16px;
	border-radius: 10px;
	background: var(--smb-green);
	color: var(--smb-white);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.smb-shop-btn:hover { background: var(--smb-green-dark); }
.smb-shop-btn-disabled {
	background: transparent;
	color: var(--smb-text-soft);
	border-color: var(--smb-border);
	cursor: not-allowed;
}
.smb-icon-btn { background: transparent; border: none; color: var(--smb-black); padding: 9px; border-radius: 50%; display: inline-flex; cursor: pointer; }
.smb-icon-btn:hover { background: var(--smb-chocolate-soft); }

/* Header — limpio y luminoso: fondo blanco, texto negro/gris,
   el verde matcha (u otro tema) queda solo en el avatar */
.smb-public-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 8px 16px; gap: 12px; background: var(--smb-white); color: var(--smb-black); border-bottom: 1px solid var(--smb-border); }
.smb-public-brand { display: flex; align-items: center; gap: 14px; }
.smb-public-brand strong { display: block; font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 20px; color: var(--smb-title); }
.smb-meta-inline { font-size: 11.5px; color: var(--smb-text-soft); font-weight: 300; }
.smb-public-header-actions { display: flex; align-items: center; gap: 6px; }
.smb-public-header .smb-icon-btn { color: var(--smb-black); }
.smb-public-header .smb-icon-btn:hover { background: var(--smb-chocolate-soft); }
.smb-public-header .smb-btn-ghost { color: var(--smb-black); border-color: var(--smb-border); }
.smb-public-header .smb-avatar { background: var(--smb-green); }

.smb-public-nav { display: flex; gap: 6px; overflow-x: auto; padding: 14px 8px 20px; -webkit-overflow-scrolling: touch; background: var(--smb-white); }
.smb-nav-item { white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--smb-text-soft); background: var(--smb-chocolate-soft); border: 1px solid transparent; text-decoration: none; }
.smb-nav-item-active { background: var(--smb-green); color: var(--smb-white); }

.smb-content { padding: 20px 16px; }

.smb-topbar { margin-bottom: 26px; }
.smb-topbar h1 { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 30px; margin: 0 0 6px; letter-spacing: -0.005em; color: var(--smb-title); }

/* Grid */
.smb-grid { display: grid; gap: 16px; width: 100%; margin-bottom: 22px; }
.smb-grid-4 { grid-template-columns: repeat(4, 1fr); }
.smb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.smb-grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 1000px) {
	.smb-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.smb-grid-4, .smb-grid-2 { grid-template-columns: 1fr; }
	.smb-grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tarjetas — grandes, editoriales, casi sin sombra */
.smb-card { background: var(--smb-white); border: 1px solid var(--smb-border); border-radius: var(--smb-radius); box-shadow: var(--smb-shadow); padding: 20px; margin-bottom: 18px; }
.smb-card h3 { font-family: var(--font-sans); font-style: normal; font-weight: 600; margin: 0 0 18px; font-size: 18px; color: var(--smb-title); }
.smb-card-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.smb-card-head-row h3 { margin: 0; }
.smb-form-card { max-width: 600px; }

.smb-stat { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.smb-stat-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--smb-white); color: var(--smb-green-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.smb-stat-icon .smb-icon { width: 15px; height: 15px; }
.smb-stat-label { font-size: 10px; color: var(--smb-text-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.smb-stat-value { font-family: var(--font-sans); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--smb-cacao); }
.smb-big-number { font-family: var(--font-sans); font-size: 30px; font-weight: 700; margin: 6px 0; color: var(--smb-cacao); }

/* Tarjetas de estadística — estilo planner: compactas, la mayoría
   teñidas con un tinte suave del color del tema (nunca solo una
   línea arriba), con un par de blancas de borde fino para dar
   variedad sutil. Nunca bloques sólidos oscuros. */
.smb-card.smb-stat { background: var(--smb-green-soft); border: 1px solid var(--smb-green-soft); padding: 16px; }
.smb-card.smb-stat .smb-stat-label { color: var(--smb-green-dark); }
.smb-card.smb-stat .smb-stat-value { color: var(--smb-title); }

.smb-tile-choco { background: var(--smb-white); border: 1px solid var(--smb-border); }
.smb-tile-choco .smb-stat-label { color: var(--smb-text-soft); }
.smb-tile-choco .smb-stat-icon { background: var(--smb-green-soft); color: var(--smb-green-dark); }

/* Modificadores de tarjeta con color de marca, para cualquier .smb-card */
.smb-card-matcha { background: var(--smb-green-soft); border: 1px solid var(--smb-green-soft); }
.smb-card-choco { background: var(--smb-white); border: 1px solid var(--smb-border); }
.smb-card-choco h3, .smb-card-matcha h3,
.smb-card-choco .smb-big-number, .smb-card-matcha .smb-big-number { color: var(--smb-title); }
.smb-card-choco p, .smb-card-matcha p { color: var(--smb-text-soft); }

/* Banner de bienvenida (hero editorial) */
.smb-hero {
	background: var(--smb-chocolate);
	color: var(--smb-white);
	border-radius: var(--smb-radius);
	padding: 30px 24px;
	margin-bottom: 20px;
}
.smb-hero h1, .smb-hero strong { color: var(--smb-white); }
.smb-hero p { color: rgba(255,255,255,0.72); margin: 0; font-size: 13.5px; font-weight: 300; }

.smb-register-cta { margin: 6px 0 20px; }

/* Búsqueda y filtros del catálogo */
.smb-catalog-search {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--smb-border);
	border-radius: 999px;
	padding: 14px 20px;
	margin-bottom: 16px;
}
.smb-catalog-search-icon { color: var(--smb-text-soft); display: inline-flex; }
.smb-catalog-search-icon .smb-icon { width: 17px; height: 17px; }
#smb-catalog-search {
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 14px;
	width: 100%;
	color: var(--smb-black);
	padding: 0;
	margin: 0;
}

.smb-chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.smb-chip {
	white-space: nowrap;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	font-family: var(--font-sans);
	color: var(--smb-text-soft);
	background: var(--smb-chocolate-soft);
	border: 1px solid transparent;
	cursor: pointer;
}
.smb-chip-active { background: var(--smb-green); color: var(--smb-white); }

/* Catálogo — tarjetas de producto tipo Rhode */
.smb-catalog-card { padding: 0; overflow: hidden; margin-bottom: 0; border-radius: var(--smb-radius-lg); border-color: var(--smb-border); transition: border-color .15s ease; }
.smb-catalog-card:hover { border-color: var(--smb-green); }
.smb-catalog-image-wrap { position: relative; }
.smb-catalog-image { height: 260px; background-size: cover; background-position: center; background-color: var(--smb-green-soft); }
.smb-badge-overlay { position: absolute; top: 14px; right: 14px; }
.smb-badge-overlay.smb-badge-on { background: rgba(255,255,255,0.92); color: var(--smb-green-dark); }
.smb-badge-overlay.smb-badge-off { background: rgba(255,255,255,0.92); color: var(--smb-text-soft); }
.smb-product-body { padding: 20px 20px 20px; }
.smb-product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.smb-product-head h4 { margin: 0; font-family: var(--font-sans); font-style: normal; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--smb-title); }
.smb-price { font-family: var(--font-sans); font-size: 21px; font-weight: 700; margin: 8px 0 8px; color: var(--smb-cacao); }
.smb-meta { font-size: 11.5px; color: var(--smb-text-soft); margin: 0 0 16px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.6; }

.smb-badge { font-size: 10.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.smb-badge-on { background: var(--smb-green-soft); color: var(--smb-green-dark); }
.smb-badge-off { background: var(--smb-chocolate-soft); color: var(--smb-text-soft); }

.smb-pill { background: var(--smb-green-soft); color: var(--smb-green-dark); font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* Listas — sin rejilla, respiran */
.smb-list { list-style: none; margin: 0; padding: 0; }
.smb-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 0; font-size: 13.5px; }
.smb-list li + li { border-top: 1px solid var(--smb-border); }
.smb-list-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.smb-list-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fila enriquecida de "Mi equipo": una sola fila por Partner con sus
   totales acumulados (nunca una fila nueva por venta) */
/* Fila liviana de "Mi equipo": solo un vistazo (Bono Sponsor) por
   Partner. El desglose completo vive únicamente en "Mis partners"
   para no repetir la misma información en dos pantallas. */
.smb-team-row-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.smb-team-row-id strong { font-size: 13.5px; color: var(--smb-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smb-team-row-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--smb-text-soft); flex-wrap: wrap; }
.smb-team-row-quick { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.smb-team-row-quick-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smb-text-soft); }
.smb-team-row-quick-value { font-size: 14px; font-weight: 700; color: var(--smb-gold); }
.smb-empty { color: var(--smb-text-soft); font-size: 14px; padding: 18px 0; font-weight: 300; }

/* Tablas */
.smb-table-card { padding: 0; overflow-x: auto; }

/* Mis partners — una tarjeta por persona, con sus totales acumulados */
.smb-partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.smb-partner-card {
	background: var(--smb-white);
	border: 1px solid var(--smb-border);
	border-radius: var(--smb-radius);
	box-shadow: var(--smb-shadow);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.smb-partner-card-head { display: flex; align-items: center; gap: 12px; }
.smb-partner-card-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.smb-partner-card-id strong { font-size: 15px; font-weight: 700; color: var(--smb-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smb-partner-card-sub { font-size: 11.5px; color: var(--smb-text-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smb-partner-card-count {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--smb-green-dark);
	background: var(--smb-green-soft);
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	align-self: flex-start;
}
.smb-partner-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 12px; border-top: 1px solid var(--smb-border); }
.smb-partner-card-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smb-text-soft); margin-bottom: 4px; }
.smb-partner-card-value { display: block; font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--smb-cacao); }
.smb-partner-card-value-gold { color: var(--smb-gold); }
.smb-partner-card-foot { margin: 0; font-size: 11px; color: var(--smb-text-soft); }
.smb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.smb-table th { text-align: left; padding: 14px 18px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--smb-title); background: var(--smb-chocolate-soft); white-space: nowrap; }
.smb-table td { padding: 14px 18px; }
.smb-table tbody tr + tr td { border-top: 1px solid var(--smb-border); }

/* Avatares */
.smb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--smb-green); color: var(--smb-white); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.smb-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.smb-avatar-lg { width: 68px; height: 68px; font-size: 22px; }

/* Ranking — solo posición, nombre y ventas del mes. Sin medallas, trofeos,
   coronas ni íconos decorativos: la jerarquía se transmite únicamente con
   color y tipografía, dentro de la paleta matcha / chocolate / blanco / negro. */
.smb-ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.smb-ranking-list li {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	border-radius: var(--smb-radius-sm);
	background: var(--smb-white);
	border: 1px solid var(--smb-border);
}

.smb-ranking-pos {
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: 600;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--smb-border);
	color: var(--smb-text-soft);
	font-size: 11px;
}
.smb-ranking-pos .smb-icon { width: 11px; height: 11px; }
.smb-ranking-name { flex: 1; font-weight: 500; font-size: 13.5px; color: var(--smb-black); }
.smb-ranking-value { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--smb-cacao); }

/* Top 3: sin bloques de color, solo un fino anillo en el color del
   tema con intensidad decreciente — nunca un fondo verde oscuro
   completo. El 1er puesto lleva además un pequeño ícono lineal
   (estrella), no emojis ni medallas. */
.smb-ranking-top { border-color: var(--smb-green-soft); }
.smb-ranking-top .smb-ranking-name { font-weight: 600; }

.smb-ranking-list li:nth-of-type(1).smb-ranking-top .smb-ranking-pos { border: 1.5px solid var(--smb-gold); color: var(--smb-gold); }
.smb-ranking-list li:nth-of-type(2).smb-ranking-top .smb-ranking-pos { border-color: var(--smb-green); color: var(--smb-green-dark); }
.smb-ranking-list li:nth-of-type(3).smb-ranking-top .smb-ranking-pos { border-color: var(--smb-green-soft); color: var(--smb-green-dark); }

.smb-ranking-me { box-shadow: inset 0 0 0 1.5px var(--smb-green); border-color: transparent; }

/* Confirmación de pedido */
.smb-order-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 44px 20px;
}
.smb-order-success-icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--smb-green-soft);
	color: var(--smb-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.smb-order-success-icon .smb-icon { width: 30px; height: 30px; }
.smb-order-success h3 { font-family: var(--font-sans); font-style: normal; font-size: 25px; color: var(--smb-title); margin: 0 0 10px; }
.smb-order-success p { color: var(--smb-text-soft); font-size: 13.5px; margin: 0 0 22px; font-weight: 300; }
.smb-order-whatsapp-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--smb-text-soft); text-transform: uppercase; margin-bottom: 12px; }

/* Bottom nav (móvil) */
.smb-bottom-nav { display: none; }

@media (max-width: 900px) {
	.smb-only-desktop { display: none !important; }
	.smb-only-mobile { display: flex; }
	.smb-public-nav { display: none; }
	.smb-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--smb-white);
		border-top: 1px solid var(--smb-border);
		box-shadow: 0 -2px 12px rgba(28, 26, 22, 0.05);
		padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
		z-index: 500;
	}
	.smb-bottom-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--smb-text-soft); text-decoration: none; padding: 4px; transition: color .15s ease; background: transparent; border: none; font-family: inherit; cursor: pointer; }
	.smb-bottom-link .smb-icon { width: 20px; height: 20px; }
	.smb-bottom-link-active { color: var(--smb-title); }
	.smb-bottom-link-active .smb-icon { color: var(--smb-green); }
	.smb-public-app { padding-bottom: 80px; }
	.smb-card { padding: 20px; border-radius: 22px; }

	/* Menú "Más": hoja desplegable con Comisiones, Mi equipo, Mis
	   partners, Ranking y Tema */
	.smb-bottom-more { position: relative; flex: 1; display: flex; }
	.smb-more-sheet {
		display: none;
		position: absolute;
		bottom: calc(100% + 10px);
		right: -4px;
		min-width: 190px;
		max-height: min(60vh, 360px);
		overflow-y: auto;
		background: var(--smb-white);
		border: 1px solid var(--smb-border);
		border-radius: var(--smb-radius-sm);
		box-shadow: var(--smb-shadow-lift);
		padding: 6px;
		z-index: 600;
	}
	.smb-more-sheet.smb-more-sheet-open { display: block; }
	.smb-more-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--smb-title); text-decoration: none; width: 100%; border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
	.smb-more-link .smb-icon { width: 18px; height: 18px; color: var(--smb-text-soft); flex-shrink: 0; }
	.smb-more-link:hover, .smb-more-link-active { background: var(--smb-chocolate-soft); }
	.smb-more-link-active .smb-icon { color: var(--smb-green-dark); }
	.smb-more-link .smb-badge-new { margin-left: auto; }
	.smb-more-sheet > .smb-more-link-danger { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--smb-border); border-radius: 0 0 10px 10px; color: #B3453D; }
	.smb-more-link-danger .smb-icon { color: #B3453D; }
	.smb-more-link-danger:hover { background: rgba(179, 69, 61, 0.08); }
}

/* ---------------- Ficha de producto ---------------- */

.smb-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--smb-text-soft); text-decoration: none; margin-bottom: 18px; }
.smb-back-link:hover { color: var(--smb-title); }
.smb-back-link .smb-icon { width: 16px; height: 16px; }

.smb-detail-hero { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.smb-detail-image { height: 260px; border-radius: var(--smb-radius-lg); background-size: cover; background-position: center; background-color: var(--smb-green-soft); }
.smb-detail-hero-info h1 { font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 26px; margin: 10px 0 4px; color: var(--smb-title); letter-spacing: -0.01em; }
.smb-detail-cta { margin-top: 14px; }

.smb-detail-section h3 { font-family: var(--font-sans); font-style: normal; font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--smb-title); text-transform: uppercase; letter-spacing: 0.04em; }
.smb-detail-section-body { font-size: 14px; line-height: 1.7; color: var(--smb-black); font-weight: 300; }
.smb-detail-section-body p { margin: 0 0 12px; }
.smb-detail-section-body p:last-child { margin-bottom: 0; }

.smb-detail-link { margin-top: 8px; }

/* ---------------- Aula SMB (Academia) ---------------- */

.smb-academy-hero {
	background: var(--smb-green-soft);
	color: var(--smb-title);
	border-radius: var(--smb-radius);
	padding: 32px 26px;
	margin-bottom: 22px;
	position: relative;
	overflow: hidden;
}
.smb-academy-hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smb-green-dark); margin-bottom: 10px; }
.smb-academy-hero-kicker .smb-icon { width: 15px; height: 15px; }
.smb-academy-hero h1 { font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: -0.005em; font-size: 32px; margin: 0 0 8px; color: var(--smb-title); }
.smb-academy-hero p { margin: 0; color: var(--smb-text-soft); font-size: 13.5px; font-weight: 300; max-width: 460px; position: relative; z-index: 1; }

.smb-course-card {
	padding: 0;
	overflow: hidden;
	margin-bottom: 0;
	border-radius: var(--smb-radius-lg);
	border-color: var(--smb-border);
	transition: border-color .15s ease, transform .15s ease;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	display: block;
	width: 100%;
}
.smb-course-card:hover { border-color: var(--smb-green); transform: translateY(-2px); }
.smb-course-thumb { position: relative; height: 150px; background-size: cover; background-position: center; background-color: var(--smb-green-soft); }
.smb-course-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--smb-white); background: rgba(34,30,25,0.28); transition: background .15s ease;
}
.smb-course-play .smb-icon { width: 38px; height: 38px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.smb-course-card:hover .smb-course-play { background: rgba(34,30,25,0.1); }
.smb-course-body { padding: 18px 18px 20px; }
.smb-course-body h4 { margin: 8px 0 6px; font-family: var(--font-sans); font-style: normal; font-size: 15.5px; font-weight: 700; color: var(--smb-title); line-height: 1.35; }

/* Modal de video embebido — sin salir del portal */
.smb-video-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 10, 8, 0.82);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.smb-video-modal.smb-video-modal-open { display: flex; }
.smb-video-modal-inner {
	background: var(--smb-white);
	border-radius: var(--smb-radius);
	width: 100%;
	max-width: 780px;
	max-height: 92vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}
.smb-video-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	color: var(--smb-white);
	background: rgba(255,255,255,0.12);
}
.smb-video-close:hover { background: rgba(255,255,255,0.22); }
.smb-video-frame-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--smb-radius) var(--smb-radius) 0 0; overflow: hidden; }
.smb-video-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.smb-video-info { padding: 20px 24px 26px; }
.smb-video-info h3 { font-family: var(--font-sans); font-style: normal; font-size: 18px; font-weight: 700; color: var(--smb-title); margin: 0 0 8px; }
.smb-video-info p { font-size: 13px; color: var(--smb-text-soft); font-weight: 300; line-height: 1.6; margin: 0; }

/* ---------------- Invitación de sponsor / kit (pantalla de acceso) ---------------- */

.smb-sponsor-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--smb-radius-sm);
	background: var(--smb-green-soft);
	margin-bottom: 20px;
}
.smb-sponsor-badge .smb-avatar { background: var(--smb-green); }
.smb-sponsor-badge div { display: flex; flex-direction: column; gap: 2px; }
.smb-sponsor-badge strong { font-size: 13px; color: var(--smb-title); }
.smb-sponsor-badge span { font-size: 11.5px; color: var(--smb-green-dark); font-weight: 500; }
.smb-sponsor-badge-visual { background: var(--smb-white); border: 1px solid var(--smb-border); margin-bottom: 0; }
.smb-sponsor-badge-visual .smb-avatar { width: 44px; height: 44px; font-size: 15px; }

/* Kit protagonista: imagen grande, nombre, precio y contenido bien
   presentados — nada de miniaturas de 64px. */
.smb-kit-hero {
	background: var(--smb-white);
	border: 1px solid var(--smb-border);
	border-radius: var(--smb-radius);
	box-shadow: var(--smb-shadow-lift);
	overflow: hidden;
	margin-bottom: 14px;
}
.smb-kit-hero-image { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 420px; background: var(--smb-green-soft); }
.smb-kit-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 900px) {
	.smb-kit-hero-image { aspect-ratio: 4 / 3; max-height: 360px; }
}
.smb-kit-hero-pill { position: absolute; top: 16px; left: 16px; background: var(--smb-white); box-shadow: var(--smb-shadow); }
.smb-kit-hero-body { padding: 22px 24px 26px; }
.smb-kit-hero-body h3 { margin: 0 0 6px; font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: -0.005em; font-size: 26px; color: var(--smb-title); }
.smb-kit-hero-price { font-size: 22px; font-weight: 700; color: var(--smb-green-dark); margin: 0 0 12px; }
.smb-kit-hero-desc { font-size: 13.5px; color: var(--smb-text-soft); font-weight: 300; line-height: 1.6; margin: 0 0 16px; }
.smb-kit-hero-includes-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--smb-text-soft); margin: 0 0 10px; }
.smb-kit-hero-contents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.smb-kit-hero-contents li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--smb-title); }
.smb-kit-hero-contents .smb-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--smb-green); flex-shrink: 0; }

/* ---------------- Enlace personal de kit / acciones de producto ---------------- */

.smb-product-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.smb-kit-link-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.smb-kit-link-input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--smb-border);
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--smb-text-soft);
	background: var(--smb-chocolate-soft);
}
@media (max-width: 640px) {
	.smb-kit-link-input { font-size: 16px; } /* evita el zoom automático de iOS al enfocar */
}
.smb-copy-link { white-space: nowrap; padding: 10px 16px; }

.smb-toast {
	position: fixed;
	left: 50%;
	bottom: calc(90px + env(safe-area-inset-bottom));
	transform: translateX(-50%) translateY(20px);
	background: var(--smb-green-dark);
	color: var(--smb-white);
	padding: 13px 22px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	box-shadow: var(--smb-shadow-lift);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 200000;
	max-width: calc(100vw - 40px);
	text-align: center;
}
.smb-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- Sección de kit (catálogo + referidos combinados) ---------------- */

.smb-kit-section { padding: 0; overflow: hidden; border: 1px solid var(--smb-border); border-top: none; background: var(--smb-white); }
.smb-kit-section:nth-of-type(odd) { background: var(--smb-green-soft); border-color: var(--smb-green-soft); }
.smb-kit-section:nth-of-type(odd) .smb-kit-section-body h4 { color: var(--smb-title); }
.smb-kit-section-top { display: flex; gap: 0; flex-wrap: wrap; }
.smb-kit-section-image {
	width: 220px;
	min-height: 200px;
	flex-shrink: 0;
	background-color: var(--smb-green-soft);
	overflow: hidden;
	display: block;
}
.smb-kit-section-image img {
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
	display: block;
}
.smb-kit-section-body { padding: 18px; flex: 1; min-width: 240px; }
.smb-kit-section-body h4 { margin: 0 0 4px; font-family: var(--font-sans); font-style: normal; font-size: 18px; font-weight: 700; color: var(--smb-title); }


@media (max-width: 640px) {
	.smb-kit-section-image { width: 100%; height: 180px; min-height: 0; }
	.smb-kit-section-image img { min-height: 0; height: 180px; }
}

/* ---------------- Badge "Nuevo" — detalle dorado puntual ---------------- */

.smb-badge-new {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 8px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 999px;
	background: var(--smb-gold-soft);
	color: var(--smb-gold);
	vertical-align: middle;
}

/* ---------------- Tema (selector de color, individual por usuario) ---------------- */

.smb-theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 420px; }
.smb-theme-option {
	position: relative;
	border: none;
	border-radius: var(--smb-radius-sm);
	padding: 20px 16px;
	min-height: 84px;
	display: flex;
	align-items: flex-end;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .1s ease;
	box-shadow: inset 0 0 0 1px rgba(30, 29, 26, 0.06);
	font-family: inherit;
	text-align: left;
}
.smb-theme-option:active { transform: scale(0.98); }
.smb-theme-option-active { box-shadow: inset 0 0 0 1.5px rgba(30, 29, 26, 0.22); }
.smb-theme-option-label { font-size: 13px; font-weight: 600; color: var(--smb-black); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.smb-theme-default-tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--smb-text-soft); background: rgba(255,255,255,0.6); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.smb-theme-check {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--smb-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.smb-theme-check .smb-icon { width: 12px; height: 12px; color: var(--smb-white); }