/* Tivity Game Kit · Usuarios (login, registro, perfil) */
:root {
	--tgk-accent: #D9A84A;
	--tgk-accent-2: #FFCB80;
	--tgk-bg: #0b1b2b;
	--tgk-text: #ffffff;
	--tgk-radius: 18px;
	--tgk-cover-h: 260px;
	--tgk-avatar: 150px;
}

/* ---------- Tarjetas (login / registro) ---------- */
.tgk-box {
	max-width: 520px;
	margin: 0 auto;
	background: var(--tgk-bg);
	color: var(--tgk-text);
	border: 2px solid var(--tgk-accent);
	border-radius: var(--tgk-radius);
	padding: 28px 28px 24px;
	box-shadow: 0 0 30px 2px color-mix(in srgb, var(--tgk-accent) 35%, transparent), 0 20px 50px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}
.tgk-box__title { margin: 0 0 14px; font-size: 1.7em; color: var(--tgk-accent); text-align: center; font-weight: 800; }
.tgk-box p { margin: 0 0 12px; }
.tgk-intro { opacity: 0.85; font-size: 0.95em; text-align: center; }

.tgk-field { margin: 0 0 14px; }
.tgk-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95em; }
.tgk-field input[type="text"], .tgk-field input[type="email"], .tgk-field input[type="password"], .tgk-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: var(--tgk-text);
	font: inherit;
	font-size: 1.05em;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.tgk-field input:focus, .tgk-field textarea:focus { border-color: var(--tgk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tgk-accent) 30%, transparent); }
.tgk-field input::placeholder, .tgk-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.tgk-field .tgk-hint { display: block; font-size: 0.82em; opacity: 0.7; margin-top: 5px; }
.tgk-passwrap { position: relative; }
.tgk-passwrap input { padding-right: 46px; }
.tgk-passwrap .tgk-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--tgk-text); opacity: 0.7; cursor: pointer; font-size: 18px; padding: 6px; line-height: 1; }

.tgk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(180deg, var(--tgk-accent-2), var(--tgk-accent));
	color: #1a1a1a; font-weight: 700; border: 0; border-radius: 999px;
	padding: 0.8em 1.8em; font-size: 1.05em; cursor: pointer; text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--tgk-accent) 45%, transparent);
	transition: transform 0.15s, box-shadow 0.15s;
}
.tgk-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--tgk-accent) 55%, transparent); color: #1a1a1a; }
.tgk-btn--ghost { background: transparent; color: var(--tgk-text); border: 2px solid var(--tgk-accent); box-shadow: none; }
.tgk-btn--ghost:hover { color: var(--tgk-text); background: color-mix(in srgb, var(--tgk-accent) 15%, transparent); }
.tgk-btn--small { padding: 0.5em 1.1em; font-size: 0.9em; }
.tgk-btn--block { width: 100%; }
.tgk-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.tgk-switch { text-align: center; margin-top: 16px; font-size: 0.95em; opacity: 0.9; }
.tgk-switch a { color: var(--tgk-accent); font-weight: 700; text-decoration: none; }
.tgk-switch a:hover { text-decoration: underline; }

