/* Panel de usuarios: una casilla cuadrada por cuenta, el admin primero y en azul. Usa los colores de registro.css. */
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel { max-width: 1240px; margin: 0 auto; padding-block: 24px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.entrar { max-width: 440px; margin: 40px auto; background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; padding: 28px 24px; display: grid; gap: 16px; text-align: center; }
.panel-titulo { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.panel-titulo .boton { margin-left: auto; padding: 8px 16px; font-size: .95rem; }

.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.casilla { aspect-ratio: 1 / 1; max-width: 100%; min-width: 0; background: var(--blanco); border: 1px solid var(--borde); border-radius: 6px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.casilla.admin { border: 2px solid var(--azul); background: linear-gradient(var(--azul-claro), var(--blanco) 40%); }
.casilla-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.casilla .avatar { width: 44px; height: 44px; }
.casilla-nombre { display: grid; min-width: 0; }
.casilla-nombre b { overflow-wrap: anywhere; line-height: 1.25; }
.casilla-nombre span { color: var(--suave); font-size: .85rem; overflow-wrap: anywhere; }
.rol { align-self: flex-start; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--fondo); color: var(--suave); border: 1px solid var(--borde); }
.casilla.admin .rol { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.casilla dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .84rem; line-height: 1.4; }
.casilla dt { color: var(--suave); }
.casilla dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.casilla .firma { margin-top: auto; height: 48px; flex: none; max-width: 100%; object-fit: contain; object-position: left; background: var(--blanco); border: 1px solid var(--borde); border-radius: 6px; }
.vacio { color: var(--suave); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.estado { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--ambar-claro); color: var(--ambar); }
.estado.ok { background: var(--verde-claro); color: var(--verde); }