/* PERFIL DE OPOSITOR: avatares, marcos, colores de nombre, insignias y la pantalla «Mi perfil». */

body:has(#v-perfil:not([hidden])) #srOpen2,body:has(#v-batallas:not([hidden])) #srOpen2{display:none!important}

/* ---------- avatar + marco ---------- */
.ob-avw{--t:34px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--t);height:var(--t);border-radius:50%;overflow:hidden;isolation:isolate;vertical-align:middle}
.ob-av{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;color:#fff;font:600 calc(var(--t) * .38)/1 var(--f-body,Inter,sans-serif);letter-spacing:.02em}
.ob-av svg{width:58%;height:58%;stroke:#fff}
.ob-avw:not(.ob-m-ninguno){padding:calc(var(--t) * .07)}
.ob-avw:not(.ob-m-ninguno) .ob-av{box-shadow:0 0 0 calc(var(--t) * .03) rgba(255,255,255,.85)}
.ob-avw::before{content:"";position:absolute;inset:-60%;z-index:0}
.ob-m-bronce::before{background:linear-gradient(135deg,#7A4520,#D9965B,#7A4520)}
.ob-m-plata::before{background:linear-gradient(135deg,#7C8796,#EEF1F5,#7C8796)}
.ob-m-oro::before{background:linear-gradient(135deg,#8A6500,#FFE08A,#B8901A,#FFE9A8,#8A6500)}
.ob-m-platino::before{background:linear-gradient(135deg,#1E6F7D,#A5F0F8,#2E95A6,#D8FBFF)}
.ob-m-diamante::before{background:conic-gradient(#4F6EF0,#A5B8FF,#22D3EE,#E0E7FF,#4F6EF0);animation:obGira 4s linear infinite}
.ob-m-leyenda::before{background:conic-gradient(#D9435B,#F59E0B,#FDE68A,#D9435B,#7A2333,#D9435B);animation:obGira 2.6s linear infinite}
.ob-m-equipo::before{background:conic-gradient(#0E6B4C,#1E9E6A,#F5C542,#FFF7D6,#1E9E6A,#0E6B4C,#F5C542,#0E6B4C);animation:obGira 2.2s linear infinite}
.ob-m-leyenda,.ob-m-equipo{box-shadow:0 0 calc(var(--t) * .25) -2px rgba(245,197,66,.55)}
@keyframes obGira{to{transform:rotate(1turn)}}

/* ---------- color del nombre ---------- */
.ob-n{font-weight:600}
.ob-e-grafito{color:var(--text,#1C2321)}
.ob-e-verde{color:#12805C}.ob-e-azul{color:#2563B8}.ob-e-granate{color:#8E1F3A}.ob-e-ambar{color:#B7791F}.ob-e-violeta{color:#6D3FC4}
.ob-e-mar,.ob-e-atardecer,.ob-e-plata,.ob-e-oro,.ob-e-matricula,.ob-e-aurora,.ob-e-llama,.ob-e-equipo{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ob-e-mar{background-image:linear-gradient(90deg,#0E7490,#12805C)}
.ob-e-atardecer{background-image:linear-gradient(90deg,#C2410C,#BE185D)}
.ob-e-plata{background-image:linear-gradient(100deg,#4B5563 20%,#A9B3C1 40%,#4B5563 60%);background-size:250% 100%;animation:obBrillo 3.2s linear infinite}
.ob-e-oro{background-image:linear-gradient(100deg,#7A5900 20%,#E0AE1E 40%,#7A5900 60%);background-size:250% 100%;animation:obBrillo 2.8s linear infinite}
.ob-e-matricula{background-image:linear-gradient(100deg,#0E6B4C 20%,#36B47E 40%,#0E6B4C 60%);background-size:250% 100%;animation:obBrillo 3s linear infinite}
.ob-e-aurora{background-image:linear-gradient(90deg,#0891B2,#7C3AED,#DB2777,#0891B2);background-size:300% 100%;animation:obFluye 6s linear infinite}
.ob-e-llama{background-image:linear-gradient(90deg,#B91C1C,#F59E0B,#FACC15,#B91C1C);background-size:300% 100%;animation:obFluye 2.4s linear infinite;filter:drop-shadow(0 0 6px rgba(245,158,11,.35))}
.ob-e-equipo{background-image:linear-gradient(90deg,#0E6B4C,#1E9E6A,#C99A1E,#E2AE2A,#C99A1E,#1E9E6A,#0E6B4C);background-size:300% 100%;animation:obFluye 3s linear infinite,obLatido 2s ease-in-out infinite;font-weight:700;letter-spacing:.01em}
@keyframes obBrillo{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes obFluye{to{background-position:300% 0}}
@keyframes obLatido{50%{filter:drop-shadow(0 0 7px rgba(233,183,48,.55))}}

/* ---------- insignias, nivel y división ---------- */
.ob-ins{--t:18px;display:inline-grid;place-items:center;width:var(--t);height:var(--t);border-radius:30%;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));color:#fff;flex:none;vertical-align:middle;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ob-ins svg{width:64%;height:64%}
.ob-ins b{font:800 calc(var(--t) * .42)/1 var(--f-body,Inter,sans-serif);letter-spacing:-.02em}
.ob-ins+.ob-ins{margin-left:3px}
.ob-nv{display:inline-flex;align-items:center;font:700 11px/1 var(--f-body);padding:3px 7px;border-radius:999px;background:rgba(23,32,28,.08);color:var(--text)}
.ob-div{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--f-body);padding:3px 8px;border-radius:999px;color:#fff;background:var(--c)}
.ob-div-diamante,.ob-div-leyenda{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff),var(--c));background-size:200% 100%;animation:obFluye 4s linear infinite}

/* ---------- Mi perfil ---------- */
.pf-cab{display:grid;gap:18px;margin-bottom:16px}
.pf-yo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pf-yo-t{flex:1;min-width:220px}
.pf-nom{font-size:28px;line-height:1.15;letter-spacing:-.01em}
.pf-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.pf-elo{font-size:12.5px;color:var(--muted)}
.pf-ins{display:flex;align-items:center;gap:4px;min-height:24px}
.pf-barra-t{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px;flex-wrap:wrap}.pf-barra-t span{color:var(--muted)}
.pf-barra>i{display:block;height:8px;border-radius:8px;background:rgba(23,32,28,.08);overflow:hidden;margin-bottom:6px}
.pf-barra>i>i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#12805C,#3CC48C)}
.pf-barra small{font-size:12px}
.pf-cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pf-cifras div{background:rgba(23,32,28,.035);border-radius:12px;padding:10px 12px}
.pf-cifras b{display:block;font-size:17px}.pf-cifras small{font-size:11.5px;color:var(--muted)}
.pf-ed{margin-bottom:16px}
.pf-ed-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pf-tabs{display:flex;gap:4px;background:rgba(23,32,28,.05);padding:4px;border-radius:12px;flex-wrap:wrap}
.pf-tabs button{border:0;background:none;padding:8px 14px;border-radius:9px;font:500 13.5px var(--f-body);color:var(--muted);cursor:pointer}
.pf-tabs button[aria-selected="true"]{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(20,40,30,.12)}
.pf-ayuda{font-size:13px;margin:0 0 12px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pf-grid-ins{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pf-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px 12px;border-radius:14px;border:1.5px solid var(--borde,rgba(23,32,28,.08));background:rgba(255,255,255,.6);cursor:pointer;font:inherit;color:var(--text);transition:transform .15s,border-color .15s}
.pf-it:hover:not(.bloq){transform:translateY(-2px);border-color:rgba(18,128,92,.35)}
.pf-it.on{border-color:#12805C;box-shadow:0 0 0 3px rgba(18,128,92,.15);background:rgba(18,128,92,.05)}
.pf-it b{font-size:13px}.pf-it small{font-size:11.5px;color:var(--muted);line-height:1.35}
.pf-it.bloq{cursor:not-allowed}.pf-it.bloq>:not(.pf-cand):not(small):not(b){filter:grayscale(1);opacity:.45}
.pf-cand{position:absolute;top:8px;right:8px;font-style:normal;color:var(--muted);font-size:10.5px}.pf-cand svg{width:15px;height:15px}
.pf-grid-ins .pf-cand{font-weight:600}
.pf-muestra{display:grid;place-items:center;min-height:56px;font-size:16.5px;line-height:1.2;max-width:100%;text-align:center;overflow-wrap:anywhere}
.pf-pie{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--borde,rgba(23,32,28,.08))}
.pf-pie span{flex:1;font-size:12.5px;min-width:200px}
.pf-como h3{margin:0 0 8px;font-size:16px}.pf-como ul{margin:0 0 12px;padding-left:18px;font-size:13.5px;line-height:1.55}
.pf-sin h2{margin:0 0 6px}
/* Tarjeta en Ajustes */
.pf-aj{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.pf-aj-t{flex:1;min-width:200px}.pf-aj-t b{display:block;font-size:17px;margin-bottom:4px}.pf-aj-t span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

html:not(.cristal) .pf-it{background:rgba(255,255,255,.04)}
html:not(.cristal) .pf-tabs button[aria-selected="true"]{background:rgba(255,255,255,.12)}
html:not(.cristal) .ob-nv{background:rgba(255,255,255,.1)}
@media (max-width:700px){.pf-cifras{grid-template-columns:repeat(2,1fr)}.pf-nom{font-size:22px}.pf-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}
@media (prefers-reduced-motion:reduce){.ob-avw::before,.ob-n,.ob-div{animation:none!important}}