/*
 * Podio · capa de estilo para RankIt
 * Ajusta la apariencia del plugin a los colores y tipografías del theme,
 * y le da modo oscuro. No cambia el marcado ni el comportamiento del plugin.
 */

/* ── Variables del plugin → tokens del theme ── */
:root {
	--rk-bg: var(--p-surface);
	--rk-bg2: var(--p-surface-2);
	--rk-s: var(--p-bg);
	--rk-s2: var(--p-surface);
	--rk-bd: var(--p-line);
	--rk-bd2: var(--p-line-2);
	--rk-ac: var(--p-down);
	--rk-gn: var(--p-up);
	--rk-gd: var(--p-gold);
	--rk-or: #e07020;
	--rk-tx: var(--p-ink);
	--rk-tx2: var(--p-ink-2);
	--rk-mu: var(--p-muted);
	--rk-sh: none;
	--rk-shh: 0 10px 30px -18px rgba(15, 20, 30, .35);
	--rk-r: 12px;
}

/* ── Tipografía ── */
body [class*="rk-"], body [class*="rkd-"], body .rankit-wrap {
	font-family: var(--p-font-body) !important;
}
body :is(.rk-title, .rk-rank, .rk-comments-head, .rk-nl-title, .rk-related-title, .rk-lr-title, .rk-modal-head h3,
	.rk-suggest-ok h3, .rk-share strong, .rk-sum-num, .rk-list-meta-num, .rk-score, .rk-score-num, .rk-top-favs-title,
	.rk-home-lang-title, .rk-stats-heading, .rk-stats-num, .rk-stats-card-num, .rk-levelup-name, .rk-gamify-count,
	.rk-esm-head h3, .rk-cta-banner-text strong, .rkd-title, .rkd-section-title, .rkd-stat-num, .rkd-hl-num,
	.rkd-hl-title, .rkd-metric-num, .rkd-card-rank, .rk-sf-item-num, .rk-top-fav-rank, .rk-submit-header .rk-title) {
	font-family: var(--p-font-display) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}
body :is(.rk-chip, .rk-pill, .rk-ccount, .rk-cc, .rk-score-word, .rk-chart-label, .rkd-shortcode code) {
	font-variant-numeric: tabular-nums;
}

.rankit-wrap { padding-top: .5rem; container-type: inline-size; }

/* Título duplicado: la entrada ya muestra el H1 */
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-header > .rk-title,
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-header > .rk-tagline { display: none; }
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-header { text-align: left; margin-bottom: 1.25rem; }
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-pills,
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-social-links { justify-content: flex-start; }
.p-hide-list-title .p-article .rankit-wrap:first-of-type .rk-list-meta-bar { justify-content: flex-start; margin-left: 0; }

.rk-title { font-weight: 760 !important; }
.rk-tagline { color: var(--p-muted) !important; }
.rk-pill-live { background: var(--p-surface) !important; }
.rk-pill-cd { background: color-mix(in srgb, var(--p-up) 10%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-up) 35%, var(--p-bg)) !important; }
.rk-pill-cd.used { background: color-mix(in srgb, var(--p-gold) 12%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-gold) 40%, var(--p-bg)) !important; color: color-mix(in srgb, var(--p-gold) 70%, var(--p-ink)) !important; }

/* ── Elementos de la lista ── */
.rk-item { box-shadow: none !important; transition: border-color .15s, opacity .15s !important; }
.rk-item:hover { transform: none !important; border-color: var(--p-line-2) !important; }
.rk-item.rk-voted { opacity: 1 !important; border-color: color-mix(in srgb, var(--p-accent) 40%, var(--p-line)) !important; }
.rk-item.rk1 { border-left: 3px solid var(--p-gold) !important; }
.rk-item.rk2 { border-left: 3px solid var(--p-silver) !important; }
.rk-item.rk3 { border-left: 3px solid var(--p-bronze) !important; }
.rk-rank { background: var(--p-surface) !important; color: var(--p-line-2) !important; font-weight: 800 !important; }
.rk-item.rk1 .rk-rank { color: var(--p-gold) !important; }
.rk-item.rk2 .rk-rank { color: var(--p-silver) !important; }
.rk-item.rk3 .rk-rank { color: var(--p-bronze) !important; }
.rk-content h4 { font-size: 1.02rem !important; font-weight: 650 !important; color: var(--p-ink); }
.rk-content p { font-size: .86rem !important; }

