/* Sistema de marca de Soshally (panel-v2/sistema-de-marca.html, aprobado el 30-oct): DM Sans 400/500; escala del
   panel 12 · 13 · 15 · 16 · 24; fondo blanco, tarjetas con su sombra, chips con borde de línea, botones de 34 px,
   iconos en círculo que enseñan su nombre. El color solo en los datos (avatares, niveles). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');
:root{--pg:#ffffff;--ink:#0e0e0e;--mut:#6c6c6c;--soft:#3a3a3a;--g4:#8b8a95;--line:#ecebf1;--suelo:#f6f5f9;--pista:#efedf5;
--gris-boton:#f1f0f4;--alerta:#c23a3a;--rosa:#f5c2da;--lila:#d5c4f6;--pervinca:#b3c8fa;--agua:#a6e3ee;--menta:#c3efd3;--champan:#f3eac1;
--luz6:linear-gradient(90deg,var(--rosa),var(--lila),var(--pervinca),var(--agua),var(--menta),var(--champan));
--tarjeta:0 0 0 1px #f1f0f5,0 1px 2px rgba(30,20,60,.05),0 22px 44px -28px rgba(40,26,80,.38);
--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--pg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border-radius:99px;font:500 13px/1 var(--sans);border:0;color:var(--ink);background:none;cursor:pointer;white-space:nowrap;text-decoration:none}
.b svg{width:16px;height:16px}
.b-negro{background:var(--ink);color:#fff}
.b-gris{background:var(--gris-boton)}
.b-luz{background:linear-gradient(#fff,#fff) padding-box,var(--luz6) border-box;border:1.5px solid transparent}
.bi{position:relative;display:inline-flex;align-items:center;height:36px;min-width:36px;padding:0 8.5px;border-radius:99px;border:0;background:var(--gris-boton);color:var(--soft);cursor:pointer;font:500 13px/1 var(--sans);white-space:nowrap;text-decoration:none;transition:background .2s}
.bi svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bi .nom{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s,margin .35s}
.bi:hover,.bi:focus-visible{background:var(--line);color:var(--ink)}
.bi:hover .nom,.bi:focus-visible .nom{max-width:150px;opacity:1;margin:0 4px 0 6px}
.b:focus-visible,.bi:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nota{font-size:12px;color:var(--mut)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}