/* ═══════════════════════════════════════════════════════════════════════
   PAGINA /info  —  Server Information (versión limpia: colores planos)
   Se carga desde inc/modules/info.php.

   Sin degradados difusos, sin brillos borrosos ni manchas de color:
   superficies oscuras planas, bordes nítidos y color solo en los
   iconos, etiquetas y acentos.

   Colores por "tono": cada bloque define --c (R,G,B). Para cambiar un
   color editá el valor de --c en .we-tone-*.
   ═══════════════════════════════════════════════════════════════════════ */

.we-info-page {
	--c: 168, 85, 247;
	--surface: #120b22;
	--surface-2: #170f2b;
	--line: rgba(216, 180, 254, .14);
	--text-soft: #d9c8f5;
	font-family: var(--we-font, 'Inter', sans-serif);
}

/* ── Tonos ── */
.we-tone-violet { --c: 168, 85, 247; }
.we-tone-gold   { --c: 251, 191, 36; }
.we-tone-cyan   { --c: 34, 211, 238; }
.we-tone-pink   { --c: 244, 114, 182; }
.we-tone-green  { --c: 52, 211, 153; }
.we-tone-red    { --c: 248, 113, 113; }
.we-tone-orange { --c: 251, 146, 60; }
.we-tone-blue   { --c: 96, 165, 250; }

/* ── Tipografía ── */
.we-info-page h1,
.we-info-page h2,
.we-info-page .we-info-section-title { font-family: var(--we-font-display, 'Poppins', sans-serif) !important; }
.we-info-page p,
.we-info-page td,
.we-info-page th,
.we-info-cmd-desc { font-family: var(--we-font, 'Inter', sans-serif) !important; }
.we-info-page .we-info-stat-value {
	font-family: var(--we-font-display, 'Poppins', sans-serif) !important;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
.we-info-page .we-info-cmd-code {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── Animación de entrada (solo si hay JS; sin JS todo se ve igual) ── */
.we-info-js .we-info-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.we-info-js .we-info-reveal.is-in { opacity: 1; transform: none; }

.we-info-js .we-info-reveal .we-info-stagger {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1),
	            border-color .2s ease, background-color .2s ease;
	transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s;
}
.we-info-js .we-info-reveal.is-in .we-info-stagger { opacity: 1; transform: none; }

/* ═════════════════════════  HERO  ═════════════════════════ */
.we-info-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 30px 32px;
	margin-bottom: 34px;
	border-radius: 18px;
	background: var(--surface-2);
	border: 1px solid rgba(168, 85, 247, .38);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
	animation: weInfoRise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.we-info-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: #a855f7;
}
.we-info-hero-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 18px;
	background: #7c3aed;
}
.we-info-hero-icon .we-icon { width: 34px; height: 34px; color: #fff; }

.we-info-hero-text { min-width: 0; }
.we-info-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 4px 12px 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #6ee7b7;
	background: rgba(52, 211, 153, .12);
	border: 1px solid rgba(52, 211, 153, .4);
}
.we-info-live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #34d399;
	animation: weInfoPing 1.8s ease-out infinite;
}
.we-info-page .we-info-title {
	margin: 0 0 8px;
	font-size: clamp(26px, 4.2vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
}
.we-info-page .we-info-subtitle {
	margin: 0;
	max-width: 760px;
	color: var(--text-soft);
	font-size: 16.5px;
	line-height: 1.6;
}
.we-info-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.we-info-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: rgba(var(--c), .12);
	border: 1px solid rgba(var(--c), .45);
}
.we-info-page .we-info-chip .we-icon { color: rgb(var(--c)); }

/* ═════════════════════  TITULOS DE SECCION  ═════════════════════ */
.we-info-section { position: relative; margin-bottom: 38px; }
.we-info-page .we-info-section-title {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--line);
	font-size: 24px;
	font-weight: 800;
	color: #fff;
}
/* segmento de color bajo el título */
.we-info-page .we-info-section-title::after {
	content: '';
	position: absolute;
	left: 0; bottom: -1px;
	width: 72px;
	height: 3px;
	border-radius: 3px;
	background: rgb(var(--c));
}
.we-info-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 11px;
	color: rgb(var(--c));
	background: rgba(var(--c), .14);
	border: 1px solid rgba(var(--c), .4);
}
.we-info-page .we-info-title-icon .we-icon { width: 20px; height: 20px; color: rgb(var(--c)); }