.rk-vpanel { background: var(--p-surface) !important; }
.rk-vbtn {
	border-radius: 11px !important;
	box-shadow: none !important;
	border: 1px solid transparent !important;
	transition: background-color .15s, border-color .15s, transform .12s !important;
}
.rk-vbtn::before { display: none !important; }
.rk-vbtn.up { background: color-mix(in srgb, var(--p-up) 12%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-up) 30%, var(--p-bg)) !important; color: var(--p-up) !important; }
.rk-vbtn.dn { background: color-mix(in srgb, var(--p-down) 10%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-down) 28%, var(--p-bg)) !important; color: var(--p-down) !important; }
.rk-vbtn.up:hover:not(:disabled) { background: color-mix(in srgb, var(--p-up) 20%, var(--p-bg)) !important; transform: translateY(-1px) !important; }
.rk-vbtn.dn:hover:not(:disabled) { background: color-mix(in srgb, var(--p-down) 18%, var(--p-bg)) !important; transform: translateY(-1px) !important; }
.rk-vbtn.vu { background: var(--p-up) !important; border-color: var(--p-up) !important; color: #fff !important; }
.rk-vbtn.vd { background: var(--p-down) !important; border-color: var(--p-down) !important; color: #fff !important; }
.rk-vbtn:focus-visible { outline: 2px solid var(--p-accent) !important; outline-offset: 2px; }
.rk-score-num { font-weight: 750; }
.rk-sbar { background: var(--p-surface-2) !important; }
.rk-sbar-fill { background: var(--p-accent) !important; }
.rk-chip { background: var(--p-surface) !important; border-color: var(--p-line) !important; color: var(--p-ink-2) !important; font-weight: 600 !important; }
.rk-chip.voted { background: color-mix(in srgb, var(--p-up) 10%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-up) 35%, var(--p-bg)) !important; color: var(--p-up) !important; }
.rk-more-link { color: var(--p-accent) !important; }
.rk-thumb { background: var(--p-surface-2) !important; }

/* Aviso "vota" y resumen */
.rk-vote-nudge { background: var(--p-accent-soft) !important; border: 1px solid color-mix(in srgb, var(--p-accent) 22%, transparent) !important; color: var(--p-ink) !important; box-shadow: none !important; }
.rk-vote-nudge::before, .rk-cta-banner-inner::before, .rk-cta-banner-inner::after { display: none !important; }
.rk-vote-nudge-text { color: var(--p-ink) !important; font-weight: 600 !important; }
.rk-vote-nudge-icon, .rk-cta-banner-icon { filter: none !important; }
.rk-list-meta-card, .rk-sum-card { background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important; }
.rk-summary { background: var(--p-surface) !important; border-color: var(--p-line) !important; box-shadow: none !important; }
.rk-sum-bar-track { background: var(--p-surface-2) !important; }
.rk-sum-top { background: var(--p-bg) !important; border-color: var(--p-line) !important; }

/* Sugerir / crear */
.rk-suggest-btn {
	background: transparent !important; border: 1.5px dashed var(--p-line-2) !important; color: var(--p-ink-2) !important;
	border-radius: 12px !important; box-shadow: none !important;
}
.rk-suggest-btn:hover { border-color: var(--p-accent) !important; color: var(--p-accent) !important; background: var(--p-accent-soft) !important; }

/* Comentarios */
.rk-comments { background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important; border-radius: 12px !important; }
.rk-comments-head { font-weight: 700 !important; font-size: 1.1rem !important; }
.rk-comments-body { background: transparent !important; }
.rk-compose { background: var(--p-bg) !important; border-color: var(--p-line-2) !important; }
.rk-compose:focus-within { border-color: var(--p-accent) !important; box-shadow: var(--p-focus); }
.rk-compose-ta, .rk-compose-name { color: var(--p-ink) !important; }
.rk-compose-name[readonly] { color: var(--p-ink-2) !important; cursor: default; }
.rk-post-btn, .rk-btn-pri, .rk-nl-btn, .rk-sf-submit-btn, .rk-cta-banner-btn, .rk-ithread-submit {
	background: var(--p-accent) !important; color: var(--p-accent-ink) !important; border-color: var(--p-accent) !important;
	border-radius: 10px !important; box-shadow: none !important; font-weight: 650 !important;
}
.rk-post-btn:hover, .rk-btn-pri:hover, .rk-nl-btn:hover, .rk-sf-submit-btn:hover, .rk-cta-banner-btn:hover {
	background: color-mix(in srgb, var(--p-accent) 86%, var(--p-ink)) !important;
}
.rk-btn-sec { background: var(--p-bg) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line-2) !important; border-radius: 10px !important; }
.rk-citem { border-color: var(--p-line) !important; }
.rk-clike:hover, .rk-clike.liked { background: color-mix(in srgb, var(--p-down) 10%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-down) 35%, var(--p-bg)) !important; }
.rk-ccount { background: var(--p-surface) !important; }

