.rol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.rol-opcion { position:relative; }
.rol-opcion input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.rol-opcion label {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 8px; background:var(--color-input-bg); border:1px solid var(--color-borde);
    border-radius:10px; cursor:pointer; text-align:center; transition:all .18s;
    font-size:.8rem; font-weight:600; color:var(--color-texto-mutado);
    text-transform:none; letter-spacing:0;
}
.rol-opcion label .rol-icon  { font-size:22px; }
.rol-opcion label .rol-desc  { font-size:.68rem; font-weight:400; color:var(--color-texto-sutil); line-height:1.3; }
.rol-opcion input[type="radio"]:checked + label {
    border-color:var(--color-principal); background:var(--color-principal-glow);
    color:var(--color-principal); box-shadow:0 0 0 1px var(--color-principal);
}
.rol-opcion input[type="radio"]:checked + label .rol-desc { color:var(--color-principal-dim); }
.rol-opcion label:hover { border-color:rgba(232,197,71,.4); background:rgba(255,255,255,.03); color:var(--color-texto); }
.aviso-admin {
    background:rgba(232,197,71,.07); border:1px solid rgba(232,197,71,.2);
    border-radius:8px; padding:10px 13px; font-size:.75rem;
    color:var(--color-texto-mutado); margin-top:12px; line-height:1.5;
}
.aviso-admin strong { color:var(--color-principal); }

/* Responsive — evita que las 3 columnas fijas rompan el layout en móvil */
@media (max-width: 480px) {
  .rol-grid { grid-template-columns: 1fr; }
  .rol-opcion label { flex-direction: row; justify-content: flex-start; text-align: left; }
}