/* Pestañas de registro */
.tgk-tabs { display: flex; gap: 6px; margin: 0 0 18px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 4px; }
.tgk-tabs button { flex: 1; border: 0; background: transparent; color: var(--tgk-text); padding: 10px 8px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.95em; opacity: 0.75; transition: background 0.2s, opacity 0.2s; }
.tgk-tabs button.is-active { background: var(--tgk-accent); color: #1a1a1a; opacity: 1; }
.tgk-pane[hidden] { display: none; }

/* Avisos */
.tgk-notice { border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 600; text-align: center; }
.tgk-notice--error { background: rgba(255, 75, 75, 0.15); border: 1px solid rgba(255, 75, 75, 0.6); color: #ffb3b3; }
.tgk-notice--ok { background: rgba(80, 200, 120, 0.15); border: 1px solid rgba(80, 200, 120, 0.6); color: #b9f1cd; }
.tgk-notice--warn { background: rgba(255, 203, 128, 0.14); border: 1px dashed var(--tgk-accent); color: var(--tgk-text); text-align: left; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.tgk-notice--warn a { color: var(--tgk-accent); font-weight: 700; white-space: nowrap; }

/* ---------- Perfil ---------- */
.tgk-profile { --tgk-border: 2px; --tgk-name: 30px; color: var(--tgk-text); }
.tgk-profile__card { background: var(--tgk-bg); border-radius: var(--tgk-radius); overflow: hidden; }
/* Disposición "card": todo en un único bloque con borde */
.tgk-profile--card { background: var(--tgk-bg); border-radius: var(--tgk-radius); overflow: hidden; border: var(--tgk-border) solid var(--tgk-accent); }
.tgk-profile--card .tgk-profile__card { border-radius: 0; }
.tgk-profile--card .tgk-profile__content, .tgk-profile--card .tgk-comments { padding: 0 28px 24px; }
.tgk-profile--card .tgk-profile__content { margin-top: 0; }
.tgk-profile--card .tgk-comments { margin-top: 0; }
/* Disposición "split": cabecera y contenido en bloques separados */
.tgk-profile--split .tgk-profile__card { border: var(--tgk-border) solid var(--tgk-accent); }
.tgk-profile--split .tgk-profile__content { background: var(--tgk-bg); border: var(--tgk-border) solid var(--tgk-accent); border-radius: var(--tgk-radius); padding: 24px 28px; margin-top: 20px; }
.tgk-profile--split .tgk-comments { background: var(--tgk-bg); border: 1px solid color-mix(in srgb, var(--tgk-accent) 50%, transparent); border-radius: var(--tgk-radius); padding: 14px 20px; margin-top: 14px; }
/* Disposición "open": sin bordes, la portada y el contenido respiran sobre el fondo de la página */
.tgk-profile--open .tgk-profile__card { background: transparent; overflow: visible; }
.tgk-profile--open .tgk-profile__cover { border-radius: var(--tgk-radius); overflow: hidden; }
.tgk-profile--open .tgk-profile__head { padding-left: 12px; padding-right: 12px; }
.tgk-profile--open .tgk-profile__body { padding-left: 12px; padding-right: 12px; }
.tgk-profile--open .tgk-profile__content { margin-top: 18px; padding: 0 12px; }
.tgk-profile--open .tgk-comments { padding: 0 12px; }
.tgk-profile--open .tgk-profile__cover::after { background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35)); }
/* En la disposición abierta el texto hereda el color de la página; los paneles mantienen su fondo */
.tgk-profile--open { color: inherit; }
.tgk-profile--open .tgk-profile__edit, .tgk-profile--open .tgk-notice--warn, .tgk-profile--open .tgk-notice--ok, .tgk-profile--open .tgk-notice--error { background: var(--tgk-bg); color: var(--tgk-text); }
.tgk-profile--open .tgk-profile__edit label { color: var(--tgk-text); }
/* Resplandor */
.tgk-profile--glow.tgk-profile--card { box-shadow: 0 0 30px 2px color-mix(in srgb, var(--tgk-accent) 30%, transparent), 0 20px 50px rgba(0, 0, 0, 0.35); }
.tgk-profile--glow.tgk-profile--split .tgk-profile__card, .tgk-profile--glow.tgk-profile--split .tgk-profile__content { box-shadow: 0 0 26px 2px color-mix(in srgb, var(--tgk-accent) 28%, transparent), 0 16px 40px rgba(0, 0, 0, 0.3); }
.tgk-profile--glow.tgk-profile--open .tgk-profile__cover, .tgk-profile--glow .tgk-profile__avatar { box-shadow: 0 0 24px color-mix(in srgb, var(--tgk-accent) 55%, transparent); }
/* Portada: imagen / degradado / sin portada */
.tgk-profile__cover { height: var(--tgk-cover-h); background-size: cover; background-position: center; position: relative; }
.tgk-profile--cover-gradient .tgk-profile__cover { background-image: linear-gradient(135deg, color-mix(in srgb, var(--tgk-accent) 70%, #000) 0%, var(--tgk-accent) 45%, color-mix(in srgb, var(--tgk-accent) 40%, var(--tgk-bg)) 100%); }
.tgk-profile--cover-none .tgk-profile__cover { height: calc(var(--tgk-avatar) / 2 + 24px); background: transparent; }
.tgk-profile--cover-none .tgk-profile__cover::after { display: none; }
/* Avatar: forma y posición */
.tgk-profile--shape-rounded .tgk-profile__avatar { border-radius: 26%; }
.tgk-profile--shape-square .tgk-profile__avatar { border-radius: 10px; }
.tgk-profile--avatar-center .tgk-profile__head { flex-direction: column; align-items: center; text-align: center; }
.tgk-profile--avatar-center .tgk-profile__info { flex-basis: auto; }
.tgk-profile--avatar-center .tgk-profile__actions { justify-content: center; }
.tgk-profile--avatar-center .tgk-profile__name { font-size: calc(var(--tgk-name) * 1.1); }
.tgk-profile__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--tgk-bg) 85%, transparent)); }
.tgk-profile__head { display: flex; gap: 22px; align-items: flex-end; padding: 0 28px 20px; margin-top: calc(var(--tgk-avatar) / -2); position: relative; flex-wrap: wrap; }
.tgk-profile__avatar { width: var(--tgk-avatar); height: var(--tgk-avatar); border-radius: 50%; overflow: hidden; border: 4px solid var(--tgk-accent); background: var(--tgk-bg); box-shadow: 0 0 20px color-mix(in srgb, var(--tgk-accent) 60%, transparent); flex: 0 0 auto; }
.tgk-profile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgk-profile__info { flex: 1 1 240px; min-width: 0; padding-bottom: 6px; }
.tgk-profile__name { margin: 0 0 4px; font-size: var(--tgk-name); color: var(--tgk-accent); font-weight: 800; line-height: 1.1; word-break: break-word; }
.tgk-profile__since { font-size: 0.85em; opacity: 0.7; }
.tgk-profile__bio { margin: 8px 0 0; opacity: 0.92; white-space: pre-line; }
.tgk-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.tgk-profile__body { padding: 8px 28px 28px; }
.tgk-profile__content { margin-top: 10px; }
.tgk-profile__edit { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 20px 22px; margin: 6px 0 18px; }
.tgk-profile__edit[hidden] { display: none; }
.tgk-profile__edit h3 { margin: 0 0 14px; color: var(--tgk-accent); font-size: 1.15em; }
.tgk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tgk-upload { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tgk-upload__preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tgk-accent); background: #000; }
.tgk-upload__preview--cover { width: 128px; height: 72px; border-radius: 10px; }
.tgk-upload input[type="file"] { color: var(--tgk-text); font-size: 0.9em; max-width: 100%; }
.tgk-upload label.tgk-check { font-weight: 400; font-size: 0.9em; opacity: 0.85; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.tgk-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 18px 0; }

/* Botón de subida de archivo (el input nativo queda oculto) */
.tgk-file { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; margin: 0 0 4px; font-weight: 400; }
.tgk-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tgk-file__btn { display: inline-flex; align-items: center; background: transparent; color: var(--tgk-text); border: 2px solid var(--tgk-accent); border-radius: 999px; padding: 0.45em 1.1em; font-size: 0.9em; font-weight: 700; transition: background 0.15s, color 0.15s; }
.tgk-file:hover .tgk-file__btn, .tgk-file input:focus + .tgk-file__btn { background: var(--tgk-accent); color: #1a1a1a; }
.tgk-file__name { font-size: 0.85em; opacity: 0.75; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selector de galería (foto de perfil / portada) */
.tgk-pick-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tgk-pick__item { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid transparent; cursor: pointer; margin: 0; background: #000; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.tgk-pick-grid--cover .tgk-pick__item { width: 128px; height: 72px; border-radius: 10px; }
.tgk-pick__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgk-pick__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgk-pick__check { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--tgk-accent); color: #1a1a1a; font-weight: 800; font-size: 13px; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.tgk-pick-grid--cover .tgk-pick__check { right: 6px; bottom: 6px; }
.tgk-pick__item:hover { transform: scale(1.05); }
.tgk-pick__item:has(input:checked), .tgk-pick__item.is-current { border-color: var(--tgk-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--tgk-accent) 60%, transparent); }
.tgk-pick__item:has(input:checked) .tgk-pick__check { display: inline-flex; }
.tgk-pick__item:has(input:not(:checked)).is-current { border-color: transparent; box-shadow: none; }

/* Comentarios (discretos) */
.tgk-comments { margin-top: 18px; font-size: 0.9em; opacity: 0.85; }
.tgk-comments summary { cursor: pointer; color: var(--tgk-accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.tgk-comments summary::-webkit-details-marker { display: none; }
.tgk-comments summary::before { content: '💬'; }
.tgk-comments ul { list-style: none; margin: 10px 0 0; padding: 0; }
.tgk-comments li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tgk-comments li a { color: var(--tgk-accent); text-decoration: none; }
.tgk-comments__date { opacity: 0.6; font-size: 0.85em; margin-left: 6px; }

/* Barra "has iniciado sesión como" */
.tgk-logged { text-align: center; }
.tgk-logged__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tgk-accent); margin: 0 auto 10px; display: block; }

/* ---------- Pastilla de cabecera [tgk_user_chip] ---------- */
.tgk-chip { --tgk-chip: 36px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; text-decoration: none !important; color: inherit; line-height: 1; vertical-align: middle; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.tgk-chip--pill { background: color-mix(in srgb, var(--tgk-bg) 85%, transparent); border: 1.5px solid var(--tgk-accent); border-radius: 999px; padding: 3px 12px 3px 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.tgk-chip--pill .tgk-chip__name { color: var(--tgk-text); }
.tgk-chip--pill:hover { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in srgb, var(--tgk-accent) 45%, transparent); background: color-mix(in srgb, var(--tgk-accent) 18%, var(--tgk-bg)); }
.tgk-chip--plain .tgk-chip__name { color: inherit; }
.tgk-chip--plain:hover .tgk-chip__name { color: var(--tgk-accent); }
.tgk-chip__avatar { width: var(--tgk-chip); height: var(--tgk-chip); border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--tgk-accent); background: var(--tgk-bg); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.tgk-chip__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgk-chip__avatar--empty { font-size: calc(var(--tgk-chip) * 0.5); color: var(--tgk-accent); }
.tgk-chip__name { font-weight: 700; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.tgk-chip-wrap { line-height: 1; }
/* Solo foto (sin nombre): círculo limpio */
.tgk-chip--noname.tgk-chip--pill { padding: 3px; }
.tgk-chip--noname .tgk-chip__name { display: none; }
/* Estilo "glow": nombre dorado con resplandor, como los títulos del juego (sin pastilla) */
.tgk-chip--glow { gap: 10px; }
.tgk-chip--glow .tgk-chip__name { max-width: 320px; }
.tgk-chip--glow .tgk-chip__name { color: var(--tgk-accent); font-family: var(--tgk-chip-font, Georgia, 'Playfair Display', 'Times New Roman', serif); font-weight: 800; font-size: var(--tgk-chip-name, 1.25em); letter-spacing: 0.01em; text-shadow: 0 0 8px color-mix(in srgb, var(--tgk-accent) 75%, transparent), 0 0 18px color-mix(in srgb, var(--tgk-accent) 45%, transparent); }
.tgk-chip--glow .tgk-chip__avatar { box-shadow: 0 0 10px color-mix(in srgb, var(--tgk-accent) 70%, transparent), 0 0 22px color-mix(in srgb, var(--tgk-accent) 35%, transparent); }
.tgk-chip--glow:hover .tgk-chip__name { text-shadow: 0 0 10px var(--tgk-accent), 0 0 26px color-mix(in srgb, var(--tgk-accent) 60%, transparent); }
.tgk-chip--glow:hover { transform: translateY(-1px); }
/* Tamaño y fuente del nombre configurables en cualquier estilo */
.tgk-chip--pill .tgk-chip__name, .tgk-chip--plain .tgk-chip__name { font-size: var(--tgk-chip-name, 0.95em); font-family: var(--tgk-chip-font, inherit); }
@media (max-width: 480px) { .tgk-chip__name { max-width: 110px; font-size: 0.9em; } }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.tgk-box { padding: 22px 16px 18px; border-radius: 16px; }
	.tgk-profile__cover { height: min(var(--tgk-cover-h), 40vw); }
	.tgk-profile { --tgk-avatar: 110px; }
	.tgk-profile__head { padding: 0 16px 16px; gap: 14px; }
	.tgk-profile__body { padding: 4px 16px 20px; }
	.tgk-profile__name { font-size: calc(var(--tgk-name) * 0.8); }
	.tgk-profile--card .tgk-profile__content, .tgk-profile--card .tgk-comments { padding: 0 16px 18px; }
	.tgk-profile--split .tgk-profile__content { padding: 18px 16px; }
	.tgk-grid-2 { grid-template-columns: 1fr; }
	.tgk-profile__actions { width: 100%; }
	.tgk-tabs button { font-size: 0.85em; padding: 9px 4px; }
}