/* Valoración, favoritos, CTA, compartir, boletín */
.rk-list-rating, .rk-fav-wrap, .rk-share, .rk-newsletter { background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important; border-radius: 12px !important; }
.rk-lr-btn, .rk-fav-btn { background: var(--p-bg) !important; border-color: var(--p-line-2) !important; color: var(--p-ink) !important; }
.rk-lr-btn.rk-lr-active-up { background: color-mix(in srgb, var(--p-up) 12%, var(--p-bg)) !important; border-color: var(--p-up) !important; color: var(--p-up) !important; }
.rk-lr-btn.rk-lr-active-dn { background: color-mix(in srgb, var(--p-down) 12%, var(--p-bg)) !important; border-color: var(--p-down) !important; color: var(--p-down) !important; }
.rk-fav-btn.rk-fav-on { background: color-mix(in srgb, var(--p-down) 8%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-down) 40%, var(--p-bg)) !important; }
.rk-cta-banner-inner { background: var(--p-surface) !important; border: 1px solid var(--p-line) !important; box-shadow: none !important; border-radius: 12px !important; }
.rk-cta-banner-text strong { text-shadow: none !important; font-weight: 700 !important; }
.rk-cta-banner-inner, .rk-cta-banner-text, .rk-cta-banner-text strong, .rk-cta-banner-text span { color: var(--p-ink) !important; }
.rk-cta-banner-text span { color: var(--p-ink-2) !important; }
.rk-sbtn { border-radius: 10px !important; box-shadow: none !important; }
/* RankIt usa .rk-cp para la flecha del carrusel y para "Copiar enlace": se separan aquí */
.rk-share .rk-sbtn.rk-cp {
	position: static !important; transform: none !important; width: auto !important; height: auto !important;
	min-height: 0 !important; padding: .45rem .9rem !important; border-radius: 10px !important; font-size: .85rem !important;
	display: inline-flex !important; background: var(--p-surface) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line-2) !important;
}
.rk-nl-input { background: var(--p-bg) !important; color: var(--p-ink) !important; border-color: var(--p-line-2) !important; border-radius: 10px !important; }
.rk-nl-icon { color: var(--p-accent) !important; }

/* Relacionadas */
.rk-related { border-color: var(--p-line) !important; }
.rk-related-title { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--p-ink) !important; }
.rk-related-card { background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important; border-radius: 12px !important; }
.rk-related-card:hover { border-color: var(--p-line-2) !important; transform: none !important; }
.rk-related-label { color: var(--p-ink) !important; }
.rk-related-thumb { background-color: var(--p-surface-2) !important; }

