@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

:root {
  font-family: 'Quicksand', sans-serif;
  --wa-font-family-body: 'Quicksand', sans-serif;
  --wa-font-family-heading: 'Quicksand', sans-serif;
}

wa-button:not(:defined),
wa-card:not(:defined),
wa-input:not(:defined) { visibility: hidden; }

html {
  scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.container {
	max-width: 1500px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

wa-breadcrumb::part(base) {
	font-size: var(--wa-font-size-s);
}

a {
	text-decoration: none;
	color: var(--wa-color-text-normal);
	font-weight: 600;
}

p:empty {
  display: none;
}

.shell {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--wa-space-l);
	padding: var(--wa-space-l) 0;
}

.shell > main {
	min-width: 0;
}

wa-card, wa-card::part(base) {
	/*background-color: rgba(255, 255, 255, 0.02) !important;
	--wa-panel-background-color: transparent;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);*/
	border-radius: var(--wa-border-radius-m);
	overflow: hidden;
}

wa-card::part(media) {
	border-start-start-radius: var(--wa-border-radius-m);
	border-start-end-radius: var(--wa-border-radius-m);
	overflow: hidden;
}

wa-rating, wa-rating::part(base) {
	--symbol-size: var(--wa-font-size-xs);
  font-size: var(--wa-font-size-xs);
}

/* ── Warning variant: filled appearance by default (global) ─ */
*[variant="warning"]:not([appearance])::part(base) {
	background: var(--wa-color-warning);
	color: var(--wa-color-on-warning, #000);
	border-color: transparent;
}

.ob-stats, .ob-collection-card {
	--spacing: var(--wa-space-s);
}

/* ── Upcoming releases carousel ─────────────────────────── */
wa-carousel {
	--slide-gap: var(--wa-space-m);
	--aspect-ratio: auto;
	--scroll-hint: 0px;
	display: block;
	width: 100%;
	margin: 0;
}

wa-carousel::part(base) {
	padding: 0;
	margin: 0;
	gap: 0;
}

wa-carousel wa-carousel-item {
	min-width: 0;
}

/* Cards .ob-shortstory dentro de un carrusel (blog): tienen alto variable
   (título + descripción), así que sin estirar quedan desalineadas y "arriba".
   Forzamos que cada slide y su card llenen la altura de la fila. */
wa-carousel wa-carousel-item:has(> .ob-shortstory) {
	display: flex;
	align-items: stretch;
}
wa-carousel wa-carousel-item > .ob-shortstory {
	width: 100%;
}

@media (max-width: 640px) {
	wa-carousel {
		--slide-gap: var(--wa-space-s);
	}
}

.carousel-nav-btn::part(base) {
	background-color: transparent;
	border: none;
	color: var(--wa-color-text-quiet);
	width: 32px;
	height: 28px;
	min-height: 28px;
	padding: 0;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
	cursor: pointer;
}

.carousel-nav-btn:hover::part(base) {
	background-color: var(--wa-color-neutral-fill-quiet);
	color: var(--wa-color-text-normal);
	transform: scale(1.05);
}

wa-carousel::part(pagination) {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
	gap: var(--wa-space-xs);
	margin-top: var(--wa-space-s);
	margin-bottom: 0;
	margin-inline: 0;
	padding: 0;
}

wa-carousel::part(pagination-item) {
	flex: 1 1 0%;
	height: 3px;
	width: auto;
	min-width: 0;
	background: var(--wa-color-surface-border);
	border: none;
	border-radius: 10px;
	padding: 0;
	transition: background 0.3s ease, opacity 0.3s ease;
	box-shadow: none;
	transform: none;
}

wa-carousel::part(pagination-item--active),
wa-carousel::part(pagination-item-active) {
	background: var(--wa-color-text-quiet);
	transform: none;
}

wa-card:has(.ob-upcoming-card__cover) {
	--spacing: var(--wa-space-s);
	width: 100%;
	transition: transform 0.3s ease;
}

wa-card:has(.ob-upcoming-card__cover)::part(media) {
	border-radius: 0;
}

wa-card:has(.ob-upcoming-card__cover) h2 {
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	margin: 0;
}

.ob-upcoming-card__cover {
	position: relative;
	height: 120px;
	overflow: hidden;
}

.ob-upcoming-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(25%) saturate(80%) brightness(0.85);
	transition: filter 0.3s ease;
}

wa-card:has(.ob-upcoming-card__cover):hover .ob-upcoming-card__cover img {
	filter: none;
}

.ob-upcoming-card__badge {
	position: absolute;
	top: var(--wa-space-xs);
	right: var(--wa-space-xs);
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* "// CATEGORÍA" inline meta for cards (smaller than .ob-titles span) */
.ob-card-meta {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-2xs);
	color: var(--wa-color-text-quiet);
	text-transform: uppercase;
	letter-spacing: .1em;
}
.ob-card-meta wa-icon { font-size: 0.95em; }

.ob-upcoming-card h2 a { color: inherit; text-decoration: none; }
.ob-upcoming-card h2 a:hover { color: var(--wa-color-brand-fill-loud); }

/* ── Shortstory ─────────────────────────────────────────── */
.ob-shortstory {
	/*--spacing: var(--wa-space-s);*/
	border-color: color-mix(in srgb, var(--wa-color-surface-border) 35%, transparent);
	transition: border-color var(--wa-transition-normal), box-shadow var(--wa-transition-normal), transform var(--wa-transition-normal);
}

/* Body grows so footer is always pinned to the bottom */
.ob-shortstory::part(body) {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ob-shortstory__body {
	flex: 1;
}

.ob-shortstory h2 {
	font-size: var(--wa-font-size-m);
	letter-spacing: -.02em;
	font-weight: 700;
}

/* Media slot: no inner border-radius, let the card's overflow:hidden clip it */
.ob-shortstory::part(media) {
	border-radius: 0;
}

/* ── Cover: image + gradient overlay + download button ── */
.ob-shortstory__cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.ob-shortstory__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0px;
}

/* ── Category label ── */
.ob-link-category {
	font-size: var(--wa-font-size-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.ob-link-category a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--wa-color-text-quiet);
	font-weight: var(--wa-font-weight-semibold);
}

.ob-link-category a:not(:first-child) {
	display: none;
}

/* ── Cover badges – barra superior ── */
.ob-shortstory__badges {
	position: absolute;
	top: var(--wa-space-s);
	left: var(--wa-space-s);
	right: var(--wa-space-s);
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
}

.ob-shortstory__badges wa-badge {
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ob-shortstory__badges .ob-badges-right {
	display: flex;
	gap: var(--wa-space-xs);
}

/* ── Premium lock overlay ─────────────────────────────── */
.ob-shortstory__lock {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	text-align: center;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: var(--wa-space-m);
	color: #fff;
	pointer-events: none;
}

.ob-shortstory__lock wa-icon {
	font-size: 1.75rem;
}

.ob-shortstory__lock strong {
	font-size: var(--wa-font-size-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: var(--wa-space-3xs);
}

.ob-shortstory__lock p {
	font-size: var(--wa-font-size-xs);
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.4;
}

/* Locked cards: lift only on hover – no overlay or download button */
.ob-shortstory:has(.ob-shortstory__lock):hover {
	transform: translateY(-4px);
}

.ob-shortstory:has(.ob-shortstory__lock):hover .ob-shortstory__cover::after {
	opacity: 0;
}

/* ── Aside ─────────────────────────────────────────── */
.rail {
  position: sticky;
  top: 96px;
  align-self: start;
  background: var(--wa-color-surface-raised);
  border-radius: var(--wa-border-radius-m);
	border-style: var(--wa-border-style);
	border-width: var(--wa-border-width-s);
	border-color: var(--wa-color-surface-border);
  padding: var(--wa-space-xs) 0;
  display: flex;
  flex-direction: column;
}

.rail-item {
	/*width: 44px;
	height: 44px;*/
	margin: 0 auto;
	border-radius: var(--wa-border-radius-m);
	display: grid;
	place-items: center;
	transition: color .15s, background .15s;
	position: relative;
}

.rail-item.active::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 2px;
	background: var(--wa-color-brand);
}

/* ── Header ─────────────────────────────────────────── */
header[slot="header"] {
	background-color: var(--wa-color-surface-default);
	border-bottom: 1px solid var(--wa-color-surface-border);
}

.ob-header-inner {
	max-width: 1500px;
	margin: 0 auto;
	width: 100%;
}

.ob-logo {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	text-decoration: none;
	color: var(--wa-color-text-normal);
	font-weight: var(--wa-font-weight-bold);
	font-size: var(--wa-font-size-l);
	white-space: nowrap;
}

.ob-search-form {
    width: 410px;
}

.ob-dd-premium {
	border-radius: var(--wa-border-radius-m);
	border-style: var(--wa-border-style);
	border-width: var(--wa-border-width-s);
	border-color: var(--wa-color-yellow-70);
	padding: var(--wa-space-s);
	margin: var(--wa-space-xs);
	max-width: 320px;
}

/* ── Login Modal ─────────────────────────────────────── */
#ob-login-dialog {
	--width: 920px;
	--spacing: 0;
}

.ob-login-modal {
	position: relative;
	display: grid;
	grid-template-columns: 400px 1fr;
	overflow: hidden;
	border-radius: inherit;
}

.ob-dialog-close {
	position: absolute;
	top: var(--wa-space-s);
	right: var(--wa-space-s);
	z-index: 10;
}

.ob-login-brand {
	padding: var(--wa-space-2xl) var(--wa-space-xl);
	background: var(--wa-color-neutral-fill-quiet);
	border-right: 1px solid var(--wa-color-surface-border);
}

.ob-login-brand-logo {
	font-weight: var(--wa-font-weight-bold);
	font-size: var(--wa-font-size-l);
}

.ob-stat-num {
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
	color: var(--wa-color-cyan-70);
}

.ob-login-form-panel {
	padding: var(--wa-space-2xl) var(--wa-space-xl);
}

.ob-btn-provider {
	flex: 1;
}

.ob-login-footer-text {
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
	text-align: center;
}

.ob-login-password-text {
	font-size: var(--wa-font-size-s);
	text-align: right;
}

.ob-login-brand {
	position: relative;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.ob-login-brand h2 {
	font-size: var(--wa-font-size-2xl);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.2;
	margin: 0;
}

.ob-login-brand p {
	font-size: var(--wa-font-size-s);
	line-height: 1.5;
	margin: 0;
}

.ob-login-brand .ob-login-stats span {
	font-size: var(--wa-font-size-s);
}

.ob-brand-accent {
	color: var(--wa-color-brand);
}

.ob-login-brand-logo span {
	font-weight: var(--wa-font-weight-bold);
	font-size: var(--wa-font-size-xl);
}

/* ── Genrec Titles ─────────────────────────────────────── */
.ob-titles span {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
	text-transform: uppercase;
  letter-spacing: .12em;
}

.ob-titles h1, .ob-titles h2 {
	font-size: var(--wa-font-size-xl);
  letter-spacing: -.02em;
}

/* ── Category Menu ─────────────────────────────────────── */
@property --ob-premium-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes ob-premium-spin {
	to { --ob-premium-angle: 360deg; }
}

.ob-cat-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: var(--wa-space-xs) var(--wa-space-m);
	width: 100%;
}

.ob-cat-grid wa-button {
	position: relative;
	width: 100%;
}

.ob-cat-grid wa-badge {
	position: absolute;
	right: var(--wa-space-s);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.ob-cat-btn {
	width: 100%;
	height: 100%;
}

.ob-cat-btn::part(base) {
	min-height: 3.85rem;
	background: transparent;
	border: 1px solid var(--wa-color-surface-border);
	border-left: 3px solid var(--cat-color);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	flex-direction: column;
	align-items: flex-start;
	transition: all var(--wa-transition-normal);
}

.ob-cat-btn__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.ob-cat-btn__name {
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-normal);
	line-height: var(--wa-line-height-normal);
	transition: color var(--wa-transition-normal);
}

.ob-cat-btn__count {
	font-size: var(--wa-font-size-2xs);
	color: var(--wa-color-text-quiet);
	font-weight: var(--wa-font-weight-normal);
	line-height: var(--wa-line-height-normal);
}

.ob-cat-btn:hover::part(base) {
	border-color: var(--wa-color-surface-border);
	border-left-color: var(--cat-color);
	border-left-width: 5px;
}

.ob-cat-btn.is-active::part(base) {
	background: var(--cat-color-glow);
	border-color: var(--cat-color-glow);
	border-left-color: var(--cat-color);
	border-left-width: 5px;
}

/* Borde giratorio Premium (id-1) */
.ob-cat-1 {
	--cat-color: #DFB04A;
	--cat-color-glow: rgba(223, 176, 74, 0.15);
	position: relative;
}

/*.ob-cat-1::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wa-border-radius-m);
	padding: 1px;
	background: conic-gradient(from var(--ob-premium-angle),
		rgba(223, 176, 74, 0.1) 0deg,
		rgba(223, 176, 74, 0.1) 120deg,
		#DFB04A 180deg,
		rgba(223, 176, 74, 0.1) 240deg,
		rgba(223, 176, 74, 0.1) 360deg);
	animation: ob-premium-spin 3s linear infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	z-index: 1;
	pointer-events: none;
}*/

.ob-cat-2  { --cat-color: #2b76b9; --cat-color-glow: rgba(43, 118, 185, 0.15); }
.ob-cat-3  { --cat-color: #0fd850; --cat-color-glow: rgba(15, 216, 80, 0.15); }
.ob-cat-4  { --cat-color: #453a94; --cat-color-glow: rgba(69, 58, 148, 0.15); }
.ob-cat-5  { --cat-color: #8d6e63; --cat-color-glow: rgba(141, 110, 99, 0.15); }
.ob-cat-6  { --cat-color: #764ba2; --cat-color-glow: rgba(118, 75, 162, 0.15); }
.ob-cat-7  { --cat-color: #5c646b; --cat-color-glow: rgba(92, 100, 107, 0.15); }
.ob-cat-8  { --cat-color: #ff0844; --cat-color-glow: rgba(255, 8, 68, 0.15); }
.ob-cat-9  { --cat-color: #ff4e50; --cat-color-glow: rgba(255, 78, 80, 0.15); }
.ob-cat-10 { --cat-color: #FF057C; --cat-color-glow: rgba(255, 5, 124, 0.15); }
.ob-cat-11 { --cat-color: #9bc5c3; --cat-color-glow: rgba(155, 197, 195, 0.15); }
.ob-cat-12 { --cat-color: #616161; --cat-color-glow: rgba(97, 97, 97, 0.15); }
.ob-cat-13 { --cat-color: #22c55e; --cat-color-glow: rgba(34, 197, 94, 0.15); }
.ob-cat-14 { --cat-color: #f97316; --cat-color-glow: rgba(249, 115, 22, 0.15); }
.ob-cat-15 { --cat-color: #eab308; --cat-color-glow: rgba(234, 179, 8, 0.15); }
.ob-cat-16 { --cat-color: #8b5cf6; --cat-color-glow: rgba(139, 92, 246, 0.15); }
.ob-cat-17 { --cat-color: #06b6d4; --cat-color-glow: rgba(6, 182, 212, 0.15); }
.ob-cat-18 { --cat-color: #f43f5e; --cat-color-glow: rgba(244, 63, 94, 0.15); }

.ob-cat-btn .ob-cat-suffix--news   { display: none; }
.ob-cat-btn.ob-cat-12 .ob-cat-suffix--news   { display: inline; }
.ob-cat-btn.ob-cat-12 .ob-cat-suffix--albums { display: none; }

/* ── Premium album card – amber border ──────────────────── */
.ob-is-premium {
	border-color: #DFB04A;
}

.shortstory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shortstory-grid div.dle_b_register,
.shortstory-grid div.dle_b_premium {
	grid-column: 1 / -1;
}

/* ── Premium callout banner ─────────────────────────────────── */
.ob-premium-callout {
	--spacing: var(--wa-space-xl);
	border-color: var(--wa-color-warning);
	background:
		radial-gradient(circle at 90% 30%, rgba(245, 194, 107, .08), transparent 50%),
		linear-gradient(135deg, rgba(245, 194, 107, .04), transparent);
}

.ob-premium-callout__icon {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wa-color-warning);
	color: var(--wa-color-on-warning, #000);
	border-radius: var(--wa-border-radius-m);
	font-size: 1.5rem;
}

.ob-premium-callout__body {
	flex: 1;
	min-width: 0;
}

.ob-premium-callout__perks wa-icon {
	color: var(--wa-color-warning);
}


/* ── Guest registration callout ─────────────────────────────── */
.ob-guest-callout {
	--spacing: var(--wa-space-xl);
	border-color: color-mix(in srgb, var(--wa-color-brand) 50%, transparent);
	background: color-mix(in srgb, var(--wa-color-brand) 6%, transparent);
}

.ob-guest-callout__icon {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wa-color-brand);
	color: var(--wa-color-on-brand, #fff);
	border-radius: var(--wa-border-radius-m);
	font-size: 1.5rem;
}

.ob-guest-callout__perks wa-icon {
	color: var(--wa-color-success);
}

/* ── Feedback page ─────────────────────────────────────── */
.ob-feedback__title {
	font-size: var(--wa-font-size-3xl);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

.ob-feedback__title-icon {
	color: var(--wa-color-brand);
	font-size: 2rem;
}

.ob-feedback__form {
	--spacing: var(--wa-space-l);
}

.ob-feedback__form-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--wa-border-radius-m);
	background: color-mix(in srgb, var(--wa-color-brand) 12%, transparent);
	color: var(--wa-color-brand);
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.ob-required {
	color: var(--wa-color-danger);
	font-weight: var(--wa-font-weight-bold);
}

.ob-feedback__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wa-space-m);
}

.ob-feedback__label {
	display: block;
	margin-bottom: var(--wa-space-2xs);
	font-weight: var(--wa-font-weight-semibold);
	font-size: var(--wa-font-size-s);
}

/* DLE genera <select> nativo para {recipient} → estilo mínimo para que combine */
.ob-feedback select {
	width: 100%;
	padding: var(--wa-space-s) var(--wa-space-m);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font-family: inherit;
	font-size: var(--wa-font-size-s);
}

.ob-feedback__file {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-l);
	border: 1px dashed var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-subtle);
	color: var(--wa-color-text-quiet);
}

.ob-feedback__file wa-icon {
	font-size: 1.5rem;
}

.ob-feedback__footer {
	flex-wrap: wrap;
}

.ob-feedback__channels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wa-space-m);
}

.ob-feedback__channel {
	--spacing: var(--wa-space-m);
}

.ob-feedback__channel-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--wa-border-radius-m);
	background: color-mix(in srgb, var(--wa-color-brand) 10%, transparent);
	color: var(--wa-color-brand);
	display: grid;
	place-items: center;
	margin-bottom: var(--wa-space-s);
}

/* ══════════════════════════════════════════════════════════════
   Dark-mode color overrides  (scoped to .wa-dark on <html>)
   ══════════════════════════════════════════════════════════════ */

/*.wa-dark .ob-shortstory:hover {
	border-color: rgba(0, 240, 255, .5);
	box-shadow: 0 0 24px rgba(0, 240, 255, .12);
}*/

/* ── Premium lock – amber accent in dark mode ── */
.wa-dark .ob-shortstory__lock {
	color: var(--wa-color-warning);
}

.wa-dark .ob-shortstory__lock p {
	color: rgba(255, 255, 255, 0.6);
}

/* ── Aside – active rail indicator – cyan ── */
.wa-dark .rail-item.active::before {
	background: #00F0FF;
	box-shadow: 0 0 12px #00F0FF;
}

/* ── Login brand panel – dark gradient ── */
.ob-login-brand {
	color: #FFF;
	background:
		radial-gradient(circle at 80% 20%, rgba(0, 240, 255, .2), transparent 55%),
		radial-gradient(circle at 20% 80%, rgba(255, 46, 140, .18), transparent 55%),
		linear-gradient(135deg, #1a0b2e 0%, #0d1b2a 100%);
}

.ob-login-brand p {
	color: rgba(255, 255, 255, 0.7);
}

.ob-login-brand .ob-login-stats span {
	color: rgba(255, 255, 255, 0.65);
}

/* ── Brand accent – cyan/magenta gradient text ── */
.ob-brand-accent {
	background: linear-gradient(90deg, #00F0FF 0%, #FF2E8C 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── Premium callout – amber theme ── */
.wa-dark .ob-premium-callout {
	border-color: rgba(245, 194, 107, .35);
	background:
		radial-gradient(circle at 90% 30%, rgba(245, 194, 107, .12), transparent 50%),
		linear-gradient(135deg, rgba(245, 194, 107, .06), rgba(0, 240, 255, .02));
}

.wa-dark .ob-premium-callout__icon {
	background: linear-gradient(135deg, #f5c26b, #d4a04d);
	color: #3a2a0a;
	box-shadow: 0 0 24px rgba(245, 194, 107, .4);
}

.wa-dark .ob-premium-callout__perks wa-icon {
	color: #F0BD66;
}

.wa-dark .ob-premium-cta::part(base) {
	background: linear-gradient(135deg, #f5c26b, #d4a04d);
	color: #3a2a0a;
	box-shadow: 0 0 28px rgba(245, 194, 107, .35);
	border-color: transparent;
}

.wa-dark .ob-premium-cta:hover::part(base) {
	box-shadow: 0 0 40px rgba(245, 194, 107, .55);
}

/* ── Guest callout – cyan/brand theme ── */
.wa-dark .ob-guest-callout {
	border-color: rgba(0, 240, 255, .25);
	background:
		radial-gradient(circle at 10% 30%, rgba(0, 240, 255, .12), transparent 50%),
		linear-gradient(135deg, rgba(0, 240, 255, .06), rgba(255, 46, 140, .02));
}

.wa-dark .ob-guest-callout__icon {
	background: linear-gradient(135deg, #00F0FF, #00b8cc);
	color: #001a1e;
	box-shadow: 0 0 24px rgba(0, 240, 255, .4);
}

.wa-dark .ob-guest-callout__perks wa-icon {
	color: #00E676;
}

.wa-dark .ob-guest-cta::part(base) {
	box-shadow: 0 0 28px rgba(0, 240, 255, .3);
}

.wa-dark .ob-guest-cta:hover::part(base) {
	box-shadow: 0 0 44px rgba(0, 240, 255, .5);
}

/* === Search page === */
#fullsearch { display: contents; }
.ob-search-hero { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--wa-space-l); max-width: 720px; width: 100%; margin: 0 auto; }
.ob-search-hero__title { margin: 0; text-align: center; }
.ob-search-hero__form { width: 100%; }
.ob-search__input { width: 100%; }
.ob-search__input::part(base) { font-size: var(--wa-font-size-l); }
.ob-search-stats { grid-column: 1 / -1; margin: 0 auto var(--wa-space-m); padding: 0 var(--wa-space-m); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.ob-search-short { margin-bottom: var(--wa-space-s); }
.ob-search-short__title { margin: 0 0 var(--wa-space-2xs); }
.ob-search-short__meta { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); align-items: center; font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); margin-bottom: var(--wa-space-s); }
.ob-search-short__text { color: var(--wa-color-text-normal); }
.ob-search-suggest { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs); align-items: center; justify-content: center; font-size: var(--wa-font-size-s); }
.ob-search-suggest__label { color: var(--wa-color-text-quiet); }
.ob-search-suggest__pill { padding: var(--wa-space-2xs) var(--wa-space-s); border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); border-radius: var(--wa-border-radius-pill); color: var(--wa-color-text-normal); text-decoration: none; transition: background-color .15s; }
.ob-search-suggest__pill:hover { background: var(--wa-color-neutral-fill-quiet); }

/* === Quicksearch dialog === */
.ob-quicksearch::part(dialog) { max-width: 640px; width: calc(100vw - var(--wa-space-l)); }
.ob-quicksearch::part(body) { padding: 0; }
.ob-quicksearch::part(header) { display: none; }
.ob-quicksearch__input { padding: var(--wa-space-m); }
.ob-quicksearch__input::part(base) { border: 0; }
.ob-quicksearch__hint { padding: var(--wa-space-xs) var(--wa-space-2xl) var(--wa-space-2xl) var(--wa-space-2xl); text-align: center; }
.ob-quicksearch__hint[hidden] { display: none; }
.ob-quicksearch__hint wa-icon { font-size: var(--wa-font-size-2xl); }
.ob-quicksearch__loading { display: flex; justify-content: center; padding: var(--wa-space-l); }
.ob-quicksearch__loading[hidden] { display: none; }
.ob-quicksearch__results { max-height: 50vh; overflow-y: auto; padding: 0 var(--wa-space-s); }
.ob-quicksearch__results:empty { display: none; }
.ob-quicksearch__results .seperator { display: none; }
.ob-quicksearch__results .notfound { display: block; padding: var(--wa-space-l); text-align: center; color: var(--wa-color-text-quiet); }
.ob-quicksearch__resultmeta { padding: var(--wa-space-s) var(--wa-space-m); }
.ob-quicksearch__resultmeta[hidden] { display: none; }
.ob-qs-item { padding: var(--wa-space-s); border-radius: var(--wa-border-radius-m); text-decoration: none; color: inherit; }
.ob-qs-item:hover { background: var(--wa-color-neutral-fill-quiet); }
.ob-qs-item[data-qs-active] { background: var(--wa-color-brand-fill-quiet); }
.ob-qs-item__body { flex: 1; min-width: 0; }
.ob-qs-item__chev { opacity: 0; }
.ob-qs-item[data-qs-active] .ob-qs-item__chev { opacity: 1; }
@media (max-width: 768px) { .ob-search-form__kbd { display: none; } }

/* === Advanced search === */
.ob-search-hero:has(.ob-advanced-search) { max-width: 100%; }
.ob-advanced-search__row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .ob-advanced-search__row-3 { grid-template-columns: 1fr; } }

/* === Collections dialog ================================================= */
/* HTML: <a.ob-cc-link> → <wa-card> → div.ob-cc-bg[data-cat-id] + .ob-cc-title.
   Solo 3 clases custom; el resto se resuelve con utilities WA. */

.ob-collections-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .ob-collections-grid { grid-template-columns: repeat(2, 1fr); } }

.ob-cc-link { display: block; color: inherit; }
.ob-cc-link wa-card { --spacing: var(--wa-space-s); transition: box-shadow .3s ease; }
.ob-cc-link:hover wa-card { box-shadow: 0 10px 28px -12px rgba(0,0,0,.65); }

/* Cover: aspect ratio + gradient (::before) + halo (::after). */
.ob-cc-bg {
	position: relative;
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	background: #1a1a1a;
}
.ob-cc-bg::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: var(--ob-cc-bg, linear-gradient(135deg, #1a1a1a, #2a2a2a));
	background-size: 220% 220%;
	background-position: 0% 50%;
	transition:
		background-position .9s cubic-bezier(.22,.61,.36,1),
		transform .6s cubic-bezier(.22,.61,.36,1),
		filter .4s ease;
}
.ob-cc-bg::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.10), transparent 65%);
	opacity: .3; pointer-events: none; transition: opacity .4s ease;
}
.ob-cc-link:hover .ob-cc-bg::after { opacity: 1; }

.ob-cc-title {
	position: relative; z-index: 2;
	font-size: var(--wa-font-size-l);
	text-align: center;
	padding: 0 var(--wa-space-m);
	color: #fff;
}

/* === Paletas + hover por categoría (IDs 13-19). Hovers actúan sobre
   ::before del fondo, así el texto nunca se mueve. =====================*/

/* 13 · Curated by — verde a teal · pan horizontal */
.ob-cc-bg[data-cat-id="13"] { --ob-cc-bg: linear-gradient(135deg, #047857 0%, #10b981 55%, #5eead4 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="13"]::before { background-position: 100% 50%; }

/* 14 · Weekend Picks — grises medios · pan + brillo */
.ob-cc-bg[data-cat-id="14"] { --ob-cc-bg: linear-gradient(135deg, #4a4a4a 0%, #8a8a8a 50%, #b8b8b8 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="14"]::before { background-position: 100% 50%; filter: brightness(1.08) contrast(1.05); }

/* 15 · In The Mix — rojo vino a rojo medio · pan + zoom sutil */
.ob-cc-bg[data-cat-id="15"] { --ob-cc-bg: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ef4444 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="15"]::before { background-position: 100% 50%; transform: scale(1.04); }

/* 16 · Secret Weapons — morado a lila · rotación del fondo */
.ob-cc-bg[data-cat-id="16"] { --ob-cc-bg: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #c084fc 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="16"]::before { transform: rotate(6deg) scale(1.18); filter: saturate(1.15); }

/* 17 · Charts — navy a azul medio · pan vertical */
.ob-cc-bg[data-cat-id="17"] { --ob-cc-bg: linear-gradient(180deg, #1e3a8a 0%, #2563eb 55%, #60a5fa 100%); }
.ob-cc-bg[data-cat-id="17"]::before { background-size: 100% 220%; background-position: 50% 0%; }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="17"]::before { background-position: 50% 100%; }

/* 18 · Nothing But — ámbar a dorado · pan + saturación */
.ob-cc-bg[data-cat-id="18"] { --ob-cc-bg: linear-gradient(135deg, #92400e 0%, #f59e0b 55%, #fcd34d 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="18"]::before { background-position: 100% 50%; filter: saturate(1.15); }

/* 19 · Crate Diggers — azul-gris oscuro a medio · pan + scale sutil */
.ob-cc-bg[data-cat-id="19"] { --ob-cc-bg: linear-gradient(135deg, #1e3a5f 0%, #3b5d8a 55%, #6b8caf 100%); }
.ob-cc-link:hover .ob-cc-bg[data-cat-id="19"]::before { background-position: 100% 50%; transform: scale(1.05); filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
	.ob-cc-bg::before, .ob-cc-bg::after { transition: none !important; transform: none !important; }
}

/* === Categories dialog: forzar 4 cols sin tocar la home === */
#ob-categories-dialog .ob-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wa-space-m); overflow: visible; }
@media (max-width: 640px) { #ob-categories-dialog .ob-cat-grid { grid-template-columns: repeat(2, 1fr); } }

.ob-stats-callout__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wa-border-radius-m);
	font-size: 1.5rem;
}

/* === Stats: genre distribution bars heredan --cat-color de la cat === */
.ob-genre-bar { --indicator-color: var(--cat-color); }

/* === Pagination: span full row dentro de .shortstory-grid === */
.nav-pagination { grid-column: 1 / -1; flex-wrap: wrap; }

/* === Footer === */
.ob-footer { background: var(--wa-color-neutral-lowered); margin-top: var(--wa-space-xl); border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); }
.ob-footer-tagline { max-width: 540px; margin: 0; text-align: center; line-height: 1.5; }
.ob-footer-heart { color: var(--wa-color-danger); animation: ob-pulse 1.6s ease-in-out infinite; }
@keyframes ob-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* === Terms & Privacy === */
.ob-terms-hero h1, .ob-blog-hero h1 { font-size: var(--wa-font-size-3xl); margin: 0; letter-spacing: -0.02em; }
.ob-terms-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--wa-space-2xl); align-items: start; }
.ob-terms-layout article p:first-child { display: none; }
.ob-terms-toc { position: sticky; top: calc(var(--header-height, 71px) + var(--wa-space-l)); display: flex; flex-direction: column; gap: var(--wa-space-s); }
.ob-terms-toc__label { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wa-color-text-quiet); }
.ob-terms-toc__nav a { font-size: var(--wa-font-size-s); padding: var(--wa-space-3xs) 0 var(--wa-space-3xs) var(--wa-space-s); border-left: 2px solid transparent; color: var(--wa-color-text-quiet); transition: color .12s, border-color .12s; }
.ob-terms-toc__nav a:hover { color: var(--wa-color-text-normal); border-color: var(--wa-color-brand-fill-loud); }
.ob-terms-body { line-height: 1.7; }
.ob-terms-body h2 { font-size: var(--wa-font-size-2xl); margin: 0; letter-spacing: -0.01em; scroll-margin-top: calc(var(--header-height, 80px) + var(--wa-space-3xl)); }
.ob-terms-body h3 { font-size: var(--wa-font-size-l); margin: 0; color: var(--wa-color-text-normal); }
.ob-terms-body p { margin: 0; }
.ob-terms-body ul, .ob-terms-body ol { margin: 0; padding-left: var(--wa-space-l); display: flex; flex-direction: column; gap: var(--wa-space-2xs); }
.ob-terms-body code { font-family: var(--wa-font-family-code); font-size: 0.9em; padding: 2px var(--wa-space-2xs); border-radius: var(--wa-border-radius-s); background: var(--wa-color-neutral-fill-quiet); }
.ob-terms-dl { display: flex; flex-direction: column; gap: var(--wa-space-m); margin: 0; }
.ob-terms-dl dt { margin: 0; }
.ob-terms-dl dd { margin: var(--wa-space-3xs) 0 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
@media (max-width: 960px) { .ob-terms-layout { grid-template-columns: 1fr; } .ob-terms-toc { position: static; } }

/* === Blog (Fullstory) === */
.ob-blog .blog-post-cover { margin: 0; overflow: hidden; border-radius: var(--wa-border-radius-m); }
.ob-blog .blog-post-cover img { width: 100%; height: 300px; object-fit: cover; display: block; }

/* === Registration === */
.ob-reg__hero h1 { font-size: var(--wa-font-size-3xl); margin: 0; letter-spacing: -0.02em; }
.ob-reg__layout { display: grid; grid-template-columns: 1fr 450px; gap: var(--wa-space-xl); align-items: start; }
.ob-reg__aside { position: sticky; top: calc(var(--header-height, 71px) + var(--wa-space-l)); }
.ob-reg-steps { padding: var(--wa-space-m) 0; }
.ob-reg-step { display: flex; align-items: center; gap: var(--wa-space-s); opacity: 0.5; transition: opacity .2s; }
.ob-reg-step.is-active, .ob-reg-step.is-done { opacity: 1; }
.ob-reg-step__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-quiet); font-weight: 600; flex-shrink: 0; }
.ob-reg-step.is-active .ob-reg-step__num { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.ob-reg-step.is-done .ob-reg-step__num { background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); }
.ob-reg-step__lbl { display: flex; flex-direction: column; line-height: 1.2; }
.ob-reg-step__sep { flex: 1; }
.ob-reg-card { --spacing: var(--wa-space-m); }
.ob-reg-card__icon { font-size: var(--wa-font-size-l); color: var(--wa-color-brand-fill-loud); }
.ob-reg-rules-scroll { max-height: 420px; overflow-y: auto; padding-right: var(--wa-space-s); }
.ob-reg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-m); }
.ob-reg-aside__label { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wa-color-text-quiet); }
.ob-reg-feats { list-style: none; padding: 0; margin: 0; }
.ob-reg-feats__check { color: var(--wa-color-success-fill-loud); flex-shrink: 0; }
.ob-reg-feats__premium { color: var(--wa-color-warning); flex-shrink: 0; }
.ob-reg-file { width: 100%; padding: var(--wa-space-s); border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); }
.ob-rules__h { color: var(--wa-color-text-normal); }
@media (max-width: 960px) { .ob-reg__layout { grid-template-columns: 1fr; } .ob-reg__aside { position: static; } .ob-reg-grid-2 { grid-template-columns: 1fr; } }

.ob-social__cover{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    aspect-ratio: 1 / 1;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-image: linear-gradient(135deg, var(--ob-c1) 0%, var(--ob-c2) 50%, var(--ob-c1) 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    transition: background-position .6s ease;
  }
  /* al pasar el mouse el degradado se mueve / se invierte 
  .ob-social:hover .ob-social__cover{ background-position:50% 50%; }*/

  .ob-social__icon{ font-size: 3.5rem; line-height: 1; }
  .ob-social__name{ font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; }

  /* colores por red: --ob-c1 = color primario, --ob-c2 = color destino */
  .ob-social--instagram{ --ob-c1:#E1306C; --ob-c2:#F77737; }
  .ob-social--telegram { --ob-c1:#2AABEE; --ob-c2:#0E5C8A; }
  .ob-social--facebook { --ob-c1:#1877F2; --ob-c2:#0A1F44; }
  .ob-social--tiktok   { --ob-c1:#FE2C55; --ob-c2:#25F4EE; }

/* ===== Private Messages (pm-webawesome plugin) ===== */
.ob-pm-list { width: 100%; }
.ob-pm-list__header { padding: var(--wa-space-s) var(--wa-space-m); border-bottom: 1px solid var(--wa-color-surface-border); }
.ob-pm-list__items { width: 100%; }
.ob-pm-item { width: 100%; transition: transform var(--wa-transition-fast), box-shadow var(--wa-transition-fast); }
.ob-pm-item:hover { transform: translateY(-1px); box-shadow: var(--wa-shadow-s); }
.ob-pm-item__row { cursor: pointer; padding: var(--wa-space-2xs) 0; }
.ob-pm-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet); flex: 0 0 auto; }
.ob-pm-item__body { flex: 1 1 auto; min-width: 0; }
.ob-pm-item__meta { display: inline-flex; gap: var(--wa-space-2xs); flex-wrap: wrap; }
.ob-pm-item--pm-unread .ob-pm-item__icon { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.ob-pm-item--pm-unread .ob-pm-item__body a { font-weight: var(--wa-font-weight-bold); }
.ob-pm-item--pm-reply .ob-pm-item__icon { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.ob-pm-footer { margin-top: var(--wa-space-l); padding: var(--wa-space-m); background: var(--wa-color-surface-lowered); border-radius: var(--wa-border-radius-m); border: 1px solid var(--wa-color-surface-border); }
.pm-no-messages { display: block; padding: var(--wa-space-xl); text-align: center; color: var(--wa-color-text-quiet); }

/* ===== PM (pm.tpl) — ocupa todo el ancho disponible ===== */
.ob-pm { width: 100%; }
.ob-pm > wa-card, .ob-pm-thread > wa-card, .ob-pm-thread { width: 100%; }
.ob-pm-newrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-m); }
.ob-pm-quota::part(body) { padding: var(--wa-space-s) var(--wa-space-m); }
.ob-pm-thread .ob-pm-msg { width: 100%; }
@media (max-width: 767px) { .ob-pm-newrow { grid-template-columns: 1fr; } }

/* ===== Comments + comment tree (comments.tpl) ===================
   El motor anida respuestas en <ol class="comments-tree-list"> con
   <li class="comments-tree-item">. Aquí limpiamos la lista y dibujamos
   la línea de hilo en cada nivel. */
.comments-tree-list { list-style: none; margin: 0; padding: 0; }
.comments-tree-item { margin: 0; }
/* niveles anidados: indent + línea de hilo */
.comments-tree-list .comments-tree-list {
	padding-left: var(--wa-space-l);
	border-left: var(--wa-border-width-m) var(--wa-border-style) var(--wa-color-surface-border);
}

.ob-comment { width: 100%; margin-bottom: var(--wa-space-m); }
.ob-comment__head { display: flex; align-items: flex-start; gap: var(--wa-space-s); }
.ob-comment__avatar { --size: 2.75rem; flex: 0 0 auto; }
.ob-comment__ident { flex: 1 1 auto; min-width: 0; }
.ob-comment__author { font-size: var(--wa-font-size-m); }
.ob-comment__date { color: var(--wa-color-text-quiet); }
.ob-comment__context { text-decoration: none; }
.ob-comment__menu { flex: 0 0 auto; }
.ob-comment__body { margin-top: var(--wa-space-s); line-height: var(--wa-line-height-normal); }
.ob-comment__body img { max-width: 100%; height: auto; border-radius: var(--wa-border-radius-m); }
.ob-comment__images { margin-top: var(--wa-space-s); display: flex; flex-wrap: wrap; gap: var(--wa-space-s); }
.ob-comment__images img { max-height: 220px; width: auto; border-radius: var(--wa-border-radius-m); }
.ob-comment__signature { margin-top: var(--wa-space-s); padding-top: var(--wa-space-s); border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); font-style: italic; }
.ob-comment__rating { margin-left: auto; flex: 0 0 auto; }
.ob-comment__score { font-size: var(--wa-font-size-m); min-width: 1.5em; text-align: center; }

/* ===== User profile (userinfo.tpl) ===== */
.ob-centered-card { width: 100%; max-width: 100%; }
.userinfo-hero {
	position: relative;
	border-radius: var(--wa-border-radius-l);
	overflow: hidden;
	padding: var(--wa-space-xl);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	margin-bottom: var(--wa-space-l);
}
.userinfo-hero-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	filter: blur(28px) saturate(1.3); opacity: .28; transform: scale(1.2);
	z-index: 0;
}
.userinfo-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, transparent, var(--wa-color-surface-default) 92%);
}
.userinfo-hero-content { position: relative; z-index: 1; }
.userinfo-avatar { --size: 7rem; flex: 0 0 auto; background-color: transparent; }
.userinfo-hero-actions { margin-left: auto; }

.userinfo-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wa-space-m);
	margin-bottom: var(--wa-space-l);
}
.userinfo-stat {
	padding: var(--wa-space-m);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.userinfo-stat__l {
	display: inline-flex; align-items: center; gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet);
	text-transform: uppercase; letter-spacing: .06em;
}
.userinfo-stat__l wa-icon { color: var(--wa-color-brand-fill-loud); }
.userinfo-stat__v { font-size: var(--wa-font-size-2xl); font-weight: var(--wa-font-weight-bold); letter-spacing: -.02em; margin-top: var(--wa-space-2xs); }
.userinfo-stat__v--sm { font-size: var(--wa-font-size-m); font-weight: var(--wa-font-weight-semibold); }

.userinfo-profile-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.userinfo-info-row { display: flex; justify-content: space-between; align-items: center; gap: var(--wa-space-m); }
.userinfo-info-row span { color: var(--wa-color-text-quiet); }
.userinfo-form-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.userinfo-signature-text { color: var(--wa-color-text-quiet); }
.userinfo-tab-panel { padding-top: var(--wa-space-l); }

@media (max-width: 767px) {
	.userinfo-stats { grid-template-columns: 1fr 1fr; }
	.userinfo-hero-content { flex-direction: column; text-align: center; }
	.userinfo-hero-actions { margin-left: 0; }
}

/* ===== Calendar (calendar plugin) ===== */
.ob-calendar { width: 100%; min-width: 280px; container-type: inline-size; }
.ob-calendar__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ob-calendar__header-cell { padding: 0 0 var(--wa-space-s) 0 !important; border-bottom: 1px solid var(--wa-color-surface-border); }
.ob-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); padding: 0 var(--wa-space-2xs); }
.ob-calendar__title { font-weight: var(--wa-font-weight-semibold); font-size: var(--wa-font-size-m); color: var(--wa-color-text-normal); }
.ob-calendar__weekdays th { font-weight: var(--wa-font-weight-normal); font-size: var(--wa-font-size-2xs); color: var(--wa-color-text-quiet); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--wa-space-s) 0 var(--wa-space-xs); text-align: center; }

.ob-calendar__table td { padding: 3px 0; vertical-align: middle; text-align: center; }

.ob-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    max-width: 44px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    min-height: 32px;
    border-radius: var(--wa-border-radius-m);
    font-size: var(--wa-font-size-s);
    line-height: 1;
    color: var(--wa-color-text-normal);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    position: relative;
}

.ob-cal-day--event { font-weight: var(--wa-font-weight-bold); cursor: pointer; }
.ob-cal-day--event::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wa-color-brand-fill-loud);
}
.ob-cal-day--event:hover {
    background: var(--wa-color-neutral-fill-quiet);
    transform: scale(1.06);
}

