/* MemesDiarios – interfaz moderna (todo bajo body.md-ui). */

/* ---------- 1. Tipografía ---------- */
body.md-ui { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.md-ui h1, body.md-ui h2, body.md-ui h3, body.md-ui h4,
body.md-ui .entry-title, body.md-ui .page-title, body.md-ui .widget-title,
body.md-ui .main-navigation a, body.md-ui .md-section-title, body.md-ui .md-modal__title,
body.md-ui .md-btn, body.md-ui .md-locked__btn, body.md-ui .md-chip, body.md-ui .md-more__title,
body.md-ui .next-prev-pagination a, body.md-ui #load-more-button, body.md-ui .reaction-box .title {
	font-family: "Poppins", "Inter", system-ui, sans-serif !important; letter-spacing: -.01em;
}
body.md-ui .entry-title { font-weight: 700; }
body.md-ui .md-btn, body.md-ui .md-locked__btn { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ---------- 2. Botones de la marca (amarillo y negro) ---------- */
body.md-ui .next-prev-pagination .nav a {
	background: var(--md-yellow) !important; color: var(--md-ink) !important; border: 0 !important;
	border-radius: 999px !important; font-weight: 700; text-transform: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.08);
	transition: transform .15s ease, filter .15s ease;
}
body.md-ui .next-prev-pagination .nav a:hover { filter: brightness(.95); transform: translateY(-1px); }
body.md-ui .next-prev-pagination .nav a .icon { color: var(--md-ink) !important; }
body.md-ui .next-prev-pagination .nav.prev-page a { background: #f1f1f1 !important; }
body.md-ui #go-top {
	background: var(--md-ink) !important; color: var(--md-yellow) !important; border-radius: 50% !important;
	width: 44px; height: 44px; line-height: 44px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
body.md-ui #go-top .icon { color: var(--md-yellow) !important; }
body.md-ui .view-full-post .bb-btn, body.md-ui .bb-btn-primary {
	background: var(--md-yellow) !important; color: var(--md-ink) !important; border-radius: 999px !important; font-weight: 700;
}

/* ---------- 3. Chips de categorías ---------- */
.md-chips { background: #fff; border-bottom: 1px solid var(--md-line); position: relative; z-index: 2; }
.md-chips__track {
	display: flex; gap: 8px; overflow-x: auto; padding-top: 10px !important; padding-bottom: 10px !important;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.md-chips__track::-webkit-scrollbar { display: none; }
.md-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
	background: #f2f2f2; color: var(--md-ink) !important; font-size: 14px; font-weight: 600; white-space: nowrap;
	text-decoration: none !important; scroll-snap-align: start; transition: background .15s ease, transform .15s ease;
}
.md-chip:hover { background: #e8e8e8; transform: translateY(-1px); }
.md-chip.is-active { background: var(--md-ink); color: #fff !important; }

/* ---------- 4. Barra fija "Desbloquea todo" (solo celular) ---------- */
.md-unlock-bar { display: none; }
@media (max-width: 767px) {
	.md-unlock-bar:not([hidden]) {
		display: flex; align-items: center; gap: 10px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 9995;
		padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--md-ink); color: #fff;
		box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: md-bar-in .25s ease-out;
	}
	body.md-has-bar { padding-bottom: 84px; }
	body.md-has-bar #go-top { bottom: 92px !important; }
	body.md-has-bar .md-more--toast { bottom: 92px; }
}
@keyframes md-bar-in { from { transform: translateY(120%); } to { transform: none; } }
.md-unlock-bar__icon { font-size: 22px; line-height: 1; }
.md-unlock-bar__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.md-unlock-bar__text strong { font-family: "Poppins", sans-serif; font-size: 15px; }
.md-unlock-bar__text span { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-unlock-bar .md-unlock-bar__cta { padding: 10px 16px !important; font-size: 14px; border-radius: 999px !important; }
.md-unlock-bar__close { background: none; border: 0; color: #fff; opacity: .6; font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }

/* ---------- 5. Cargar más ---------- */
body.md-ui #load-more-button {
	background: var(--md-yellow) !important; color: var(--md-ink) !important; border: 0 !important; border-radius: 999px !important;
	font-weight: 700; padding: 12px 28px !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-transform: none !important;
}

/* ---------- 6. Reacciones con emoji ---------- */
/* En los listados: el voto "arriba" pasa a ser "😂" (me hizo reír); el voto "abajo" se oculta. */
body.md-ui .post-rating .inner { display: inline-flex; align-items: center; gap: 0; border: 0 !important; background: #f2f2f2; border-radius: 999px; overflow: hidden; }
body.md-ui .post-rating .point-btn.down { display: none !important; }
body.md-ui .post-rating .point-btn.up { border: 0 !important; background: transparent !important; padding: 6px 4px 6px 12px !important; width: auto !important; height: auto !important; }
body.md-ui .post-rating .point-btn.up i { display: none; }
body.md-ui .post-rating .point-btn.up::before { content: "😂"; font-size: 20px; line-height: 1; display: inline-block; transition: transform .15s ease; }
body.md-ui .post-rating .point-btn.up:hover::before { transform: scale(1.2) rotate(-8deg); }
body.md-ui .post-rating .point-btn.up.active::before { transform: scale(1.15); }
body.md-ui .post-rating .count { border: 0 !important; background: transparent !important; padding: 6px 14px 6px 4px !important; font-weight: 700; min-width: 0 !important; }
/* En la publicación: los círculos vacíos de las reacciones ahora llevan su emoji. */
body.md-ui .reaction-box .badge .circle { display: inline-flex !important; align-items: center; justify-content: center; background: #fff7c2 !important; }
body.md-ui .reaction-box .reaction-48 .circle::before { content: "😂"; }
body.md-ui .reaction-box .reaction-49 .circle::before { content: "😍"; }
body.md-ui .reaction-box .reaction-47 .circle::before { content: "🥰"; }
body.md-ui .reaction-box .badge .circle::before { font-size: 30px; line-height: 1; }
body.md-ui .reaction-box .reaction-vote-btn { border-radius: 999px !important; font-weight: 700; }
body.md-ui .reaction-box .reaction-stat { background: var(--md-yellow) !important; }

/* ---------- 8. Cuenta regresiva y beneficios ---------- */
.md-countdown:not(:empty) {
	display: inline-flex; align-items: center; margin-left: 10px; vertical-align: middle; padding: 3px 10px; border-radius: 999px;
	background: var(--md-ink); color: var(--md-yellow); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.md-benefits { list-style: none; margin: -6px 0 18px; padding: 0; text-align: left; display: inline-block; }
.md-benefits li { position: relative; padding-left: 26px; margin: 6px 0; font-size: .95em; color: var(--md-ink); }
.md-benefits li::before {
	content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--md-yellow); color: var(--md-ink); font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}

/* ---------- 7. Modo oscuro automático ---------- */
html.md-dark body.md-ui { background-color: #121214 !important; color: #e6e6ea; }
html.md-dark body.md-ui #mainContainer, html.md-dark body.md-ui .page-wrapper { background-color: #121214 !important; }
html.md-dark body.md-ui h1, html.md-dark body.md-ui h2, html.md-dark body.md-ui h3, html.md-dark body.md-ui h4,
html.md-dark body.md-ui .entry-title a, html.md-dark body.md-ui .widget-title, html.md-dark body.md-ui .md-section-title,
html.md-dark body.md-ui .post-title a, html.md-dark body.md-ui .page-title, html.md-dark body.md-ui .title a { color: #f2f2f5 !important; }
html.md-dark body.md-ui .entry-content, html.md-dark body.md-ui p, html.md-dark body.md-ui .md-section-sub,
html.md-dark body.md-ui .badge .text, html.md-dark body.md-ui .badge.category .text, html.md-dark body.md-ui .cat-links a,
html.md-dark body.md-ui .post-meta, html.md-dark body.md-ui .view-meta { color: #b8b8c2 !important; }
html.md-dark body.md-ui .md-chips { background: #18181b; border-color: #26262b; }
html.md-dark body.md-ui .md-chip { background: #26262b; color: #e6e6ea !important; }
html.md-dark body.md-ui .md-chip:hover { background: #303036; }
html.md-dark body.md-ui .md-chip.is-active { background: var(--md-yellow); color: var(--md-ink) !important; }
html.md-dark body.md-ui .md-card { background: #1c1c20; color: #f2f2f5 !important; box-shadow: none; }
html.md-dark body.md-ui .md-swipe-hint { color: var(--md-yellow); }
html.md-dark body.md-ui .md-section-head, html.md-dark body.md-ui hr { border-color: #2a2a30; }
html.md-dark body.md-ui .md-section-head { border-bottom-color: var(--md-yellow); }
html.md-dark body.md-ui .post-rating .inner, html.md-dark body.md-ui .post-rating .count, html.md-dark body.md-ui .post-rating .count .text { background: #26262b !important; color: #f2f2f5 !important; }
html.md-dark body.md-ui .next-prev-pagination .nav.prev-page a { background: #26262b !important; color: #f2f2f5 !important; }
html.md-dark body.md-ui .next-prev-pagination .nav.prev-page a .icon { color: #f2f2f5 !important; }
html.md-dark body.md-ui .md-paywall-note, html.md-dark body.md-ui .md-more { background: #1c1c20; color: #e6e6ea; }
html.md-dark body.md-ui .md-more__title { color: #f2f2f5; }
html.md-dark body.md-ui .md-modal__dialog { background: #1c1c20; }
html.md-dark body.md-ui .md-modal__title, html.md-dark body.md-ui .md-benefits li { color: #f2f2f5; }
html.md-dark body.md-ui .md-modal__sub { color: #a0a0aa; }
html.md-dark body.md-ui .md-phone { background: #121214; border-color: #3a3a42; }
html.md-dark body.md-ui .md-phone__prefix { background: #26262b; color: #e6e6ea; border-color: #3a3a42; }
html.md-dark body.md-ui .md-modal .md-phone input[type=tel] { color: #f2f2f5 !important; }
html.md-dark body.md-ui .md-modal__alt { border-color: #2a2a30; }
html.md-dark body.md-ui .md-modal__close:hover { background: #26262b; color: #fff; }
html.md-dark body.md-ui .md-unlock-bar { background: #26262b; }
html.md-dark body.md-ui .reaction-box .badge .circle { background: #26262b !important; }
html.md-dark body.md-ui .reaction-box .reaction-vote-btn { background: #26262b !important; color: #f2f2f5 !important; border-color: #3a3a42 !important; }
html.md-dark body.md-ui .reaction-box .reaction-bar { background: #26262b !important; }
html.md-dark body.md-ui .sidebar .widget, html.md-dark body.md-ui .widget { background: transparent !important; }
html.md-dark body.md-ui input[type=search], html.md-dark body.md-ui input[type=text], html.md-dark body.md-ui select {
	background: #1c1c20 !important; color: #f2f2f5 !important; border-color: #3a3a42 !important;
}
html.md-dark body.md-ui .mobile-navigation-wrapper, html.md-dark body.md-ui #mobile-navigation, html.md-dark body.md-ui .mobile-nav {
	background: #18181b !important; color: #e6e6ea !important;
}

/* Ajustes celular: el tema oculta el contador y estrecha el voto; mostrarlo como píldora completa */
body.md-ui .post-rating { width: auto !important; height: auto !important; }
body.md-ui .post-rating .count { display: inline-flex !important; align-items: center; }
body.md-ui .post-rating .count .icon { display: none !important; }
/* Botón "siguiente" de la cabecera fija de la publicación */
body.md-ui .fixed-next-page a, body.md-ui .fixed-next-page .icon, body.md-ui .fixed-next-page button {
	background: var(--md-yellow) !important; color: var(--md-ink) !important; border-color: var(--md-yellow) !important; border-radius: 10px;
}
html.md-dark body.md-ui .post-share-box, html.md-dark body.md-ui #sticky-share-box, html.md-dark body.md-ui .fixed-next-page,
html.md-dark body.md-ui .fixed-header, html.md-dark body.md-ui .fixed-navigation { background: #18181b !important; border-color: #26262b !important; color: #e6e6ea !important; }
html.md-dark body.md-ui .post-share-box h2, html.md-dark body.md-ui .fixed-header .title, html.md-dark body.md-ui .fixed-navigation .title { color: #f2f2f5 !important; }
html.md-dark body.md-ui textarea, html.md-dark body.md-ui input[type=email], html.md-dark body.md-ui input[type=url],
html.md-dark body.md-ui input[type=tel]:not(#md-phone), html.md-dark body.md-ui .comment-respond input[type=text] {
	background: #1c1c20 !important; color: #f2f2f5 !important; border-color: #3a3a42 !important;
}
html.md-dark body.md-ui .comment-respond, html.md-dark body.md-ui #comments { background: transparent !important; color: #e6e6ea; }
html.md-dark body.md-ui .page-header, html.md-dark body.md-ui .comment-respond form, html.md-dark body.md-ui .entry-header.page-header {
	background: #1c1c20 !important; border-color: #2a2a30 !important;
}