/* Modales */
.rk-modal-box, .rk-esm-box { background: var(--p-bg) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line) !important; border-radius: 18px !important; }
.rk-modal-head, .rk-modal-foot, .rk-esm-head { border-color: var(--p-line) !important; }
.rk-modal-head button, .rk-esm-close { color: var(--p-ink-2) !important; background: transparent !important; }
.rk-fields input, .rk-fields textarea, .rk-sf-field input, .rk-sf-field textarea, .rk-sf-field select {
	background: var(--p-bg) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line-2) !important; border-radius: 10px !important;
}
.rk-fields input:focus, .rk-fields textarea:focus, .rk-sf-field input:focus, .rk-sf-field textarea:focus { border-color: var(--p-accent) !important; box-shadow: var(--p-focus) !important; }
.rk-notice { background: color-mix(in srgb, var(--p-gold) 10%, var(--p-bg)) !important; border-color: color-mix(in srgb, var(--p-gold) 35%, var(--p-bg)) !important; color: var(--p-ink) !important; }

/* Formulario "Crea tu lista" */
.rk-submit-wrap { max-width: 760px; }
.rk-submit-form, .rk-sf-item { background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important; }
.rk-sf-add-item { background: transparent !important; border: 1.5px dashed var(--p-line-2) !important; color: var(--p-ink-2) !important; border-radius: 10px !important; }
.rk-sf-add-item:hover { border-color: var(--p-accent) !important; color: var(--p-accent) !important; }
.rk-sf-divider { border-color: var(--p-line) !important; }

/* Panel de estadísticas y tablero */
.rkd-stat, .rkd-highlight, .rkd-card, .rk-stats-card, .rk-stats-section, .rk-stats-item-card, .rk-stats-feed-item, .rk-top-fav-card, .rk-home-card {
	background: var(--p-bg) !important; border-color: var(--p-line) !important; box-shadow: none !important;
}
.rkd-card-leader, .rkd-card-rank, .rkd-shortcode code { background: var(--p-surface) !important; border-color: var(--p-line) !important; color: var(--p-ink-2) !important; }
.rkd-approval-track, .rk-stats-bar-track { background: var(--p-surface-2) !important; }
.rkd-card-btn { background: var(--p-accent-soft) !important; border-color: color-mix(in srgb, var(--p-accent) 30%, transparent) !important; color: var(--p-accent) !important; }
.rkd-title, .rkd-card-title, .rkd-hl-title, .rk-stats-heading, .rk-home-card-title, .rk-top-fav-title { color: var(--p-ink) !important; }

/* Anuncios */
.rk-ad-wrap { border-color: var(--p-line) !important; background: var(--p-surface) !important; }
.rk-ad-label { color: var(--p-muted) !important; }

/* ── Modo oscuro: piezas con colores fijos en el plugin ── */
:root[data-theme="dark"] :is(.rk-stats-card--green, .rk-stats-card--red, .rk-gamify-widget, .rk-badges-drawer, .rk-levelup-inner) { background: var(--p-surface) !important; border-color: var(--p-line) !important; color: var(--p-ink) !important; }
:root[data-theme="dark"] .rankit-wrap [style*="background:#f9f7f4"],
:root[data-theme="dark"] .rankit-wrap [style*="background:#fff"],
:root[data-theme="dark"] [class*="rk-"] [style*="background:#f9f7f4"],
:root[data-theme="dark"] [class*="rk-"] [style*="background:#fff"] { background: var(--p-surface) !important; border-color: var(--p-line) !important; }
:root[data-theme="dark"] [class*="rk-"] [style*="color:#1a1814"],
:root[data-theme="dark"] [class*="rk-"] [style*="color:#3d3a35"] { color: var(--p-ink) !important; }
:root[data-theme="dark"] .rk-thumb img { opacity: .95; }
:root[data-theme="dark"] #rk-toast-global { background: var(--p-ink) !important; color: var(--p-bg) !important; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) :is(.rk-stats-card--green, .rk-stats-card--red, .rk-gamify-widget, .rk-badges-drawer, .rk-levelup-inner) { background: var(--p-surface) !important; border-color: var(--p-line) !important; color: var(--p-ink) !important; }
	:root:not([data-theme="light"]) [class*="rk-"] [style*="background:#f9f7f4"],
	:root:not([data-theme="light"]) [class*="rk-"] [style*="background:#fff"] { background: var(--p-surface) !important; border-color: var(--p-line) !important; }
	:root:not([data-theme="light"]) [class*="rk-"] [style*="color:#1a1814"],
	:root:not([data-theme="light"]) [class*="rk-"] [style*="color:#3d3a35"] { color: var(--p-ink) !important; }
	:root:not([data-theme="light"]) #rk-toast-global { background: var(--p-ink) !important; color: var(--p-bg) !important; }
}

