/* Hispanovelas Lectoras — niveles, biblioteca, ranking y comentarios. */

/* ===== Avatar con anillo de nivel ===== */
.kl-av { --kl-tam: 48px; --kl-grosor: 3px; --kl-hueco: 2px; position: relative; display: inline-flex; flex: none; width: calc(var(--kl-tam) + 2 * (var(--kl-grosor) + var(--kl-hueco))); height: calc(var(--kl-tam) + 2 * (var(--kl-grosor) + var(--kl-hueco))); align-items: center; justify-content: center; vertical-align: middle; }
.kl-av__anillo { position: absolute; inset: 0; border-radius: 50%; background: #E9DCCB; }
.kl-av__anillo::after { content: ""; position: absolute; inset: var(--kl-grosor); border-radius: 50%; background: var(--kp-fondo, #FBF7F8); }
.kl-av__foto { position: relative; z-index: 1; width: var(--kl-tam); height: var(--kl-tam); border-radius: 50%; object-fit: cover; display: block; background: #EADDE3; }
.kl-av__foto--vacia { background: #EADDE3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9A5B3' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4.5 21c1.4-3.8 4.2-5.7 7.5-5.7s6.1 1.9 7.5 5.7'/%3E%3C/svg%3E") center / 62% no-repeat; }
.kl-av__nivel { position: absolute; z-index: 3; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 22px; padding: 1px 6px; border-radius: 10px; background: #6E5A73; color: #fff; font: 700 11px/1.5 var(--kp-sans, system-ui, sans-serif); text-align: center; box-shadow: 0 0 0 2px var(--kp-fondo, #FBF7F8); white-space: nowrap; }
.kl-av__corona { position: absolute; z-index: 3; top: calc(var(--kl-tam) * -0.26); left: 50%; width: calc(var(--kl-tam) * 0.46); transform: translateX(-50%) rotate(-8deg); fill: #E2B550; stroke: #8E6A1E; stroke-width: 1; filter: drop-shadow(0 2px 2px rgba(80, 50, 10, .3)); }
.kl-av__estrellas { position: absolute; z-index: 3; top: -4px; right: -4px; display: flex; gap: 1px; }
.kl-av__estrellas svg { width: max(10px, calc(var(--kl-tam) * 0.2)); fill: #E2B550; stroke: #fff; stroke-width: 1.5; }
.kl-av__brillos i { position: absolute; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 6px 2px rgba(255, 220, 140, .85); animation: kl-brillo 2.6s ease-in-out infinite; }
.kl-av__brillos i:nth-child(1) { top: 6%; left: 8%; }
.kl-av__brillos i:nth-child(2) { bottom: 14%; right: 2%; animation-delay: .9s; }
.kl-av__brillos i:nth-child(3) { top: 40%; left: -3px; animation-delay: 1.7s; width: 4px; height: 4px; }
@keyframes kl-brillo { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

/* Rangos: beige → rosa palo → rosa y crema → dorado → oro rosa */
@keyframes kl-giro { to { transform: rotate(360deg); } }
.kl-av--muestra .kl-av__foto--vacia { background-color: #F1E6EA; }

/* Etiqueta de nivel */
.kl-etq { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 10px; background: #F1E6EA; color: #6E5A73; font: 600 12px/1.6 var(--kp-sans, system-ui, sans-serif); white-space: nowrap; }

/* ===== Mi biblioteca ===== */
.kl-bib { padding-top: 20px; }
.kl-invita { max-width: 520px; margin: 30px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kl-invita p { margin: 0; color: var(--kp-suave, #6E5A73); }
.kl-invita__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.kl-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-cab__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.kl-cab__txt .kp-h1 { font-size: 32px; overflow-wrap: anywhere; }
.kl-cab__txt p { margin: 0; }
.kl-cab__nivel { grid-column: 1 / -1; margin-top: 8px; }
.kl-cab__nivel p { margin: 6px 0 0; }
.kl-barra { height: 10px; border-radius: 6px; background: #F1E6EA; overflow: hidden; }
.kl-barra span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--kp-acento, #B72259), #E87BA4); }
.kl-barra--fina { height: 5px; flex: 1; }
.kl-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.kl-cifras div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-cifras dt { font-size: 13px; color: var(--kp-suave, #6E5A73); }
.kl-cifras dd { margin: 0; font-family: var(--kp-serif, Georgia, serif); font-size: 34px; line-height: 1; }
.kl-tabs { margin-top: 18px !important; }
.kl-vacio { padding: 18px; border-radius: 16px; background: #F1E6EA; color: #4E3F52; }
.kl-aviso { padding: 12px 14px; border-radius: 12px; background: #FCE2EC; color: #911946; }
.kl-aviso--ok { background: #E3F2EA; color: #1E6B45; }
.kl-leyendo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kl-leyendo__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-leyendo__img img { width: 56px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.kl-leyendo__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kl-leyendo__titulo { color: var(--kp-tinta, #2A1E2C) !important; font-weight: 700; text-decoration: none; line-height: 1.3; }
.kl-leyendo__prog { display: flex; align-items: center; gap: 10px; }
.kl-tarjeta-rank { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border-radius: 18px; background: #2F0F1E; color: #FCE8F0; }
.kl-tarjeta-rank .kp-texto-suave { color: #E3C2CF; margin: 4px 0 0; }
.kl-rangos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kl-rangos__item { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-rangos__item.es-actual { border: 2px solid var(--kp-acento, #B72259); }
.kl-rangos__item.es-bloqueado { opacity: .62; }
.kl-rangos__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kl-rangos__tu { padding: 3px 10px; border-radius: 10px; background: var(--kp-acento, #B72259); color: #fff; font-weight: 700; font-size: 13px; }
.kl-ajustes { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.kl-ajustes__foto { display: flex; gap: 16px; align-items: center; }
.kl-ajustes__clave { border: 1px solid var(--kp-linea, #EADDE3); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.kl-ajustes__clave legend { font-weight: 700; padding: 0 6px; }
.kl-ajustes input[type="file"] { height: auto; padding: 10px; }
.kl-salir { margin-top: 24px; }
.kl-salir a { color: var(--kp-suave, #6E5A73); }

/* ===== Ranking de lectoras ===== */
.kl-ranking__cab { background: #2F0F1E; color: #FCE8F0; padding: 26px 0 0; }
.kl-ranking__cab p { color: #E3C2CF; margin: 8px 0 0; max-width: 560px; }
.kl-ranking__cab .kp-h1 { color: #FCE8F0; }
.kl-ranking__tabs { margin-top: 18px !important; }
.kl-ranking__tabs a { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 18px; color: #FCE8F0; text-decoration: none; font-size: 14px; font-weight: 600; }
.kl-ranking__tabs a.es-activa { background: #FCE8F0; color: #2F0F1E; }
.kl-podio { list-style: none; margin: 22px 0 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10px; max-width: 520px; }
.kl-podio__item { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.kl-podio__item strong { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
.kl-podio__item > span:not(.kl-av):not(.kl-podio__escalon) { font-size: 12px; color: #E3C2CF; }
.kl-podio__corona { width: 34px; fill: #FFC94D; margin-bottom: -2px; }
.kl-podio__escalon { width: 100%; margin-top: 8px; border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, .1); font-family: var(--kp-serif, Georgia, serif); font-size: 34px; line-height: 1; padding-top: 8px; color: #E8C8D5; }
.kl-podio__item--1 .kl-podio__escalon { height: 80px; color: #FFC94D; }
.kl-podio__item--2 .kl-podio__escalon { height: 58px; }
.kl-podio__item--3 .kl-podio__escalon { height: 42px; }
.kl-podio .kl-av { --kl-hueco: 2px; }
.kl-podio .kl-av__anillo::after, .kl-mes .kl-av__anillo::after { background: #2F0F1E; }
.kl-podio .kl-av__nivel, .kl-mes .kl-av__nivel { box-shadow: 0 0 0 2px #2F0F1E; }
.kl-ranking__lista { list-style: none; margin: 8px 0 0; padding: 0; max-width: 720px; }
.kl-ranking__lista li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--kp-linea, #EADDE3); }
.kl-ranking__lista li.es-tu { background: #FCE2EC; border-radius: 12px; }
.kl-ranking__pos { width: 30px; flex: none; font-family: var(--kp-serif, Georgia, serif); font-size: 26px; color: var(--kp-suave, #6E5A73); text-align: center; }
.kl-ranking__nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kl-ranking__nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kl-ranking__dato { font-size: 13px; color: var(--kp-suave, #6E5A73); }
.kl-tu { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--kp-acento, #B72259); background: #fff; color: var(--kp-tinta, #2A1E2C) !important; text-decoration: none; max-width: 720px; }
.kl-tu > span:nth-child(2) { flex: 1; }
.kl-tu--invita { justify-content: space-between; flex-wrap: wrap; }
.kl-nota { margin-top: 16px; }

/* Lectoras del mes (inicio) */
.kl-mes__caja { padding: 20px; border-radius: 20px; background: #2F0F1E; color: #FCE8F0; }
.kl-mes .kp-h2 { color: #FCE8F0; }
.kl-mes .kp-enlace { color: #FFB8D2 !important; }
.kl-mes__lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kl-mes__lista li { display: flex; align-items: center; gap: 12px; }
.kl-mes__pos { width: 20px; font-family: var(--kp-serif, Georgia, serif); font-size: 26px; color: #FFC94D; }
.kl-mes__nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-weight: 700; }
.kl-mes__dato { font-size: 13px; color: #E3C2CF; }

/* ===== Comentarios ===== */
.kl-coment__lista, .kl-coment__lista ol { list-style: none; margin: 0; padding: 0; }
.kl-coment__lista .children { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--kp-linea, #EADDE3); }
.kl-coment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.kl-coment__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kl-coment__autora { font-weight: 700; }
.kl-coment__fecha { font-size: 13px; color: var(--kp-suave, #6E5A73); }
.kl-coment__texto { margin-top: 6px; line-height: 1.6; overflow-wrap: anywhere; }
.kl-coment__texto p { margin: 0 0 .6em; }
.kl-coment__acciones a { font-size: 14px; font-weight: 600; text-decoration: none; }
.kl-coment--destacado .kl-coment__autora::after { content: "Autora"; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--kp-acento, #B72259); color: #fff; font-size: 11px; }

/* Aviso al subir de nivel */
.kl-sube { position: fixed; z-index: 2147483001; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -140%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 20px; border-radius: 16px; background: linear-gradient(135deg, #2F0F1E, #5C1D36); color: #FCE8F0; box-shadow: 0 12px 30px rgba(30, 14, 22, .35); transition: transform .35s ease; text-align: center; }
.kl-sube strong { color: #FFC94D; font-size: 16px; }
.kl-sube.es-visible { transform: translate(-50%, 0); }

@media (min-width: 760px) {
	.kl-cab { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); padding: 28px; }
	.kl-cab__nivel { grid-column: auto; margin-top: 0; }
	.kl-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kl-rangos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
}


/* Fotos siempre redondas (también las fotos subidas que no son cuadradas) */
.kl-av img.kl-av__foto { width: var(--kl-tam) !important; height: var(--kl-tam) !important; max-width: none !important; aspect-ratio: 1 / 1; border-radius: 50% !important; object-fit: cover; }
img.avatar, .kp-coment-av { border-radius: 50% !important; aspect-ratio: 1 / 1; object-fit: cover; }

/* Títulos de lectora */
.kl-etq { gap: 6px; }
.kl-etq__titulo { font-weight: 700; }
.kl-etq__nv { opacity: .75; font-weight: 600; }
.kl-cab__titulo { margin: 0; font-family: var(--kp-serif, Georgia, serif); font-style: italic; font-size: 22px; line-height: 1.15; color: #9E3C62; }
.kl-cab__titulo span { font-family: var(--kp-sans, system-ui, sans-serif); font-style: normal; font-size: 13px; font-weight: 700; color: var(--kp-suave, #6E5A73); margin-left: 6px; }
.kl-rangos__txt { gap: 2px; }
.kl-rangos__titulo.es-tuyo strong { color: var(--kp-acento, #B72259); }
.kl-rangos__adorno { font-size: 13px; margin-top: 2px; }

/* ===== Colores por rango (v0.1.2): todos tienen color; los altos destacan más ===== */
/* 1–10 lila suave · 11–20 rosa palo · 21–30 rosa y crema · 31–40 rosa intenso
   41–50 primer dorado · 51–70 dorado · 71–90 oro rosa · 91–100 vino y oro */

/* «Me gusta» en comentarios */
.kl-like { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--kp-linea, #EADDE3); background: transparent; color: var(--kp-suave, #6E5A73); font: 600 13px var(--kp-sans, system-ui, sans-serif); cursor: pointer; }
.kl-like svg { fill: none; stroke: currentColor; stroke-width: 1.9; }
.kl-like.es-activo { color: #C7215E; border-color: #F4BAD0; background: #FDE5EE; }
.kl-like.es-activo svg { fill: currentColor; }
.kl-like.es-latido svg { animation: kl-latido .45s ease; }
@keyframes kl-latido { 40% { transform: scale(1.35); } }
.kl-like__n:empty { display: none; }
.kl-like__txt:empty { display: none; }
.kapi-lector .kl-like { color: var(--l-suave); border-color: var(--l-linea); }

/* Ranking por niveles de importancia */
.kl-top10 { margin-top: 26px; }
.kl-top10__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.kl-top10__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); box-shadow: 0 6px 18px rgba(47, 15, 30, .06); }
.kl-top10__item.es-tu { border: 2px solid var(--kp-acento, #B72259); }
.kl-top10__pos { width: 34px; flex: none; text-align: center; font-family: var(--kp-serif, Georgia, serif); font-size: 34px; line-height: 1; color: #B72259; }
.kl-top10__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kl-top10__txt strong { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-dest, .kl-resto { margin-top: 28px; }
.kl-compacta { list-style: none; margin: 8px 0 0; padding: 0; max-width: 720px; }
.kl-compacta li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--kp-linea, #EADDE3); font-size: 14px; }
.kl-compacta li.es-tu { background: #FCE2EC; border-radius: 10px; }
.kl-compacta .kl-av { --kl-grosor: 2px; --kl-hueco: 1px; }
.kl-compacta__pos { width: 34px; color: var(--kp-suave, #6E5A73); font-weight: 700; text-align: right; }
.kl-compacta__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kl-compacta__nv, .kl-compacta__dato { color: var(--kp-suave, #6E5A73); font-size: 13px; white-space: nowrap; }
@media (min-width: 760px) { .kl-top10__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lectoras del mes: la primera, destacada con corona */
.kl-mes__caja { position: relative; overflow: hidden; background: linear-gradient(150deg, #2F0F1E 55%, #4B192E); }
.kl-mes__reina { position: relative; display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; padding: 16px; border-radius: 18px; background: linear-gradient(120deg, rgba(255, 201, 77, .16), rgba(244, 179, 202, .12)); border: 1px solid rgba(255, 201, 77, .45); }
.kl-mes__corona { position: absolute; top: -2px; left: 46px; width: 36px; fill: #FFC94D; transform: rotate(-10deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); z-index: 4; }
.kl-mes__reina .kl-av__anillo::after { background: #3B1325; }
.kl-mes__reina .kl-av__nivel { box-shadow: 0 0 0 2px #3B1325; }
.kl-mes__reina-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.kl-mes__reina-txt strong { font-family: var(--kp-serif, Georgia, serif); font-weight: 400; font-size: 26px; line-height: 1.05; color: #FFF3D6; overflow-wrap: anywhere; }
.kl-mes__puesto { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #FFC94D; }
.kl-mes__lista .kl-mes__pos { color: #E8C8D5; }
.kl-tu { margin-top: 18px; }
.kl-ranking .kp-rk-switch { margin-top: 14px; }
.kl-mes__nombre .kl-etq, .kl-ranking__nombre .kl-etq { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kl-mes__dato { flex: none; }

/* ===== Pétalos ===== */
.kl-petalo { color: #E87BA4; flex: none; vertical-align: -3px; }
.kl-chip-petalos { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 12px; border-radius: 14px; background: #FDE5EE; color: #911946; font-size: 13px; font-weight: 600; text-decoration: none; }
.kl-racha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dias dias" "txt btn" "saldo saldo"; gap: 10px 12px; align-items: center; margin: 16px 0 0; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #FFF3F7, #FFF8EC); border: 1px solid #F4D2DF; }
.kl-racha__dias { grid-area: dias; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kl-racha__dias span { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 10px; background: #fff; border: 1px dashed #EBC6D4; }
.kl-racha__dias span .kl-petalo { color: #EBD2DC; }
.kl-racha__dias span.es-hecho { background: linear-gradient(135deg, #F8C8DA, #F2D88F); border: 0; }
.kl-racha__dias span.es-hecho .kl-petalo { color: #B72259; }
.kl-racha__dias span:last-child { border-color: #E2B550; }
.kl-racha__txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kl-racha__txt strong { font-size: 16px; }
.kl-racha__msg { font-size: 13px; color: #6E5A73; }
.kl-racha__btn { grid-area: btn; }
.kl-racha__btn[disabled] { opacity: .55; }
.kl-racha__btn.es-ganado { opacity: 1; background: #1E6B45; animation: kl-latido .45s ease; }
.kl-racha__saldo { grid-area: saldo; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6E5A73; }
.kl-racha__saldo b { color: #911946; font-size: 15px; }
.kl-pet-cab { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-pet-cab__ico { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FDE5EE, #FBF1D9); }
.kl-pet-cab p { margin: 0; }
.kl-pet-cab__saldo { font-size: 18px; }
.kl-pet-cab__saldo b { font-family: var(--kp-serif, sans-serif); font-weight: 900; font-size: 34px; color: #911946; }
.kl-canje { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #2F0F1E, #5C1D36); color: #FCE8F0; }
.kl-canje__txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.kl-canje__txt strong { font-size: 17px; color: #FFE7A8; }
.kl-canje__txt span { font-size: 13px; color: #E3C2CF; }
.kl-canje .kl-barra { background: rgba(255, 255, 255, .15); margin-top: 4px; }
.kl-canje .kp-btn[disabled] { opacity: .6; }
.kl-pet-h { margin-top: 24px !important; }
.kl-ganar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kl-ganar li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-ganar span { font-size: 14px; color: #6E5A73; }
.kl-movs { list-style: none; margin: 8px 0 0; padding: 0; }
.kl-movs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--kp-linea, #EADDE3); font-size: 14px; }
.kl-movs b { color: #1E6B45; }
.kl-movs b.es-gasto { color: #911946; }
@media (min-width: 760px) {
	.kl-racha { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "dias txt saldo btn"; }
	.kl-racha__dias { width: 270px; }
	.kl-ganar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Canjes, logros y marco especial ===== */

.kl-chip-logros { background: #FBF1D9; color: #7E5B12; margin-right: 6px; }
.kl-tienda { display: grid; gap: 10px; margin-top: 10px; }
.kl-tienda__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin: 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-tienda__item strong { grid-column: 1; }
.kl-tienda__item > .kp-texto-suave { grid-column: 1; font-size: 13px; }
.kl-tienda__item .kp-btn, .kl-tienda__precio { grid-column: 2; grid-row: 1 / 3; }
.kl-tienda__precio { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #911946; }
.kl-premio { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #2F0F1E, #5C1D36); color: #FCE8F0; box-shadow: 0 0 0 2px #E2B550; }
.kl-premio__img { width: 70px; height: auto; border-radius: 6px; flex: none; }
.kl-premio p { margin: 0 0 6px; }
.kl-premio__t { color: #FFC94D; font-weight: 800; }
.kl-logros { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kl-logro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); opacity: .6; }
.kl-logro.es-conseguido { opacity: 1; border-color: #EBD39B; background: linear-gradient(135deg, #fff, #FFF8EC); }
.kl-logro__ico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F1E6EA; color: #BAA4AF; }
.kl-logro__ico.es-conseguido { background: linear-gradient(135deg, #F8C8DA, #F2D88F); color: #911946; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E2B550; }
.kl-logro__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kl-logro__txt span { font-size: 13px; color: #6E5A73; }
.kl-logro__bono { font-size: 13px; font-weight: 800; color: #A97D25; white-space: nowrap; }
.kl-invita-pet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; margin-top: 16px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, #FFF3F7, #FFF8EC); border: 1px solid #F4D2DF; }
.kl-invita-pet__ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; }
.kl-invita-pet__txt p { margin: 4px 0 0; font-size: 14px; color: #4E3F52; }
.kl-invita-pet .kp-btn { grid-column: 1 / -1; }
.kl-racha__saldo a { margin-left: 8px; color: var(--kp-acento, #B72259); font-weight: 700; text-decoration: none; }
.kl-desbloquear { display: flex; flex-direction: column; gap: 6px; }
.kl-desbloquear .kp-btn { width: 100%; }
.kl-desbloquear__saldo { margin: 0; font-size: 13px; opacity: .8; }
.kl-destacar { display: inline; margin: 0; }
.kl-destacado-etq { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px; background: linear-gradient(90deg, #F8C8DA, #F2D88F); color: #701D3C; font-size: 12px; font-weight: 800; }
.kl-coment--resaltado > .kl-coment { margin: 8px 0; padding: 12px 14px; border-radius: 18px; background: #FFF6FA; box-shadow: 0 0 0 1.5px #F4BAD0; }
.kl-sube--logro strong { color: #FFC94D; }
@media (min-width: 760px) {
	.kl-tienda, .kl-logros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kl-invita-pet { grid-template-columns: auto minmax(0, 1fr) auto; }
	.kl-invita-pet .kp-btn { grid-column: auto; }
}

/* =====================================================================
   v0.5 — Centro de pétalos rediseñado
   ===================================================================== */
.kl-petalo { color: inherit; vertical-align: -4px; filter: drop-shadow(0 1px 1px rgba(145, 25, 70, .25)); }

/* Moneda en la cabecera de la web */
.kl-cab-moneda { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px 0 6px; margin-right: 2px; border-radius: 18px; background: linear-gradient(135deg, #FFF0F6, #FFF7E6); border: 1px solid #F4CEDD; color: #911946; text-decoration: none; font-weight: 800; font-size: 14px; }
.kl-cab-moneda__punto { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #B72259; box-shadow: 0 0 0 2px #fff; animation: kl-latido 1.6s ease-in-out infinite; }

/* Chip del perfil, más visible */
.kl-chip-petalos { padding: 6px 14px 6px 8px; border-radius: 18px; background: linear-gradient(135deg, #FFE3EE, #FFF1D2); border: 1px solid #F3C5D6; color: #911946; font-size: 14px; box-shadow: 0 4px 12px rgba(183, 34, 89, .12); }
.kl-chip-petalos b { font-size: 15px; }
.kl-chip-petalos span { text-decoration: underline; text-underline-offset: 3px; }

/* Cartera */
.kl-centro { padding-top: 26px; }
.kl-cartera { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 22px; border-radius: 24px; color: #FCE8F0; background: linear-gradient(140deg, #2F0F1E 0%, #5C1D36 60%, #7C2849 100%); box-shadow: 0 14px 34px rgba(47, 15, 30, .28); }
.kl-cartera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 20%, rgba(255, 201, 77, .22), transparent 35%), radial-gradient(circle at 95% 90%, rgba(255, 160, 197, .25), transparent 40%), radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px); background-size: auto, auto, 16px 16px; }
.kl-cartera__moneda { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 77, .35), transparent 70%); animation: kl-flota 3.5s ease-in-out infinite; }
@keyframes kl-flota { 50% { transform: translateY(-4px) rotate(-4deg); } }
.kl-cartera__txt { display: flex; flex-direction: column; min-width: 0; }
.kl-cartera__etq { font-size: 13px; font-weight: 700; color: #FFD9E7; }
.kl-cartera__saldo { font-family: var(--kp-serif, sans-serif); font-weight: 900; font-size: 46px; line-height: 1; color: #FFF3D6; letter-spacing: -.02em; }
.kl-cartera__total { font-size: 13px; color: #E3C2CF; }
.kl-cartera__meta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #FCE8F0; }
.kl-cartera__meta b { color: #FFC94D; }
.kl-cartera .kl-barra { background: rgba(255, 255, 255, .16); }
.kl-cartera .kl-barra span { background: linear-gradient(90deg, #FFC94D, #FF9FC5); }
.kl-cartera__btns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kl-cartera__btns .kp-btn { width: 100%; }
.kl-btn-transp { background: rgba(255, 255, 255, .14); }

/* Pasos */
.kl-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kl-pasos li { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-pasos__n { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F8C8DA, #F2D88F); color: #911946; font-weight: 900; font-size: 14px; }
.kl-pasos strong { font-size: 15px; }
.kl-pasos li > span:last-child { font-size: 12px; color: #6E5A73; line-height: 1.35; }

/* Misiones */
.kl-misiones { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kl-mision { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-mision__ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #FDE5EE; color: #B72259; }
.kl-mision__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kl-mision__txt strong { font-size: 14px; }
.kl-mision__num { font-size: 13px; color: #6E5A73; font-weight: 700; }
.kl-mision__premio { min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 12px; background: #FFF1D2; color: #7E5B12; font-size: 13px; font-weight: 800; }
.kl-mision.es-hecha { background: linear-gradient(135deg, #F2FAF5, #fff); border-color: #BFE3CD; }
.kl-mision.es-hecha .kl-mision__ico { background: #DDF2E5; color: #1E6B45; }
.kl-mision.es-hecha .kl-mision__premio { background: #1E6B45; color: #fff; }
.kl-mision.es-hecha .kl-barra span { background: #1E6B45; }

/* Racha más vistosa */
.kl-racha { background: linear-gradient(135deg, #FFF0F6, #FFF8EA); border: 1.5px solid #F3C5D6; box-shadow: 0 8px 22px rgba(183, 34, 89, .08); }
.kl-racha__dias span { height: 34px; border-radius: 12px; }
.kl-racha__btn:not([disabled]) { background: linear-gradient(135deg, #C99A3D, #B72259); box-shadow: 0 6px 16px rgba(183, 34, 89, .3); animation: kl-pulso 2s ease-in-out infinite; }
@keyframes kl-pulso { 50% { box-shadow: 0 6px 16px rgba(183, 34, 89, .3), 0 0 0 6px rgba(201, 154, 61, .22); } }
@media (prefers-reduced-motion: reduce) { .kl-racha__btn, .kl-cartera__moneda, .kl-cab-moneda__punto { animation: none !important; } }

/* Recompensas */
.kl-recompensas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.kl-recompensa { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-recompensa.es-alcanzable { border-color: #E2B550; box-shadow: 0 8px 20px rgba(201, 154, 61, .16); }
.kl-recompensa__ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2F0F1E, #5C1D36); color: #FFC94D; }
.kl-recompensa--vip { grid-column: 1 / -1; background: linear-gradient(135deg, #FFF8EC, #FDE9F1); border-color: #E2B550; }
.kl-recompensa__tit { font-size: 15px; line-height: 1.25; }
.kl-recompensa__desc { font-size: 12.5px; color: #6E5A73; line-height: 1.4; flex: 1; }
.kl-recompensa__precio { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 10px 3px 4px; border-radius: 14px; background: #FDE5EE; color: #911946; font-weight: 900; font-size: 14px; }
.kl-recompensa form .kp-btn { width: 100%; }
.kl-recompensa__nota { font-size: 12.5px; font-weight: 700; color: #A97D25; }

/* Formas de ganar */
.kl-formas { display: grid; gap: 8px; margin-top: 10px; }
.kl-forma { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); }
.kl-forma__ico { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FDE5EE, #FFF1D2); color: #B72259; }
.kl-forma__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kl-forma__txt span { font-size: 13px; color: #6E5A73; line-height: 1.35; }
.kl-forma__val { padding: 5px 10px; border-radius: 14px; background: linear-gradient(135deg, #B72259, #C99A3D); color: #fff; font-weight: 900; font-size: 13px; white-space: nowrap; }
.kl-pet-letra { margin-top: 8px; font-size: 13px; }
.kl-movs li { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.kl-movs__ico { color: #B72259; display: flex; }

/* Logros por categorías */
.kl-logros-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.kl-logros-cab__n { font-size: 14px; color: #6E5A73; }
.kl-logros-cab__n b { font-size: 22px; color: #911946; }
.kl-cats { display: grid; gap: 10px; margin-top: 12px; }
.kl-cat { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); display: flex; flex-direction: column; gap: 8px; }
.kl-cat__cab { display: flex; align-items: center; gap: 12px; }
.kl-cat__ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F8C8DA, #F2D88F); color: #911946; flex: none; }
.kl-cat__nom { display: flex; flex-direction: column; }
.kl-cat__nom span { font-size: 13px; color: #6E5A73; }
.kl-cat__sig { margin: 0; font-size: 13.5px; color: #4E3F52; }
.kl-cat__bono { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 10px; background: #FFF1D2; color: #7E5B12; font-weight: 800; font-size: 12px; }
.kl-cat__medallas { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.kl-cat__medallas li { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #E7CED8; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.kl-cat__medallas li.es-ok { border: 0; background: linear-gradient(135deg, #EB75A2, #C99A3D); box-shadow: 0 2px 6px rgba(183, 34, 89, .25); }
@media (min-width: 760px) {
	.kl-cartera { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); }
	.kl-cartera__meta { grid-column: auto; }
	.kl-cartera__btns { grid-column: 1 / -1; display: flex; }
	.kl-cartera__btns .kp-btn { width: auto; }
	.kl-recompensas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kl-recompensa--vip { grid-column: span 2; }
	.kl-formas, .kl-cats, .kl-misiones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Barras siempre visibles dentro de tarjetas en columna */
.kl-cat .kl-barra, .kl-mision .kl-barra, .kl-cartera .kl-barra, .kl-logros-cab + .kl-barra, .kl-centro .kl-barra { display: block; flex: none; width: 100%; }
.kl-cat .kl-barra--fina, .kl-mision .kl-barra--fina { height: 6px; }
.kl-logros-cab + .kl-barra { height: 8px; }
.kl-chip-petalos { white-space: nowrap; max-width: 100%; }
.kl-cartera__vip { margin-top: 4px; font-size: 13px; font-weight: 800; color: #FFC94D; }

.kl-premios-mes { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 201, 77, .12); color: #FFE7A8; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(226, 181, 80, .45); }
.kl-premios-mes b { color: #FFC94D; }
.kl-cofre-vip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #FFF8EC, #FDE9F1); border: 1.5px solid #E2B550; }
.kl-cofre-vip__ico { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2F0F1E, #5C1D36); color: #FFC94D; }
.kl-cofre-vip__txt { display: flex; flex-direction: column; gap: 2px; }
.kl-cofre-vip__txt span { font-size: 13px; color: #6E5A73; }
.kl-cofre-vip:not(.es-libre) { opacity: .75; }
.kl-sube--premio strong { color: #FFC94D; }

.kl-pase-ficha { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #FFF3F7, #FFF8EC); border: 1px solid #F4D2DF; }
.kl-pase-ficha p { margin: 0 0 10px; font-size: 14px; color: #4E3F52; }
.kl-pase-ficha .kp-btn { width: 100%; }
.kl-pase-tiene { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: #FDE5EE; color: #911946; font-size: 14px; font-weight: 600; }
.kl-pase-tiene a { color: #911946; }
.kp-candado--vip .kl-pase-form .kp-btn { border-style: dashed; }

.kl-premios-mes { align-items: flex-start; }
.kl-premios-mes ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.kl-premios-mes li { display: flex; gap: 8px; color: #FCE8F0; }
.kl-premios-mes li span { min-width: 84px; color: #FFC94D; font-weight: 800; }
.kl-premios-mes small { display: block; font-size: 12px; color: #E3C2CF; line-height: 1.45; }

/* Nombre de color */
.kl-nombre { font-weight: 800; }
.kl-nombre--rosa { color: #DB2E73 !important; }
.kl-nombre--coral { color: #EF0531 !important; }
.kl-nombre--dorado { color: #A9790B !important; }
.kl-nombre--esmeralda { color: #0F8A6B !important; }
.kl-nombre--cielo { color: #1C7ED6 !important; }
.kl-nombre--lila { color: #8E5BD0 !important; }
.kl-nombre--oro-rosa { background: linear-gradient(90deg, #C7215E, #C99A3D, #C7215E); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: kl-brillo 4s linear infinite; }
@keyframes kl-brillo { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .kl-nombre--oro-rosa { animation: none; } }
html[data-kp-tema="noche"] .kl-nombre--rosa { color: #FF8FBA !important; }
html[data-kp-tema="noche"] .kl-nombre--coral { color: #FF6B86 !important; }
html[data-kp-tema="noche"] .kl-nombre--dorado { color: #FFD166 !important; }
html[data-kp-tema="noche"] .kl-nombre--esmeralda { color: #5FE0B8 !important; }
html[data-kp-tema="noche"] .kl-nombre--cielo { color: #7CC0FF !important; }
html[data-kp-tema="noche"] .kl-nombre--lila { color: #C6A4FF !important; }
.kl-color { margin-top: 14px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--kp-linea, #EADDE3); display: flex; flex-direction: column; gap: 10px; }
.kl-color__cab { display: flex; flex-direction: column; gap: 2px; }
.kl-color__cab span { font-size: 13px; }
.kl-color__vista { margin: 0; font-size: 14px; color: #6E5A73; }
.kl-color__vista .kl-nombre { font-size: 16px; }
.kl-color__opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kl-color__op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; border: 1.5px solid var(--kp-linea, #EADDE3); cursor: pointer; text-align: center; }
.kl-color__op input { position: absolute; opacity: 0; pointer-events: none; }
.kl-color__op:has(input:checked) { border-color: #B72259; background: #FFF3F7; }
.kl-color__op.es-bloq { opacity: .5; cursor: not-allowed; }
.kl-color__muestra { width: 28px; height: 28px; border-radius: 50%; }
.kl-color__muestra--rosa { background: #DB2E73; } .kl-color__muestra--coral { background: #EF0531; } .kl-color__muestra--dorado { background: #C99A3D; }
.kl-color__muestra--esmeralda { background: #0F8A6B; } .kl-color__muestra--cielo { background: #1C7ED6; } .kl-color__muestra--lila { background: #8E5BD0; }
.kl-color__muestra--oro-rosa { background: linear-gradient(135deg, #C7215E, #C99A3D); }
.kl-color__nom { font-size: 12px; font-weight: 700; color: #4E3F52; }
.kl-color .kp-btn { align-self: flex-start; }
/* Evento */
.kl-evento { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #B72259, #C99A3D); color: #fff; box-shadow: 0 10px 24px rgba(183, 34, 89, .25); }
.kl-evento div { display: flex; flex-direction: column; gap: 2px; }
.kl-evento span { font-size: 14px; opacity: .95; }
.kl-centro .kl-evento { margin: 0 0 14px; }

/* Pestañas de Mi biblioteca: todas a la vista (cuadrícula en el móvil) */
.kl-tabs.kp-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
.kl-tabs .kp-chip { justify-content: center; text-align: center; padding: 0 6px; min-height: 40px; font-size: 13px; white-space: nowrap; }
@media (min-width: 760px) { .kl-tabs.kp-chips { display: flex; flex-wrap: wrap; } .kl-tabs .kp-chip { padding: 0 16px; font-size: 14px; } }

.kl-premio-chip { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 6px; padding: 4px 11px; border-radius: 14px; background: #FBF1D9; color: #7E5B12; font-size: 12.5px; font-weight: 800; }
.kl-ranking__cab .kl-premio-chip, .kl-podio + .kl-premio-chip { background: rgba(255, 201, 77, .15); color: #FFE7A8; }
.kl-libres { margin-top: 18px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed #EBC6D4; color: #6E5A73; font-size: 14px; text-align: center; }
.kp-paginas .current, .kp-paginas a { white-space: nowrap; }

.kl-pase-select { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--kp-linea, #EADDE3); background: #fff; font: inherit; font-size: 15px; color: var(--kp-tinta, #2A1E2C); }

/* Ranking en ordenador: mismo criterio que el de novelas (podio centrado, listas a todo el ancho) */
@media (min-width: 760px) {
	.kl-podio { margin-left: auto; margin-right: auto; }
	.kl-tu, .kl-ranking__lista, .kl-compacta { max-width: none; }
	.kl-premios-mes { max-width: none; }
}
@media (min-width: 1000px) {
	.kl-ranking__lista, .kl-compacta { columns: 2; column-gap: 40px; }
	.kl-ranking__lista li, .kl-compacta li { break-inside: avoid; }
}

/* ===== Adornos de la foto por nivel: uno nuevo cada 5 niveles (20 en total) ===== */
/* Halo: desde el oro radiante; más intenso al final */
/* Estrellas por color: bronce, plata, oro */
/* Corona de plata (tiara) en el zafiro; dorada desde el rubí */
/* Título grande del perfil */
.kl-cab__titulo[class*="kl-r"] { color: hsl(270 30% 40%); }
@media (prefers-reduced-motion: reduce) { .kl-av__anillo, .kl-av__brillos i { animation: none !important; } }






/* Alitas: no en la foto pequeña de la cabecera ni en las listas compactas */
.kp-cabecera .kl-av__alas, .kl-compacta .kl-av__alas, .kl-cab-moneda .kl-av__alas { display: none; }
.kp-cabecera .kl-av, .kl-compacta .kl-av { margin-inline: 0 !important; }
/* En la cabecera del perfil (foto grande) son más contenidas para no apretar el texto */
.kl-cab .kl-av__alas .kl-ala { width: calc(var(--kl-tam) * var(--kl-ala, .55) * .62); top: calc(var(--kl-tam) * 0.02); }
.kl-cab .kl-av:has(.kl-av__alas) { margin-inline: calc(var(--kl-tam) * var(--kl-ala-hueco, .3) * .45); }

/* Personajes ilustrados */
.kl-personajes { margin: 4px 0 14px; padding: 0; border: 0; }
.kl-personajes legend { margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.kl-personajes__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.kl-personajes__op { position: relative; cursor: pointer; }
.kl-personajes__op input { position: absolute; opacity: 0; pointer-events: none; }
.kl-personajes__op img { display: block; width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; transition: transform .15s, border-color .15s; }
.kl-personajes__op input:checked + img { border-color: var(--kp-acento, #B72259); transform: scale(1.06); }
.kl-personajes__op input:focus-visible + img { outline: 2px solid var(--kp-acento, #B72259); outline-offset: 2px; }

/* En la cabecera de la web y en listas compactas, sin detalles */
.kp-cabecera .kl-deco, .kp-cabecera .kl-gemas, .kl-compacta .kl-deco, .kl-compacta .kl-gemas { display: none; }



/* ===== Adornos de la foto: 15 (cada 5 niveles hasta el 50; cada 10 desde el 51) ===== */
.kl-av { isolation: isolate; --kl-radio: calc((var(--kl-tam) + 2 * (var(--kl-grosor) + var(--kl-hueco))) / 2); }
/* Capas: anillo → detalles → foto → marco VIP → diamante VIP → corona → número */
.kv-av-diamante { z-index: 6 !important; }
.kl-av__nivel { z-index: 7 !important; }
.kl-deco { position: absolute; z-index: 2; left: 50%; top: 50%; width: max(10px, calc(var(--kl-tam) * .3)); height: max(10px, calc(var(--kl-tam) * .3)); transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--kl-radio) - 1px)); pointer-events: none; }
.kl-deco svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); }
.kl-deco--icono { width: max(15px, calc(var(--kl-tam) * .42)); height: max(15px, calc(var(--kl-tam) * .42)); }
.kl-deco--icono svg { transform: rotate(calc(-1 * var(--a))); }
/* Brote */ .kl-deco--brote .t { fill: none; stroke: hsl(140 45% 38%); stroke-width: 2.2; stroke-linecap: round; } .kl-deco--brote .h { fill: hsl(135 55% 52%); stroke: #fff; stroke-width: 1.2; }
/* Flor */ .kl-deco--flor .p circle { fill: hsl(340 85% 76%); stroke: #fff; stroke-width: 1; } .kl-deco--flor .c { fill: hsl(45 95% 62%); stroke: #fff; stroke-width: 1; }
/* Mariposa */ .kl-deco--mariposa .a1 { fill: hsl(270 80% 72%); stroke: #fff; stroke-width: 1.1; } .kl-deco--mariposa .a2 { fill: hsl(200 85% 70%); stroke: #fff; stroke-width: 1.1; } .kl-deco--mariposa .cu { stroke: hsl(270 40% 28%); stroke-width: 1.6; stroke-linecap: round; }
.kl-deco--mariposa svg { animation: kl-aleteo-m 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes kl-aleteo-m { 0%, 100% { transform: rotate(calc(-1 * var(--a))) scaleX(1); } 50% { transform: rotate(calc(-1 * var(--a))) scaleX(.78); } }
/* Luna */ .kl-deco--luna .l { fill: hsl(48 100% 76%); stroke: #fff; stroke-width: 1; } .kl-deco--luna .e { fill: hsl(48 100% 86%); }
.kl-deco--chispa { width: max(7px, calc(var(--kl-tam) * .16)); height: max(7px, calc(var(--kl-tam) * .16)); } .kl-deco--chispa svg path { fill: hsl(48 100% 82%); }
/* Corazones */ .kl-deco--corazon svg path { fill: hsl(352 85% 62%); stroke: #fff; stroke-width: 1.6; } .kl-deco--c1 { width: max(12px, calc(var(--kl-tam) * .36)); height: max(12px, calc(var(--kl-tam) * .36)); }
/* Cerezo */ .kl-deco--cerezo svg .p path { fill: hsl(345 90% 86%); stroke: hsl(340 70% 70%); stroke-width: .8; } .kl-deco--cerezo svg .c { fill: hsl(340 75% 58%); }
/* Perlas */ .kl-deco--perla { width: max(6px, calc(var(--kl-tam) * .14)); height: max(6px, calc(var(--kl-tam) * .14)); } .kl-deco--perla svg circle { fill: hsl(40 40% 97%); stroke: hsl(190 30% 70%); stroke-width: .8; } .kl-deco--perla svg .b { fill: #fff; stroke: none; }
/* Lazo */ .kl-deco--lazo { width: max(20px, calc(var(--kl-tam) * .56)); height: max(12px, calc(var(--kl-tam) * .34)); } .kl-deco--lazo .la { fill: hsl(346 75% 56%); stroke: #fff; stroke-width: 1.2; } .kl-deco--lazo .n { fill: hsl(346 70% 46%); stroke: #fff; stroke-width: 1; }
/* Laurel */ .kl-deco--hoja { width: max(12px, calc(var(--kl-tam) * .32)); height: max(8px, calc(var(--kl-tam) * .2)); } .kl-deco--hoja svg { transform: rotate(90deg); } .kl-deco--hoja svg path { fill: hsl(42 65% 52%); stroke: #fff; stroke-width: 1; } .kl-deco--hoja .kl-deco__vena { fill: none; stroke: #fff; stroke-width: .8; opacity: .6; }

/* Gema */ .kl-deco--gema { width: max(16px, calc(var(--kl-tam) * .4)); height: max(16px, calc(var(--kl-tam) * .4)); } .kl-deco--gema .g { fill: hsl(348 78% 50%); stroke: #fff; stroke-width: 1.3; } .kl-deco--gema .gl { fill: none; stroke: #fff; stroke-width: .8; opacity: .6; }
.kl-r0 { --kl-grosor: 3px; } .kl-r0 .kl-av__anillo { background: hsl(150 45% 70%); } .kl-r0 .kl-av__nivel { background: hsl(152 45% 40%); } .kl-etq.kl-r0 { background: hsl(150 55% 92%); color: hsl(152 50% 26%); }
.kl-r1 { --kl-grosor: 3px; } .kl-r1 .kl-av__anillo { background: hsl(340 75% 78%); } .kl-r1 .kl-av__nivel { background: hsl(340 60% 52%); } .kl-etq.kl-r1 { background: hsl(340 85% 94%); color: hsl(340 55% 36%); }
.kl-r2 { --kl-grosor: 3px; } .kl-r2 .kl-av__anillo { background: conic-gradient(hsl(275 70% 78%), hsl(200 80% 80%), hsl(275 70% 78%)); } .kl-r2 .kl-av__nivel { background: hsl(275 50% 52%); } .kl-etq.kl-r2 { background: hsl(275 80% 94%); color: hsl(275 50% 34%); }
.kl-r99 { --kl-grosor: 4px; } .kl-r99 .kl-av__anillo { background: conic-gradient(hsl(232 55% 30%), hsl(240 50% 48%), hsl(232 55% 30%)); } .kl-r99 .kl-av__nivel { background: hsl(232 55% 34%); } .kl-etq.kl-r99 { background: hsl(232 60% 92%); color: hsl(232 55% 28%); }
.kl-r3 { --kl-grosor: 4px; } .kl-r3 .kl-av__anillo { background: hsl(8 85% 68%); } .kl-r3 .kl-av__nivel { background: hsl(6 70% 52%); } .kl-etq.kl-r3 { background: hsl(10 95% 93%); color: hsl(6 65% 36%); }
.kl-r4 { --kl-grosor: 4px; } .kl-r4 .kl-av__anillo { background: conic-gradient(hsl(345 80% 88%), hsl(340 70% 80%), hsl(345 80% 88%)); } .kl-r4 .kl-av__nivel { background: hsl(342 60% 56%); } .kl-etq.kl-r4 { background: hsl(345 85% 95%); color: hsl(342 55% 38%); }
.kl-r5 { --kl-grosor: 5px; } .kl-r5 .kl-av__anillo { background: conic-gradient(hsl(258 60% 62%), hsl(310 65% 72%), hsl(28 95% 72%), hsl(310 65% 72%), hsl(258 60% 62%)); box-shadow: 0 0 10px hsl(280 70% 65% / .45); } .kl-r5 .kl-av__nivel { background: linear-gradient(90deg, hsl(258 55% 50%), hsl(300 55% 52%)); } .kl-etq.kl-r5 { background: hsl(270 80% 94%); color: hsl(265 50% 32%); }
.kl-r6 { --kl-grosor: 5px; } .kl-r6 .kl-av__anillo { background: conic-gradient(hsl(195 70% 82%), hsl(210 40% 98%), hsl(200 55% 70%), hsl(210 40% 97%), hsl(195 70% 82%)); box-shadow: 0 0 10px hsl(195 80% 70% / .55); } .kl-r6 .kl-av__nivel { background: linear-gradient(hsl(200 60% 55%), hsl(205 60% 40%)); } .kl-etq.kl-r6 { background: hsl(198 70% 93%); color: hsl(205 60% 28%); }
.kl-r7 { --kl-grosor: 5px; } .kl-r7 .kl-av__anillo { background: conic-gradient(hsl(212 12% 76%), hsl(210 20% 98%), hsl(212 10% 58%), hsl(210 20% 96%), hsl(212 12% 76%)); box-shadow: 0 2px 8px hsl(214 25% 40% / .35); } .kl-r7 .kl-av__nivel { background: linear-gradient(hsl(212 12% 60%), hsl(214 14% 42%)); } .kl-etq.kl-r7 { background: hsl(212 25% 92%); color: hsl(214 20% 30%); }
.kl-r8 { --kl-grosor: 5px; } .kl-r8 .kl-av__anillo { background: conic-gradient(hsl(212 12% 76%), hsl(210 20% 98%), hsl(212 10% 58%), hsl(210 20% 96%), hsl(212 12% 76%)); box-shadow: 0 2px 8px hsl(214 25% 40% / .35); } .kl-r8 .kl-av__nivel { background: linear-gradient(hsl(212 12% 60%), hsl(214 14% 42%)); } .kl-etq.kl-r8 { background: hsl(212 25% 92%); color: hsl(214 20% 30%); }
.kl-r9 { --kl-grosor: 6px; } .kl-r9 .kl-av__anillo { background: conic-gradient(hsl(212 12% 76%), hsl(210 20% 98%), hsl(212 10% 58%), hsl(210 20% 96%), hsl(212 12% 76%)); box-shadow: 0 2px 8px hsl(214 25% 40% / .35); } .kl-r9 .kl-av__nivel { background: linear-gradient(hsl(212 12% 60%), hsl(214 14% 42%)); } .kl-etq.kl-r9 { background: hsl(212 25% 92%); color: hsl(214 20% 30%); }
.kl-r10 { --kl-grosor: 6px; } .kl-r10 .kl-av__anillo { background: conic-gradient(hsl(45 100% 86%), hsl(43 80% 56%), hsl(340 70% 84%), hsl(45 100% 92%), hsl(40 65% 48%), hsl(45 100% 86%)); } .kl-r10 .kl-av__nivel { background: linear-gradient(90deg, hsl(40 70% 44%), hsl(45 90% 62%), hsl(40 70% 44%)); } .kl-etq.kl-r10 { background: linear-gradient(90deg, hsl(45 100% 90%), hsl(42 90% 78%)); color: hsl(36 80% 22%); }
.kl-r11 { --kl-grosor: 7px; } .kl-r11 .kl-av__anillo { background: conic-gradient(hsl(45 100% 88%), hsl(43 80% 56%), hsl(340 70% 82%), hsl(45 100% 92%), hsl(40 65% 48%), hsl(268 60% 82%), hsl(45 100% 88%)); } .kl-r11 .kl-av__nivel { background: linear-gradient(90deg, hsl(275 60% 26%), hsl(43 85% 52%), hsl(275 60% 26%)); } .kl-etq.kl-r11 { background: linear-gradient(90deg, hsl(275 60% 20%), hsl(285 55% 32%)); color: hsl(45 100% 72%); }
.kl-r12 { --kl-grosor: 7px; } .kl-r12 .kl-av__anillo { background: conic-gradient(hsl(45 100% 88%), hsl(43 80% 56%), hsl(340 70% 82%), hsl(45 100% 92%), hsl(40 65% 48%), hsl(268 60% 82%), hsl(45 100% 88%)); } .kl-r12 .kl-av__nivel { background: linear-gradient(90deg, hsl(275 60% 22%), hsl(43 85% 52%), hsl(275 60% 22%)); } .kl-etq.kl-r12 { background: linear-gradient(90deg, hsl(275 60% 18%), hsl(285 55% 30%)); color: hsl(45 100% 72%); }
.kl-r13 { --kl-grosor: 8px; } .kl-r13 .kl-av__anillo { background: conic-gradient(hsl(45 100% 86%), hsl(43 85% 56%), hsl(275 60% 30%), hsl(43 85% 56%), hsl(45 100% 92%), hsl(275 60% 30%), hsl(45 100% 86%)); } .kl-r13 .kl-av__nivel { background: linear-gradient(90deg, hsl(275 60% 20%), hsl(43 85% 54%), hsl(275 60% 20%)); } .kl-etq.kl-r13 { background: linear-gradient(90deg, hsl(275 60% 16%), hsl(285 55% 28%)); color: hsl(45 100% 72%); }
.kl-r99 .kl-av__anillo { box-shadow: 0 0 8px hsl(232 60% 50% / .45); }



.kl-r10 .kl-av__anillo { box-shadow: 0 0 14px 2px hsl(45 95% 60% / .5); }
.kl-r11 .kl-av__anillo, .kl-r12 .kl-av__anillo { box-shadow: 0 0 0 2px hsl(43 80% 56%), 0 0 20px 4px hsl(45 100% 60% / .6); animation: kl-giro 9s linear infinite; }
.kl-r13 { --kl-hueco: 3px; } .kl-r13 .kl-av__anillo { box-shadow: 0 0 0 2px hsl(43 85% 56%), 0 0 26px 7px hsl(45 100% 60% / .7), 0 0 46px 12px hsl(275 60% 50% / .28); animation: kl-giro 7s linear infinite; }
.kl-av__corona { z-index: 5 !important; fill: hsl(45 95% 60%); stroke: hsl(36 80% 30%); }
.kl-corona__gema { fill: hsl(348 75% 50%); stroke: #fff; stroke-width: .6; } .kl-corona__gema2 { fill: hsl(195 85% 60%); stroke: #fff; stroke-width: .5; }
.kl-av__corona--joyas { width: calc(var(--kl-tam) * .58) !important; filter: drop-shadow(0 0 5px hsl(45 100% 60% / .85)); }
.kl-etq.kl-r11 .kl-etq__nv, .kl-etq.kl-r12 .kl-etq__nv, .kl-etq.kl-r13 .kl-etq__nv { color: hsl(45 90% 84%); opacity: 1; }
.kl-etq.kl-r13 { box-shadow: 0 0 0 1px hsl(43 85% 56%); }
/* Alas (51–100): crecen cada 10 niveles */
.kl-av:has(.kl-av__alas) { margin-inline: calc(var(--kl-tam) * var(--kl-ala-hueco, .3)); }
.kl-av__alas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kl-ala { position: absolute; top: calc(var(--kl-tam) * -0.06); width: calc(var(--kl-tam) * var(--kl-ala, .6)); aspect-ratio: 48 / 40; }
.kl-ala svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kl-ala--izq { right: 68%; transform-origin: 100% 60%; transform: rotate(-6deg); }
.kl-ala--der { left: 68%; transform-origin: 50% 50%; transform: scaleX(-1) rotate(-6deg); }
.kl-ala__forma { fill: var(--kl-ala-c); stroke: var(--kl-ala-borde); stroke-width: 1.4; stroke-linejoin: round; }
.kl-ala__plumas { fill: none; stroke: var(--kl-ala-borde); stroke-width: 1; stroke-linecap: round; opacity: .7; }
.kl-alas-0 { --kl-ala: .64; --kl-ala-c: hsl(210 30% 96%); --kl-ala-borde: hsl(210 14% 55%); }
.kl-alas-1 { --kl-ala: .78; --kl-ala-c: hsl(44 70% 90%); --kl-ala-borde: hsl(40 55% 50%); }
.kl-alas-2 { --kl-ala: .92; --kl-ala-c: hsl(44 85% 72%); --kl-ala-borde: hsl(38 65% 40%); }
.kl-alas-3 { --kl-ala: 1.06; --kl-ala-c: hsl(46 95% 66%); --kl-ala-borde: hsl(36 75% 34%); }
.kl-alas-4 { --kl-ala: 1.2; --kl-ala-c: hsl(46 100% 64%); --kl-ala-borde: hsl(36 80% 30%); }
.kl-alas-2 .kl-ala svg { filter: drop-shadow(0 0 3px hsl(45 95% 60% / .55)); }
.kl-alas-3 .kl-ala svg, .kl-alas-4 .kl-ala svg { filter: drop-shadow(0 0 6px hsl(45 100% 60% / .85)); }
.kl-av:has(.kl-alas-0) { --kl-ala-hueco: .3; } .kl-av:has(.kl-alas-1) { --kl-ala-hueco: .38; } .kl-av:has(.kl-alas-2) { --kl-ala-hueco: .46; } .kl-av:has(.kl-alas-3) { --kl-ala-hueco: .54; } .kl-av:has(.kl-alas-4) { --kl-ala-hueco: .62; }
.kl-alas-3 .kl-ala--izq, .kl-alas-4 .kl-ala--izq { animation: kl-aleteo-i 3.2s ease-in-out infinite; }
.kl-alas-3 .kl-ala--der, .kl-alas-4 .kl-ala--der { animation: kl-aleteo-d 3.2s ease-in-out infinite; }
@keyframes kl-aleteo-i { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-16deg); } }
@keyframes kl-aleteo-d { 0%, 100% { transform: scaleX(-1) rotate(-6deg); } 50% { transform: scaleX(-1) rotate(-16deg); } }
/* Título del perfil */
.kl-cab__titulo[class*="kl-r"] { color: hsl(330 40% 42%); }
.kl-cab__titulo.kl-r10, .kl-cab__titulo.kl-r11, .kl-cab__titulo.kl-r12, .kl-cab__titulo.kl-r13 { color: hsl(38 70% 38%); }
.kl-cab.kl-r11, .kl-cab.kl-r12, .kl-cab.kl-r13 { background: linear-gradient(135deg, #fff 55%, hsl(44 85% 92%)); border-color: hsl(43 60% 78%); }

/* ===== VIP: el círculo extra de colores (como el original), más visible y sin ruido ===== */
.kl-av__marco { position: absolute; inset: -8px; z-index: 4; border-radius: 50%; pointer-events: none; }
.kl-av__marco::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, #FF9FC5, #FFE29A, #C8A2FF, #9FE4FF, #FF9FC5);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	filter: drop-shadow(0 0 4px rgba(255, 159, 197, .75)); animation: kl-giro 6s linear infinite; }

.kp-cabecera .kl-av__marco, .kl-compacta .kl-av__marco { inset: -3px; }
@media (prefers-reduced-motion: reduce) { .kl-av__anillo, .kl-av__brillos i, .kl-ala, .kl-deco svg, .kl-av__marco::before { animation: none !important; } }
/* Los motivos del nivel (brote, flor, mariposa, lazo, gema…) quedan por encima del anillo VIP para que también se vean */
.kl-deco--icono, .kl-deco--lazo, .kl-deco--gema, .kl-deco--corazon { z-index: 5; }

/* Con alas (51+), los rayos VIP quedan detrás de las alas y un poco más grandes */


/* ===== 41–60: temática plateada ===== */
.kl-av__tiara { width: calc(var(--kl-tam) * .42) !important; top: calc(var(--kl-tam) * -0.2) !important; transform: translateX(-50%) !important; }
.kl-av__tiara path { fill: hsl(210 18% 90%); stroke: hsl(212 15% 46%); stroke-width: 1; }
.kl-av__tiara .kl-tiara__gema { fill: hsl(205 85% 62%); stroke: #fff; stroke-width: .6; }
.kl-r8 .kl-av__tiara { width: calc(var(--kl-tam) * .46) !important; }
.kl-av__corona--plata { fill: hsl(210 18% 88%) !important; stroke: hsl(212 15% 44%) !important; }
.kl-av__corona--plata .kl-corona__gema { fill: hsl(205 85% 58%); }
.kl-alas-p { --kl-ala: .5; --kl-ala-c: hsl(210 30% 97%); --kl-ala-borde: hsl(212 14% 58%); }
.kl-av:has(.kl-alas-p) { --kl-ala-hueco: .24; }
.kl-r9 .kl-alas-0 { --kl-ala-c: hsl(210 25% 93%); --kl-ala-borde: hsl(212 15% 50%); }
.kl-cab__titulo.kl-r7, .kl-cab__titulo.kl-r8, .kl-cab__titulo.kl-r9 { color: hsl(214 20% 34%); }

/* ===== Con VIP: los detalles del nivel se apartan para no chocar con el círculo VIP ===== */
.kl-av:has(.kl-av__marco) .kl-deco { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--kl-radio) - 9px)); }
.kl-av:has(.kl-av__marco) .kl-av__corona { top: calc(var(--kl-tam) * -0.26 - 7px); }
.kl-av:has(.kl-av__marco) .kl-av__tiara { top: calc(var(--kl-tam) * -0.2 - 7px) !important; }
.kl-av:has(.kl-av__marco) .kl-ala { top: calc(var(--kl-tam) * -0.06 - 4px); }
.kl-av:has(.kl-av__marco) .kl-ala--izq { right: calc(68% + 6px); }
.kl-av:has(.kl-av__marco) .kl-ala--der { left: calc(68% + 6px); }

/* 36–40: cristales de hielo */
.kl-deco--cristal { width: max(9px, calc(var(--kl-tam) * .22)); height: max(9px, calc(var(--kl-tam) * .22)); z-index: 5; }
.kl-deco--cristal-g { width: max(12px, calc(var(--kl-tam) * .3)); height: max(12px, calc(var(--kl-tam) * .3)); }
.kl-deco--cristal svg path { fill: none; stroke: hsl(198 85% 62%); stroke-width: 2.2; stroke-linecap: round; }
.kl-deco--cristal svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px hsl(195 90% 70% / .8)); animation: kl-centelleo 3s ease-in-out infinite; }
.kl-deco--cristal-g svg { animation-delay: -1.5s; }
@keyframes kl-centelleo { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
/* Tiara nueva: silueta clásica con filigrana, perlas y gema en gota */
.kl-av__tiara { width: calc(var(--kl-tam) * .56) !important; top: calc(var(--kl-tam) * -0.24) !important; filter: drop-shadow(0 1px 2px rgba(40, 50, 70, .35)); }
.kl-r8 .kl-av__tiara { width: calc(var(--kl-tam) * .6) !important; }
.kl-av__tiara .kl-tiara__cuerpo { fill: hsl(210 20% 90%); stroke: hsl(212 16% 48%); stroke-width: .9; stroke-linejoin: round; }
.kl-av__tiara .kl-tiara__filigrana { fill: none; stroke: hsl(212 16% 56%); stroke-width: .8; stroke-linecap: round; }
.kl-av__tiara .kl-tiara__banda { fill: hsl(212 14% 70%); stroke: hsl(212 16% 46%); stroke-width: .6; }
.kl-av__tiara .kl-tiara__gema { fill: hsl(205 90% 58%); stroke: #fff; stroke-width: .7; }
.kl-av__tiara .kl-tiara__perla { fill: #fff; stroke: hsl(212 16% 58%); stroke-width: .5; }
.kl-av:has(.kl-av__marco) .kl-av__tiara { top: calc(var(--kl-tam) * -0.24 - 7px) !important; }

/* 31–35: estrella fugaz sobre la foto */
.kl-av__fugaz { position: absolute; z-index: 5; left: 50%; top: calc(var(--kl-tam) * -0.34); width: calc(var(--kl-tam) * 1.05); transform: translateX(-50%); overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px hsl(45 100% 70% / .9)); }
.kl-fugaz__estela { fill: none; stroke: url(#kl-estela); stroke-width: 3.2; stroke-linecap: round; }
.kl-fugaz__estela2 { fill: none; stroke: url(#kl-estela); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.kl-fugaz__estrella { fill: hsl(46 100% 64%); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; animation: kl-centelleo 2.4s ease-in-out infinite; transform-origin: 48px 9px; }
.kl-av:has(.kl-av__marco) .kl-av__fugaz { top: calc(var(--kl-tam) * -0.34 - 7px); }
/* 41–50: corona de reina (con arcos, orbe y banda de joyas) en plata */
.kl-av__reina { width: calc(var(--kl-tam) * .54) !important; top: calc(var(--kl-tam) * -0.3) !important; transform: translateX(-50%) !important; filter: drop-shadow(0 1px 2px rgba(40, 50, 70, .35)); }
.kl-r8 .kl-av__reina { width: calc(var(--kl-tam) * .58) !important; top: calc(var(--kl-tam) * -0.33) !important; }
.kl-av__reina .kl-reina__cuerpo { fill: hsl(210 20% 90%); stroke: hsl(212 16% 46%); stroke-width: .9; stroke-linejoin: round; }
.kl-av__reina .kl-reina__arco { fill: none; stroke: hsl(210 18% 86%); stroke-width: 2.4; stroke-linecap: round; }
.kl-av__reina .kl-reina__lineas { fill: none; stroke: hsl(212 16% 54%); stroke-width: .7; }
.kl-av__reina .kl-reina__orbe { fill: hsl(210 20% 90%); stroke: hsl(212 16% 46%); stroke-width: .8; }
.kl-av__reina .kl-reina__cruz { fill: none; stroke: hsl(212 16% 46%); stroke-width: 1.1; stroke-linecap: round; }
.kl-av__reina .kl-reina__banda { fill: hsl(210 20% 90%); stroke: hsl(212 16% 46%); stroke-width: .8; }
.kl-av__reina .kl-reina__gema { fill: hsl(205 90% 56%); stroke: #fff; stroke-width: .5; }
.kl-av__reina .kl-reina__gema2 { fill: hsl(330 75% 62%); stroke: #fff; stroke-width: .4; }
.kl-av__reina .kl-reina__perla { fill: #fff; stroke: hsl(212 16% 52%); stroke-width: .6; } .kl-av__reina .kl-reina__perla--g { fill: hsl(205 90% 70%); stroke: #fff; }
.kl-av:has(.kl-av__marco) .kl-av__reina { top: calc(var(--kl-tam) * -0.3 - 7px) !important; }
.kl-av.kl-r8:has(.kl-av__marco) .kl-av__reina { top: calc(var(--kl-tam) * -0.33 - 7px) !important; }

/* ===== Distintivos del ranking ===== */
.kl-dist { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kl-dist__i { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 14px; font-size: 12px; line-height: 1.2; background: hsl(270 60% 95%); color: hsl(270 45% 30%); border: 1px solid hsl(270 40% 86%); }
.kl-dist__i svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kl-dist__i b { font-weight: 800; }
.kl-dist__i span { opacity: .8; }
.kl-dist--oro { background: linear-gradient(135deg, hsl(48 100% 88%), hsl(42 90% 72%)); color: hsl(36 80% 24%); border-color: hsl(42 70% 60%); box-shadow: 0 1px 6px hsl(43 90% 55% / .35); }
.kl-dist--plata { background: linear-gradient(135deg, hsl(210 25% 96%), hsl(212 15% 82%)); color: hsl(214 25% 28%); border-color: hsl(212 15% 70%); }
.kl-dist--bronce { background: linear-gradient(135deg, hsl(28 70% 88%), hsl(24 55% 70%)); color: hsl(22 55% 26%); border-color: hsl(24 45% 58%); }
.kl-dist--top10 { background: hsl(268 70% 94%); color: hsl(268 55% 32%); border-color: hsl(268 50% 82%); }
.kl-dist--top20 { background: hsl(330 70% 95%); color: hsl(330 50% 34%); border-color: hsl(330 50% 86%); }
.kl-dist__mas a { display: inline-flex; align-items: center; height: 100%; padding: 4px 10px; border-radius: 14px; background: var(--kp-rosa, #f3eaf7); color: var(--kp-tinta) !important; font-size: 12px; font-weight: 800; text-decoration: none; }
.kl-dist--grande .kl-dist__i { padding: 8px 14px 8px 10px; font-size: 14px; border-radius: 18px; }
.kl-dist--grande .kl-dist__i svg { width: 20px; height: 20px; }
.kl-dist-sec { margin-bottom: 8px; }

/* ===== Coronas cambiadas: coronita plateada (36–50), corona de reina (51–60) ===== */
.kl-av__corona--chica { width: calc(var(--kl-tam) * .38) !important; top: calc(var(--kl-tam) * -0.22) !important; }
.kl-av__corona--plata { fill: hsl(210 18% 88%) !important; stroke: hsl(212 15% 44%) !important; }
.kl-av__corona--plata .kl-corona__gema { fill: hsl(205 85% 58%); }
.kl-r9 .kl-av__reina { width: calc(var(--kl-tam) * .58) !important; top: calc(var(--kl-tam) * -0.33) !important; }
.kl-av.kl-r9:has(.kl-av__marco) .kl-av__reina { top: calc(var(--kl-tam) * -0.33 - 7px) !important; }
.kl-r9 .kl-alas-0 { --kl-ala-c: hsl(210 25% 93%); --kl-ala-borde: hsl(212 15% 50%); }
.kl-r12 .kl-av__corona--joyas { width: calc(var(--kl-tam) * .54) !important; }

/* ===== VIP: el círculo extra combina mejor y los adornos del nivel quedan POR ENCIMA ===== */
.kl-av__marco::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)) !important; mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)) !important; opacity: .92; }
.kl-av__marco::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 0 6px rgba(255, 190, 218, .45); }
.kl-av:has(.kl-av__marco) .kl-deco, .kl-av:has(.kl-av__marco) .kl-av__fugaz { z-index: 6 !important; }
.kl-av:has(.kl-av__marco) .kl-av__alas { z-index: 5 !important; }
.kl-av:has(.kl-av__marco) .kl-av__corona { z-index: 6 !important; }

/* ===== Perfil público desde el ranking ===== */
.kl-podio__item, .kl-top10__item, .kl-ranking__lista li, .kl-compacta li { position: relative; }
.kl-perfil-enlace { position: absolute; inset: 0; z-index: 8; border-radius: inherit; }
.kl-perfil-enlace:focus-visible { outline: 2px solid var(--kp-acento); outline-offset: 2px; }
@media (hover: hover) { .kl-top10__item:hover, .kl-ranking__lista li:hover, .kl-compacta li:hover { background: color-mix(in srgb, var(--kp-acento) 6%, transparent); } }
.kl-pp { max-width: 760px; padding-top: 16px; padding-bottom: 24px; }
.kl-pp__volver { display: inline-block; margin-bottom: 10px; }
.kl-pp__cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 16px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--kp-linea); }
.kl-pp__cab.es-vip { background: linear-gradient(160deg, #fff 60%, hsl(44 85% 93%)); border-color: hsl(43 60% 78%); }
.kl-pp__cab .kl-av { margin-bottom: 6px; }
.kl-pp__nombre { margin: 0; font-family: var(--kp-serif); font-size: 26px; line-height: 1.15; }
.kl-pp__desde { margin: 0; font-size: 13.5px; color: var(--kp-suave); }
.kl-pp__vip { margin: 0; font-size: 13px; font-weight: 800; color: hsl(36 75% 34%); }
.kl-pp__datos { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .kl-pp__datos { grid-template-columns: repeat(3, 1fr); } }
.kl-pp__datos li { padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--kp-linea); text-align: center; }
.kl-pp__datos b { display: block; font-size: 17px; line-height: 1.2; }
.kl-pp__datos span { font-size: 12.5px; color: var(--kp-suave); }
.kl-pp__libros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .kl-pp__libros { grid-template-columns: repeat(6, 1fr); } }
.kl-pp__libro { text-decoration: none; color: var(--kp-tinta) !important; }
.kl-pp__libro-img { display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--kp-linea); }
.kl-pp__libro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-pp__libro-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 12.5px; font-weight: 700; line-height: 1.25; }