/* Roles: insignias junto al nombre (roles.js). */
.rol-insignia{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:999px;background:var(--rol);color:var(--rol-tinta);font-weight:800;letter-spacing:.05em;white-space:nowrap;line-height:1.2;vertical-align:middle}
.rol-circulo{display:inline-grid;place-items:center;border-radius:50%;background:var(--rol);color:var(--rol-tinta);flex-shrink:0;vertical-align:middle}
.rol-icono{flex-shrink:0}

/* --- Panel de roles (roles-admin.html) --- */
.roles-panel{max-width:1200px}
.roles-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.roles-lista{display:grid;gap:14px}
.roles-lista h1{font-size:40px;margin:0}
.roles-lista>div>p{margin:6px 0 0;color:#afc5d3}
#roles{display:grid;gap:12px}
.roles-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px 16px;background:linear-gradient(135deg,#132b3b,#0d1926);border:1px solid #35556b;border-radius:14px;cursor:grab}
.roles-fila.arrastrando{opacity:.45}
.roles-asa{display:grid;gap:3px}.roles-asa i{display:block;width:14px;height:2px;background:#56768a}
.roles-orden{width:26px;font-size:13px;color:#8fa8b9;font-weight:700}
.roles-caja{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--rol);border:1px solid var(--rol);background:color-mix(in srgb,var(--rol) 14%,transparent);flex-shrink:0}
.roles-datos{flex:1 1 170px;min-width:0}.roles-datos>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.roles-datos strong{font-size:17px}
.roles-cuantos{font-size:14px;color:#cfe6f0;white-space:nowrap}
.roles-acciones{display:flex;gap:6px;margin-left:auto}.tournament-shell .roles-acciones button[data-subir],.tournament-shell .roles-acciones button[data-bajar]{padding:6px 10px}
.roles-pista{margin:0;padding:12px 16px;border:1px dashed #36536d;border-radius:12px;color:#9fb6c6;font-size:14px}
.roles-form{position:sticky;top:16px;padding:22px;background:#101c29;border:1px solid #304b60;border-radius:16px}
.roles-form h2{margin:0 0 16px;font-size:20px}
.tournament-shell .roles-form form{display:grid;grid-template-columns:1fr;gap:16px}
.roles-form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}.roles-form legend{font-size:14px;color:#d8ecf6;padding:0;margin-bottom:8px}
.roles-colores,.roles-iconos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tournament-shell .roles-color{width:32px;height:32px;min-height:0;padding:0;border-radius:8px;border:1px solid #ffffff33}
.tournament-shell .roles-color.active{border:3px solid #fff}
.roles-color-propio{display:grid!important;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid #ffffff33;overflow:hidden;background:conic-gradient(#ff5a5f,#ffd34d,#9ee000,#70dce4,#a88bff,#ff7ab8,#ff5a5f)}
.roles-color-propio.active{border:3px solid #fff}
.tournament-shell .roles-color-propio input{width:44px;height:44px;min-height:0;padding:0;border:0;background:none;cursor:pointer;opacity:0}
.tournament-shell .roles-icono-boton{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:10px;color:#cfe6f0}
.tournament-shell .roles-icono-boton.active{color:var(--rol);border-color:var(--rol);background:color-mix(in srgb,var(--rol) 14%,#101e2d)}
.roles-vista{display:grid;gap:10px;padding:14px;background:#0b1520;border:1px solid #22394a;border-radius:12px}
.roles-vista-titulo{font-size:12px;color:#8fa8b9;text-transform:uppercase;letter-spacing:.08em}
.roles-vista>div{display:flex;align-items:center;gap:9px}
.roles-botones{display:flex;gap:10px}
.tournament-shell .roles-principal{background:#9ee000;border-color:#9ee000;color:#132000;font-weight:800;flex:1;min-height:44px}
.tournament-shell .roles-borrar{background:#2a1719;border-color:#6b3a3f;color:#ffadb1}
#miembros:not(:empty){display:grid;gap:14px;margin-top:10px;padding:20px;background:#101c29;border:1px solid #304b60;border-radius:16px}
.roles-miembros-cabecera{display:flex;align-items:center;gap:12px}.roles-miembros-cabecera h2{margin:0}
.tournament-shell .roles-anadir{display:flex;gap:12px;align-items:end}.roles-anadir label{flex:1}.roles-anadir .roles-principal{flex:0 0 auto;padding:0 22px}
.roles-tabla{width:100%;border-collapse:collapse}
.roles-tabla th{text-align:left;font-size:12px;color:#8fa8b9;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid #2c4658}
.roles-tabla td{padding:12px 10px;border-bottom:1px solid #22394a;vertical-align:middle}
.roles-quien{display:grid;gap:2px}
.roles-chips{display:flex;gap:6px;flex-wrap:wrap}
.roles-tabla td:last-child{text-align:right}
.tournament-shell .roles-quitar{background:#2a1719;border-color:#6b3a3f;color:#ffadb1;padding:8px 12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:900px){.roles-rejilla{grid-template-columns:1fr}.roles-form{position:static}.roles-fila{flex-wrap:wrap}}

/* --- Web publica: roles junto al nombre --- */
.mini-name .rol-circulo,.grupo-nombre .rol-circulo{margin-right:6px}
.tournament-podium .rol-insignia{margin-left:4px}
.match-roles{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
/* Titulos de campeon: coronita con el numero de la edicion junto al nombre. */
.titulos-campeon{display:inline-flex;align-items:center;gap:4px;margin-left:5px;vertical-align:middle}
.titulo-campeon{display:inline-flex;align-items:center;gap:1px;color:#ffc93c;font-weight:900;letter-spacing:.02em;line-height:1;white-space:nowrap;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.titulo-campeon b{font-weight:900}