.ob-cal-day--quiet {
    color: var(--wa-color-text-quiet);
    opacity: .55;
    font-weight: var(--wa-font-weight-normal);
    cursor: default;
}

.ob-cal-day.is-current {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    border-color: var(--wa-color-brand-border-loud);
    opacity: 1;
}
.ob-cal-day.is-current.ob-cal-day--quiet { color: var(--wa-color-brand-on-quiet); font-weight: var(--wa-font-weight-semibold); }
.ob-cal-day.is-current.ob-cal-day--event:hover { background: var(--wa-color-brand-fill-normal); }

@container (max-width: 360px) {
    .ob-cal-day { font-size: var(--wa-font-size-2xs); gap: 2px; max-width: none; }
    .ob-cal-day--event::after { width: 3px; height: 3px; }
    .ob-calendar__title { font-size: var(--wa-font-size-s); }
}

/* ═══════════════════════════════════════════════════════════════
 * FULLSTORY (release de música) — layout, tabs, tracklist y player
 * Base sin media queries. Las media queries viven en responsive.css.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Layout principal: portada sticky + info ──────────────────── */
.fullstory-layout {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	min-width: 0;
	gap: var(--wa-space-xl);
}

.fullstory-layout > .fullstory-image-container {
	flex: 0 1 420px;
	max-width: 420px;
	min-width: 420px;
}