/* ═════════════════════  TARJETAS DE STATS  ═════════════════════ */
.we-info-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}
.we-info-stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid rgb(var(--c));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.we-info-stat-card:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(var(--c), .55);
	border-top-color: rgb(var(--c));
}
.we-info-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: 4px;
	border-radius: 12px;
	color: rgb(var(--c));
	background: rgba(var(--c), .14);
	border: 1px solid rgba(var(--c), .4);
}
.we-info-page .we-info-stat-icon .we-icon { width: 23px; height: 23px; color: rgb(var(--c)); }
.we-info-page .we-info-stat-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(var(--c));
}
.we-info-page .we-info-stat-value {
	font-size: 30px;
	line-height: 1.15;
	color: #fff;
	overflow-wrap: anywhere;
}

/* ═════════════════════  TABLAS  ═════════════════════ */
.we-info-table-wrap {
	overflow-x: auto;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.we-info-page .we-info-table {
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	border-collapse: separate;
	border-spacing: 0;
}
.we-info-page .we-info-table thead tr { background: #1c1233 !important; }
.we-info-page .we-info-table thead th {
	padding: 14px 20px !important;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle !important;
}
.we-info-page .we-info-table thead tr:first-child th { border-bottom: 1px solid var(--line) !important; }
.we-info-page .we-info-table .we-info-th-sub { color: #cdb8f0 !important; font-size: 13px !important; }
.we-info-page .we-info-table .we-info-th-gold { color: #fbbf24 !important; }
.we-info-page .we-info-th-combo { font-weight: 800 !important; }

.we-info-page .we-info-table tbody td {
	padding: 12px 20px !important;
	border-top: 1px solid rgba(255, 255, 255, .05) !important;
	background: transparent !important;
	color: #f3e8ff !important;
	font-size: 16px;
	vertical-align: middle !important;
	transition: background-color .2s ease;
}
.we-info-page .we-info-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02) !important; }
.we-info-page .we-info-table tbody tr:hover td { background: rgba(var(--c), .08) !important; }
.we-info-page .we-info-table tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
.we-info-page .we-info-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 rgb(var(--c)); }
.we-info-page .we-info-table td.text-center { white-space: nowrap; }

/* etiqueta de fila con icono de color */
.we-info-row-label { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 600; }
.we-info-row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex-shrink: 0;
	border-radius: 9px;
	color: rgb(var(--c));
	background: rgba(var(--c), .14);
	border: 1px solid rgba(var(--c), .4);
}
.we-info-page .we-info-row-icon .we-icon { width: 17px; height: 17px; color: rgb(var(--c)); }