/* Botón de editar (solo administradores) */
.rk-admin-edit-btn { background: var(--p-surface) !important; color: var(--p-ink-2) !important; border: 1px solid var(--p-line) !important; border-radius: 8px !important; box-shadow: none !important; }

/* Modal de comentarios por elemento (estilos en línea del plugin) */
:root[data-theme="dark"] #rk-icm-box { background: var(--p-bg) !important; border: 1px solid var(--p-line); }
:root[data-theme="dark"] #rk-icm-title { color: var(--p-ink) !important; }
:root[data-theme="dark"] :is(#rk-icm-ta, #rk-icm-name) { background: var(--p-surface) !important; color: var(--p-ink) !important; border-color: var(--p-line-2) !important; }
:root[data-theme="dark"] #rk-icm-comments > div { background: var(--p-surface) !important; border-color: var(--p-line) !important; }
:root[data-theme="dark"] #rk-icm-comments span, :root[data-theme="dark"] #rk-icm-comments p { color: var(--p-ink-2) !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #rk-icm-box { background: var(--p-bg) !important; border: 1px solid var(--p-line); }
	:root:not([data-theme="light"]) #rk-icm-title { color: var(--p-ink) !important; }
	:root:not([data-theme="light"]) :is(#rk-icm-ta, #rk-icm-name) { background: var(--p-surface) !important; color: var(--p-ink) !important; border-color: var(--p-line-2) !important; }
	:root:not([data-theme="light"]) #rk-icm-comments > div { background: var(--p-surface) !important; border-color: var(--p-line) !important; }
	:root:not([data-theme="light"]) #rk-icm-comments span, :root:not([data-theme="light"]) #rk-icm-comments p { color: var(--p-ink-2) !important; }
}
#rk-icm-submit { background: var(--p-accent) !important; color: var(--p-accent-ink) !important; }

/* Los campos del plugin traen su propio marco */
.rk-compose-name, .rk-compose-ta { border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: .25rem .4rem !important; background: transparent !important; }
.rk-nl-input { min-height: 44px; }

/* Tablero y estadísticas: textos con color fijo */
.rkd-wrap, .rkd-card-title, .rkd-hl-title, .rkd-leader-name, .rkd-metric-num, .rkd-section-title, .rk-stats-heading { color: var(--p-ink) !important; }
.rkd-card-desc, .rkd-metric-label, .rkd-hl-meta { color: var(--p-ink-2) !important; }

/* ── Video reproducido dentro del ranking ── */
.rk-item.p-has-video { flex-wrap: wrap !important; contain: none !important; }
.rk-thumb.p-playing {
	order: 10; flex: 0 0 100% !important; width: 100% !important; min-height: 0 !important; height: auto !important;
	contain: none !important; border-right: 0 !important; border-top: 1px solid var(--p-line); background: #000 !important; display: block !important;
}
.p-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.p-playing--tall .p-video { aspect-ratio: auto; height: min(80vh, 640px); max-width: 380px; margin: 0 auto; }
.p-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.p-video__close {
	position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .65); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.p-video__close:hover { background: rgba(0, 0, 0, .85); }
.p-has-video .rk-sbar { display: none; }
@media (max-width: 540px) {
	/* En móvil el video ocupa el lugar de la imagen */
	.rk-thumb.p-playing { order: 0; border-top: 0; }
}

/* "+1" que sube al votar */
.p-pop { position: fixed; z-index: 9999; transform: translate(-50%, 0); pointer-events: none; font: 800 1rem/1 var(--p-font-display); animation: p-pop .8s ease-out forwards; }
.p-pop--up { color: var(--p-up); }
.p-pop--down { color: var(--p-down); }
@keyframes p-pop { from { opacity: 1; transform: translate(-50%, 0) scale(.9); } to { opacity: 0; transform: translate(-50%, -34px) scale(1.15); } }