/* ─── LISTA DE USUARIOS (Carlos, 2026-10-03) ──────────────────────────────────
   COPIA IGUAL en TRACKBET, la web-app y el Viewer (va con usuarios-lista.js). El
   diseño de herramientas/simulador/muestra-usuarios.html. Todo con prefijo tbu-
   para no chocar con los estilos de cada programa. Letra Lexend; números en mono.

   COLORES: los de TRACKBET (oscuro) de base. Una página con otros colores (las
   Opciones del Viewer, que pueden ir en claro) los cambia poniendo estas
   variables en su :root, sin tocar este archivo:
     --tbu-fondo (tarjeta) · --tbu-fondo2 (sus permisos) · --tbu-hueco (dentro de
     los botones) · --tbu-borde · --tbu-borde2 (borde de los botones) · --tbu-sep
     (rayitas entre botones) · --tbu-texto · --tbu-texto2 · --tbu-apagado (botón
     sin elegir) · --tbu-hover · --tbu-nada-bg / --tbu-nada-tx ("Nada" elegido) ·
     --tbu-verde · --tbu-naranja · --tbu-cian · --tbu-espera-tx */
.tbu-yo, .tbu-card, .tbu-vacio,
.tbu-card button { font-family: "TBV Lexend", "Lexend", "Segoe UI", system-ui, sans-serif; }
.tbu-num { font-family: 'JetBrains Mono', Consolas, monospace; }
.tbu-vacio { color: var(--tbu-texto2, #888); font-size: 12px; padding: 10px 2px; }

/* Tu cuenta (admin): una franja fina, no una tarjeta vacía */
.tbu-yo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; min-width: 0;
  border: 1px solid rgba(0,229,255,.25); border-radius: 10px; background: linear-gradient(90deg, rgba(0,229,255,.07), transparent 60%);
  font-size: 12px; color: var(--tbu-texto2, #888); }
.tbu-yo b { color: var(--tbu-texto, #e0e0e0); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tbu-yo .tbu-mail { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbu-yo .tbu-pill { margin-left: auto; }

.tbu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 12px; align-items: start; }
.tbu-card { container-type: inline-size; background: var(--tbu-fondo, #141414); border: 1px solid var(--tbu-borde, #2a2a2a); border-radius: 12px; overflow: hidden; }
.tbu-card.espera { border-color: rgba(255,171,64,.55); box-shadow: 0 0 0 1px rgba(255,171,64,.12) inset; }

/* Cabecera: inicial en círculo, nombre y correo, estado y Quitar discreto */
.tbu-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.tbu-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #0d0d0d; background: var(--tbu-av, #00e5ff); }
.tbu-av.chico { width: 26px; height: 26px; font-size: 12px; }
.tbu-who { flex: 1; min-width: 0; }
.tbu-who b { display: block; font-size: 14px; font-weight: 600; color: var(--tbu-texto, #e0e0e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbu-who > span { display: block; font-size: 11px; color: var(--tbu-texto2, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbu-pill { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; border: 1px solid; }
.tbu-pill.si { color: var(--tbu-verde, #00e676); border-color: rgba(0,230,118,.45); background: rgba(0,230,118,.08); }
.tbu-pill.no { color: var(--tbu-naranja, #ffab40); border-color: rgba(255,171,64,.5); background: rgba(255,171,64,.08); }
.tbu-pill.admin { color: var(--tbu-cian, #00e5ff); border-color: rgba(0,229,255,.45); background: rgba(0,229,255,.08); }
.tbu-card .tbu-quitar { flex: none; font-size: 11px; font-weight: 600; color: #9a5a5a; background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; cursor: pointer; height: auto; }
.tbu-card .tbu-quitar:hover { color: #ff1744; border-color: rgba(255,23,68,.5); background: rgba(255,23,68,.06); }
.tbu-card .tbu-quitar:disabled { opacity: .5; cursor: default; }

/* Cuerpo: el nombre del permiso a la izquierda y sus botones a la derecha */
.tbu-body { border-top: 1px solid var(--tbu-borde, #2a2a2a); padding: 10px 14px 12px; display: grid; grid-template-columns: 96px 1fr; gap: 9px 12px; align-items: center; background: var(--tbu-fondo2, #111); }
.tbu-lab { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.tbu-lab.ext { color: #b57bee; } .tbu-lab.acc { color: #f59e0b; } .tbu-lab.rep { color: #38bdf8; }

/* Botones de una fila (en vez del desplegable): el elegido queda relleno con el
   color de su sección; "Nada" en gris */
.tbu-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--tbu-borde2, #333); border-radius: 8px; overflow: hidden; background: var(--tbu-hueco, #0d0d0d); }
.tbu-seg button { font-size: 11px; font-weight: 600; color: var(--tbu-apagado, #777); background: none; border: 0; border-left: 1px solid var(--tbu-sep, #262626);
  padding: 6px 4px; cursor: pointer; white-space: nowrap; margin: 0; border-radius: 0; height: auto; }
.tbu-seg button:first-child { border-left: 0; }
.tbu-seg button:hover { color: var(--tbu-hover, #bbb); }
.tbu-seg button.on { color: #0d0d0d; }
.tbu-seg.ext button.on { background: #b57bee; }
.tbu-seg.acc button.on { background: #f59e0b; }
.tbu-seg.rep button.on { background: #38bdf8; }
.tbu-seg button.on.nada { background: var(--tbu-nada-bg, #3a3a3a); color: var(--tbu-nada-tx, #ccc); }
.tbu-seg.guardando { opacity: .6; pointer-events: none; }

/* RECIBE: todas en una fila, del mismo ancho; rellena = la recibe, punteada = no */
.tbu-rec { display: grid; grid-template-columns: repeat(var(--tbu-n, 5), 1fr); gap: 5px; }
.tbu-rec button { font-size: 10.5px; font-weight: 600; color: var(--tbu-apagado, #777); background: var(--tbu-hueco, #0d0d0d); border: 1px dashed var(--tbu-borde2, #3a3a3a);
  border-radius: 7px; padding: 5px 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; height: auto; }
.tbu-rec button.on { color: #0d0d0d; border: 1px solid #b57bee; background: #b57bee; }
.tbu-rec button:disabled { opacity: .5; }
.tbu-rec-n { display: block; margin-top: 2px; font: 400 9.5px 'JetBrains Mono', Consolas, monospace; letter-spacing: 0; color: var(--tbu-apagado, #666); }

/* El que espera: un solo botón grande, sin permisos todavía */
.tbu-wait { border-top: 1px solid rgba(255,171,64,.25); padding: 10px 14px 12px; display: flex; align-items: center; gap: 12px; background: rgba(255,171,64,.04); }
.tbu-wait span { flex: 1; font-size: 11.5px; color: var(--tbu-espera-tx, #b98a4a); }
.tbu-card .tbu-aprobar { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #0d0d0d; background: #00e676; border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; height: auto; }
.tbu-card .tbu-aprobar:disabled { opacity: .5; cursor: default; }

/* Tarjeta angosta (celular): el nombre del permiso arriba y los botones debajo */
@container (max-width: 420px) {
  .tbu-body { grid-template-columns: 1fr; gap: 4px; }
  .tbu-lab { margin-top: 5px; }
  .tbu-lab:first-child { margin-top: 0; }
  .tbu-rec-n { display: inline; margin: 0 0 0 6px; }
}
@media (max-width: 480px) { .tbu-yo .tbu-mail { display: none; } }