.fullstory-layout > .wa-stack {
	flex: 1 1 0;
	min-width: 0;
}

.info-container {
	gap: var(--wa-space-l);
}

.fullstory-image-container {
	position: sticky;
	top: var(--wa-space-l);
	align-self: flex-start;
}

.fullstory-image-container img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wa-border-radius-l);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	box-shadow: var(--wa-shadow-l);
}

.fullstory-rating {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--wa-space-m);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: color-mix(in srgb, var(--wa-color-surface-default) 82%, transparent);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	backdrop-filter: blur(8px);
}

.muted {
	color: var(--wa-color-text-quiet);
}

/* ── Tarjetas de metadatos (tracks / calidad / tamaño) ────────── */
.meta-wrapper {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--wa-space-m);
}

.meta-content {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	padding: var(--wa-space-m);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.meta-content strong {
	font-size: var(--wa-font-size-m);
	color: var(--wa-color-text-normal);
}

.meta-content .meta-icon {
	border-radius: var(--wa-border-radius-m);
	padding: var(--wa-space-s);
	width: 64px;
	text-align: center;
}

.meta-wrapper .meta-content .meta-icon {
	font-size: var(--wa-font-size-xl);
	color: var(--wa-color-brand-fill-loud);
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 12%, transparent);
}

.meta-wrapper .meta-content:first-child .meta-icon {
	color: var(--wa-color-warning);
	background: color-mix(in srgb, var(--wa-color-warning) 12%, transparent);
}