/* badges de porcentaje (planos) */
.we-info-rate {
	display: inline-block;
	vertical-align: middle;
	min-width: 72px;
	padding: 6px 15px;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #e9d5ff;
	background: rgba(168, 85, 247, .14);
	border: 1px solid rgba(168, 85, 247, .45);
}
.we-info-rate-gold  { color: #fde68a; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .5); }
.we-info-rate-green { color: #a7f3d0; background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .5); }
.we-info-rate-cyan  { color: #a5f3fc; background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .5); }
.we-info-luck {
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	padding: 7px 15px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: #04210f;
	background: #34d399;
	border: 1px solid #6ee7b7;
	box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
	white-space: nowrap;
}
.we-info-luck .we-icon { width: 16px; height: 16px; color: #04210f; }
/* cuando hay Luck, el % base baja un poco para que el Luck destaque */
td:has(> .we-info-luck) .we-info-rate {
	min-width: 0;
	padding: 5px 12px;
	font-size: 14px;
	font-weight: 700;
}

/* jugadores del party (iconitos de colores) */
.we-info-members { display: inline-flex; align-items: center; gap: 4px; min-width: 120px; margin-right: 14px; }
.we-info-members .we-icon { width: 20px; height: 20px; }
.we-info-members .m1 { color: #a78bfa; } .we-info-members .m2 { color: #22d3ee; }
.we-info-members .m3 { color: #34d399; } .we-info-members .m4 { color: #fbbf24; }
.we-info-members .m5 { color: #f472b6; }

/* nota bajo la tabla */
.we-info-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 2px 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-soft);
}
.we-info-page .we-info-note .we-icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--c)); }

/* ═════════════════════  COMANDOS  ═════════════════════ */
.we-info-commands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 12px;
}
.we-info-cmd {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.we-info-cmd::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: rgb(var(--c));
}
.we-info-cmd:hover {
	transform: translateY(-3px) !important;
	border-color: rgba(var(--c), .55);
	background: #160e29;
}
.we-info-cmd-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex-shrink: 0;
	margin-left: 4px;
	border-radius: 11px;
	color: rgb(var(--c));
	background: rgba(var(--c), .14);
	border: 1px solid rgba(var(--c), .4);
}
.we-info-page .we-info-cmd-icon .we-icon { width: 20px; height: 20px; color: rgb(var(--c)); }
.we-info-cmd-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.we-info-page .we-info-cmd-code {
	display: inline-block;
	max-width: 100%;
	padding: 4px 11px;
	border-radius: 8px;
	font-size: 17.5px;
	color: #d8b4fe;
	background: rgba(168, 85, 247, .16);
	border: 1px solid rgba(168, 85, 247, .5);
	white-space: normal;
	word-break: break-word;
}
.we-info-page .we-info-cmd-desc { color: var(--text-soft); font-size: 16px; line-height: 1.4; }
.we-info-cmd-hint {
	flex-shrink: 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(var(--c));
	border: 1px solid rgba(var(--c), .4);
	opacity: 0;
	transition: opacity .2s ease;
}
.we-info-cmd:hover .we-info-cmd-hint,
.we-info-cmd.is-copied .we-info-cmd-hint { opacity: 1; }
.we-info-cmd.is-copied { border-color: #34d399; }
.we-info-cmd.is-copied .we-info-cmd-hint { color: #a7f3d0; border-color: #34d399; background: rgba(52, 211, 153, .15); }

/* ═════════════════════  VIDEO  ═════════════════════ */
.we-info-video-frame {
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(168, 85, 247, .4);
	background: #0b0616;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.we-info-page .we-info-video-frame .we-info-video {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ═════════════════════  KEYFRAMES  ═════════════════════ */
@keyframes weInfoRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes weInfoPing {
	0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
	70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ═════════════════════  TALISMAN OF LUCK  ═════════════════════ */
.we-info-tali {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 18px;
	align-items: stretch;
}
.we-info-tali-main,
.we-info-tali-item {
	background: var(--surface-2);
	border: 1px solid rgba(var(--c), .3);
	border-radius: 16px;
}
.we-info-tali-main { padding: 26px 28px; border-color: rgba(52, 211, 153, .35); }
.we-info-tali-lead {
	margin: 0 0 12px;
	font-size: 19px;
	font-style: normal;
	color: #d1fae5;
}
.we-info-tali-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); }
.we-hl-green { color: #34d399; font-weight: 800; }
.we-info-tali-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	color: #fde68a;
	background: rgba(251, 191, 36, .14);
	border: 1px solid rgba(251, 191, 36, .5);
	white-space: nowrap;
}
.we-info-tali-sub {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 24px 0 12px;
	font-size: 18px;
	font-weight: 800;
	color: var(--text);
}
.we-info-page .we-info-tali-sub .we-icon { color: #60a5fa; }
.we-info-tali-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.we-info-tali-steps li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 16px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--text);
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}
.we-info-tali-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 9px;
	font-weight: 800;
	color: #fff;
	background: #3b82f6;
}
.we-info-page .we-info-tali-assembly { font-size: 17.5px; line-height: 1.6; color: var(--text); }
.we-info-tali-assembly { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-style: normal; }
.we-info-page .we-info-tali-assembly .we-icon { color: #f472b6; }

/* nombre de item con foto al pasar el mouse */
.we-info-itemtip {
	position: relative;
	display: inline-block;
	font-weight: 800;
	font-style: normal;
	color: #6ee7b7;
	border-bottom: 2px dashed rgba(52, 211, 153, .7);
	cursor: help;
	outline: none;
}
.we-info-itemtip-pink { color: #f9a8d4; border-bottom-color: rgba(244, 114, 182, .7); }
.we-info-itempop {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 200px;
	padding: 12px 12px 10px;
	border-radius: 14px;
	background: #120b22;
	border: 1px solid rgba(52, 211, 153, .6);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .65);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px) scale(.96);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
}
.we-info-itemtip-pink .we-info-itempop { border-color: rgba(244, 114, 182, .6); }
.we-info-itempop::after {
	content: '';
	position: absolute;
	left: 50%; top: 100%;
	width: 12px; height: 12px;
	background: #120b22;
	border: 1px solid rgba(52, 211, 153, .6);
	border-top: 0; border-left: 0;
	transform: translate(-50%, -6px) rotate(45deg);
}
.we-info-itemtip-pink .we-info-itempop::after { border-color: rgba(244, 114, 182, .6); }
.we-info-itempop img { width: 240px; max-width: none; height: auto; display: block; margin: -34px -35px -30px; }
.we-info-itempop b { font-size: 14px; color: #fff; text-align: center; white-space: nowrap; }
.we-info-itemtip:hover .we-info-itempop,
.we-info-itemtip:focus .we-info-itempop {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

/* tarjetas de los items (lado derecho) */
.we-info-tali-items { display: grid; gap: 18px; }
.we-info-tali-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 18px;
	text-align: center;
	transition: transform .25s ease, border-color .25s ease;
}
.we-info-tali-item:hover { transform: translateY(-4px); border-color: rgb(var(--c)); }
.we-info-tali-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px; height: 132px;
	margin-bottom: 12px;
	border-radius: 50%;
	overflow: hidden;
	background: #0b0617;
	border: 2px solid rgba(var(--c), .55);
}
.we-info-tali-art img { width: 270px; max-width: none; height: auto; flex-shrink: 0; transition: transform .3s ease; }
.we-info-tali-item:hover .we-info-tali-art img { transform: scale(1.12) rotate(-4deg); }
.we-info-tali-name { font-size: 18px; font-weight: 800; color: rgb(var(--c)); }
.we-info-tali-cap { margin-top: 4px; font-size: 15px; color: var(--text-soft); }

