/* Toast Rock the Distance — diseño único compartido (contador + botón OK).
   Lo usan el panel (panel.php) y la gestión de participantes (participantes.php).
   Colores literales para no depender de las variables CSS de cada página.
   Todo va scopeado bajo #toastRoot para GANARLE en especificidad a la regla
   `.toast` de toastr.min.css (que en modo oscuro pone fondo oscuro y hace
   ilegible el texto). */
#toastRoot .toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);z-index:99999;min-width:450px;max-width:660px;background:#fff;background-color:#fff;border:1px solid #CBD5E1;border-left:6px solid #64748B;color:#0F172A;font-family:'Nunito',sans-serif;font-weight:700;font-size:20px;padding:18px 21px;border-radius:18px;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 24px 60px -12px rgba(0,0,0,.65);display:flex;align-items:center;gap:16px;animation:toastIn .22s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
#toastRoot .toast .ti{display:inline-flex;width:33px;height:33px;align-items:center;justify-content:center;border-radius:99px;flex:0 0 auto}
#toastRoot .toast .ti.tiGlifo{font-size:19px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
#toastRoot .toast .tm{flex:1 1 auto;line-height:1.35;color:#0F172A}
#toastRoot .toast .tc{flex:0 0 auto;font-size:18px;font-weight:800;color:#94A3B8;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
#toastRoot .toast .tok{flex:0 0 auto;height:39px;padding:0 18px;border:1.5px solid #CBD5E1;background:#F8FAFC;color:#0F172A;font:inherit;font-weight:800;font-size:18px;border-radius:10px;cursor:pointer}
#toastRoot .toast .tok:hover{background:#fff;border-color:#2563EB;color:#2563EB}
/* Móvil: el min-width de 450px desborda en pantallas de ~390px. Se ancla a los
   bordes y se manda ARRIBA para que el teclado (abajo) no tape el aviso —mismo
   criterio que tenía toastr en axn.js (`toast-top-full-width`). */
@media (max-width:640px){
  #toastRoot .toast{top:12px;bottom:auto;left:12px;right:12px;transform:none;min-width:0;max-width:none;width:auto;font-size:17px;padding:14px 16px;gap:12px;border-radius:14px}
  #toastRoot .toast .tc{font-size:15px;min-width:30px}
  #toastRoot .toast .tok{height:34px;padding:0 14px;font-size:15px}
  @keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
}