.meta-wrapper .meta-content:last-child .meta-icon {
	color: var(--wa-color-success-fill-loud);
	background: color-mix(in srgb, var(--wa-color-success-fill-loud) 12%, transparent);
}

.meta-wrapper .meta-content.guest .meta-icon {
	color: var(--wa-color-danger-on-loud, #fff);
	background: var(--wa-color-danger);
}

/* ── Tabs ─────────────────────────────────────────────────────── */
/* El indicador usa el brand (teal) por defecto de WA — sin remapear
 * a cyan, que no existe como token en esta paleta. */
.fullstory-tabs {
	--track-color: var(--wa-color-surface-border);
}

wa-tab::part(base) {
	padding: var(--wa-space-xs) var(--wa-space-s) !important;
}

.tab {
	::slotted(wa-icon:last-child) {
			margin-inline-start: 0;
	}
}

.fullstory-tabs wa-tab wa-icon {
	margin-inline-end: var(--wa-space-xs);
}

/* Panel de tabs: reduce el padding por defecto (2rem) que deja mucho aire */
.fullstory-tabs wa-tab-panel {
	--padding: var(--wa-space-m) 0;
}

/* Badges de portada: se ocultan completos si no hay ninguno (sin dejar hueco) */
.fullstory-badges:not(:has(wa-badge)) {
	display: none;
}

/* ── Copy button (contraseña) como botón pill discreto ────────── */
wa-copy-button {
	display: inline-flex;
	font-size: var(--wa-font-size-s);
	vertical-align: middle;
}

wa-copy-button::part(button) {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	height: var(--wa-form-control-height);
	padding: 0 var(--wa-form-control-padding-inline);
	border-radius: var(--wa-border-radius-pill);
	background-color: transparent;
	border-color: transparent;
	border-style: var(--wa-form-control-border-style);
	border-width: var(--wa-form-control-border-width);
	color: var(--wa-color-neutral-on-quiet);
	font: inherit;
	cursor: pointer;
	transition-property: background, border, box-shadow, color, opacity;
	transition-duration: var(--wa-transition-fast);
	transition-timing-function: var(--wa-transition-easing);
}

wa-copy-button::part(button):not([disabled]):hover {
	background-color: var(--wa-color-neutral-fill-quiet);
}

wa-copy-button::part(button):focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

/* ── Buscador del tracklist (premium) ─────────────────────────── */
.track-search-bar {
	margin-bottom: var(--wa-space-l);
}

.track-search {
	min-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════
 * Tabla de tracklist (generada por el plugin WebAwesome Tracklist)
 * ═══════════════════════════════════════════════════════════════ */
/* Contenedor con scroll horizontal: en pantallas chicas la tabla se
 * desplaza en vez de ocultar columnas, así no se pierde información. */
.wa-tracklist-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.wa-tracklist-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-size: var(--wa-font-size-s);
}

.wa-tracklist-table thead th {
	text-align: left;
	font-size: var(--wa-font-size-2xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-quiet);
	padding: 0 var(--wa-space-m) var(--wa-space-s);
	border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.wa-tracklist-table tbody td {
	padding: var(--wa-space-m);
	vertical-align: middle;
	border-bottom: var(--wa-border-width-s) var(--wa-border-style) color-mix(in srgb, var(--wa-color-surface-border) 55%, transparent);
	/* El fondo y la barra lateral se desvanecen al cambiar de pista activa */
	transition: background-color 0.3s var(--wa-transition-easing),
		box-shadow 0.3s var(--wa-transition-easing);
}

.wa-track-row:hover td {
	background-color: var(--wa-color-neutral-fill-quiet);
}

.wa-track-row.wa-track-hidden {
	display: none;
}

th.wa-track-index,
td.wa-track-index {
	width: 1%;
	white-space: nowrap;
	text-align: center;
	color: var(--wa-color-text-quiet);
	font-variant-numeric: tabular-nums;
	transition: color 0.3s var(--wa-transition-easing);
}

/* El thead th genérico fuerza text-align:left por especificidad; reforzamos
   el centrado del # y de los números de la columna índice. */
.wa-tracklist-table thead th.wa-track-index,
.wa-tracklist-table tbody td.wa-track-index {
	text-align: center;
}

th.wa-track-play,
td.wa-track-play {
	width: 1%;
	white-space: nowrap;
	text-align: center;
}

th.wa-track-bpm,
td.wa-track-bpm,
th.wa-track-duration,
td.wa-track-duration {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	color: var(--wa-color-text-quiet);
	font-variant-numeric: tabular-nums;
}

.wa-track-song {
	width: 100%;
}

.wa-track-title {
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-normal);
	line-height: 1.25;
	transition: color 0.3s var(--wa-transition-easing);
}

.wa-track-song span {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}

.wa-track-play-btn::part(base) {
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border-radius: var(--wa-border-radius-m);
}

.wa-track-play-btn wa-icon {
	color: var(--wa-color-caution-fill-loud);
}

.wa-track-locked {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-m);
}