@media (max-width: 900px) {
	.we-info-tali { grid-template-columns: 1fr; }
	.we-info-tali-items { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.we-info-tali-main { padding: 20px 18px; }
	.we-info-tali-items { grid-template-columns: 1fr; }
	.we-info-tali-art { width: 110px; height: 110px; }
	.we-info-tali-art img { width: 225px; }
}

/* ═════════════════════  RESPONSIVE  ═════════════════════ */
@media (max-width: 767px) {
	.we-info-hero { flex-direction: column; align-items: flex-start; padding: 24px 22px; gap: 16px; }
	.we-info-hero-icon { width: 60px; height: 60px; }
	.we-info-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.we-info-stat-card { padding: 16px; }
	.we-info-page .we-info-stat-value { font-size: 23px; }
	.we-info-commands { grid-template-columns: 1fr; }
	.we-info-cmd-hint { display: none; }
	.we-info-page .we-info-table tbody td,
	.we-info-page .we-info-table thead th { padding: 11px 12px !important; }
	.we-info-row-icon { width: 30px; height: 30px; }
	.we-info-members { display: none; }
	.we-info-page .we-info-section-title { font-size: 20px; }
}

/* ═════════════════════  MOVIMIENTO REDUCIDO  ═════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.we-info-page *, .we-info-page *::before, .we-info-page *::after {
		animation: none !important;
		transition: none !important;
	}
	.we-info-js .we-info-reveal,
	.we-info-js .we-info-reveal .we-info-stagger { opacity: 1 !important; transform: none !important; }
}