.wa-track-no-preview {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-m);
	opacity: 0.55;
}

/* Columnas opcionales: Clave / Género / Label (alineadas a la izquierda) */
th.wa-track-key,
td.wa-track-key,
th.wa-track-genre,
td.wa-track-genre,
th.wa-track-label,
td.wa-track-label {
	text-align: left;
	white-space: nowrap;
	color: var(--wa-color-text-quiet);
}

td.wa-track-key,
td.wa-track-genre,
td.wa-track-label {
	font-size: var(--wa-font-size-s);
}

/* Estado activo: pista que suena ahora mismo */
.wa-track-row.wa-track-active td,
.wa-track-row.wa-track-active:hover td {
	background-color: color-mix(in srgb, var(--wa-color-caution-fill-loud) 18%, transparent);
}

.wa-track-row.wa-track-active td:first-child {
	box-shadow: inset 4px 0 0 0 var(--wa-color-caution-fill-loud);
}

.wa-track-row.wa-track-active .wa-track-title {
	color: var(--wa-color-caution-fill-loud);
	font-weight: var(--wa-font-weight-bold);
}

.wa-track-row.wa-track-active .wa-track-index {
	color: var(--wa-color-caution-fill-loud);
	font-weight: var(--wa-font-weight-bold);
}

/* El botón de la pista activa también se tiñe de brand */
.wa-track-row.wa-track-active .wa-track-play-btn::part(base) {
	background-color: color-mix(in srgb, var(--wa-color-caution-fill-loud) 16%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
 * Player inferior (barra de preview)
 * Usa la superficie automática de WA — sin fondos custom.
 * ═══════════════════════════════════════════════════════════════ */
.ob-player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--wa-color-surface-raised);
	border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	box-shadow: rgba(50, 50, 93, 0.25) 0px -13px 27px -5px, rgba(0, 0, 0, 0.3) 0px -8px 16px -8px;
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ob-player.is-visible {
	transform: translateY(0);
}

.ob-player__inner {
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
	padding: var(--wa-space-s) var(--wa-space-l);
}

.ob-player__track {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	min-width: 0;
	flex: 1 1 220px;
}

.ob-player__cover {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: var(--wa-border-radius-s);
	object-fit: cover;
}

.ob-player__meta {
	min-width: 0;
}

.ob-player__title {
	font-weight: var(--wa-font-weight-semibold);
	font-size: var(--wa-font-size-s);
}

.ob-player__controls {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	flex: none;
}

.ob-player__play::part(base) {
	font-size: var(--wa-font-size-l);
	background-color: var(--wa-color-caution-fill-loud);
	color: #fff;
	border-radius: 50%;
}

.ob-player__play:hover::part(base) {
	background-color: var(--wa-color-caution-fill-loud);
	filter: brightness(1.08);
}

/* Resto de botones del player: hover en naranja */
.ob-player__btn:not(.ob-player__play):hover::part(base),
.ob-player__close:hover::part(base) {
	color: var(--wa-color-caution-fill-loud);
}

.ob-player__btn[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.ob-player__progress {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	flex: 2 1 300px;
}

.ob-player__time {
	flex: none;
	font-variant-numeric: tabular-nums;
}

.ob-player__volume {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	flex: none;
}

.ob-player__close {
	flex: none;
}

/* ── Barras de avance y volumen (range nativo estilizado) ─────
 * El relleno (parte recorrida) va en color naranja (caution) y el
 * círculo (thumb) también, como un appearance accent de WA.
 * JS actualiza --range-fill (0-100 %) por elemento.
 * ───────────────────────────────────────────────────────────── */
.ob-player__range {
	-webkit-appearance: none;
	appearance: none;
	height: 14px;
	/* alto = diámetro del thumb, para centrarlo sobre la pista de 4px */
	background: transparent;
	cursor: pointer;
}

.ob-player__seek {
	flex: 1 1 auto;
	min-width: 0;
}

.ob-player__vol-seek {
	width: 84px;
	flex: none;
}

/* WebKit / Blink — pista y thumb */
.ob-player__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: var(--wa-border-radius-pill);
	background: linear-gradient(to right,
		var(--wa-color-caution-fill-loud) var(--range-fill, 0%),
		var(--wa-color-neutral-fill-normal, var(--wa-color-surface-border)) var(--range-fill, 0%));
}

.ob-player__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	/* (14 - 4) / 2 = 5 → centra el círculo sobre la pista */
	border-radius: 50%;
	background: var(--wa-color-caution-fill-loud);
	border: 2px solid var(--wa-color-surface-raised);
	box-shadow: 0 0 0 1px var(--wa-color-caution-fill-loud);
}

/* Firefox — pista, progreso y thumb */
.ob-player__range::-moz-range-track {
	height: 4px;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-normal, var(--wa-color-surface-border));
}

.ob-player__range::-moz-range-progress {
	height: 4px;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-caution-fill-loud);
}

.ob-player__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wa-color-caution-fill-loud);
	border: 2px solid var(--wa-color-surface-raised);
	box-shadow: 0 0 0 1px var(--wa-color-caution-fill-loud);
}

.ob-player__range:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

/* Reserva espacio al final para que el player no tape el contenido */
body:has(.ob-player.is-visible) {
	padding-block-end: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.ob-player {
		transition: none;
	}
}


/* ═══════════════════════════════════════════════════════════════
 * Dialogs 
 * ═══════════════════════════════════════════════════════════════ */

.profile-popup-card .pp-avatar {
	--size: 180px;
}

#wa-profile-dialog::part(header),
#wa-pm-dialog::part(header),
#wa-complaint-dialog::part(header),
#wa-reply-dialog::part(header),
#wa-votes-dialog::part(header),
#wa-edit-comm-dialog::part(header) {
	background: var(--wa-color-indigo-50);
	padding-bottom: var(--wa-space-s);
}

#wa-profile-dialog::part(close-button),
#wa-profile-dialog::part(close-button__base),
#wa-pm-dialog::part(close-button),
#wa-pm-dialog::part(close-button__base),
#wa-reply-dialog::part(close-button),
#wa-reply-dialog::part(close-button__base),
#wa-votes-dialog::part(close-button),
#wa-votes-dialog::part(close-button__base),
#wa-edit-comm-dialog::part(close-button),
#wa-edit-comm-dialog::part(close-button__base) {
	color: var(--wa-color-indigo-90);
}

#wa-confirm-dialog::part(close-button),
#wa-confirm-dialog::part(close-button__base) {
	color: var(--wa-color-danger-90);
}

#wa-confirm-dialog::part(header) {
	background: var(--wa-color-danger-50);
	padding-bottom: var(--wa-space-s);
}

#wa-complaint-dialog::part(close-button),
#wa-complaint-dialog::part(close-button__base),
#wa-alert-dialog::part(close-button),
#wa-alert-dialog::part(close-button__base) {
	color: var(--wa-color-warning-90);
}

#wa-complaint-dialog::part(header),
#wa-alert-dialog::part(header) {
	background: var(--wa-color-warning-50);
	padding-bottom: var(--wa-space-s);
}

/* ── Top Users / Usuarios destacados ([Mod] Stats) ─────── */
.ob-topusers-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wa-space-m);
}

.ob-topuser-card {
	--spacing: var(--wa-space-m);
}
.ob-topuser-card::part(body) {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-m);
	height: 100%;
}

.ob-topuser-head {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
}

.ob-topuser-rank {
	flex-shrink: 0;
	min-width: 1.3em;
	text-align: center;
	font-size: var(--wa-font-size-3xl);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1;
	color: var(--wa-color-brand-fill-loud);
}

.ob-topuser-id {
	min-width: 0;
	gap: var(--wa-space-3xs);
}
.ob-topuser-id a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-normal);
	text-decoration: none;
}
.ob-topuser-id a:hover {
	color: var(--wa-color-brand-fill-loud);
}

.ob-topuser-group {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}

.ob-topuser-stats {
	display: flex;
	gap: var(--wa-space-s);
	margin-top: auto;
	padding-top: var(--wa-space-s);
	border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.ob-topuser-stat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}
.ob-topuser-stat wa-icon {
	color: var(--wa-color-brand-fill-loud);
}
.ob-topuser-num {
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-normal);
}
.ob-topuser-lbl {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* === Tag cloud (tagscloud.tpl) === */
.ob-tags { line-height: 2.2; }
.ob-tags a {
	display: inline-flex;
	align-items: center;
	padding: var(--wa-space-3xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-quiet);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-s);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.ob-tags a:hover {
	background: var(--wa-color-brand-fill-quiet);
	border-color: var(--wa-color-brand-border-loud);
	color: var(--wa-color-brand-on-quiet);
}

/* === Info / lost password (info.tpl, lostpassword.tpl) === */
.ob-lostpass { max-width: 560px; margin-inline: auto; }

/* === Poll & Vote (poll.tpl, vote.tpl) — reskin del markup que genera DLE ===
   El motor emite: .pollanswer/.vote (opción votable), .pollprogress/.voteprogress
   (track) con span.poll{n}/.vote{n} (relleno + %). Aquí los estilizamos. */
.ob-poll-tag {
	font-family: var(--wa-font-family-code);
	font-size: var(--wa-font-size-2xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wa-color-pink-60, var(--wa-color-brand-fill-loud));
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
}
.ob-poll-tag::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--wa-color-pink-60, var(--wa-color-brand-fill-loud));
}
.ob-poll-more { font-size: var(--wa-font-size-s); }
.ob-poll-stats {
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
}

/* Opciones votables */
.ob-poll .pollanswer,
.ob-poll .vote_list .vote:has(label) {
	display: block;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
	margin-bottom: var(--wa-space-2xs);
	transition: border-color .12s;
}
.ob-poll .pollanswer:hover,
.ob-poll .vote_list .vote:has(label):hover {
	border-color: var(--wa-color-brand-border-loud);
}
.ob-poll .form-check-label {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	cursor: pointer;
	font-size: var(--wa-font-size-s);
}

/* Resultados: línea de texto + barra de progreso */
.ob-poll .vote_list .vote {
	font-size: var(--wa-font-size-s);
	margin-top: var(--wa-space-xs);
}
.ob-poll .pollprogress,
.ob-poll .voteprogress {
	height: 8px;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-quiet);
	overflow: hidden;
	margin: var(--wa-space-3xs) 0 var(--wa-space-s);
}
.ob-poll .pollprogress span,
.ob-poll .voteprogress span {
	display: block;
	height: 100%;
	min-width: 1.5em;
	text-indent: -9999px;
	background: linear-gradient(90deg, var(--wa-color-pink-fill-loud), var(--wa-color-pink-border-loud));
}
.ob-poll .pollallvotes {
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-text-quiet);
	margin-top: var(--wa-space-s);
}

/* Layout inline para la encuesta del home (vote.tpl) */
.ob-poll-inline {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--wa-space-xl);
	align-items: center;
	padding: var(--wa-space-xl);
	border-radius: var(--wa-border-radius-l);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-pink-border-loud, var(--wa-color-brand-border-loud));
	background: linear-gradient(135deg, var(--wa-color-pink-fill-quiet, var(--wa-color-brand-fill-quiet)), transparent);
}
.ob-poll-inline__q {
	font-size: var(--wa-font-size-xl);
	letter-spacing: -.015em;
	margin: 0;
}
@media (max-width: 767px) {
	.ob-poll-inline { grid-template-columns: 1fr; gap: var(--wa-space-l); padding: var(--wa-space-l); }
}

/* ===== Premium page (views/premium.tpl) ===== */
.ob-gold { color: var(--wa-color-warning); }

/* Bandas con fondo (hero + CTA) — layout via utilidades wa-stack/wa-align-items */
.ob-premium-band {
	text-align: center;
	padding: var(--wa-space-2xl) var(--wa-space-l);
	border-radius: var(--wa-border-radius-l);
	border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-warning-border-quiet, var(--wa-color-surface-border));
}
.ob-premium-band--hero { background: linear-gradient(135deg, var(--wa-color-warning-fill-quiet), transparent 70%); }
.ob-premium-band--cta { background: linear-gradient(135deg, var(--wa-color-warning-fill-quiet), var(--wa-color-brand-fill-quiet) 90%); }
.ob-premium-band p { max-width: 60ch; }

/* Beneficios — 3 por fila */
.ob-premium-benefits { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Comparativa (tabla — sin utilidades equivalentes) */
.ob-compare-wrap { overflow-x: auto; border-radius: var(--wa-border-radius-l); border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); }
.ob-compare { width: 100%; border-collapse: collapse; min-width: 520px; }
.ob-compare th, .ob-compare td { padding: var(--wa-space-s) var(--wa-space-m); text-align: center; border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); }
.ob-compare th:first-child, .ob-compare td:first-child { text-align: left; width: 34%; }
.ob-compare th:last-child, .ob-compare td:last-child { background: var(--wa-color-warning-fill-quiet); }
.ob-compare thead th { font-size: var(--wa-font-size-s); }
.ob-compare thead th:last-child { color: var(--wa-color-warning); }
.ob-compare thead th span { display: block; font-weight: var(--wa-font-weight-normal); font-size: var(--wa-font-size-2xs); color: var(--wa-color-text-quiet); margin-top: 2px; }
.ob-compare tbody wa-icon[name="check"] { color: var(--wa-color-success); }
.ob-compare tbody td:last-child wa-icon[name="check"] { color: var(--wa-color-warning); }
.ob-compare tbody wa-icon[name="xmark"] { color: var(--wa-color-text-quiet); opacity: .6; }
.ob-compare tbody tr:last-child td { border-bottom: 0; }

/* Pricing — 50/50, misma altura via grid stretch (default) */
.ob-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-l); }
.ob-pricing-grid > wa-card, .ob-pricing-grid > wa-card::part(base) { height: 100%; }
.ob-pricing-old { text-decoration: line-through; }
.ob-pricing-row { padding: var(--wa-space-2xs) 0; border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); }
.ob-pricing-row:last-child { border-bottom: 0; }
.ob-pricing-paypal { min-height: 45px; }
.ob-pricing-annual { position: relative; overflow: visible; border: var(--wa-border-width-m) var(--wa-border-style) var(--wa-color-warning-border-loud, var(--wa-color-warning)); --background-color: var(--wa-color-warning-fill-quiet); }
.ob-pricing-annual::part(base) { overflow: visible; }
.ob-pricing-ribbon {
	position: absolute; top: 0; right: var(--wa-space-l); transform: translateY(-50%);
	padding: var(--wa-space-3xs) var(--wa-space-s); border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud);
	font-size: var(--wa-font-size-2xs); font-weight: var(--wa-font-weight-bold); text-transform: uppercase; letter-spacing: .08em;
}

@media (max-width: 900px) {
	.ob-pricing-grid { grid-template-columns: 1fr; }
	.ob-premium-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ob-premium-benefits { grid-template-columns: 1fr; }
}